IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added error screen for form gallery

Browse Source
This commit is contained in:
namushka 2023-11-13 18:29:33 +03:00
parent 589ec209a3
commit 877b32d527
12 changed files with 253 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/client/public/locales/en/FormGallery.json
View File

@ -4,9 +4,12 @@
"Categories": "Categories",
"ViewAllTemplates": "View all templates",
"EmptyFormGalleryScreenDescription": "No results matching your query could be found",
"ErrorViewHeader": "Form gallery is temporarily unavailable",
"ErrorViewSubHeader": "Please try again later",
"Free": "Free",
"SuggestChanges": "Suggest changes",
"SelectForm": "Select Form",
"SubmitToGalleryBlockBody": "Submit your templates to share them with the ONLYOFFICE community.",
"SubmitToGalleryBlockHeader": "ONLYOFFICE Form Gallery",

4
packages/client/public/locales/ru/FormGallery.json
View File

@ -3,6 +3,10 @@
"Categories": "Категории",
"ViewAllTemplates": "Все шаблоны",
"EmptyFormGalleryScreenDescription": "Не удалось найти результатов, соответствующих вашему запросу",
"ErrorViewHeader": "Галерея форм временно недоступна",
"ErrorViewSubHeader": "Пожалуйста, повторите попытку позже",
"Free": "Бесплатно",
"SuggestChanges": "Предложить изменения",

72
packages/client/src/pages/FormGallery/ErrorView/index.js Normal file
View File

@ -0,0 +1,72 @@
import Button from "@docspace/components/button";
import * as Styled from "./index.styled";
import ErrorImageSvgUrl from "PUBLIC_DIR/images/form-gallery-error.svg?url";
import { isMobile } from "@docspace/components/utils/device";
import { inject, observer } from "mobx-react";
import { withTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import config from "PACKAGE_FILE";
import FilesFilter from "@docspace/common/api/files/filter";
import { combineUrl } from "@docspace/common/utils";
import { getCategoryUrl } from "SRC_DIR/helpers/utils";
const ErrorView = ({
t,
oformFromFolderId,
setGallerySelected,
categoryType,
setIsLoading,
}) => {
const navigate = useNavigate();
const onGoBack = () => {
setGallerySelected(null);
const filter = FilesFilter.getDefault();
filter.folder = oformFromFolderId;
const url = getCategoryUrl(categoryType, oformFromFolderId);
const filterParamsStr = filter.toUrlParams();
setIsLoading();
navigate(
combineUrl(
window.DocSpaceConfig?.proxy?.url,
config.homepage,
`${url}?${filterParamsStr}`
)
);
};
return (
<Styled.ErrorView>
<Styled.ErrorImage className="error-image" src={ErrorImageSvgUrl} />
<Styled.StyledHeadline type="content" truncate={true}>
{t("FormGallery:ErrorViewHeader")}
</Styled.StyledHeadline>
<Styled.SubHeading>
{t("FormGallery:ErrorViewSubHeader")}
</Styled.SubHeading>
<Button
primary
label={t("Common:GoBack")}
scale={!!isMobile()}
size={!isMobile() ? "small" : "normal"}
onClick={onGoBack}
/>
</Styled.ErrorView>
);
};
export default inject(({ oformsStore, filesStore, clientLoadingStore }) => ({
oformFromFolderId: oformsStore.oformFromFolderId,
setGallerySelected: oformsStore.setGallerySelected,
categoryType: filesStore.categoryType,
setIsLoading: () => {
clientLoadingStore.setIsSectionHeaderLoading(true, false);
clientLoadingStore.setIsSectionFilterLoading(true, false);
clientLoadingStore.setIsSectionBodyLoading(true, false);
},
}))(withTranslation("Common", "FormGallery")(observer(ErrorView)));

56
packages/client/src/pages/FormGallery/ErrorView/index.styled.js Normal file
View File

@ -0,0 +1,56 @@
import { mobile } from "@docspace/components/utils/device";
import styled from "styled-components";
import { ReactSVG } from "react-svg";
import Headline from "@docspace/common/components/Headline";
import { Base } from "@docspace/components/themes";
export const ErrorView = styled.div`
padding-top: 56px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
@media ${mobile} {
padding-top: 16px;
}
`;
export const ErrorImage = styled(ReactSVG)`
svg {
height: 360px;
width: 360px;
@media ${mobile} {
height: 210px;
width: 210px;
}
}
`;
export const StyledHeadline = styled(Headline)`
margin: 40px 0 8px 0;
font-size: 23px;
font-weight: 700;
line-height: 28px;
text-align: center;
@media ${mobile} {
font-size: 21px;
}
`;
export const SubHeading = styled.div`
margin: 0 0 24px 0;
font-size: 12px;
font-weight: 400;
line-height: 16px;
text-align: center;
color: ${({ theme }) => theme.oformGallery.errorView.subHeaderTextColor};
`;
SubHeading.defaultProps = { theme: Base };

5
packages/client/src/pages/FormGallery/TilesView/sub-components/SubmitToGalleryTile.js
View File

@ -44,7 +44,7 @@ export const StyledSubmitToGalleryTile = styled.div`
font-weight: 400;
font-size: ${(props) => props.theme.getCorrectFontSize("12px")};
line-height: 16px;
color: ${({ theme }) => theme.submitToGalleryTile.bodyText};
color: ${({ theme }) => theme.oformGallery.submitToGalleryTile.bodyText};
}
}
`;
@ -67,7 +67,8 @@ const StyledCloseIcon = styled(CrossIcon)`
`}
path {
fill: ${({ theme }) => theme.submitToGalleryTile.closeIconFill};
fill: ${({ theme }) =>
theme.oformGallery.submitToGalleryTile.closeIconFill};
}
`;

8
packages/client/src/pages/FormGallery/index.js
View File

@ -10,8 +10,10 @@ import InfoPanelHeaderContent from "../Home/InfoPanel/Header";
import SectionFilterContent from "./Filter";
import OformsFilter from "@docspace/common/api/oforms/filter";
import Dialogs from "./Dialogs";
import ErrorView from "./ErrorView";
const FormGallery = ({
oformsLoadError,
currentCategory,
fetchCurrentCategory,
defaultOformLocale,
@ -70,12 +72,14 @@ const FormGallery = ({
<SectionHeaderContent />
</Section.SectionHeader>
{!oformsLoadError && (
<Section.SectionFilter>
<SectionFilterContent />
</Section.SectionFilter>
)}
<Section.SectionBody isFormGallery>
<SectionBodyContent />
{!oformsLoadError ? <SectionBodyContent /> : <ErrorView />}
</Section.SectionBody>
<Section.InfoPanelHeader>
@ -93,6 +97,8 @@ const FormGallery = ({
};
export default inject(({ oformsStore }) => ({
oformsLoadError: oformsStore.oformsLoadError,
currentCategory: oformsStore.currentCategory,
fetchCurrentCategory: oformsStore.fetchCurrentCategory,

8
packages/client/src/store/OformsStore.js
View File

@ -24,6 +24,7 @@ class OformsStore {
oformFiles = null;
gallerySelected = null;
oformsIsLoading = false;
oformsLoadError = false;
oformsFilter = OformsFilter.getDefault();
@ -101,7 +102,12 @@ class OformsStore {
return new Promise(async (resolve) => {
const apiUrl = combineUrl(domain, path, params);
let oforms = await getOforms(apiUrl);
let oforms = await getOforms(apiUrl).catch((err) => {
const errStatus = err.response.status;
const oformLoadFail = errStatus === 404 || errStatus === 500;
if (oformLoadFail) this.oformsLoadError = true;
else this.oformsLoadError = false;
});
resolve(oforms);
});
};

5
packages/components/themes/base.js
View File

@ -3155,10 +3155,15 @@ const Base = {
},
},
oformGallery: {
errorView: {
subHeaderTextColor: "#555F65",
},
submitToGalleryTile: {
bodyText: "#555F65",
closeIconFill: "#657077",
},
},
infoBlock: {
background: "#F8F9F9",

5
packages/components/themes/dark.js
View File

@ -3156,10 +3156,15 @@ const Dark = {
},
},
oformGallery: {
errorView: {
subHeaderTextColor: "#ADADAD",
},
submitToGalleryTile: {
bodyText: "#ADADAD",
closeIconFill: "#a9a9a9",
},
},
infoBlock: {
background: "#282828",

79
public/images/form-gallery-error.svg Normal file
View File

@ -0,0 +1,79 @@
<svg width="360" height="360" viewBox="0 0 360 360" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M275.333 293.403C273.726 289.843 271.704 287.172 269 285.487L274.288 277C279.224 280.075 282.342 284.625 284.448 289.289C286.535 293.914 287.766 298.972 288.737 303.39L288.738 303.391C289.706 307.804 290.709 311.996 292.275 315.664C293.82 319.282 295.772 322.04 298.424 323.851C298.424 323.851 298.424 323.851 298.424 323.851C298.425 323.85 298.569 323.935 298.939 324.07C299.352 324.22 299.919 324.388 300.659 324.56C302.144 324.906 304.078 325.216 306.389 325.481C311.002 326.01 316.737 326.32 322.616 326.477C334.396 326.79 346.268 326.476 349.98 326.198L350.728 336.17C346.57 336.481 334.337 336.792 322.35 336.473C316.345 336.313 310.28 335.993 305.249 335.416C302.739 335.128 300.391 334.765 298.391 334.299C296.541 333.869 294.431 333.23 292.81 332.126L292.81 332.126C288.039 328.878 285.076 324.269 283.078 319.591C281.099 314.957 279.932 309.915 278.971 305.537M275.333 293.403C276.958 297.003 278.012 301.174 278.97 305.536Z" fill="url(#paint0_linear_75_199)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M65.2942 298.324C73.1203 289.279 81.4875 279.61 88.7676 273L95.4897 280.404C88.7003 286.568 80.8196 295.671 72.9598 304.749C71.5257 306.406 70.0922 308.062 68.6663 309.699C64.118 314.92 59.6556 319.933 55.6249 323.955C51.7476 327.825 47.7372 331.338 44.1142 332.943L44.1083 332.946C43.0766 333.401 41.8644 333.678 40.8582 333.868C39.7589 334.076 38.4967 334.253 37.1705 334.407C34.514 334.715 31.3595 334.958 28.27 335.158C25.4257 335.342 22.7127 335.487 20.4021 335.61C17.4821 335.766 15.2047 335.888 14.1174 336.011L13 326.073C14.3256 325.924 17.1824 325.769 20.503 325.589C22.7739 325.466 25.2616 325.331 27.6248 325.178C30.6642 324.982 33.6177 324.752 36.0184 324.473C37.2208 324.334 38.2244 324.189 38.9995 324.042C39.6536 323.919 39.9685 323.825 40.0544 323.8C40.0794 323.792 40.085 323.791 40.0739 323.796C41.812 323.021 44.6554 320.775 48.5606 316.878C52.3205 313.125 56.5819 308.346 61.1261 303.13C62.4915 301.563 63.8841 299.953 65.2942 298.324Z" fill="url(#paint1_linear_75_199)"/>
<path d="M182.5 337.514C232.554 337.514 273.13 332.894 273.13 327.194C273.13 321.495 232.554 316.874 182.5 316.874C132.446 316.874 91.87 321.495 91.87 327.194C91.87 332.894 132.446 337.514 182.5 337.514Z" fill="#DDDDDD"/>
<path d="M216.85 256.914C222.13 252.284 225.95 253.054 237.09 265.854C241.81 271.284 247.41 271.394 254.69 277.534C256.63 279.164 257.32 291.284 255.39 291.484C236.44 293.414 224.77 286.004 215.5 272.754C211.98 267.754 211.79 261.354 216.85 256.914Z" fill="#AA3F25" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10"/>
<path d="M219.43 272.314C219.21 272.584 218.97 272.844 218.73 273.104C216.04 275.904 211.75 277.474 208.16 276.014C208.78 268.774 210.1 262.054 211.17 254.934C211.89 250.084 217.17 247.044 221.64 250.344C223.43 251.674 224.38 253.914 224.58 256.134C224.78 258.354 224.32 260.584 223.76 262.734C222.88 266.154 221.67 269.604 219.43 272.314Z" fill="#91231E" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10"/>
<path d="M248.17 301.614C248.23 302.424 248.48 303.294 248.95 304.204C249.76 305.774 251.26 307.114 253.03 307.244C255.46 307.424 258.56 302.764 260.7 301.214C262.59 299.844 266.4 297.374 264.37 294.634C263.6 293.594 262.17 293.304 260.87 293.264C255.72 293.094 247.76 296.164 248.17 301.614Z" fill="#91231E" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10"/>
<path d="M243.98 297.834C244.04 298.644 244.29 299.514 244.76 300.424C245.57 301.994 247.07 303.334 248.84 303.464C251.27 303.644 254.37 298.984 256.51 297.434C258.4 296.064 262.21 293.594 260.18 290.854C259.41 289.814 257.98 289.524 256.68 289.484C251.52 289.314 243.56 292.384 243.98 297.834Z" fill="#91231E" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10"/>
<path d="M189.75 322.854C193.88 318.464 198.72 313.394 200.45 307.614C208.54 306.694 216.64 305.774 224.73 304.854C226.38 304.664 228.33 304.594 229.36 305.894C230.5 307.314 229.78 309.394 229.02 311.054C226.24 317.084 224.42 326.384 216.8 327.174C212.57 327.614 192.04 320.424 189.75 322.854Z" fill="#AA3F25" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M181.8 322.774C184.63 325.214 188.71 325.004 191.7 323.264C194.69 321.524 196.82 318.564 198.88 315.674C200.71 313.104 202.57 310.464 203.43 307.304C206.48 296.014 193.15 291.464 186.12 296.754C180.56 300.924 174.92 316.834 181.8 322.774Z" fill="#91231E" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10"/>
<path d="M198.83 232.394C202.28 238.874 217.38 237.184 219.41 251.754C222.01 270.434 204.07 288.024 194.79 309.944C188.41 325.014 181.29 324.054 169.46 324.504C152.82 325.134 143.96 328.804 139.63 312.724C134.99 295.484 136.85 240.974 160.3 237.724C160.42 237.704 198.83 232.394 198.83 232.394Z" fill="#F04E26" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M136.41 265.494C136.56 266.034 136.76 266.554 137.02 267.054C138.31 269.514 141.12 271.084 143.89 270.884C150.93 270.374 156.38 259.784 155.87 254.064C155.01 244.374 139.61 242.774 138 247.824C136.97 251.084 136.9 254.914 136.43 258.294C136.1 260.684 135.79 263.224 136.41 265.494Z" fill="#91231E" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10"/>
<path d="M143.88 246.204C136.94 245.114 135.73 247.194 120.98 257.554C114.44 262.144 109.22 257.524 101.5 263.084C99.45 264.564 93.54 279.394 100.59 280.374C118.31 282.824 131.49 277.174 145.19 264.724C149.72 260.594 153.44 247.714 143.88 246.204Z" fill="#AA3F25" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10"/>
<path d="M135.33 311.374C134.82 306.904 136.83 302.014 140.82 299.944C143.69 298.454 147.02 298.594 150.15 299.614C151.84 300.164 153.46 300.964 154.93 301.904C159.13 304.584 162.75 308.504 164.09 313.304C169.79 333.714 137.29 328.654 135.33 311.374Z" fill="#91231E" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10"/>
<path d="M226.54 305.654C231.99 301.084 241.51 297.504 248.61 297.174C250.46 297.084 252.38 297.174 254.08 297.904C255.79 298.634 257.26 300.124 257.54 301.964C257.99 304.934 255.4 307.404 253.05 309.274C248.44 312.954 243.37 316.404 238.94 320.224C235.04 323.574 232.11 328.344 226.77 329.634C221.12 331.004 209.29 326.064 203.85 324.584" fill="#AA3F25"/>
<path d="M226.54 305.654C231.99 301.084 241.51 297.504 248.61 297.174C250.46 297.084 252.38 297.174 254.08 297.904C255.79 298.634 257.26 300.124 257.54 301.964C257.99 304.934 255.4 307.404 253.05 309.274C248.44 312.954 243.37 316.404 238.94 320.224C235.04 323.574 232.11 328.344 226.77 329.634C221.12 331.004 209.29 326.064 203.85 324.584" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M119.37 287.994C121.37 289.074 123.42 290.554 123.97 292.754C124.47 294.794 123.55 296.884 122.66 298.784C122.13 299.914 121.58 301.064 120.73 301.984C116.28 306.784 110.27 296.454 109.13 293.244C108.33 290.994 108.78 285.114 110.63 283.084C111.17 282.484 117.05 286.744 119.37 287.994Z" fill="#91231E" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10"/>
<path d="M117.05 282.634C116.53 281.484 116 280.234 116.27 278.994C116.57 277.624 117.85 276.614 119.21 276.274C120.58 275.934 122.02 276.164 123.38 276.514C126.85 277.404 130.2 279.204 132.3 282.114C135.71 286.844 134.47 295.344 127.55 295.944C121.23 296.484 119.03 287.014 117.05 282.634Z" fill="#91231E" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10"/>
<path d="M132.05 286.784C132.44 288.044 132.88 289.384 133.91 290.204C135.34 291.354 137.39 291.144 139.2 290.874C141.88 290.484 145.01 289.754 146.05 287.244C147.07 284.794 145.42 282.034 143.47 280.224C139.73 276.764 133.93 274.394 128.8 275.254C128.74 278.794 130.97 283.304 132.05 286.784Z" fill="#91231E" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10"/>
<path d="M123.58 310.764C122.29 309.684 121.03 308.574 119.9 307.334C105.34 291.434 135.75 274.504 148.8 290.514C152.34 294.864 154.38 300.244 155.81 305.664C157.05 310.364 157.88 315.174 158.29 320.024C159.08 329.464 149.61 334.014 141.39 330.124C134.62 326.914 133.9 320.004 128.86 315.234C127.18 313.644 125.35 312.234 123.58 310.764Z" fill="#F04E26" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M252.18 289.454C255.24 289.694 250.48 294.144 249.24 295.634C246.88 298.454 243.85 302.304 240.71 303.414C238.64 304.144 236.58 303.534 235.54 301.894C233.04 297.944 236.87 292.804 240.97 290.734C244.73 288.824 248.7 289.184 252.18 289.454Z" fill="#91231E" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10"/>
<path d="M212.1 145.854C212.1 145.854 242.49 133.924 248.01 141.704C253.53 149.484 238.58 173.534 238.58 173.534L212.1 145.854Z" fill="#91231E" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10"/>
<path d="M232.72 188.624C232.72 188.624 258.08 195.244 255.44 202.354C252.8 209.464 222.86 219.454 222.86 219.454L232.72 188.624Z" fill="#91231E" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10"/>
<path d="M122.55 154.844C121.06 153.134 86.94 149.234 83.75 160.634C80.56 172.034 115.76 186.364 115.76 186.364L122.55 154.844Z" fill="#91231E" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10"/>
<path d="M163.24 128.274C163.24 128.274 144.02 103.094 132.04 106.864C120.06 110.634 121.9 148.294 121.9 148.294L163.24 128.274Z" fill="#91231E" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10"/>
<path d="M216.95 140.204C216.79 138.534 221.32 105.284 213.93 101.784C206.54 98.2943 177.91 121.384 177.91 121.384L216.95 140.204Z" fill="#91231E" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10"/>
<path d="M125.13 193.064C125.13 193.064 86.48 203.524 90.76 215.804C95.04 228.084 138.12 220.854 138.12 220.854L125.13 193.064Z" fill="#91231E" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10"/>
<path d="M142.52 231.744C142.52 231.744 115.27 252.104 109.41 244.514C103.55 236.924 122.25 210.354 122.25 210.354L142.52 231.744Z" fill="#D44925" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M228.04 160.784C228.04 160.784 268.23 150.574 272.09 161.694C275.94 172.814 232.66 202.924 232.66 202.924L228.04 160.784Z" fill="#D44925" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M216.79 218.044C218.94 217.734 252.71 233.234 257.97 222.884C263.23 212.534 235.82 193.954 235.82 193.954L216.79 218.044Z" fill="#D44925" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M177.72 252.704C141.46 252.734 112.05 224.704 112.03 190.094C112 155.494 141.38 127.414 177.63 127.384C213.88 127.354 243.3 155.384 243.32 189.994C243.34 212.124 231.33 231.584 213.19 242.744" fill="#F04E26"/>
<path d="M177.72 252.704C141.46 252.734 112.05 224.704 112.03 190.094C112 155.494 141.38 127.414 177.63 127.384C213.88 127.354 243.3 155.384 243.32 189.994C243.34 212.124 231.33 231.584 213.19 242.744" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.3" d="M123.16 189.604C123.14 159.694 144.61 134.564 173.65 127.514C139.93 130.174 113.44 157.124 113.46 189.984C113.49 224.374 142.54 252.264 178.5 252.574C147.07 247.284 123.18 221.124 123.16 189.604Z" fill="#5F1B12"/>
<path d="M182.312 192.057C189.347 183.087 186.946 169.46 176.951 161.622C166.955 153.783 153.149 154.7 146.115 163.67C139.081 172.64 141.481 186.266 151.477 194.105C161.472 201.944 175.278 201.027 182.312 192.057Z" fill="#742015" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10"/>
<path d="M231.011 174.104C232.48 163.106 226.109 153.181 216.781 151.935C207.453 150.689 198.7 158.594 197.231 169.592C195.762 180.59 202.133 190.515 211.461 191.761C220.789 193.007 229.542 185.102 231.011 174.104Z" fill="#742015" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10"/>
<path d="M196.291 215.476C208.812 214.663 218.535 207.423 218.008 199.305C217.481 191.187 206.903 185.265 194.382 186.078C181.86 186.891 172.137 194.131 172.664 202.249C173.191 210.367 183.769 216.289 196.291 215.476Z" fill="#611B0E" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10"/>
<path d="M193.952 195.659C198.317 195.376 201.75 193.524 201.62 191.523C201.49 189.523 197.846 188.131 193.481 188.414C189.117 188.698 185.683 190.549 185.813 192.55C185.943 194.55 189.587 195.942 193.952 195.659Z" fill="#AA3F25"/>
<path d="M201.56 131.154C201.56 131.154 186.44 81.0342 174.51 82.0142C162.58 82.9942 151.07 133.694 151.07 133.694C151.07 133.694 160.46 143.894 176.79 142.274C198.42 140.144 201.56 131.154 201.56 131.154Z" fill="#F04E26" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M114.8 169.124C114.8 169.124 90.53 129.824 98.33 122.444C106.13 115.064 147.85 135.184 147.85 135.184C147.85 135.184 151.93 147.304 136.61 161.524C124.9 172.384 114.8 169.124 114.8 169.124Z" fill="#F04E26" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M235.48 157.584C235.48 157.584 250.5 118.434 244.93 114.114C235.66 106.924 205.41 132.444 205.41 132.444C205.41 132.444 207.99 141.854 217.46 149.144C225.24 155.124 235.48 157.584 235.48 157.584Z" fill="#F04E26" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M120.08 213.634C119.71 213.524 85.88 211.624 84.52 200.314C83.16 189.004 114.72 174.254 114.72 174.254C114.72 174.254 122.39 179.964 124.03 195.344C125.09 205.254 120.08 213.634 120.08 213.634Z" fill="#D44925" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M186.67 232.384C188.6 228.274 192.68 225.264 197.17 224.614C201.66 223.974 206.42 225.724 209.42 229.134" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M198.65 223.434C199.07 220.704 199.48 217.984 199.9 215.254" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M177.74 157.584C171.13 172.614 157.09 184.164 141.07 187.764C139.49 183.734 137.27 178.864 136.57 174.594C135.86 170.324 136.11 165.774 138.06 161.904C140.25 157.564 144.43 154.464 148.94 152.644C158.75 148.674 169.54 150.884 177.74 157.584Z" fill="#F04E26"/>
<path d="M141.08 187.764C157.1 184.164 171.13 172.614 177.75 157.584Z" fill="#F04E26"/>
<path d="M141.08 187.764C157.1 184.164 171.13 172.614 177.75 157.584" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M233.08 175.034C219.46 176.004 205.52 170.664 196.04 160.824C198.59 155.434 202.75 150.154 208.24 147.794C213.72 145.444 220.49 145.774 225.26 149.364C229 152.184 231.21 156.664 232.19 161.244C233.17 165.824 233.21 170.354 233.08 175.034Z" fill="#F04E26"/>
<path d="M196.04 160.824C205.52 170.654 219.46 176.004 233.08 175.034" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M161.35 190.054C163.33 189.344 164.96 187.474 164.99 185.374C165.02 183.324 163.54 181.454 161.69 180.564C159.84 179.664 157.7 179.594 155.66 179.824C152.51 180.174 147.05 182.104 149.62 186.044C151.72 189.244 157.82 191.324 161.35 190.054Z" fill="white"/>
<path d="M167.8 189.474C168.24 190.874 169.91 191.764 171.32 191.344C172.73 190.924 173.64 189.274 173.24 187.854C172.84 186.434 171.2 185.504 169.78 185.884C168.36 186.264 167.4 187.884 167.75 189.314" fill="white"/>
<path d="M217.87 172.984C220.16 171.664 223.44 172.564 224.74 174.864C226.82 178.534 223.23 184.664 218.81 182.804C214.99 181.194 214.14 175.124 217.87 172.984Z" fill="white"/>
<path d="M213.66 185.344C214.53 183.694 212.62 181.744 211.01 182.884C210.09 183.534 210.09 185.364 211 186.014C211.84 186.614 213.18 186.254 213.66 185.344Z" fill="white"/>
<path d="M154.2 144.734C149.66 146.354 145.11 147.984 140.57 149.604C138.3 150.414 136.03 151.224 133.75 152.044C132.25 152.574 129.79 153.354 129.84 155.394C129.86 156.434 130.2 157.484 130.84 158.304C132.28 160.164 134.79 160.924 137.14 160.814C139.49 160.714 141.73 159.864 143.93 159.034C147.11 157.824 150.41 156.544 152.75 154.064C155.08 151.594 156.13 147.544 154.2 144.734Z" fill="#742015" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10"/>
<path d="M214.89 141.484C219.43 143.104 223.98 144.734 228.52 146.354C230.79 147.164 233.06 147.974 235.34 148.794C236.84 149.324 239.3 150.104 239.25 152.144C239.23 153.184 238.89 154.234 238.25 155.054C236.81 156.914 234.3 157.674 231.95 157.564C229.6 157.464 227.36 156.614 225.16 155.784C221.98 154.574 218.68 153.294 216.34 150.814C214 148.334 212.96 144.294 214.89 141.484Z" fill="#742015" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10"/>
<path d="M256.31 292.284L239.16 275.644L259.12 244.904L278.45 263.004C286.24 269.964 285.25 277.774 281.07 282.074L271.66 292.054C267.48 296.354 260.61 296.454 256.31 292.284Z" fill="#F6F6F6" stroke="#444444" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M239.15 275.644L237.87 269.934C237.57 268.614 237.95 267.224 238.89 266.244L259.12 244.904L261.14 249.214C261.86 250.744 261.56 252.564 260.38 253.774L239.15 275.644Z" fill="#CCCCCC" stroke="#444444" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M251.87 256.854L243.86 248.944C242.85 247.944 242.84 246.314 243.84 245.304L243.98 245.164C244.98 244.154 246.61 244.144 247.62 245.144L255.63 253.054L251.87 256.854Z" fill="#F6F6F6" stroke="#444444" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M242.91 266.194L234.9 258.284C233.89 257.284 233.88 255.654 234.88 254.644L235.02 254.504C236.02 253.494 237.65 253.484 238.66 254.484L246.67 262.394L242.91 266.194Z" fill="#F6F6F6" stroke="#444444" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M271.05 243.964C268.02 242.444 260.68 246.904 259.79 250.414C258.9 253.924 265.33 254.354 267.48 254.804C269.63 255.254 274.54 255.324 275.35 251.394C276.17 247.464 273.49 245.184 271.05 243.964Z" fill="#91231E" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10"/>
<path d="M284.76 263.024C284.92 266.134 278.35 270.804 275.01 270.324C271.67 269.844 273.72 264.234 274.14 262.244C274.56 260.254 276.35 256.054 280.02 256.754C283.69 257.444 284.63 260.524 284.76 263.024Z" fill="#91231E" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10"/>
<path d="M248.93 290.414C246 290.514 241.84 284.374 242.4 281.294C242.96 278.214 248.17 280.194 250.02 280.604C251.87 281.024 255.76 282.734 254.98 286.114C254.2 289.494 251.29 290.324 248.93 290.414Z" fill="#91231E" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10"/>
<path d="M112.72 290.184L96.84 289.734C94.94 289.684 93.27 288.464 92.64 286.674L85.29 265.704C84.58 263.684 85.37 261.434 87.19 260.294L92.88 256.744C93.43 256.394 94.05 256.174 94.7 256.094L112.12 253.784L112.72 290.184Z" fill="#CCCCCC" stroke="#444444" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M122.19 286.104L115.05 289.694C112.54 290.954 109.5 289.684 108.63 287.014L100.95 263.364C100.25 261.214 101.23 258.874 103.25 257.854L110.39 254.264C112.9 253.004 115.94 254.274 116.81 256.944L124.49 280.594C125.19 282.744 124.21 285.094 122.19 286.104Z" fill="#F6F6F6" stroke="#444444" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M112.036 269.459C113.179 269.136 113.64 267.229 113.067 265.199C112.494 263.168 111.104 261.784 109.961 262.106C108.818 262.429 108.356 264.336 108.929 266.367C109.502 268.397 110.893 269.781 112.036 269.459Z" fill="#CCCCCC" stroke="#444444" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M116.575 282.12C117.718 281.797 118.18 279.89 117.607 277.86C117.034 275.829 115.643 274.445 114.5 274.767C113.358 275.09 112.896 276.997 113.469 279.027C114.042 281.058 115.433 282.442 116.575 282.12Z" fill="#CCCCCC" stroke="#444444" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M77.46 257.394C76.95 260.384 82.67 265.504 85.91 265.364C89.15 265.214 87.84 259.604 87.68 257.644C87.51 255.684 86.29 251.464 82.72 251.784C79.13 252.104 77.87 254.984 77.46 257.394Z" fill="#91231E" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10"/>
<path d="M93.28 293.864C95.71 296.184 100.19 295.714 102.04 293.304C103.89 290.894 101.68 287.884 99.7699 286.724C97.8699 285.564 93.24 283.674 91.35 286.454C89.45 289.214 91.32 291.994 93.28 293.864Z" fill="#91231E" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10"/>
<path d="M99.6799 249.524C101.61 252.594 97.5699 261.094 93.8999 262.504C90.2299 263.914 89.1299 257.034 88.4299 254.774C87.7299 252.514 87.1599 247.214 91.2899 245.834C95.4099 244.454 98.1199 247.044 99.6799 249.524Z" fill="#91231E" stroke="#5F1B12" stroke-width="2.5" stroke-miterlimit="10"/>
<defs>
<linearGradient id="paint0_linear_75_199" x1="271.5" y1="283" x2="336.5" y2="332" gradientUnits="userSpaceOnUse">
<stop stop-color="#AAAAAA"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_75_199" x1="90" y1="273" x2="21" y2="330.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#AAAAAA"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

1
public/locales/en/Common.json
View File

@ -141,6 +141,7 @@
"FullAccess": "Full access",
"GetMoreOptions": "Get more security and branding options",
"Gigabyte": "GB",
"GoBack": "Go back",
"GracePeriodActivated": "Grace period activated",
"HasFullAccess": "He has full access to the room",
"HelpCenter": "Help Center",

1
public/locales/ru/Common.json
View File

@ -140,6 +140,7 @@
"FullAccess": "Полный доступ",
"GetMoreOptions": "Получите больше возможностей безопасности и брендинга",
"Gigabyte": "Гб",
"GoBack": "Назад",
"GracePeriodActivated": "Активирован льготный период",
"HasFullAccess": "У него есть полный доступ в комнату",
"HelpCenter": "Справочный центр",