web/satellite: delete and share modals for gallery view

Added share and delete modals for object browser gallery view.

Issue:
https://github.com/storj/storj/issues/5824

Change-Id: Icdfb14d20155e3de2ce0cb885621435fd16ad855
This commit is contained in:
Vitalii 2023-06-05 15:47:53 +03:00
parent 7d039364b9
commit 5ee991ac64
10 changed files with 334 additions and 13 deletions

View File

@ -118,11 +118,12 @@ import { useRouter } from 'vue-router';
import prettyBytes from 'pretty-bytes';
import { useNotify } from '@/utils/hooks';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { BrowserObject, useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
import { useAppStore } from '@/store/modules/appStore';
import { useConfigStore } from '@/store/modules/configStore';
import { AnalyticsHttpApi } from '@/api/analytics';
import TableItem from '@/components/common/TableItem.vue';
@ -139,6 +140,8 @@ const config = useConfigStore();
const notify = useNotify();
const router = useRouter();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const props = defineProps<{
path: string,
file: BrowserObject,
@ -257,6 +260,7 @@ function openModal(): void {
if (config.state.config.galleryViewEnabled) {
appStore.setGalleryView(true);
analytics.eventTriggered(AnalyticsEvent.GALLERY_VIEW_CLICKED);
} else {
appStore.updateActiveModal(MODALS.objectDetails);
}

View File

@ -11,7 +11,7 @@
<ImageIcon v-if="previewIsImage" />
<VideoIcon v-else-if="previewIsAudio || previewIsVideo" />
<EmptyIcon v-else />
<p class="gallery__header__name__label" :title="file.Key">{{ file.Key }}</p>
<p class="gallery__header__name__label" :title="file?.Key || ''">{{ file?.Key || '' }}</p>
</div>
<div class="gallery__header__functional">
<ButtonIcon
@ -22,14 +22,14 @@
/>
<ButtonIcon :icon="MapIcon" :on-press="() => setActiveModal(DistributionModal)" />
<ButtonIcon class="gallery__header__functional__item" :icon="DownloadIcon" :on-press="download" />
<ButtonIcon class="gallery__header__functional__item" :icon="ShareIcon" :on-press="() => {}" />
<ButtonIcon class="gallery__header__functional__item" :icon="ShareIcon" :on-press="() => setActiveModal(ShareModal)" />
<ButtonIcon :icon="CloseIcon" :on-press="closeModal" />
<OptionsDropdown
v-if="isOptionsDropdown"
:on-view-details="() => setActiveModal(DetailsModal)"
:on-download="download"
:on-share="() => {}"
:on-delete="() => {}"
:on-share="() => setActiveModal(ShareModal)"
:on-delete="() => setActiveModal(DeleteModal)"
/>
</div>
</div>
@ -59,11 +59,11 @@
aria-roledescription="audio-preview"
/>
<div v-if="placeHolderDisplayable || previewAndMapFailed" class="gallery__main__preview__empty">
<p class="gallery__main__preview__empty__key">{{ file.Key }}</p>
<p class="gallery__main__preview__empty__key">{{ file?.Key || '' }}</p>
<p class="gallery__main__preview__empty__label">No preview available</p>
<VButton
icon="download"
:label="`Download (${prettyBytes(file.Size)})`"
:label="`Download (${prettyBytes(file?.Size || 0)})`"
:on-press="download"
width="188px"
height="52px"
@ -85,6 +85,7 @@
:on-close="() => setActiveModal(undefined)"
:object="file"
:map-url="objectMapUrl"
:on-delete="onDelete"
/>
</div>
</Teleport>
@ -103,6 +104,8 @@ import { RouteConfig } from '@/router';
import ButtonIcon from '@/components/browser/galleryView/ButtonIcon.vue';
import OptionsDropdown from '@/components/browser/galleryView/OptionsDropdown.vue';
import DeleteModal from '@/components/browser/galleryView/modals/Delete.vue';
import ShareModal from '@/components/browser/galleryView/modals/Share.vue';
import DetailsModal from '@/components/browser/galleryView/modals/Details.vue';
import DistributionModal from '@/components/browser/galleryView/modals/Distribution.vue';
import VLoader from '@/components/common/VLoader.vue';
@ -219,6 +222,13 @@ const placeHolderDisplayable = computed((): boolean => {
].every((value) => !value);
});
/**
* Returns current path without object key.
*/
const currentPath = computed((): string => {
return route.path.replace(RouteConfig.Buckets.with(RouteConfig.UploadFile).path, '');
});
/**
* Get the object map url for the file being displayed.
*/
@ -238,6 +248,34 @@ async function fetchPreviewAndMapUrl(): Promise<void> {
isLoading.value = false;
}
/**
* Deletes active object.
*/
async function onDelete(): Promise<void> {
try {
const objectsCount = obStore.sortedFiles.length;
let newFile: BrowserObject | undefined = obStore.sortedFiles[fileIndex.value + 1];
if (!newFile || newFile.type === folderType) {
newFile = obStore.sortedFiles.find(f => f.type !== folderType && f.Key !== file.value.Key);
}
await obStore.deleteObject(
currentPath.value,
file.value,
);
setActiveModal(undefined);
if (!newFile) {
closeModal();
return;
}
setNewObjectPath(newFile.Key);
} catch (error) {
notify.error(error.message, AnalyticsErrorEventSource.GALLERY_VIEW);
}
}
/**
* Download the current opened file.
*/
@ -320,9 +358,7 @@ function onNext(): void {
* Sets new object path.
*/
function setNewObjectPath(objectKey: string): void {
obStore.setObjectPathForModal(
`${route.path.replace(RouteConfig.Buckets.with(RouteConfig.UploadFile).path, '')}${objectKey}`,
);
obStore.setObjectPathForModal(`${currentPath.value}${objectKey}`);
}
/**
@ -340,6 +376,8 @@ onMounted((): void => {
* Watch for changes on the filepath and call `fetchObjectMapUrl` the moment it updates.
*/
watch(filePath, () => {
if (!filePath.value) return;
fetchPreviewAndMapUrl();
});
</script>

View File

@ -0,0 +1,101 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<VModal :on-close="onClose">
<template #content>
<div class="modal">
<ModalHeader
:icon="DeleteIcon"
title="Delete File"
/>
<p class="modal__info">The following file will be deleted.</p>
<p class="modal__name">{{ object?.Key || '' }}</p>
<div class="modal__buttons">
<VButton
label="Cancel"
height="52px"
width="100%"
border-radius="10px"
font-size="14px"
:on-press="onClose"
is-white
/>
<VButton
label="Delete"
height="52px"
width="100%"
border-radius="10px"
font-size="14px"
:on-press="onDelete"
:is-disabled="loading"
is-solid-delete
/>
</div>
</div>
</template>
</VModal>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { BrowserObject, useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
import VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue';
import ModalHeader from '@/components/browser/galleryView/modals/ModalHeader.vue';
import DeleteIcon from '@/../static/images/browser/galleryView/modals/delete.svg';
const obStore = useObjectBrowserStore();
const props = defineProps<{
object: BrowserObject | undefined
onDelete: () => Promise<void>
onClose: () => void
}>();
const loading = ref<boolean>(false);
</script>
<style scoped lang="scss">
.modal {
padding: 32px;
font-family: 'font_regular', sans-serif;
background-color: var(--c-white);
box-shadow: 0 20px 30px rgb(10 27 44 / 20%);
border-radius: 20px;
width: 410px;
box-sizing: border-box;
@media screen and (width <= 520px) {
width: unset;
}
&__info {
font-size: 14px;
line-height: 20px;
color: var(--c-black);
margin-bottom: 30px;
text-align: left;
}
&__name {
font-family: 'font_bold', sans-serif;
font-size: 14px;
line-height: 20px;
color: var(--c-black);
text-align: left;
}
&__buttons {
display: flex;
align-items: center;
column-gap: 16px;
padding-top: 16px;
margin-top: 16px;
border-top: 1px solid var(--c-grey-2);
}
}
</style>

View File

@ -6,7 +6,7 @@
<template #content>
<div class="modal">
<ModalHeader
:icon="DetailsIcon"
:icon="GlobeIcon"
title="Geographic Distribution"
/>
<img :src="mapUrl" class="modal__map" alt="map">
@ -46,7 +46,7 @@ import VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue';
import ModalHeader from '@/components/browser/galleryView/modals/ModalHeader.vue';
import DetailsIcon from '@/../static/images/browser/galleryView/modals/details.svg';
import GlobeIcon from '@/../static/images/browser/galleryView/modals/globe.svg';
const props = defineProps<{
mapUrl: string

View File

@ -0,0 +1,162 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<VModal :on-close="onClose">
<template #content>
<div class="modal">
<ModalHeader
:icon="ShareIcon"
title="Share File"
/>
<VLoader v-if="loading" width="40px" height="40px" />
<template v-else>
<h1 class="modal__title">Share via</h1>
<ShareContainer :link="link" />
<label for="url" class="modal__label">Copy link</label>
<input
id="url"
class="modal__input"
type="url"
:value="link"
readonly
>
</template>
<div class="modal__buttons">
<VButton
label="Cancel"
height="52px"
width="100%"
border-radius="10px"
font-size="14px"
:on-press="onClose"
is-white
/>
<VButton
:label="copyButtonState === ButtonStates.Copy ? 'Copy link' : 'Copied'"
height="52px"
width="100%"
border-radius="10px"
font-size="14px"
:on-press="onCopy"
:is-green="copyButtonState === ButtonStates.Copied"
/>
</div>
</div>
</template>
</VModal>
</template>
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
import VModal from '@/components/common/VModal.vue';
import VLoader from '@/components/common/VLoader.vue';
import VButton from '@/components/common/VButton.vue';
import ShareContainer from '@/components/common/share/ShareContainer.vue';
import ModalHeader from '@/components/browser/galleryView/modals/ModalHeader.vue';
import ShareIcon from '@/../static/images/browser/galleryView/modals/share.svg';
enum ButtonStates {
Copy,
Copied,
}
const obStore = useObjectBrowserStore();
const props = defineProps<{
onClose: () => void
}>();
const link = ref<string>('');
const loading = ref<boolean>(true);
const copyButtonState = ref<ButtonStates>(ButtonStates.Copy);
/**
* Retrieve the path to the current file.
*/
const filePath = computed((): string => {
return obStore.state.objectPathForModal;
});
/**
* Copies link to user's clipboard.
*/
async function onCopy(): Promise<void> {
await navigator.clipboard.writeText(link.value);
copyButtonState.value = ButtonStates.Copied;
setTimeout(() => {
copyButtonState.value = ButtonStates.Copy;
}, 2000);
}
onMounted(async (): Promise<void> => {
link.value = await obStore.state.fetchSharedLink(
filePath.value,
);
loading.value = false;
});
</script>
<style scoped lang="scss">
.modal {
padding: 32px;
font-family: 'font_regular', sans-serif;
background-color: var(--c-white);
box-shadow: 0 20px 30px rgb(10 27 44 / 20%);
border-radius: 20px;
width: 410px;
box-sizing: border-box;
@media screen and (width <= 520px) {
width: unset;
}
&__title {
font-family: 'font_bold', sans-serif;
font-size: 14px;
line-height: 20px;
color: var(--c-blue-6);
margin-bottom: 16px;
text-align: left;
}
&__label {
display: block;
margin: 16px 0 4px;
padding-top: 16px;
border-top: 1px solid var(--c-grey-2);
text-align: left;
font-family: 'font_bold', sans-serif;
font-size: 14px;
line-height: 20px;
color: var(--c-blue-6);
}
&__input {
background: var(--c-white);
border: 1px solid var(--c-grey-4);
color: var(--c-grey-6);
outline: none;
max-width: 100%;
width: 100%;
padding: 9px 0 9px 13px;
box-sizing: border-box;
border-radius: 6px;
}
&__buttons {
display: flex;
align-items: center;
column-gap: 16px;
padding-top: 16px;
margin-top: 16px;
border-top: 1px solid var(--c-grey-2);
}
}
</style>

View File

@ -51,6 +51,7 @@ export enum AnalyticsEvent {
PROJECT_DESCRIPTION_UPDATED = 'Project Description Updated',
PROJECT_STORAGE_LIMIT_UPDATED = 'Project Storage Limit Updated',
PROJECT_BANDWIDTH_LIMIT_UPDATED = 'Project Bandwidth Limit Updated',
GALLERY_VIEW_CLICKED = 'Gallery View Clicked',
}
export enum AnalyticsErrorEventSource {
@ -94,6 +95,7 @@ export enum AnalyticsErrorEventSource {
BUCKET_PAGE = 'Bucket page',
BUCKET_DETAILS_PAGE = 'Bucket details page',
UPLOAD_FILE_VIEW = 'Upload file view',
GALLERY_VIEW = 'Gallery view',
OBJECT_UPLOAD_ERROR = 'Object upload error',
ONBOARDING_NAME_STEP = 'Onboarding name step',
ONBOARDING_PERMISSIONS_STEP = 'Onboarding permissions step',

View File

@ -0,0 +1,4 @@
<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4423 0.980896H23.3463C28.8835 0.980896 31.0805 1.59462 33.2353 2.74706C35.3902 3.89951 37.0814 5.59067 38.2338 7.74555L38.3214 7.91145C39.4029 9.98761 39.9846 12.1809 40 17.4232V24.3272C40 29.8644 39.3863 32.0614 38.2338 34.2162C37.0814 36.3711 35.3902 38.0623 33.2353 39.2147L33.0694 39.3023C30.9933 40.3838 28.8 40.9655 23.5577 40.9809H16.6537C11.1165 40.9809 8.91954 40.3672 6.76466 39.2147C4.60977 38.0623 2.91861 36.3711 1.76617 34.2162L1.67858 34.0503C0.597074 31.9742 0.0154219 29.7809 0 24.5386V17.6346C0 12.0974 0.613723 9.90043 1.76617 7.74555C2.91861 5.59067 4.60977 3.89951 6.76466 2.74706L6.93055 2.65948C9.00672 1.57797 11.2 0.996318 16.4423 0.980896Z" fill="#EBEEF1"/>
<path d="M27.3984 16.3476C27.7859 16.3476 28.1 16.6617 28.1 17.0492C28.1 17.4272 27.801 17.7354 27.4266 17.7502L27.3984 17.7508H25.951L24.8665 26.6073C24.7099 27.8868 23.6233 28.8484 22.3343 28.8484H17.7705C16.4912 28.8484 15.4097 27.9009 15.2415 26.6327L14.0633 17.7508H12.6016C12.2141 17.7508 11.9 17.4367 11.9 17.0492C11.9 16.6712 12.199 16.363 12.5734 16.3482L12.6016 16.3476H27.3984ZM24.5374 17.7508H15.4788L16.6325 26.4482C16.7067 27.0077 17.1759 27.4285 17.7368 27.4448L17.7705 27.4453H22.3343C22.903 27.4453 23.3841 27.0293 23.4692 26.4705L23.4738 26.4368L24.5374 17.7508ZM18.9426 20.2398L18.9472 20.2681L18.9506 20.2962L19.3971 24.7618C19.4357 25.1474 19.1544 25.4912 18.7688 25.5297C18.3927 25.5673 18.0563 25.3005 18.0043 24.9295L18.0009 24.9014L17.5544 20.4358C17.5158 20.0502 17.7971 19.7064 18.1826 19.6679C18.5491 19.6312 18.8779 19.8836 18.9426 20.2398ZM22.0724 19.6681C22.4486 19.7058 22.7255 20.0339 22.703 20.4079L22.7007 20.436L22.2545 24.8984C22.2159 25.2839 21.8721 25.5652 21.4866 25.5266C21.1104 25.489 20.8335 25.1609 20.856 24.7869L20.8583 24.7587L21.3045 20.2964C21.3431 19.9109 21.6869 19.6296 22.0724 19.6681ZM22.2961 13.35C22.6835 13.35 22.9976 13.6641 22.9976 14.0516C22.9976 14.4296 22.6987 14.7378 22.3243 14.7526L22.2961 14.7531H17.7039C17.3165 14.7531 17.0024 14.439 17.0024 14.0516C17.0024 13.6735 17.3013 13.3653 17.6757 13.3505L17.7039 13.35H22.2961Z" fill="#56606D"/>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -1,4 +1,6 @@
<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4423 0.980896H23.3463C28.8835 0.980896 31.0805 1.59462 33.2353 2.74706C35.3902 3.89951 37.0814 5.59067 38.2338 7.74555L38.3214 7.91145C39.4029 9.98761 39.9846 12.1809 40 17.4232V24.3272C40 29.8644 39.3863 32.0614 38.2338 34.2162C37.0814 36.3711 35.3902 38.0623 33.2353 39.2147L33.0694 39.3023C30.9933 40.3838 28.8 40.9655 23.5577 40.9809H16.6537C11.1165 40.9809 8.91954 40.3672 6.76466 39.2147C4.60977 38.0623 2.91861 36.3711 1.76617 34.2162L1.67858 34.0503C0.597074 31.9742 0.0154219 29.7809 0 24.5386V17.6346C0 12.0974 0.613723 9.90043 1.76617 7.74555C2.91861 5.59067 4.60977 3.89951 6.76466 2.74706L6.93055 2.65948C9.00672 1.57797 11.2 0.996318 16.4423 0.980896Z" fill="#EBEEF1"/>
<path d="M11.8999 22.2749L11.9005 22.0499C11.9122 20.1774 12.1115 19.2084 12.6338 18.2231C12.8856 17.7478 13.1999 17.3225 13.5721 16.9535C13.8578 16.6703 14.319 16.6723 14.6022 16.958C14.8854 17.2436 14.8834 17.7048 14.5977 17.988C14.3307 18.2527 14.1044 18.559 13.9209 18.9053C13.5138 19.6732 13.3614 20.4337 13.3567 22.1486L13.3566 22.2727L13.3576 22.4354C13.3712 23.9799 13.516 24.7231 13.8719 25.4277L13.9209 25.5222C14.277 26.1943 14.795 26.7169 15.4601 27.0758L15.5335 27.1146C16.2682 27.4949 17.0241 27.6386 18.6655 27.6432L21.2833 27.6433L21.5226 27.6415C22.9718 27.6239 23.6929 27.482 24.3665 27.1434L24.4385 27.1064L24.496 27.0758C25.161 26.7169 25.679 26.1943 26.0352 25.5222C26.4423 24.7543 26.5947 23.9938 26.5993 22.2789L26.5995 22.1548L26.5985 21.9921C26.5849 20.4476 26.4401 19.7043 26.0842 18.9998L26.0352 18.9053C25.8776 18.6078 25.6883 18.3398 25.4689 18.1024C25.1959 17.807 25.214 17.3462 25.5094 17.0732C25.8048 16.8001 26.2656 16.8183 26.5386 17.1137C26.8223 17.4205 27.0685 17.7625 27.2767 18.139L27.3241 18.2265L27.3582 18.2915C27.8372 19.2195 28.0316 20.159 28.0541 21.8834L28.0562 22.1526L28.0556 22.3776C28.0438 24.2501 27.8446 25.2191 27.3223 26.2044C26.8444 27.1061 26.1445 27.8234 25.2567 28.3198L25.1843 28.3596L25.1198 28.394L25.026 28.4423C24.1181 28.8995 23.1737 29.0823 21.465 29.0989L21.2854 29.1H18.7483L18.5658 29.0994C16.7092 29.0874 15.7466 28.8857 14.7683 28.3578C13.8737 27.875 13.1629 27.1688 12.6713 26.274L12.632 26.201L12.5979 26.1359C12.0945 25.1608 11.9054 24.1729 11.8999 22.2749ZM16.6617 15.9437L16.682 15.9226L19.4912 13.1134C19.7687 12.8359 20.2145 12.8291 20.5002 13.0931L20.5213 13.1134L23.3305 15.9226C23.615 16.207 23.615 16.6682 23.3305 16.9526C23.053 17.2301 22.6073 17.2369 22.3216 16.9729L22.3005 16.9526L20.7103 15.3624V23.5915C20.7103 23.9938 20.3842 24.3199 19.9819 24.3199C19.5895 24.3199 19.2695 24.0095 19.2542 23.6208L19.2536 23.5915V15.4109L17.7121 16.9526C17.4346 17.2301 16.9888 17.2369 16.7031 16.9729L16.682 16.9526C16.4045 16.6751 16.3977 16.2294 16.6617 15.9437Z" fill="#56606D"/>
<path d="M22.9572 26.786C23.5963 26.786 24.1144 26.2679 24.1144 25.6288C24.1144 24.9898 23.5963 24.4717 22.9572 24.4717C22.3181 24.4717 21.8 24.9898 21.8 25.6288C21.8 26.2679 22.3181 26.786 22.9572 26.786Z" fill="#56606D"/>
<path d="M27.4566 25.3271C27.0991 24.4164 26.4822 23.6306 25.6823 23.0671C24.8825 22.5036 23.9349 22.1872 22.957 22.1571C21.979 22.1872 21.0314 22.5036 20.2316 23.0671C19.4318 23.6306 18.8149 24.4164 18.4574 25.3271L18.3284 25.6286L18.4574 25.93C18.8149 26.8407 19.4318 27.6266 20.2316 28.19C21.0314 28.7535 21.979 29.0699 22.957 29.1C23.9349 29.0699 24.8825 28.7535 25.6823 28.19C26.4822 27.6266 27.0991 26.8407 27.4566 25.93L27.5856 25.6286L27.4566 25.3271ZM22.957 27.9429C22.4992 27.9429 22.0518 27.8071 21.6712 27.5528C21.2906 27.2985 20.994 26.9371 20.8188 26.5142C20.6437 26.0913 20.5978 25.626 20.6871 25.1771C20.7764 24.7281 20.9969 24.3158 21.3205 23.9921C21.6442 23.6684 22.0565 23.448 22.5055 23.3587C22.9544 23.2694 23.4197 23.3153 23.8426 23.4904C24.2655 23.6656 24.6269 23.9622 24.8812 24.3428C25.1355 24.7234 25.2713 25.1708 25.2713 25.6286C25.2705 26.2421 25.0264 26.8303 24.5926 27.2642C24.1587 27.698 23.5705 27.9421 22.957 27.9429Z" fill="#56606D"/>
<path d="M17.1714 27.9432H14.8571V14.0574H19.4857V17.5288C19.4866 17.8354 19.6088 18.1292 19.8256 18.346C20.0424 18.5629 20.3362 18.6851 20.6429 18.686H24.1143V21.0003H25.2715V17.5288C25.2735 17.4528 25.259 17.3772 25.2291 17.3073C25.1991 17.2374 25.1544 17.1748 25.0979 17.1238L21.0479 13.0738C20.9969 13.0173 20.9343 12.9725 20.8644 12.9425C20.7945 12.9126 20.7189 12.8981 20.6429 12.9002H14.8571C14.5505 12.9011 14.2567 13.0233 14.0399 13.2402C13.8231 13.457 13.7009 13.7508 13.7 14.0574V27.9432C13.7009 28.2498 13.8231 28.5436 14.0399 28.7604C14.2567 28.9772 14.5505 29.0994 14.8571 29.1003H17.1714V27.9432ZM20.6429 14.2888L23.8829 17.5288H20.6429V14.2888Z" fill="#56606D"/>
</svg>

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

@ -0,0 +1,4 @@
<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4423 0.980865H23.3463C28.8835 0.980865 31.0805 1.59459 33.2353 2.74703C35.3902 3.89948 37.0814 5.59064 38.2338 7.74552L38.3214 7.91142C39.4029 9.98758 39.9846 12.1808 40 17.4232V24.3272C40 29.8644 39.3863 32.0613 38.2338 34.2162C37.0814 36.3711 35.3902 38.0623 33.2353 39.2147L33.0694 39.3023C30.9933 40.3838 28.8 40.9654 23.5577 40.9809H16.6537C11.1165 40.9809 8.91954 40.3671 6.76466 39.2147C4.60977 38.0623 2.91861 36.3711 1.76617 34.2162L1.67858 34.0503C0.597074 31.9741 0.0154219 29.7809 0 24.5385V17.6345C0 12.0974 0.613723 9.9004 1.76617 7.74552C2.91861 5.59064 4.60977 3.89948 6.76466 2.74703L6.93055 2.65945C9.00672 1.57794 11.2 0.996287 16.4423 0.980865Z" fill="#EBEEF1"/>
<path d="M20.0674 12.9L20.1164 12.9004L20.1652 12.9016C20.5311 12.909 20.891 12.9406 21.2434 12.9948C20.9876 13.4715 20.8345 14.0094 20.8126 14.5803L20.81 14.579V27.421C22.164 26.7192 23.3749 24.1846 23.3749 21C23.3749 19.948 23.2428 18.9669 23.017 18.0994C23.4959 18.3148 24.0286 18.435 24.5899 18.435L24.6146 18.4347C24.7737 19.2409 24.8599 20.1034 24.8599 21C24.8599 23.169 24.3555 25.1388 23.5341 26.5928C25.3856 25.4203 26.6149 23.3537 26.6149 21C26.6149 19.9892 26.3882 19.0314 25.9829 18.1746C26.4571 17.9901 26.8843 17.7138 27.2418 17.3681C27.7909 18.4603 28.0999 19.6941 28.0999 21C28.0999 25.3741 24.6328 28.9384 20.2969 29.0946L20.1652 29.0983C20.1327 29.0994 20.1001 29.1 20.0674 29.1H19.9999C15.5264 29.1 11.8999 25.4735 11.8999 21C11.8999 16.5265 15.5264 12.9 19.9999 12.9H20.0674ZM19.3249 14.5789C17.9709 15.2806 16.7599 17.8152 16.7599 21C16.7599 24.1848 17.9709 26.7193 19.3249 27.4211V14.5789ZM16.6736 15.2809L16.6026 15.3229C14.675 16.4789 13.3849 18.5888 13.3849 21C13.3849 23.4407 14.7067 25.5727 16.6735 26.7191C15.8093 25.254 15.2749 23.2325 15.2749 21C15.2749 18.7675 15.8093 16.746 16.6736 15.2809ZM24.6574 12.9C25.7012 12.9 26.5474 13.716 26.5474 14.7225C26.5474 15.729 25.7012 16.545 24.6574 16.545C23.6136 16.545 22.7674 15.729 22.7674 14.7225C22.7674 13.716 23.6136 12.9 24.6574 12.9Z" fill="#56606D"/>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -0,0 +1,4 @@
<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4423 0.980896H23.3463C28.8835 0.980896 31.0805 1.59462 33.2353 2.74706C35.3902 3.89951 37.0814 5.59067 38.2338 7.74555L38.3214 7.91145C39.4029 9.98761 39.9846 12.1809 40 17.4232V24.3272C40 29.8644 39.3863 32.0614 38.2338 34.2162C37.0814 36.3711 35.3902 38.0623 33.2353 39.2147L33.0694 39.3023C30.9933 40.3838 28.8 40.9655 23.5577 40.9809H16.6537C11.1165 40.9809 8.91954 40.3672 6.76466 39.2147C4.60977 38.0623 2.91861 36.3711 1.76617 34.2162L1.67858 34.0503C0.597074 31.9742 0.0154219 29.7809 0 24.5386V17.6346C0 12.0974 0.613723 9.90043 1.76617 7.74555C2.91861 5.59067 4.60977 3.89951 6.76466 2.74706L6.93055 2.65948C9.00672 1.57797 11.2 0.996318 16.4423 0.980896Z" fill="#EBEEF1"/>
<path d="M11.8999 22.2749L11.9005 22.0499C11.9122 20.1774 12.1115 19.2084 12.6338 18.2231C12.8856 17.7478 13.1999 17.3225 13.5721 16.9535C13.8578 16.6703 14.319 16.6723 14.6022 16.958C14.8854 17.2436 14.8834 17.7048 14.5977 17.988C14.3307 18.2527 14.1044 18.559 13.9209 18.9053C13.5138 19.6732 13.3614 20.4337 13.3567 22.1486L13.3566 22.2727L13.3576 22.4354C13.3712 23.9799 13.516 24.7231 13.8719 25.4277L13.9209 25.5222C14.277 26.1943 14.795 26.7169 15.4601 27.0758L15.5335 27.1146C16.2682 27.4949 17.0241 27.6386 18.6655 27.6432L21.2833 27.6433L21.5226 27.6415C22.9718 27.6239 23.6929 27.482 24.3665 27.1434L24.4385 27.1064L24.496 27.0758C25.161 26.7169 25.679 26.1943 26.0352 25.5222C26.4423 24.7543 26.5947 23.9938 26.5993 22.2789L26.5995 22.1548L26.5985 21.9921C26.5849 20.4476 26.4401 19.7043 26.0842 18.9998L26.0352 18.9053C25.8776 18.6078 25.6883 18.3398 25.4689 18.1024C25.1959 17.807 25.214 17.3462 25.5094 17.0732C25.8048 16.8001 26.2656 16.8183 26.5386 17.1137C26.8223 17.4205 27.0685 17.7625 27.2767 18.139L27.3241 18.2265L27.3582 18.2915C27.8372 19.2195 28.0316 20.159 28.0541 21.8834L28.0562 22.1526L28.0556 22.3776C28.0438 24.2501 27.8446 25.2191 27.3223 26.2044C26.8444 27.1061 26.1445 27.8234 25.2567 28.3198L25.1843 28.3596L25.1198 28.394L25.026 28.4423C24.1181 28.8995 23.1737 29.0823 21.465 29.0989L21.2854 29.1H18.7483L18.5658 29.0994C16.7092 29.0874 15.7466 28.8857 14.7683 28.3578C13.8737 27.875 13.1629 27.1688 12.6713 26.274L12.632 26.201L12.5979 26.1359C12.0945 25.1608 11.9054 24.1729 11.8999 22.2749ZM16.6617 15.9437L16.682 15.9226L19.4912 13.1134C19.7687 12.8359 20.2145 12.8291 20.5002 13.0931L20.5213 13.1134L23.3305 15.9226C23.615 16.207 23.615 16.6682 23.3305 16.9526C23.053 17.2301 22.6073 17.2369 22.3216 16.9729L22.3005 16.9526L20.7103 15.3624V23.5915C20.7103 23.9938 20.3842 24.3199 19.9819 24.3199C19.5895 24.3199 19.2695 24.0095 19.2542 23.6208L19.2536 23.5915V15.4109L17.7121 16.9526C17.4346 17.2301 16.9888 17.2369 16.7031 16.9729L16.682 16.9526C16.4045 16.6751 16.3977 16.2294 16.6617 15.9437Z" fill="#56606D"/>
</svg>

After

Width:  |  Height:  |  Size: 2.8 KiB