Web:PortalSettings: Changed portal settings navigation

This commit is contained in:
Elyor Djalilov 2023-02-01 16:49:02 +05:00
parent 6f3146ac3d
commit baf75b0c42
9 changed files with 589 additions and 88 deletions

View File

@ -73,6 +73,7 @@
"DeleteTheme": "Delete theme",
"DeleteThemeForever": "Delete theme forever?",
"DeleteThemeNotice": "The theme will be deleted permanently. You will not be able to undo this action.",
"DeveloperTools": "Developer",
"Disabled": "Disabled",
"DownloadCopy": "Download the copy",
"DownloadReportBtnText": "Download report",
@ -121,7 +122,7 @@
"NewColorScheme": "New color scheme",
"PasswordMinLenght": "Minimal password length",
"Path": "Path",
"Payments": "Plans & payments",
"Payments": "Payments",
"PleaseNote": "Please note",
"PleaseNoteDescription": "<0>{{pleaseNote}}</0>: your old space address will become available to new users once you click the <2>{{save}}</2> button.",
"Plugins": "Plugins",
@ -130,7 +131,7 @@
"PortalDeactivation": "Deactivate DocSpace",
"PortalDeactivationDescription": "Use this option to deactivate your space temporarily.",
"PortalDeactivationHelper": "If you wish to deactivate this DocSpace, your space and all information associated with it will be blocked so that no one has access to it for a particular period. To do that, click the Deactivate button. A link to confirm the operation will be sent to the email address of the space owner.\nIn case you want to come back to the space and continue using it, you will need to use the second link provided in the confirmation email. So, please, keep this email in a safe place.",
"PortalDeletion": "Space Deletion",
"PortalDeletion": "Portal Deletion",
"PortalDeletionDescription": "Use this option to delete your space permanently.",
"PortalDeletionEmailSended": "A link to confirm the operation has been sent to {{ownerEmail}} (the email address of the space owner).",
"PortalDeletionHelper": "If you do not think you will use the space and would like to delete your space permanently, submit your request using the Delete button. Please, keep in mind that you will not be able to reactivate your space or recover any information associated with it.",

View File

@ -73,6 +73,7 @@
"DeleteTheme": "Удалить тему",
"DeleteThemeForever": "Удалить тему навсегда?",
"DeleteThemeNotice": "Тема будет удалена навсегда. Вы не сможете отменить это действие.",
"DeveloperTools": "Разработчик",
"Disabled": "Отключено",
"DownloadCopy": "Скачать копию",
"DownloadReportBtn": "Скачать и открыть отчет",
@ -120,7 +121,7 @@
"NewColorScheme": "Новая цветовая схема",
"PasswordMinLenght": "Минимальная длина пароля",
"Path": "Путь",
"Payments": "Планы и Платежи",
"Payments": "Платежи",
"PleaseNote": "Пожалуйста, обратите внимание",
"PleaseNoteDescription": "<0>{{pleaseNote}}</0>: ваш старый адрес портала станет доступен для новых пользователей, как только вы нажмете кнопку <2>{{save}}</2>.",
"Plugins": "Плагины",

View File

@ -28,9 +28,9 @@ const getTreeItems = (data, path, t) => {
case "AccessRights":
return t("AccessRights");
case "ManagementCategoryCommon":
return t("Common:Common");
case "Customization":
return t("Customization");
case "SettingsGeneral":
return t("SettingsGeneral");
case "StudioTimeLanguageSettings":
return t("StudioTimeLanguageSettings");
case "CustomTitles":
@ -55,6 +55,8 @@ const getTreeItems = (data, path, t) => {
return t("Payments");
case "SingleSignOn":
return t("SingleSignOn");
case "DeveloperTools":
return t("DeveloperTools");
default:
throw new Error("Unexpected translation key");
}
@ -135,7 +137,7 @@ class ArticleBodyContent extends React.Component {
if (prevProps.location.pathname !== this.props.location.pathname) {
if (this.props.location.pathname.includes("payments")) {
this.setState({ selectedKeys: ["4-0"] });
this.setState({ selectedKeys: ["7-0"] });
}
if (this.props.location.pathname.includes("common")) {
@ -174,10 +176,10 @@ class ArticleBodyContent extends React.Component {
switch (tKey) {
case "AccessRights":
return t("Common:AccessRights");
case "Common:Common":
return t("Common:Common");
case "Customization":
return t("Customization");
case "SettingsGeneral":
return t("SettingsGeneral");
case "StudioTimeLanguageSettings":
return t("StudioTimeLanguageSettings");
case "CustomTitlesWelcome":
@ -204,6 +206,8 @@ class ArticleBodyContent extends React.Component {
return t("RestoreBackup");
case "PortalDeletion":
return t("PortalDeletion");
case "DeveloperTools":
return t("DeveloperTools");
default:
throw new Error("Unexpected translation key");
}
@ -245,6 +249,7 @@ class ArticleBodyContent extends React.Component {
isActive={item.key === selectedKeys[0][0]}
onClick={() => this.onSelect(item.key)}
folderId={item.id}
style={{ marginTop: `${item.key.includes(7) ? "16px" : "0"}` }}
/>
);
});

View File

@ -44,7 +44,7 @@ const SubmenuCommon = (props) => {
const data = [
{
id: "customization",
name: t("Customization"),
name: t("Common:SettingsGeneral"),
content: <Customization />,
},
{

View File

@ -0,0 +1,470 @@
import React, { useState, useEffect } from "react";
import { withTranslation } from "react-i18next";
import styled from "styled-components";
import Box from "@docspace/components/box";
import TextInput from "@docspace/components/text-input";
import Textarea from "@docspace/components/textarea";
import Label from "@docspace/components/label";
import Checkbox from "@docspace/components/checkbox";
import Button from "@docspace/components/button";
import ComboBox from "@docspace/components/combobox";
import Heading from "@docspace/components/heading";
import { tablet } from "@docspace/components/utils/device";
import { objectToGetParams, loadScript } from "@docspace/common/utils";
import { inject, observer } from "mobx-react";
import { isMobile } from "react-device-detect";
import BreakpointWarning from "SRC_DIR/components/BreakpointWarning";
const Controls = styled(Box)`
width: 500px;
display: flex;
flex-direction: column;
gap: 16px;
@media ${tablet} {
width: 100%;
}
.label {
min-width: fit-content;
}
`;
const ControlsGroup = styled(Box)`
display: flex;
flex-direction: column;
gap: 8px;
`;
const Frame = styled(Box)`
margin-top: 16px;
> div {
border: 1px dashed gray;
border-radius: 3px;
min-width: 100%;
min-height: 400px;
}
`;
const Buttons = styled(Box)`
margin-top: 16px;
button {
margin-right: 16px;
}
`;
const Container = styled(Box)`
width: 100%;
display: flex;
gap: 16px;
`;
const Preview = styled(Box)`
width: 50%;
flex-direction: row;
.frameStyle {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
`;
const PortalIntegration = (props) => {
const { t, setDocumentTitle } = props;
setDocumentTitle(`Portal integration`);
const scriptUrl = `${window.location.origin}/static/scripts/api.js`;
const dataSortBy = [
{ key: "DateAndTime", label: "Last modified date", default: true },
{ key: "AZ", label: "Title" },
{ key: "Type", label: "Type" },
{ key: "Size", label: "Size" },
{ key: "DateAndTimeCreation", label: "Creation date" },
{ key: "Author", label: "Author" },
];
const dataFilterType = [
{ key: 0, label: "None", default: true },
{ key: 1, label: "Files" },
{ key: 2, label: "Folders" },
{ key: 3, label: "Documents" },
{ key: 4, label: "Presentations" },
{ key: 5, label: "Spreadsheets" },
{ key: 7, label: "Images" },
{ key: 8, label: "By user" },
{ key: 9, label: "By department" },
{ key: 10, label: "Archive" },
{ key: 11, label: "By Extension" },
{ key: 12, label: "Media" },
];
const dataSortOrder = [
{ key: "descending", label: "Descending", default: true },
{ key: "ascending", label: "Ascending" },
];
const dataDisplayType = [
{ key: "row", label: "Row", default: true },
{ key: "table", label: "Table" },
{ key: "tile", label: "Tile" },
];
const [config, setConfig] = useState({
width: "100%",
height: "400px",
frameId: "ds-frame",
showHeader: false,
showTitle: true,
showArticle: false,
showFilter: false,
});
const [sortBy, setSortBy] = useState(dataSortBy[0]);
const [sortOrder, setSortOrder] = useState(dataSortOrder[0]);
const [filterType, setFilterType] = useState(dataFilterType[0]);
const [displayType, setDisplayType] = useState(dataDisplayType[0]);
const [withSubfolders, setWithSubfolders] = useState(false);
const params = objectToGetParams(config);
const frameId = config.frameId || "ds-frame";
const destroyFrame = () => {
DocSpace.destroyFrame();
};
const loadFrame = () => {
const script = document.getElementById("integration");
if (script) {
destroyFrame();
script.remove();
}
const params = objectToGetParams(config);
loadScript(`${scriptUrl}${params}`, "integration");
};
const onChangeWidth = (e) => {
setConfig((config) => {
return { ...config, width: e.target.value };
});
};
const onChangeHeight = (e) => {
setConfig((config) => {
return { ...config, height: e.target.value };
});
};
const onChangeFolderId = (e) => {
setConfig((config) => {
return { ...config, folder: e.target.value };
});
};
const onChangeFrameId = (e) => {
setConfig((config) => {
return { ...config, frameId: e.target.value };
});
};
const onChangeWithSubfolders = (e) => {
setConfig((config) => {
return { ...config, withSubfolders: !withSubfolders };
});
setWithSubfolders(!withSubfolders);
};
const onChangeSortBy = (item) => {
setConfig((config) => {
return { ...config, sortby: item.key };
});
setSortBy(item);
};
const onChangeSortOrder = (item) => {
setConfig((config) => {
return { ...config, sortorder: item.key };
});
setSortOrder(item);
};
const onChangeFilterType = (item) => {
setConfig((config) => {
return { ...config, filterType: item.key };
});
setFilterType(item);
};
const onChangeDisplayType = (item) => {
setConfig((config) => {
return { ...config, viewAs: item.key };
});
setDisplayType(item);
};
const onChangeShowHeader = (e) => {
setConfig((config) => {
return { ...config, showHeader: !config.showHeader };
});
};
const onChangeShowTitle = () => {
setConfig((config) => {
return { ...config, showTitle: !config.showTitle };
});
};
const onChangeShowArticle = (e) => {
setConfig((config) => {
return { ...config, showArticle: !config.showArticle };
});
};
const onChangeShowFilter = (e) => {
setConfig((config) => {
return { ...config, showFilter: !config.showFilter };
});
};
const onChangeCount = (e) => {
setConfig((config) => {
return { ...config, count: e.target.value };
});
};
const onChangePage = (e) => {
setConfig((config) => {
return { ...config, page: e.target.value };
});
};
const onChangeSearch = (e) => {
setConfig((config) => {
return { ...config, search: e.target.value };
});
};
const onChangeAuthor = (e) => {
setConfig((config) => {
return { ...config, authorType: e.target.value };
});
};
const codeBlock = `<div id="${frameId}">Fallback text</div>\n<script src="${scriptUrl}${params}"></script>`;
return (
<>
{isMobile ? (
<BreakpointWarning sectionName={t("Settings:Branding")} />
) : (
<Container>
<Controls>
<Heading level={1} size="small">
Frame options
</Heading>
<ControlsGroup>
<Label className="label" text="Frame id" />
<TextInput
scale={true}
onChange={onChangeFrameId}
placeholder="Frame id"
value={config.frameId}
/>
</ControlsGroup>
<ControlsGroup>
<Label className="label" text="Frame width" />
<TextInput
scale={true}
onChange={onChangeWidth}
placeholder="Frame width"
value={config.width}
/>
</ControlsGroup>
<ControlsGroup>
<Label className="label" text="Frame height" />
<TextInput
scale={true}
onChange={onChangeHeight}
placeholder="Frame height"
value={config.height}
/>
</ControlsGroup>
{/* <ControlsGroup>
<Label className="label" text="Display mode: " />
<ComboBox
scale={true}
onSelect={onChangeDisplayType}
options={dataDisplayType}
scaled={true}
selectedOption={displayType}
displaySelectedOption
/>
</ControlsGroup> */}
<Checkbox
label="Show header"
onChange={onChangeShowHeader}
isChecked={config.showHeader}
/>
<Checkbox
label="Show title"
onChange={onChangeShowTitle}
isChecked={config.showTitle}
/>
<Checkbox
label="Show article"
onChange={onChangeShowArticle}
isChecked={config.showArticle}
/>
<Checkbox
label="Show filter"
onChange={onChangeShowFilter}
isChecked={config.showFilter}
/>
<Heading level={1} size="small">
Filter options
</Heading>
<ControlsGroup>
<Label className="label" text="Folder id" />
<TextInput
scale={true}
onChange={onChangeFolderId}
placeholder="Folder id"
value={config.folder}
/>
</ControlsGroup>
<ControlsGroup>
<Label className="label" text="Items count" />
<TextInput
scale={true}
onChange={onChangeCount}
placeholder="Items count"
value={config.count}
/>
</ControlsGroup>
<ControlsGroup>
<Label className="label" text="Page" />
<TextInput
scale={true}
onChange={onChangePage}
placeholder="Page"
value={config.page}
/>
</ControlsGroup>
<ControlsGroup>
<Label className="label" text="Search term" />
<Box
style={{ flexDirection: "row", display: "flex", gap: "16px" }}
>
<TextInput
scale={true}
onChange={onChangeSearch}
placeholder="Search term"
value={config.search}
/>
<Checkbox
label="With subfolders"
onChange={onChangeWithSubfolders}
isChecked={withSubfolders}
/>
</Box>
</ControlsGroup>
<ControlsGroup>
<Label className="label" text="Author" />
<TextInput
scale={true}
onChange={onChangeAuthor}
placeholder="Author"
value={config.authorType}
/>
</ControlsGroup>
<ControlsGroup>
<Label className="label" text="Filter type:" />
<ComboBox
onSelect={onChangeFilterType}
options={dataFilterType}
scaled={true}
selectedOption={filterType}
displaySelectedOption
directionY="top"
/>
</ControlsGroup>
<ControlsGroup>
<Label className="label" text="Sort by:" />
<ComboBox
onSelect={onChangeSortBy}
options={dataSortBy}
scaled={true}
selectedOption={sortBy}
displaySelectedOption
directionY="top"
/>
</ControlsGroup>
<ControlsGroup>
<Label className="label" text="Sort order:" />
<ComboBox
onSelect={onChangeSortOrder}
options={dataSortOrder}
scaled={true}
selectedOption={sortOrder}
displaySelectedOption
directionY="top"
/>
</ControlsGroup>
</Controls>
<Preview>
<Frame>
<Box id={frameId} className="frameStyle">
Frame content
</Box>
</Frame>
<Buttons>
<Button
primary
size="normal"
label={t("Common:Preview")}
onClick={loadFrame}
/>
<Button
primary
size="normal"
label="Destroy"
onClick={destroyFrame}
/>
</Buttons>
<Heading level={1} size="xsmall">
Paste this code block on page:
</Heading>
<Textarea value={codeBlock} />
</Preview>
</Container>
)}
</>
);
};
export default inject(({ setup, auth }) => {
const { settingsStore, setDocumentTitle } = auth;
const { theme } = settingsStore;
return {
theme,
setDocumentTitle,
};
})(withTranslation(["Settings", "Common"])(observer(PortalIntegration)));

View File

@ -6,7 +6,6 @@ import { inject, observer } from "mobx-react";
import { combineUrl } from "@docspace/common/utils";
import config from "PACKAGE_FILE";
import { isMobile } from "react-device-detect";
import PortalIntegration from "./portalIntegration";
import SSO from "./SingleSignOn";
import ThirdParty from "./ThirdPartyServicesSettings";
@ -20,12 +19,6 @@ const IntegrationWrapper = (props) => {
const [currentTab, setCurrentTab] = useState(0);
const [isLoading, setIsLoading] = useState(false);
const integrationData = {
id: "portal-integration",
name: "Portal Integration",
content: <PortalIntegration />,
};
const pluginData = {
id: "plugins",
name: "Plugins",
@ -46,7 +39,6 @@ const IntegrationWrapper = (props) => {
];
if (!isMobile) {
data.push(integrationData);
enablePlugins && data.push(pluginData);
}

View File

@ -26,6 +26,10 @@ const SessionLifetimePage = lazy(() =>
const CommonSettings = lazy(() => import("./categories/common/index.js"));
const DeveloperTools = lazy(() =>
import("./categories/developer-tools/index.js")
);
const CustomizationSettings = lazy(() =>
import("./categories/common/customization")
);
@ -78,6 +82,12 @@ const COMMON_URLS = [
combineUrl(PROXY_BASE_URL, "/common/appearance"),
];
const DEVELOPER_URLS = [
PROXY_BASE_URL,
combineUrl(PROXY_BASE_URL, "/developer"),
combineUrl(PROXY_BASE_URL, "/developer/tools"),
];
const CUSTOMIZATION_URLS = [
combineUrl(PROXY_BASE_URL, "/common/customization"),
combineUrl(PROXY_BASE_URL, "/common"),
@ -225,6 +235,7 @@ const Settings = () => {
<Route exact path={PAYMENTS_URL} component={Payments} />
<Route exact path={THIRD_PARTY_URL} component={ThirdParty} />
<Route exact path={SSO_URL} component={SingleSignOn} />
<Route exact path={DEVELOPER_URLS} component={DeveloperTools} />
<Route exact path={BACKUP_URLS} component={Backup} />
<Route path={RESTORE_DATA_URL} component={RestoreBackup} />

View File

@ -6,6 +6,8 @@ import PaymentIconUrl from "PUBLIC_DIR/images/payment.react.svg?url";
import DataManagementIconUrl from "PUBLIC_DIR/images/data-management.react.svg?url";
import RestoreIconUrl from "PUBLIC_DIR/images/restore.react.svg?url";
import TrashIconUrl from "PUBLIC_DIR/images/trash.react.svg?url";
import DeveloperReactSvgUrl from "PUBLIC_DIR/images/catalog.developer.react.svg?url";
/**
* Array for generation current settings tree.
*/
@ -16,7 +18,7 @@ export const settingsTree = [
key: "0",
icon: CommonSettingsSvgUrl,
link: "common",
tKey: "Common:Common",
tKey: "Customization",
isHeader: true,
children: [
{
@ -24,7 +26,7 @@ export const settingsTree = [
key: "0-0",
icon: "",
link: "customization",
tKey: "Customization",
tKey: "SettingsGeneral",
isCategory: true,
children: [
{
@ -201,69 +203,9 @@ export const settingsTree = [
},
],
},
{
id: "portal-settings_catalog-integration",
key: "3",
icon: IntegrationSettingsIconUrl,
link: "integration",
tKey: "ManagementCategoryIntegration",
isHeader: true,
children: [
{
id: "portal-settings_catalog-third-party-services",
key: "3-0",
icon: "",
link: "third-party-services",
tKey: "ThirdPartyAuthorization",
isCategory: true,
},
{
id: "portal-settings_catalog-single-sign-on",
key: "3-1",
icon: "",
link: "single-sign-on",
tKey: "SingleSignOn",
isCategory: true,
},
{
id: "portal-settings_catalog-portal-integration",
key: "3-2",
icon: "",
link: "portal-integration",
tKey: "PortalIntegration",
isCategory: true,
},
{
id: "portal-settings_catalog-plugins",
key: "3-3",
icon: "",
link: "plugins",
tKey: "Plugins",
isCategory: true,
},
],
},
{
id: "portal-settings_catalog-payments",
key: "4",
icon: PaymentIconUrl,
link: "payments",
tKey: "Payments",
isHeader: true,
children: [
{
id: "portal-settings_catalog-portal-payments",
key: "4-0",
icon: "",
link: "portal-payments",
tKey: "Payments",
isCategory: true,
},
],
},
{
id: "portal-settings_catalog-backup",
key: "5",
key: "2",
icon: DataManagementIconUrl,
link: "backup",
tKey: "Backup",
@ -271,7 +213,7 @@ export const settingsTree = [
children: [
{
id: "portal-settings_catalog-data-backup",
key: "5-0",
key: "2-0",
icon: "",
link: "data-backup",
tKey: "Backup",
@ -279,7 +221,7 @@ export const settingsTree = [
},
{
id: "portal-settings_catalog-auto-backup",
key: "5-1",
key: "2-1",
icon: "",
link: "auto-backup",
tKey: "AutoBackup",
@ -287,17 +229,16 @@ export const settingsTree = [
},
],
},
{
id: "portal-settings_catalog-restore",
key: "6",
key: "3",
icon: RestoreIconUrl,
link: "restore",
tKey: "RestoreBackup",
isHeader: true,
children: [
{
key: "6-0",
key: "3-0",
icon: "",
link: "restore-backup",
tKey: "RestoreBackup",
@ -305,23 +246,75 @@ export const settingsTree = [
},
],
},
{
id: "portal-settings_catalog-integration",
key: "4",
icon: IntegrationSettingsIconUrl,
link: "integration",
tKey: "ManagementCategoryIntegration",
isHeader: true,
children: [
{
id: "portal-settings_catalog-third-party-services",
key: "4-0",
icon: "",
link: "third-party-services",
tKey: "ThirdPartyAuthorization",
isCategory: true,
},
{
id: "portal-settings_catalog-single-sign-on",
key: "4-1",
icon: "",
link: "single-sign-on",
tKey: "SingleSignOn",
isCategory: true,
},
{
id: "portal-settings_catalog-plugins",
key: "4-2",
icon: "",
link: "plugins",
tKey: "Plugins",
isCategory: true,
},
],
},
{
id: "portal-settings_catalog-developer",
key: "5",
icon: DeveloperReactSvgUrl,
link: "developer",
tKey: "DeveloperTools",
isHeader: true,
children: [
{
id: "portal-settings_catalog-developer-tools",
key: "5-0",
icon: "",
link: "tools",
tKey: "DeveloperTools",
isCategory: true,
},
],
},
{
id: "portal-settings_catalog-delete",
key: "7",
key: "6",
icon: TrashIconUrl,
link: "delete-data",
tKey: "PortalDeletion",
isHeader: true,
children: [
{
key: "7-0",
key: "6-0",
icon: "",
link: "deletion",
tKey: "PortalDeletion",
isCategory: true,
},
{
key: "7-1",
key: "6-1",
icon: "",
link: "deactivation",
tKey: "PortalDeactivation",
@ -329,6 +322,24 @@ export const settingsTree = [
},
],
},
{
id: "portal-settings_catalog-payments",
key: "7",
icon: PaymentIconUrl,
link: "payments",
tKey: "Payments",
isHeader: true,
children: [
{
id: "portal-settings_catalog-portal-payments",
key: "7-0",
icon: "",
link: "portal-payments",
tKey: "Payments",
isCategory: true,
},
],
},
];
/**

View File

@ -0,0 +1,10 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_37623_155882)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.19319 0.586407C9.58371 0.195882 10.2169 0.195882 10.6074 0.586407C10.9979 0.976931 10.9979 1.6101 10.6074 2.00062L8.13253 4.47549C7.93727 4.67076 7.62068 4.67076 7.42542 4.47549L6.71832 3.76839C6.52305 3.57313 6.52305 3.25654 6.71832 3.06128L9.19319 0.586407ZM3.91149 7.35155C3.94348 6.72414 4.06574 6.09876 4.22798 5.52069L10.6229 11.9156C10.0448 12.0778 9.41942 12.2001 8.79201 12.2321C7.56316 12.2947 6.47725 12.0126 5.61606 11.1514L5.60863 11.144L5.60381 11.1392L5.60002 11.1354L5.59425 11.1296L5.59138 11.1267L5.58948 11.1248L5.58272 11.1181L5.57493 11.1103L5.57402 11.1094L5.57268 11.108L5.56529 11.1006L5.56018 11.0955L5.55654 11.0919L5.55135 11.0867L5.54776 11.0831L5.5452 11.0806L5.53895 11.0743L5.53025 11.0656L5.53012 11.0655L5.53002 11.0654L5.52126 11.0566L5.51462 11.05L5.51239 11.0477L5.5094 11.0448L5.50349 11.0388L5.499 11.0344L5.49457 11.0299L5.48879 11.0241L5.48563 11.021L5.48317 11.0185L5.47667 11.012L5.46841 11.0038L5.46769 11.003L5.46711 11.0025L5.4587 10.994L5.45084 10.9862L5.44969 10.985L5.44827 10.9836L5.44066 10.976L5.43435 10.9697L5.43162 10.967L5.42837 10.9637L5.42257 10.9579L5.41764 10.953L5.4135 10.9489L5.4087 10.944L5.40443 10.9398L5.4007 10.9361L5.39534 10.9307L5.38926 10.9246L5.38624 10.9216L5.38355 10.9189L5.37714 10.9125L5.37005 10.9054L5.36802 10.9034L5.36617 10.9015L5.3589 10.8943L5.35108 10.8864L5.34978 10.8851L5.34856 10.8839L5.34065 10.876L5.33233 10.8677L5.33152 10.8669L5.33073 10.8661L5.32238 10.8577L5.31382 10.8492L5.31324 10.8486L5.31267 10.848L5.3041 10.8395L5.29553 10.8309L5.29496 10.8303L5.29439 10.8297L5.28582 10.8212L5.27748 10.8128L5.27669 10.812L5.27587 10.8112L5.26756 10.8029L5.25964 10.795L5.25842 10.7938L5.25713 10.7925L5.2493 10.7847L5.24204 10.7774L5.24018 10.7755L5.23815 10.7735L5.23107 10.7664L5.22466 10.76L5.22196 10.7573L5.21895 10.7543L5.21287 10.7482L5.2075 10.7429L5.20378 10.7391L5.19951 10.7349L5.1947 10.7301L5.19057 10.7259L5.18564 10.721L5.17984 10.7152L5.17658 10.7119L5.17385 10.7092L5.16754 10.7029L5.15993 10.6953L5.15852 10.6939L5.15736 10.6927L5.14951 10.6849L5.14109 10.6764L5.14051 10.6759L5.13979 10.6751L5.13154 10.6669L5.12504 10.6604L5.12258 10.6579L5.11942 10.6548L5.11364 10.649L5.1092 10.6446L5.10472 10.6401L5.0988 10.6342L5.09582 10.6312L5.09359 10.6289L5.08694 10.6223L5.07819 10.6135L5.07809 10.6134L5.07795 10.6133L5.06926 10.6046L5.063 10.5984L5.06045 10.5958L5.05686 10.5922L5.05167 10.587L5.04803 10.5834L5.04291 10.5783L5.03553 10.5709L5.03419 10.5695L5.03327 10.5686L5.02549 10.5608L5.01873 10.5541L5.01682 10.5522L5.01396 10.5493L5.00818 10.5435L5.00439 10.5397L4.99957 10.5349L4.99214 10.5275C4.13095 9.66631 3.84882 8.58039 3.91149 7.35155ZM5.01579 13.2425C7.70614 15.0802 11.2166 13.9644 12.9981 13.1797C13.5943 12.9172 13.696 12.1603 13.2354 11.6997L4.44383 2.90811C3.98323 2.44751 3.2264 2.54928 2.96383 3.14541C2.17916 4.92692 1.06341 8.43742 2.90103 11.1278C2.87631 11.1481 2.85235 11.1699 2.82923 11.193L0.707908 13.3143C0.317384 13.7049 0.317384 14.338 0.707908 14.7285L1.41502 15.4356C1.80554 15.8262 2.4387 15.8262 2.82923 15.4356L4.95055 13.3143C4.97367 13.2912 4.99541 13.2672 5.01579 13.2425ZM15.5571 5.53615C15.1666 5.14563 14.5335 5.14563 14.1429 5.53615L11.6681 8.01103C11.4728 8.20629 11.4728 8.52287 11.6681 8.71813L12.3752 9.42524C12.5704 9.6205 12.887 9.6205 13.0823 9.42524L15.5571 6.95037C15.9477 6.55984 15.9477 5.92668 15.5571 5.53615Z" fill="#657077"/>
</g>
<defs>
<clipPath id="clip0_37623_155882">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 3.6 KiB