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

Doceditor: Added CompletedForm page

Browse Source
This commit is contained in:
Akmal Isomadinov 2024-05-31 21:34:29 +05:00
parent 76149bd5e5
commit 70c3a24e4f
9 changed files with 443 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/doceditor/public/locales/en/CompletedForm.json Normal file
View File

@ -0,0 +1,7 @@
{
"Title": "The form is completed",
"Description": "Your PDF form has been saved in the Complete section. You can fill out this form again and send another result.",
"BackToRoom": "Back to room",
"FillItOutAgain": "Fill it out again",
"GoToCompleteFolder": "Go to Complete folder"
}

32
packages/doceditor/src/app/(root)/completed-form/layout.tsx Normal file
View File

@ -0,0 +1,32 @@
// (c) Copyright Ascensio System SIA 2009-2024
//
// This program is a free software product.
// You can redistribute it and/or modify it under the terms
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
// any third-party rights.
//
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
//
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
//
// The interactive user interfaces in modified source and object code versions of the Program must
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
//
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
// trademark law for use of our trademarks.
//
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import React, { PropsWithChildren } from "react";
async function Layout({ children }: PropsWithChildren) {
return <>{children}</>;
}
export default Layout;

38
packages/doceditor/src/app/(root)/completed-form/page.tsx Normal file
View File

@ -0,0 +1,38 @@
// (c) Copyright Ascensio System SIA 2009-2024
//
// This program is a free software product.
// You can redistribute it and/or modify it under the terms
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
// any third-party rights.
//
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
//
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
//
// The interactive user interfaces in modified source and object code versions of the Program must
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
//
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
// trademark law for use of our trademarks.
//
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import { cookies } from "next/headers";
import { ThemeKeys, WhiteLabelLogoType } from "@docspace/shared/enums";
import { getLogoUrl } from "@docspace/shared/utils/common";
import { SYSTEM_THEME_KEY } from "@docspace/shared/constants";
import { CompletedForm } from "@/components/completed-form";
async function Page() {
return <CompletedForm />;
}
export default Page;

124
packages/doceditor/src/components/completed-form/CompletedForm.styled.ts Normal file
View File

@ -0,0 +1,124 @@
// (c) Copyright Ascensio System SIA 2009-2024
//
// This program is a free software product.
// You can redistribute it and/or modify it under the terms
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
// any third-party rights.
//
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
//
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
//
// The interactive user interfaces in modified source and object code versions of the Program must
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
//
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
// trademark law for use of our trademarks.
//
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
"use client";
import styled from "styled-components";
import { mobile } from "@docspace/shared/utils";
import type { CompletedFormLayoutProps } from "./CompletedForm.types";
export const CompletedFormLayout = styled.section<CompletedFormLayoutProps>`
display: flex;
align-items: center;
flex-direction: column;
box-sizing: border-box;
width: 100%;
height: 100%;
background-image: ${(props) => props.bgPattern};
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
padding-top: 100px;
picture {
margin-bottom: 125px;
}
.link {
font-weight: 600;
color: ${(props) => props.theme.completedForm.linkColor};
}
@media ${mobile} {
padding: 0 16px;
background-image: none;
.completed-form__icon {
width: 343px;
}
picture {
display: flex;
align-self: center;
justify-content: center;
height: 48px;
width: 100vw;
margin: 0 -16px;
margin-bottom: 32px;
background-color: ${(props) => props.theme?.login?.navBackground};
img {
height: 24px;
align-self: center;
}
}
}
`;
export const ButtonWrapper = styled.footer`
display: flex;
gap: 8px;
margin-bottom: 24px;
max-width: 648px;
width: 100%;
@media ${mobile} {
flex-wrap: wrap;
}
`;
export const TextWrapper = styled.section`
display: flex;
align-items: center;
flex-direction: column;
gap: 20px;
margin: 24px 0;
h1 {
line-height: 28px;
font-size: 23px;
font-weight: 700;
}
p {
font-size: 14px;
line-height: 16px;
color: ${(props) => props.theme.completedForm.descriptionColor};
text-align: center;
max-width: 480px;
}
`;

98
packages/doceditor/src/components/completed-form/CompletedForm.tsx Normal file
View File

@ -0,0 +1,98 @@
// (c) Copyright Ascensio System SIA 2009-2024
//
// This program is a free software product.
// You can redistribute it and/or modify it under the terms
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
// any third-party rights.
//
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
//
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
//
// The interactive user interfaces in modified source and object code versions of the Program must
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
//
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
// trademark law for use of our trademarks.
//
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
"use client";
import React, { useMemo } from "react";
import { ReactSVG } from "react-svg";
import { useTheme } from "styled-components";
import { useTranslation } from "react-i18next";
import { Text } from "@docspace/shared/components/text";
import { getBgPattern, getLogoUrl } from "@docspace/shared/utils/common";
import CompletedFormDarkIcon from "PUBLIC_DIR/images/completedForm/completed.form.icon.dark.svg?url";
import CompletedFormLightIcon from "PUBLIC_DIR/images/completedForm/completed.form.icon.light.svg?url";
import {
CompletedFormLayout,
ButtonWrapper,
TextWrapper,
} from "./CompletedForm.styled";
import type { CompletedFormProps } from "./CompletedForm.types";
import { Button } from "@docspace/shared/components/button";
import Link from "next/link";
import { WhiteLabelLogoType } from "@docspace/shared/enums";
import Image from "next/image";
export const CompletedForm = ({}: CompletedFormProps) => {
const theme = useTheme();
const { t } = useTranslation(["CompletedForm"]);
const { logoUrl, smallLogoUrl } = useMemo(() => {
const logoUrl = getLogoUrl(WhiteLabelLogoType.LoginPage, !theme.isBase);
const smallLogoUrl = getLogoUrl(
WhiteLabelLogoType.LightSmall,
!theme.isBase,
);
return { logoUrl, smallLogoUrl };
}, [theme.isBase]);
const bgPattern = useMemo(
() => getBgPattern(theme.currentColorScheme?.id),
[theme.currentColorScheme?.id],
);
const iconUrl = theme.isBase ? CompletedFormLightIcon : CompletedFormDarkIcon;
return (
<CompletedFormLayout bgPattern={bgPattern}>
<picture className="completed-form__logo">
<source media="(max-width: 600px)" srcSet={smallLogoUrl} />
<source media="(min-width: 601px)" srcSet={logoUrl} />
<img src={logoUrl} alt="logo" />
</picture>
<Image
src={iconUrl}
className="completed-form__icon"
alt="icon"
width={416}
height={200}
/>
<TextWrapper>
<Text as="h1">{t("CompletedForm:Title")}</Text>
<Text as="p">{t("CompletedForm:Description")}</Text>
</TextWrapper>
<ButtonWrapper>
<Button scale label={t("CompletedForm:BackToRoom")} primary />
<Button scale label={t("CompletedForm:FillItOutAgain")} />
</ButtonWrapper>
<Link className="link" href="#">
{t("CompletedForm:GoToCompleteFolder")}
</Link>
</CompletedFormLayout>
);
};

31
packages/doceditor/src/components/completed-form/CompletedForm.types.ts Normal file
View File

@ -0,0 +1,31 @@
// (c) Copyright Ascensio System SIA 2009-2024
//
// This program is a free software product.
// You can redistribute it and/or modify it under the terms
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
// any third-party rights.
//
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
//
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
//
// The interactive user interfaces in modified source and object code versions of the Program must
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
//
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
// trademark law for use of our trademarks.
//
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
export type CompletedFormLayoutProps = {
bgPattern: string;
};
export type CompletedFormProps = {};

27
packages/doceditor/src/components/completed-form/index.ts Normal file
View File

@ -0,0 +1,27 @@
// (c) Copyright Ascensio System SIA 2009-2024
//
// This program is a free software product.
// You can redistribute it and/or modify it under the terms
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
// any third-party rights.
//
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
//
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
//
// The interactive user interfaces in modified source and object code versions of the Program must
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
//
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
// trademark law for use of our trademarks.
//
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
export { CompletedFormLayout } from "./CompletedForm.styled";
export { CompletedForm } from "./CompletedForm";

43
public/images/completedForm/completed.form.icon.dark.svg Normal file
View File

@ -0,0 +1,43 @@
<svg width="416" height="200" viewBox="0 0 416 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M257 160H160V93.7017C160 91.661 161.523 90 163.45 90H198.486C200.278 90 201.757 91.4711 201.936 93.3695L202.25 97.261H254.715C255.969 97.261 257 98.3525 257 99.6813V160Z" fill="#3F5A64" stroke="#48AAD1" stroke-width="2"/>
<g filter="url(#filter0_d_3118_39690)">
<path d="M171 25C171 23.8954 171.895 23 173 23H231L243 35V117C243 118.105 242.105 119 241 119H173C171.895 119 171 118.105 171 117V25Z" fill="#444444"/>
<path d="M172 25C172 24.4477 172.448 24 173 24H230.586L242 35.4142V117C242 117.552 241.552 118 241 118H173C172.448 118 172 117.552 172 117V25Z" stroke="#AAAAAA" stroke-width="2"/>
</g>
<path d="M231 23L243 35H232C231.448 35 231 34.5523 231 34V23Z" fill="#AAAAAA"/>
<path d="M213.725 46C213.725 48.2091 215.739 50 218.225 50C220.71 50 222.725 48.2091 222.725 46" stroke="#AAAAAA" stroke-width="2" stroke-linecap="round"/>
<path d="M191.832 46C191.832 48.2091 193.847 50 196.332 50C198.817 50 200.832 48.2091 200.832 46" stroke="#AAAAAA" stroke-width="2" stroke-linecap="round"/>
<path d="M201 58C201 60.2091 203.686 62 207 62C210.314 62 213 60.2091 213 58" stroke="#AAAAAA" stroke-width="2" stroke-linecap="round"/>
<rect x="180" y="76" width="54" height="8" rx="2" fill="#5EA3BE"/>
<rect x="180" y="88" width="54" height="8" rx="2" fill="#5EA3BE"/>
<rect x="180" y="100" width="30" height="8" rx="2" fill="#5EA3BE"/>
<path d="M172 61.9999C162.675 72.9244 161.64 80.7115 167.08 82.8902C172.521 85.0689 180.877 80.5856 184.375 78.0717" stroke="#AAAAAA" stroke-width="2" stroke-linecap="round"/>
<path d="M184.772 77.7529C185.83 78.1768 187.478 78.1321 189.112 77.1042" stroke="#AAAAAA" stroke-width="2" stroke-linecap="round"/>
<path d="M242 62.0001C251.325 72.9246 252.114 80.7117 246.673 82.8904C241.233 85.0691 232.877 80.5859 229.379 78.0719" stroke="#AAAAAA" stroke-width="2" stroke-linecap="round"/>
<path d="M228.98 77.7532C227.923 78.177 226.275 78.1323 224.64 77.1045" stroke="#AAAAAA" stroke-width="2" stroke-linecap="round"/>
<path d="M256.428 170H159.62C157.92 170 156.503 168.682 156.409 166.941L153.009 114.884C152.867 112.954 154.426 111.307 156.315 111.354H210.008L218.98 105L260.726 105.33C262.662 105.33 264.173 107.024 263.984 108.954L259.592 166.988C259.498 168.682 258.081 170 256.428 170Z" fill="#444444" stroke="#48AAD1" stroke-width="2"/>
<path d="M198 138L206.5 146.5L221.5 131.5" stroke="#48AAD1" stroke-width="7" stroke-linecap="round"/>
<path d="M119.004 128H66.0039V92.0095C66.0039 90.9017 66.8362 90 67.8889 90H87.0325C88.0117 90 88.8196 90.7986 88.9175 91.8291L89.1374 94H117.504C118.189 94 119.004 94.7786 119.004 95.5V128Z" fill="#333333" stroke="#CCCCCC" stroke-width="2"/>
<path d="M74.0039 73C74.0039 72.4477 74.4516 72 75.0039 72L103.59 72L112.004 80.4142V122C112.004 122.552 111.556 123 111.004 123H75.0039C74.4516 123 74.0039 122.552 74.0039 122V73Z" fill="#444444" stroke="#CCCCCC" stroke-width="2"/>
<path d="M105.004 81C103.899 81 103.004 80.1046 103.004 79L103.004 71L103.773 71L113.004 80.2308L113.004 81L105.004 81Z" fill="#CCCCCC"/>
<path d="M118.843 134H65.6423C64.708 134 63.9294 133.27 63.8775 132.306L62.0041 104C61.9263 102.931 62.9661 101.974 64.0041 102H93.5041L98.2635 98L121.205 98.1825C122.269 98.1825 123.099 99.1209 122.995 100.19L120.582 132.332C120.53 133.27 119.751 134 118.843 134Z" fill="#444444" stroke="#CCCCCC" stroke-width="2"/>
<path d="M94.2735 111.48L96.0468 109.707C96.4373 109.317 97.0705 109.317 97.461 109.707L100.297 112.543C100.687 112.933 100.687 113.567 100.297 113.957L98.5235 115.73C98.133 116.121 97.4998 116.121 97.1093 115.73L94.2735 112.895C93.883 112.504 93.883 111.871 94.2735 111.48Z" fill="#808080"/>
<path d="M96.0468 116.793L93.211 113.957C92.8205 113.567 92.1873 113.567 91.7968 113.957L85.2805 120.473C85.1409 120.613 85.0457 120.791 85.007 120.984L84.2981 124.529C84.1581 125.229 84.7751 125.846 85.4748 125.706L89.0195 124.997C89.2131 124.958 89.3909 124.863 89.5305 124.723L96.0468 118.207C96.4373 117.817 96.4373 117.183 96.0468 116.793Z" fill="#808080"/>
<path d="M358.004 128H305.004V92.0095C305.004 90.9017 305.836 90 306.889 90H326.033C327.012 90 327.82 90.7986 327.918 91.8291L328.137 94H356.504C357.189 94 358.004 94.7786 358.004 95.5V128Z" fill="#333333" stroke="#CCCCCC" stroke-width="2"/>
<path d="M313.004 73C313.004 72.4477 313.452 72 314.004 72L342.59 72L351.004 80.4142V122C351.004 122.552 350.556 123 350.004 123H314.004C313.452 123 313.004 122.552 313.004 122V73Z" fill="#444444" stroke="#CCCCCC" stroke-width="2"/>
<path d="M344.004 81C342.899 81 342.004 80.1046 342.004 79L342.004 71L342.773 71L352.004 80.2308L352.004 81L344.004 81Z" fill="#CCCCCC"/>
<path d="M357.843 134H304.642C303.708 134 302.929 133.27 302.878 132.306L301.004 104C300.926 102.931 301.966 101.974 303.004 102H332.504L337.263 98L360.205 98.1825C361.269 98.1825 362.099 99.1209 361.995 100.19L359.582 132.332C359.53 133.27 358.751 134 357.843 134Z" fill="#444444" stroke="#CCCCCC" stroke-width="2"/>
<path d="M333.274 111.48L335.047 109.707C335.437 109.317 336.07 109.317 336.461 109.707L339.297 112.543C339.687 112.933 339.687 113.567 339.297 113.957L337.524 115.73C337.133 116.121 336.5 116.121 336.109 115.73L333.274 112.895C332.883 112.504 332.883 111.871 333.274 111.48Z" fill="#808080"/>
<path d="M335.047 116.793L332.211 113.957C331.82 113.567 331.187 113.567 330.797 113.957L324.281 120.473C324.141 120.613 324.046 120.791 324.007 120.984L323.298 124.529C323.158 125.229 323.775 125.846 324.475 125.706L328.02 124.997C328.213 124.958 328.391 124.863 328.531 124.723L335.047 118.207C335.437 117.817 335.437 117.183 335.047 116.793Z" fill="#808080"/>
<defs>
<filter id="filter0_d_3118_39690" x="156" y="15" width="102" height="126" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="7"/>
<feGaussianBlur stdDeviation="7.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.333333 0 0 0 0 0.333333 0 0 0 0 0.333333 0 0 0 0.1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3118_39690"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3118_39690" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

43
public/images/completedForm/completed.form.icon.light.svg Normal file
View File

@ -0,0 +1,43 @@
<svg width="416" height="200" viewBox="0 0 416 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M257 160H160V93.7017C160 91.661 161.523 90 163.45 90H198.486C200.278 90 201.757 91.4711 201.936 93.3695L202.25 97.261H254.715C255.969 97.261 257 98.3525 257 99.6813V160Z" fill="#D9F4FF" stroke="#17BCFF" stroke-width="2"/>
<path d="M119.004 128H66.0039V92.0095C66.0039 90.9017 66.8362 90 67.8889 90H87.0325C88.0117 90 88.8196 90.7986 88.9175 91.8291L89.1374 94H117.504C118.189 94 119.004 94.7786 119.004 95.5V128Z" fill="#E2E2E2" stroke="#CCCCCC" stroke-width="2"/>
<path d="M358.004 128H305.004V92.0095C305.004 90.9017 305.836 90 306.889 90H326.033C327.012 90 327.82 90.7986 327.918 91.8291L328.137 94H356.504C357.189 94 358.004 94.7786 358.004 95.5V128Z" fill="#E2E2E2" stroke="#CCCCCC" stroke-width="2"/>
<g filter="url(#filter0_d_2462_114228)">
<path d="M171 25C171 23.8954 171.895 23 173 23H231L243 35V117C243 118.105 242.105 119 241 119H173C171.895 119 171 118.105 171 117V25Z" fill="white"/>
<path d="M172 25C172 24.4477 172.448 24 173 24H230.586L242 35.4142V117C242 117.552 241.552 118 241 118H173C172.448 118 172 117.552 172 117V25Z" stroke="#AAAAAA" stroke-width="2"/>
</g>
<path d="M231 23L243 35H232C231.448 35 231 34.5523 231 34V23Z" fill="#AAAAAA"/>
<path d="M213.725 46C213.725 48.2091 215.739 50 218.225 50C220.71 50 222.725 48.2091 222.725 46" stroke="#AAAAAA" stroke-width="2" stroke-linecap="round"/>
<path d="M191.832 46C191.832 48.2091 193.847 50 196.332 50C198.817 50 200.832 48.2091 200.832 46" stroke="#AAAAAA" stroke-width="2" stroke-linecap="round"/>
<path d="M201 58C201 60.2091 203.686 62 207 62C210.314 62 213 60.2091 213 58" stroke="#AAAAAA" stroke-width="2" stroke-linecap="round"/>
<rect x="180.001" y="76" width="54" height="8" rx="2" fill="#D9F4FF"/>
<rect x="180.001" y="88" width="54" height="8" rx="2" fill="#D9F4FF"/>
<rect x="180.001" y="100" width="30" height="8" rx="2" fill="#D9F4FF"/>
<path d="M172 62C162.675 72.9245 161.64 80.7116 167.08 82.8903C172.521 85.069 180.877 80.5858 184.375 78.0718" stroke="#AAAAAA" stroke-width="2" stroke-linecap="round"/>
<path d="M184.772 77.7532C185.83 78.177 187.478 78.1323 189.112 77.1045" stroke="#AAAAAA" stroke-width="2" stroke-linecap="round"/>
<path d="M242 62.0001C251.325 72.9246 252.114 80.7117 246.673 82.8904C241.233 85.0691 232.877 80.5859 229.379 78.0719" stroke="#AAAAAA" stroke-width="2" stroke-linecap="round"/>
<path d="M228.98 77.7533C227.923 78.1771 226.275 78.1324 224.64 77.1046" stroke="#AAAAAA" stroke-width="2" stroke-linecap="round"/>
<path d="M256.428 170H159.62C157.92 170 156.503 168.682 156.409 166.941L153.009 114.884C152.867 112.954 154.426 111.307 156.315 111.354H210.008L218.98 105L260.726 105.33C262.662 105.33 264.173 107.024 263.984 108.954L259.592 166.988C259.498 168.682 258.081 170 256.428 170Z" fill="#EFEFEF" stroke="#17BCFF" stroke-width="2"/>
<path d="M198 138L206.5 146.5L221.5 131.5" stroke="#17BCFF" stroke-width="7" stroke-linecap="round"/>
<path d="M74.0039 73C74.0039 72.4477 74.4516 72 75.0039 72L103.59 72L112.004 80.4142V122C112.004 122.552 111.556 123 111.004 123H75.0039C74.4516 123 74.0039 122.552 74.0039 122V73Z" fill="white" stroke="#CCCCCC" stroke-width="2"/>
<path d="M105.004 81C103.899 81 103.004 80.1046 103.004 79L103.004 71L103.773 71L113.004 80.2308L113.004 81L105.004 81Z" fill="#CCCCCC"/>
<path d="M313.004 73C313.004 72.4477 313.452 72 314.004 72L342.59 72L351.004 80.4142V122C351.004 122.552 350.556 123 350.004 123H314.004C313.452 123 313.004 122.552 313.004 122V73Z" fill="white" stroke="#CCCCCC" stroke-width="2"/>
<path d="M344.004 81C342.899 81 342.004 80.1046 342.004 79L342.004 71L342.773 71L352.004 80.2308L352.004 81L344.004 81Z" fill="#CCCCCC"/>
<path d="M118.843 134H65.6423C64.708 134 63.9294 133.27 63.8775 132.306L62.0041 104C61.9263 102.931 62.9661 101.974 64.0041 102H93.5041L98.2635 98L121.205 98.1825C122.269 98.1825 123.099 99.1209 122.995 100.19L120.582 132.332C120.53 133.27 119.751 134 118.843 134Z" fill="#F5F5F5" stroke="#CCCCCC" stroke-width="2"/>
<path d="M357.843 134H304.642C303.708 134 302.929 133.27 302.878 132.306L301.004 104C300.926 102.931 301.966 101.974 303.004 102H332.504L337.263 98L360.205 98.1825C361.269 98.1825 362.099 99.1209 361.995 100.19L359.582 132.332C359.53 133.27 358.751 134 357.843 134Z" fill="#F5F5F5" stroke="#CCCCCC" stroke-width="2"/>
<path d="M94.2735 111.48L96.0468 109.707C96.4373 109.317 97.0705 109.317 97.461 109.707L100.297 112.543C100.687 112.933 100.687 113.567 100.297 113.957L98.5235 115.73C98.133 116.121 97.4998 116.121 97.1093 115.73L94.2735 112.895C93.883 112.504 93.883 111.871 94.2735 111.48Z" fill="#CCCCCC"/>
<path d="M96.0468 116.793L93.211 113.957C92.8205 113.567 92.1873 113.567 91.7968 113.957L85.2805 120.473C85.1409 120.613 85.0457 120.791 85.007 120.984L84.2981 124.529C84.1581 125.229 84.7751 125.846 85.4748 125.706L89.0195 124.997C89.2131 124.958 89.3909 124.863 89.5305 124.723L96.0468 118.207C96.4373 117.817 96.4373 117.183 96.0468 116.793Z" fill="#CCCCCC"/>
<path d="M333.274 111.48L335.047 109.707C335.437 109.317 336.07 109.317 336.461 109.707L339.297 112.543C339.687 112.933 339.687 113.567 339.297 113.957L337.524 115.73C337.133 116.121 336.5 116.121 336.109 115.73L333.274 112.895C332.883 112.504 332.883 111.871 333.274 111.48Z" fill="#CCCCCC"/>
<path d="M335.047 116.793L332.211 113.957C331.82 113.567 331.187 113.567 330.797 113.957L324.281 120.473C324.141 120.613 324.046 120.791 324.007 120.984L323.298 124.529C323.158 125.229 323.775 125.846 324.475 125.706L328.02 124.997C328.213 124.958 328.391 124.863 328.531 124.723L335.047 118.207C335.437 117.817 335.437 117.183 335.047 116.793Z" fill="#CCCCCC"/>
<defs>
<filter id="filter0_d_2462_114228" x="156" y="15" width="102" height="126" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="7"/>
<feGaussianBlur stdDeviation="7.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.333333 0 0 0 0 0.333333 0 0 0 0 0.333333 0 0 0 0.1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2462_114228"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2462_114228" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB