Add first screen of the onboarding flow
This commit is contained in:
Vincent
Vincent
Родитель
707cdbbc7b
Коммит
dc98deeddd
|
|
@ -3,15 +3,29 @@ import { Inter } from "next/font/google";
|
|||
import type { Preview } from "@storybook/react";
|
||||
import "../src/app/globals.css";
|
||||
import { L10nProvider } from "../src/contextProviders/localization";
|
||||
import { getL10nBundles, getLocale } from "../src/app/functions/server/l10n";
|
||||
import { metropolis } from "../src/app/fonts/Metropolis/metropolis";
|
||||
import { ReactAriaI18nProvider } from "../src/contextProviders/react-aria";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
|
||||
|
||||
function loadL10nModule() {
|
||||
if (process.env.NODE_ENV === "test") {
|
||||
// In Jest, loading this module throws errors because it uses
|
||||
// require.context(). Since we don't need to look at actual strings in our
|
||||
// unit tests, we can just skip loading the bundles.
|
||||
return {
|
||||
getL10nBundles: () => [],
|
||||
getLocale: () => "en",
|
||||
};
|
||||
}
|
||||
|
||||
return require("../src/app/functions/server/l10n");
|
||||
}
|
||||
|
||||
const AppDecorator: Exclude<Preview["decorators"], undefined>[0] = (
|
||||
storyFn
|
||||
) => {
|
||||
const { getL10nBundles, getLocale } = loadL10nModule();
|
||||
const l10nBundles = getL10nBundles();
|
||||
return (
|
||||
<L10nProvider bundleSources={l10nBundles}>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||
const nextJest = require("next/jest");
|
||||
const createJestConfig = nextJest({ dir: "./" })
|
||||
const createJestConfig = nextJest({ dir: "./" });
|
||||
|
||||
// See https://nextjs.org/docs/architecture/nextjs-compiler#jest
|
||||
|
||||
|
|
@ -150,7 +150,7 @@ const customJestConfig = {
|
|||
// setupFiles: [],
|
||||
|
||||
// A list of paths to modules that run some code to configure or set up the testing framework before each test
|
||||
// setupFilesAfterEnv: [],
|
||||
setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
|
||||
|
||||
// The number of seconds after which a test is considered as slow and reported as such in the results.
|
||||
// slowTestThreshold: 5,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
import "@testing-library/jest-dom";
|
||||
import { setProjectAnnotations } from "@storybook/react";
|
||||
import { toHaveNoViolations } from "jest-axe";
|
||||
import { expect } from "@jest/globals";
|
||||
|
||||
import * as globalStorybookConfig from "./.storybook/preview";
|
||||
|
||||
setProjectAnnotations(
|
||||
globalStorybookConfig as Parameters<typeof setProjectAnnotations>[0]
|
||||
);
|
||||
|
||||
expect.extend(toHaveNoViolations);
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
# Strings in this file are not yet final, and thus should not be localised yet.
|
||||
|
||||
onboarding-steps-get-started-label = Get started
|
||||
onboarding-steps-enter-info-label = Enter info
|
||||
onboarding-steps-find-exposures-label = Find exposures
|
||||
onboarding-get-started-heading = Welcome to { -product-short-name }. Let’s find your exposed information.
|
||||
onboarding-get-started-content-data = To find and fix your exposed data, we’ll need to ask for your personal info. Rest assured we will safeguard your information like it’s our own.
|
||||
onboarding-get-started-content-price = We believe in your right to privacy, so basic { -product-short-name } is always free. Upgrade to { -brand-premium } for continuous protection and automatic removal of your personal info.
|
||||
onboarding-get-started-content-explainer = See how we protect your data
|
||||
onboarding-get-started-cta-label = Start my free scan
|
||||
onboarding-get-started-how-it-works-dialog-heading-line1 = We’re here to protect your personal information
|
||||
onboarding-get-started-how-it-works-dialog-heading-line2 = Here’s how it works:
|
||||
onboarding-get-started-how-it-works-dialog-step1-heading = Scan for exposures
|
||||
# Variables:
|
||||
# $dataBrokerCount (number) - number of scanned data broker sites, e.g. 190
|
||||
onboarding-get-started-how-it-works-dialog-step1-content = With just a few key pieces of information, we’ll search for you in all known data breaches and { $dataBrokerCount } major data broker sites. All users get the first scan free.
|
||||
onboarding-get-started-how-it-works-dialog-step2-heading = Remove your personal info
|
||||
onboarding-get-started-how-it-works-dialog-step2-content = We’ll show you what personal info each data broker site is selling. You’ll need to contact each data broker to request removal. Removal typically takes 7-10 business days, but some can take longer. Upgrade to { -brand-premium } and we’ll handle this for you.
|
||||
onboarding-get-started-how-it-works-dialog-step3-heading = Resolve data breaches
|
||||
onboarding-get-started-how-it-works-dialog-step3-content = We’ll give you clear steps on how to resolve each data breach. They’ll require access to your accounts, so you’ll need to resolve them manually even if you upgrade to { -brand-premium }.
|
||||
onboarding-get-started-how-it-works-dialog-confirm-label = OK
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -88,6 +88,10 @@
|
|||
"@storybook/nextjs": "^7.0.18",
|
||||
"@storybook/react": "^7.0.18",
|
||||
"@storybook/testing-library": "^0.0.14-next.2",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^14.0.0",
|
||||
"@testing-library/user-event": "^14.4.3",
|
||||
"@types/jest-axe": "^3.5.5",
|
||||
"@types/jsonwebtoken": "^9.0.2",
|
||||
"@types/jwk-to-pem": "^2.0.1",
|
||||
"@types/nodemailer": "^6.4.8",
|
||||
|
|
@ -104,6 +108,7 @@
|
|||
"eslint-plugin-storybook": "^0.6.12",
|
||||
"husky": "^8.0.3",
|
||||
"jest": "^29.5.0",
|
||||
"jest-axe": "^7.0.1",
|
||||
"jest-environment-jsdom": "^29.5.0",
|
||||
"lint-staged": "^13.2.2",
|
||||
"node-mocks-http": "^1.12.1",
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
@import "../../../../tokens";
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
"use client";
|
||||
|
||||
import { Session } from "next-auth";
|
||||
import styles from "./EnterInfo.module.scss";
|
||||
import { useL10n } from "../../../../hooks/l10n";
|
||||
|
||||
export type Props = {
|
||||
onDataSaved: () => void;
|
||||
user: Session["user"];
|
||||
};
|
||||
|
||||
export const EnterInfo = (_props: Props) => {
|
||||
const _l10n = useL10n();
|
||||
|
||||
return (
|
||||
<div className={styles.wrapper}>
|
||||
Enter your info here. After it's sent to the backend, we'll call{" "}
|
||||
<code>props.onDataSaved</code>.
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import "../../../../tokens";
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import styles from "./FindExposures.module.scss";
|
||||
import { useL10n } from "../../../../hooks/l10n";
|
||||
|
||||
export const FindExposures = () => {
|
||||
const _l10n = useL10n();
|
||||
|
||||
return (
|
||||
<div className={styles.wrapper}>
|
||||
Here's a progress bar until we think the dashboard has filled up
|
||||
enough, from which point we'll show a{" "}
|
||||
<Link href="/user/dashboard">link to the dashboard</Link>.
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
@import "../../../../tokens";
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: $spacing-md;
|
||||
|
||||
h1 {
|
||||
font: $text-title-2xs;
|
||||
}
|
||||
|
||||
.explainerTrigger {
|
||||
background-color: transparent;
|
||||
border-style: none;
|
||||
color: $color-blue-50;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $color-blue-70;
|
||||
}
|
||||
}
|
||||
|
||||
.startButtonWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
padding-block: $layout-sm;
|
||||
|
||||
@media screen and (min-width: $screen-sm) {
|
||||
padding-block-start: $layout-lg;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialogContents {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-2xl;
|
||||
font: $text-body-md;
|
||||
color: $color-grey-50;
|
||||
|
||||
.howItWorksList {
|
||||
list-style-position: inside;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-md;
|
||||
padding: 0;
|
||||
|
||||
h4,
|
||||
li::marker {
|
||||
display: inline-block;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.confirmButtonWrapper {
|
||||
align-self: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: $content-xs;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { useOverlayTriggerState } from "react-stately";
|
||||
import { useOverlayTrigger } from "react-aria";
|
||||
import styles from "./GetStarted.module.scss";
|
||||
import howItWorksHero from "./images/welcome-how-it-works.svg";
|
||||
import { useL10n } from "../../../../hooks/l10n";
|
||||
import { ModalOverlay } from "../../../../components/client/dialog/ModalOverlay";
|
||||
import { Dialog } from "../../../../components/client/dialog/Dialog";
|
||||
import { Button } from "../../../../components/server/Button";
|
||||
|
||||
export type Props = {
|
||||
onStart: () => void;
|
||||
};
|
||||
|
||||
export const GetStarted = (props: Props) => {
|
||||
const l10n = useL10n();
|
||||
const explainerDialogState = useOverlayTriggerState({});
|
||||
const explainerDialogTrigger = useOverlayTrigger(
|
||||
{ type: "dialog" },
|
||||
explainerDialogState
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={styles.wrapper}>
|
||||
<h1>{l10n.getString("onboarding-get-started-heading")}</h1>
|
||||
<p>{l10n.getString("onboarding-get-started-content-data")}</p>
|
||||
<p>{l10n.getString("onboarding-get-started-content-price")}</p>
|
||||
<p>
|
||||
<button
|
||||
{...explainerDialogTrigger.triggerProps}
|
||||
onClick={() => explainerDialogState.open()}
|
||||
className={styles.explainerTrigger}
|
||||
>
|
||||
{l10n.getString("onboarding-get-started-content-explainer")}
|
||||
</button>
|
||||
{explainerDialogState.isOpen && (
|
||||
<ModalOverlay
|
||||
state={explainerDialogState}
|
||||
{...explainerDialogTrigger.overlayProps}
|
||||
isDismissable={true}
|
||||
>
|
||||
<Dialog
|
||||
title={
|
||||
<>
|
||||
{l10n.getString(
|
||||
"onboarding-get-started-how-it-works-dialog-heading-line1"
|
||||
)}
|
||||
<br />
|
||||
{l10n.getString(
|
||||
"onboarding-get-started-how-it-works-dialog-heading-line2"
|
||||
)}
|
||||
</>
|
||||
}
|
||||
illustration={<Image src={howItWorksHero} alt="" />}
|
||||
>
|
||||
<div className={styles.dialogContents}>
|
||||
<ol className={styles.howItWorksList}>
|
||||
<li className={styles.howItWorksEntry}>
|
||||
<h4>
|
||||
{l10n.getString(
|
||||
"onboarding-get-started-how-it-works-dialog-step1-heading"
|
||||
)}
|
||||
</h4>
|
||||
<p>
|
||||
{l10n.getString(
|
||||
"onboarding-get-started-how-it-works-dialog-step1-content",
|
||||
{
|
||||
// TODO: Can we get this value from the OneRep API?
|
||||
dataBrokerCount: 190,
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</li>
|
||||
<li className={styles.howItWorksEntry}>
|
||||
<h4>
|
||||
{l10n.getString(
|
||||
"onboarding-get-started-how-it-works-dialog-step2-heading"
|
||||
)}
|
||||
</h4>
|
||||
<p>
|
||||
{l10n.getString(
|
||||
"onboarding-get-started-how-it-works-dialog-step2-content"
|
||||
)}
|
||||
</p>
|
||||
</li>
|
||||
<li className={styles.howItWorksEntry}>
|
||||
<h4>
|
||||
{l10n.getString(
|
||||
"onboarding-get-started-how-it-works-dialog-step3-heading"
|
||||
)}
|
||||
</h4>
|
||||
<p>
|
||||
{l10n.getString(
|
||||
"onboarding-get-started-how-it-works-dialog-step3-content"
|
||||
)}
|
||||
</p>
|
||||
</li>
|
||||
</ol>
|
||||
<div className={styles.confirmButtonWrapper}>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => explainerDialogState.close()}
|
||||
autoFocus={true}
|
||||
className={styles.startButton}
|
||||
>
|
||||
{l10n.getString(
|
||||
"onboarding-get-started-how-it-works-dialog-confirm-label"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</ModalOverlay>
|
||||
)}
|
||||
</p>
|
||||
<div className={styles.startButtonWrapper}>
|
||||
<Button type="primary" onClick={() => props.onStart()}>
|
||||
{l10n.getString("onboarding-get-started-cta-label")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
|
||||
import { View as OnboardingEl } from "./View";
|
||||
|
||||
const meta: Meta<typeof OnboardingEl> = {
|
||||
title: "Pages/Onboarding",
|
||||
component: OnboardingEl,
|
||||
};
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof OnboardingEl>;
|
||||
|
||||
export const Onboarding: Story = {
|
||||
render: () => <OnboardingEl user={{}} />,
|
||||
};
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
import { it, expect } from "@jest/globals";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { composeStory } from "@storybook/react";
|
||||
import { axe } from "jest-axe";
|
||||
import Meta, { Onboarding } from "./Onboarding.stories";
|
||||
|
||||
it("passes the axe accessibility test suite on step 1", async () => {
|
||||
const ComposedOnboarding = composeStory(Onboarding, Meta);
|
||||
const { container } = render(<ComposedOnboarding />);
|
||||
expect(await axe(container)).toHaveNoViolations();
|
||||
});
|
||||
|
||||
it("passes the axe accessibility test suite on step 2", async () => {
|
||||
const user = userEvent.setup();
|
||||
const ComposedOnboarding = composeStory(Onboarding, Meta);
|
||||
const { container } = render(<ComposedOnboarding />);
|
||||
const explainerTrigger = screen.getByRole("button", {
|
||||
name: "onboarding-get-started-cta-label",
|
||||
});
|
||||
await user.click(explainerTrigger);
|
||||
expect(await axe(container)).toHaveNoViolations();
|
||||
});
|
||||
|
||||
it("can open a dialog with more information", async () => {
|
||||
const user = userEvent.setup();
|
||||
const ComposedOnboarding = composeStory(Onboarding, Meta);
|
||||
render(<ComposedOnboarding />);
|
||||
expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
|
||||
|
||||
const explainerTrigger = screen.getByRole("button", {
|
||||
name: "onboarding-get-started-content-explainer",
|
||||
});
|
||||
await user.click(explainerTrigger);
|
||||
expect(screen.getByRole("dialog")).toBeInTheDocument();
|
||||
});
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
@import "../../../../tokens";
|
||||
|
||||
.wrapper {
|
||||
--backgroundImageWidth: 400px;
|
||||
--sidebarWidth: 600px;
|
||||
@media screen and (max-width: 1300px) {
|
||||
--backgroundImageWidth: 300px;
|
||||
--sidebarWidth: 400px;
|
||||
}
|
||||
@media screen and (max-width: 1000px) {
|
||||
--backgroundImageWidth: 200px;
|
||||
--sidebarWidth: 300px;
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
--sidebarWidth: 0;
|
||||
}
|
||||
|
||||
height: 100%;
|
||||
background-image: url("./images/Scanning.svg"),
|
||||
linear-gradient(
|
||||
to right,
|
||||
$color-grey-05,
|
||||
$color-grey-05 var(--sidebarWidth),
|
||||
$color-white calc(var(--sidebarWidth) + 1px)
|
||||
);
|
||||
background-repeat: no-repeat;
|
||||
background-position-y: center;
|
||||
background-position-x: calc(
|
||||
var(--sidebarWidth) / 2 - var(--backgroundImageWidth) / 2
|
||||
),
|
||||
center;
|
||||
background-size: var(--backgroundImageWidth) auto, auto;
|
||||
padding-inline-start: var(--sidebarWidth);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-xl;
|
||||
|
||||
.homeLink {
|
||||
margin-inline-start: calc(-1 * var(--sidebarWidth));
|
||||
display: block;
|
||||
padding: $spacing-md;
|
||||
|
||||
@media screen and (min-width: $screen-md) {
|
||||
padding-inline: $spacing-xl;
|
||||
}
|
||||
}
|
||||
|
||||
.stepsWrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 33%;
|
||||
}
|
||||
|
||||
.stepsWrapper,
|
||||
.contentWrapper {
|
||||
padding-inline: $spacing-2xl;
|
||||
|
||||
@media screen and (min-width: $screen-lg) {
|
||||
padding-inline: $layout-xl;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.steps {
|
||||
$stepGap: $spacing-2xl;
|
||||
padding-inline-start: 0;
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
gap: $stepGap;
|
||||
max-width: $content-sm;
|
||||
position: relative;
|
||||
|
||||
li {
|
||||
$iconDiameter: 27px;
|
||||
$iconBorderWidth: 4px;
|
||||
$connectingLineHeight: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $spacing-xs;
|
||||
text-align: center;
|
||||
font: $text-body-xs;
|
||||
font-weight: 600;
|
||||
color: $color-grey-30;
|
||||
|
||||
img {
|
||||
background-color: $color-grey-30;
|
||||
padding: 5px;
|
||||
margin-block: $iconBorderWidth;
|
||||
width: $iconDiameter;
|
||||
height: $iconDiameter;
|
||||
border-radius: 100%;
|
||||
box-sizing: content-box;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
// Overlap the `::before` (the horizontal line)
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// This is the horizontal line preceding every step indicator on desktop.
|
||||
// It starts with `+ 2` because the lines are only between indicators, so
|
||||
// the first one doesn't have a line preceding it, and nth-child is
|
||||
// 1-indexed, i.e. it doesn't start at 0.
|
||||
&:nth-child(n + 2)::before {
|
||||
content: "";
|
||||
background-color: $color-grey-30;
|
||||
// Since the step indicators are justified using space-evenly above, and
|
||||
// since there are three of them, they are positioned at 25%, 50% and
|
||||
// 75% of the width of the container. So to draw a line between two of
|
||||
// them, that line needs to be 25% wide.
|
||||
width: calc(25% + $stepGap);
|
||||
display: block;
|
||||
height: $connectingLineHeight;
|
||||
position: absolute;
|
||||
top: calc(($iconDiameter + $connectingLineHeight) / 2 + $iconBorderWidth);
|
||||
}
|
||||
&:nth-child(2)::before {
|
||||
// Since the step indicators are justified using space-evenly above, and
|
||||
// since there are three of them, they are positioned at 25%, 50% and
|
||||
// 75% of the width of the container. So to draw a line between the
|
||||
// first and the second (`nth-child(2)`) indicator, we need to start at
|
||||
// 25% of the container.
|
||||
left: calc(25% - $iconDiameter / 2 - $stepGap / 2);
|
||||
}
|
||||
&:nth-child(3)::before {
|
||||
// Since the step indicators are justified using space-evenly above, and
|
||||
// since there are three of them, they are positioned at 25%, 50% and
|
||||
// 75% of the width of the container. So to draw a line between the
|
||||
// second (`nth-child(2)`) and the third (`nth-child(3)`) indicator, we
|
||||
// need to start at 50% of the container.
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&[aria-current="step"] {
|
||||
img {
|
||||
margin-block: 0;
|
||||
border: $iconBorderWidth solid $color-purple-10;
|
||||
}
|
||||
}
|
||||
|
||||
&.isCompleted,
|
||||
&[aria-current="step"] {
|
||||
color: $color-purple-70;
|
||||
|
||||
&::before {
|
||||
background-color: $color-purple-10;
|
||||
}
|
||||
|
||||
img {
|
||||
background-color: $color-purple-70;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { Session } from "next-auth";
|
||||
import styles from "./View.module.scss";
|
||||
import monitorLogo from "../../../images/monitor-logo.webp";
|
||||
import stepGetStartedIcon from "./images/step-counter-get-started.svg";
|
||||
import stepEnterInfoIcon from "./images/step-counter-enter-info.svg";
|
||||
import stepFindExposuresIcon from "./images/step-counter-find-exposures.svg";
|
||||
import stepDoneIcon from "./images/step-counter-done.svg";
|
||||
import { useL10n } from "../../../../hooks/l10n";
|
||||
import { GetStarted } from "./GetStarted";
|
||||
import { FindExposures } from "./FindExposures";
|
||||
import { EnterInfo } from "./EnterInfo";
|
||||
|
||||
export type Props = {
|
||||
user: Session["user"];
|
||||
};
|
||||
|
||||
type StepId = "getStarted" | "enterInfo" | "findExposures";
|
||||
|
||||
export const View = (props: Props) => {
|
||||
const l10n = useL10n();
|
||||
const [currentStep, setCurrentStep] = useState<StepId>("getStarted");
|
||||
|
||||
const currentComponent =
|
||||
currentStep === "findExposures" ? (
|
||||
<FindExposures />
|
||||
) : currentStep === "enterInfo" ? (
|
||||
<EnterInfo
|
||||
user={props.user}
|
||||
onDataSaved={() => setCurrentStep("findExposures")}
|
||||
/>
|
||||
) : (
|
||||
<GetStarted onStart={() => setCurrentStep("enterInfo")} />
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={styles.wrapper}>
|
||||
<header>
|
||||
<Link href="/" className={styles.homeLink}>
|
||||
<Image
|
||||
src={monitorLogo}
|
||||
alt={l10n.getString("main-nav-link-home-label")}
|
||||
width={170}
|
||||
/>
|
||||
</Link>
|
||||
</header>
|
||||
<nav className={styles.stepsWrapper}>
|
||||
<Steps currentStep={currentStep} />
|
||||
</nav>
|
||||
<main className={styles.contentWrapper}>{currentComponent}</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Steps = (props: { currentStep: StepId }) => {
|
||||
const l10n = useL10n();
|
||||
|
||||
return (
|
||||
<ul className={styles.steps}>
|
||||
<li
|
||||
aria-current={props.currentStep === "getStarted" ? "step" : undefined}
|
||||
className={`${styles.getStarted} ${
|
||||
isStepDone("getStarted", props.currentStep) ? styles.isCompleted : ""
|
||||
}`}
|
||||
>
|
||||
<Image
|
||||
src={
|
||||
props.currentStep === "getStarted"
|
||||
? stepGetStartedIcon
|
||||
: stepDoneIcon
|
||||
}
|
||||
alt=""
|
||||
width={22}
|
||||
height={22}
|
||||
/>
|
||||
{l10n.getString("onboarding-steps-get-started-label")}
|
||||
</li>
|
||||
<li
|
||||
aria-current={props.currentStep === "enterInfo" ? "step" : undefined}
|
||||
className={`${styles.enterInfo} ${
|
||||
isStepDone("enterInfo", props.currentStep) ? styles.isCompleted : ""
|
||||
}`}
|
||||
>
|
||||
<Image src={stepEnterInfoIcon} alt="" width={22} height={22} />
|
||||
{l10n.getString("onboarding-steps-enter-info-label")}
|
||||
</li>
|
||||
<li
|
||||
aria-current={
|
||||
props.currentStep === "findExposures" ? "step" : undefined
|
||||
}
|
||||
className={`${styles.findExposures} ${
|
||||
isStepDone("findExposures", props.currentStep)
|
||||
? styles.isCompleted
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<Image src={stepFindExposuresIcon} alt="" width={22} height={22} />
|
||||
{l10n.getString("onboarding-steps-find-exposures-label")}
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
function isStepDone(step: StepId, currentStep: StepId): boolean {
|
||||
if (step === "getStarted") {
|
||||
return currentStep !== "getStarted";
|
||||
}
|
||||
if (step === "enterInfo") {
|
||||
return currentStep === "findExposures";
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
<svg width="417" height="349" viewBox="0 0 417 349" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M181.742 17.6182C236.706 14.43 285.166 57.2929 316.831 102.783C345.986 144.667 357.405 198.476 340.325 246.682C325.016 289.889 280.095 306.964 237.54 323.037C201.184 336.768 163.064 337.433 125.944 325.973C77.1197 310.901 16.4916 299.242 2.60221 249.619C-11.5486 199.061 35.1422 158.833 67.21 117.467C99.8564 75.3535 128.875 20.6849 181.742 17.6182Z" fill="#D9BFFF"/>
|
||||
<g opacity="0.4">
|
||||
<g opacity="0.5">
|
||||
<path d="M149.816 55.9385C149.952 59.3193 149.822 61.6618 149.816 67.6854C149.815 68.2122 149.816 67.1578 149.816 67.6854C149.814 72.4812 149.703 76.3566 149.816 79.4322C149.872 80.9598 151.213 82.4245 152.753 82.369C154.293 82.3135 155.746 80.9598 155.69 79.4322C155.581 76.4427 155.687 72.4174 155.69 67.6854C155.689 68.212 155.69 67.1593 155.69 67.6854C155.695 61.5878 155.828 59.4183 155.69 55.9385C155.629 54.4111 154.292 52.9415 152.753 53.0018C151.213 53.0623 149.755 54.4111 149.816 55.9385Z" fill="#FCD400"/>
|
||||
</g>
|
||||
<g opacity="0.5">
|
||||
<path d="M143.94 70.6245C145.444 70.7053 147.596 70.5633 149.813 70.6245C149.297 70.6107 150.098 70.6323 149.813 70.6245C154.374 70.7472 156.209 70.409 158.623 70.6245C160.066 70.7533 161.43 69.1237 161.56 67.6878C161.688 66.252 160.068 64.8799 158.623 64.7511C156.064 64.5226 154.485 64.8768 149.813 64.7511C149.299 64.7374 150.098 64.7589 149.813 64.7511C147.639 64.691 145.388 64.8289 143.94 64.7511C142.493 64.6734 141.08 66.2482 141.003 67.6878C140.924 69.1274 142.493 70.5469 143.94 70.6245Z" fill="#FCD400"/>
|
||||
</g>
|
||||
<g opacity="0.5">
|
||||
<path d="M343.263 199.697C345.271 199.612 345.516 199.615 349.136 199.697C349.704 199.711 351.755 199.691 352.073 199.697C354.945 199.759 355.968 199.792 357.946 199.697C359.453 199.624 360.953 198.344 360.883 196.76C360.815 195.178 359.452 193.752 357.946 193.823C356.116 193.912 354.834 193.882 352.073 193.823C351.759 193.816 349.703 193.838 349.136 193.823C345.404 193.739 345.421 193.732 343.263 193.823C341.757 193.887 340.266 195.176 340.326 196.76C340.386 198.344 341.756 199.761 343.263 199.697Z" fill="#EAF3F3"/>
|
||||
</g>
|
||||
<g opacity="0.5">
|
||||
<path d="M355.008 205.57C355.039 204.181 354.997 201.679 355.008 199.696C355.005 200.306 355.009 199.358 355.008 199.696C355.03 195.095 354.888 193.324 355.008 190.886C355.081 189.385 353.625 188.02 352.071 187.949C350.516 187.879 349.208 189.384 349.134 190.886C349.01 193.428 349.157 195.017 349.134 199.696C349.132 200.306 349.136 199.359 349.134 199.696C349.123 201.651 349.164 204.216 349.134 205.57C349.101 207.072 350.516 208.475 352.071 208.506C353.626 208.539 354.974 207.072 355.008 205.57Z" fill="#EAF3F3"/>
|
||||
</g>
|
||||
<g opacity="0.5">
|
||||
<path d="M322.704 26.4298C322.781 28.0219 322.542 29.8491 322.704 32.3032C322.682 31.9571 322.727 32.6497 322.704 32.3032C323.1 38.2953 322.704 40.693 322.704 44.0501C322.704 45.4611 324.27 46.9868 325.641 46.9868C327.013 46.9868 328.577 45.4611 328.577 44.0501C328.577 40.5394 328.981 38.4098 328.577 32.3032C328.555 31.9572 328.601 32.6488 328.577 32.3032C328.418 29.877 328.653 27.9841 328.577 26.4298C328.508 25.0204 327.01 23.4224 325.641 23.493C324.271 23.5636 322.634 25.0205 322.704 26.4298Z" fill="#90BFFF"/>
|
||||
</g>
|
||||
<g opacity="0.5">
|
||||
<path d="M319.768 38.1758C322.554 38.4859 323.642 38.4796 328.578 38.1758C329.736 38.1046 330.872 38.2087 331.515 38.1758C332.76 38.112 333.468 38.1758 334.452 38.1758C335.927 38.1758 337.388 36.7284 337.388 35.2391C337.388 33.7497 335.927 32.3024 334.452 32.3024C333.366 32.3024 332.842 32.2344 331.515 32.3024C330.848 32.3365 329.754 32.2301 328.578 32.3024C323.947 32.5873 322.148 32.5674 319.768 32.3024C318.302 32.1392 316.993 33.7588 316.831 35.2391C316.67 36.7194 318.302 38.0127 319.768 38.1758Z" fill="#90BFFF"/>
|
||||
</g>
|
||||
<g opacity="0.5">
|
||||
<path d="M78.9583 273.114C79.0353 274.706 78.7957 276.533 78.9583 278.987C78.936 278.642 78.9807 279.335 78.9583 278.987C79.3545 284.98 78.9583 287.377 78.9583 290.734C78.9583 292.145 80.524 293.671 81.8951 293.671C83.2673 293.671 84.8318 292.145 84.8318 290.734C84.8318 287.224 85.2354 285.094 84.8318 278.987C84.8094 278.641 84.8554 279.332 84.8318 278.987C84.6728 276.561 84.9075 274.669 84.8318 273.114C84.7635 271.705 83.2661 270.107 81.8951 270.177C80.5253 270.249 78.89 271.705 78.9583 273.114Z" fill="#90BFFF"/>
|
||||
</g>
|
||||
<g opacity="0.5">
|
||||
<path d="M76.0201 284.86C78.8046 285.17 79.8939 285.165 84.8302 284.86C85.5097 284.818 87.3865 284.882 87.7669 284.86C89.5022 284.759 89.4809 284.86 90.7037 284.86C92.1773 284.86 93.6404 283.413 93.6404 281.923C93.6404 280.434 92.1773 278.987 90.7037 278.987C89.3595 278.987 89.5944 278.88 87.7669 278.987C87.3785 279.008 85.5163 278.944 84.8302 278.987C80.1996 279.271 78.4001 279.252 76.0201 278.987C74.5544 278.824 73.2449 280.443 73.0834 281.923C72.9218 283.404 74.5544 284.697 76.0201 284.86Z" fill="#90BFFF"/>
|
||||
</g>
|
||||
<g opacity="0.5">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M352.073 135.09C352.279 138.292 357.669 138.285 357.946 135.09C358.592 127.67 361.733 123.799 366.757 123.343C366.335 123.37 367.157 123.337 366.757 123.343C370.094 123.119 370.102 117.47 366.757 117.47C366.314 117.47 367.183 117.437 366.757 117.47C361.413 117.513 359.148 117.859 357.946 111.596C357.891 111.306 358.089 109.425 357.946 108.66C357.814 107.953 358.036 109.102 357.946 108.66C357.338 105.674 352.234 105.617 352.073 108.66C352.048 109.109 352.096 107.882 352.073 108.66C352.042 109.708 352.129 111.063 352.073 111.596C351.937 112.889 352.764 113.324 352.073 114.533C350.854 116.661 346.908 117.529 343.263 117.47C339.929 117.417 339.942 123.045 343.263 123.343C347.573 123.731 348.64 125.329 349.136 126.28C350.659 129.245 351.856 131.743 352.073 135.09ZM366.757 117.47C366.395 117.494 367.093 117.466 366.757 117.47C366.447 117.349 367.155 117.465 366.757 117.47ZM366.757 123.343C366.421 123.343 367.072 123.317 366.757 123.343C366.475 123.476 367.125 123.313 366.757 123.343ZM352.073 120.406C353.147 119.647 354.279 118.566 355.01 117.47C355.793 118.87 356.736 119.562 357.946 120.406C356.863 121.379 355.785 124.92 355.01 126.28C354.758 125.702 355.298 123.905 355.01 123.343C354.521 122.409 352.977 121.063 352.073 120.406Z" fill="#FCD400"/>
|
||||
</g>
|
||||
<g opacity="0.5">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M52.5267 199.698C55.8667 199.477 55.8745 193.825 52.5267 193.825C52.0908 193.825 52.9469 193.792 52.5267 193.825C47.1488 193.869 44.9241 194.266 43.7165 187.951C43.6633 187.675 43.8514 185.739 43.7165 185.014C43.5842 184.304 43.806 185.457 43.7165 185.014C43.1095 182.028 38.0039 181.971 37.8431 185.014C37.8197 185.462 37.8664 184.241 37.8431 185.014C37.8132 186.044 37.8963 187.427 37.8431 187.951C37.7095 189.266 38.5383 189.669 37.8431 190.888C36.6212 193.016 32.6675 193.896 29.0329 193.825C25.698 193.761 25.7123 199.392 29.0329 199.698C33.3498 200.098 34.4096 201.685 34.9064 202.635C36.424 205.6 37.6226 208.096 37.8431 211.445C38.0558 214.644 43.4376 214.637 43.7165 211.445C44.3625 204.017 47.4925 200.146 52.5267 199.698C52.921 199.691 52.1129 199.725 52.5267 199.698ZM52.5267 193.825C52.17 193.848 52.8574 193.821 52.5267 193.825C52.2205 193.708 52.9184 193.819 52.5267 193.825ZM52.5267 199.698C52.1972 199.698 52.8367 199.673 52.5267 199.698C52.2478 199.825 52.8886 199.669 52.5267 199.698ZM37.8431 196.761C38.9171 196.002 40.0495 194.922 40.7798 193.825C41.562 195.226 42.505 195.918 43.7165 196.761C42.6334 197.735 41.5568 201.273 40.7798 202.635C40.5295 202.057 41.0678 200.259 40.7798 199.698C40.2908 198.761 38.7485 197.419 37.8431 196.761Z" fill="#EAF3F3"/>
|
||||
</g>
|
||||
<g opacity="0.5">
|
||||
<path d="M211.11 35.2405C211.11 33.8272 209.796 32.3038 208.173 32.3038C206.552 32.3038 205.236 33.8272 205.236 35.2405C205.236 36.654 206.552 38.1772 208.173 38.1772C209.796 38.1772 211.11 36.654 211.11 35.2405Z" fill="#90BFFF"/>
|
||||
</g>
|
||||
<g opacity="0.5">
|
||||
<path d="M407.871 170.329C407.871 168.916 406.556 167.393 404.935 167.393C403.312 167.393 401.998 168.916 401.998 170.329C401.998 171.743 403.312 173.266 404.935 173.266C406.556 173.266 407.871 171.743 407.871 170.329Z" fill="#90BFFF"/>
|
||||
</g>
|
||||
<g opacity="0.5">
|
||||
<path d="M399.059 73.4179C399.059 72.0014 397.743 70.4811 396.122 70.4811C394.5 70.4811 393.186 72.0014 393.186 73.4179C393.186 74.8344 394.5 76.3546 396.122 76.3546C397.743 76.3546 399.059 74.8344 399.059 73.4179Z" fill="#EAF3F3"/>
|
||||
</g>
|
||||
<g opacity="0.5">
|
||||
<path d="M416.682 99.8483C416.682 98.4349 415.366 96.9116 413.745 96.9116C412.123 96.9116 410.809 98.4349 410.809 99.8483C410.809 101.262 412.123 102.785 413.745 102.785C415.366 102.785 416.682 101.262 416.682 99.8483Z" fill="#4E6AF0"/>
|
||||
</g>
|
||||
<g opacity="0.5">
|
||||
<path d="M381.442 14.6836C381.442 13.2701 380.128 11.7468 378.505 11.7468C376.883 11.7468 375.568 13.2701 375.568 14.6836C375.568 16.097 376.883 17.6203 378.505 17.6203C380.128 17.6203 381.442 16.097 381.442 14.6836Z" fill="#FCD400"/>
|
||||
</g>
|
||||
<g opacity="0.5">
|
||||
<path d="M23.1605 229.064C23.1605 227.647 21.8449 226.127 20.2238 226.127C18.6013 226.127 17.2871 227.647 17.2871 229.064C17.2871 230.481 18.6013 232.001 20.2238 232.001C21.8449 232.001 23.1605 230.481 23.1605 229.064Z" fill="#FCD400"/>
|
||||
</g>
|
||||
<g opacity="0.5">
|
||||
<path d="M114.2 82.228C114.2 80.7157 112.885 79.2913 111.263 79.2913C109.642 79.2913 108.326 80.7157 108.326 82.228C108.326 83.7403 109.642 85.1648 111.263 85.1648C112.885 85.1648 114.2 83.7403 114.2 82.228Z" fill="#EAF3F3"/>
|
||||
</g>
|
||||
<g opacity="0.5">
|
||||
<path d="M131.821 17.6203C131.821 16.1116 130.507 14.6836 128.884 14.6836C127.263 14.6836 125.947 16.1116 125.947 17.6203C125.947 19.1291 127.263 20.5571 128.884 20.5571C130.507 20.5571 131.821 19.1291 131.821 17.6203Z" fill="#4E6AF0"/>
|
||||
</g>
|
||||
<g opacity="0.5">
|
||||
<path d="M293.338 41.114C293.338 39.7845 292.024 38.1772 290.402 38.1772C288.78 38.1772 287.465 39.7845 287.465 41.114C287.465 42.4434 288.78 44.0507 290.402 44.0507C292.024 44.0507 293.338 42.4434 293.338 41.114Z" fill="#EAF3F3"/>
|
||||
</g>
|
||||
<g opacity="0.5">
|
||||
<path d="M263.971 2.93672C263.971 1.5203 262.657 0 261.034 0C259.413 0 258.098 1.5203 258.098 2.93672C258.098 4.35326 259.413 5.87343 261.034 5.87343C262.657 5.87343 263.971 4.35326 263.971 2.93672Z" fill="#FCD400"/>
|
||||
</g>
|
||||
<g opacity="0.5">
|
||||
<path d="M384.377 270.178C384.377 268.764 383.063 267.241 381.441 267.241C379.818 267.241 378.504 268.764 378.504 270.178C378.504 271.591 379.818 273.115 381.441 273.115C383.063 273.115 384.377 271.591 384.377 270.178Z" fill="#FCD400"/>
|
||||
</g>
|
||||
<g opacity="0.5">
|
||||
<path d="M61.3383 132.152C61.3383 130.69 60.0241 129.215 58.4016 129.215C56.7805 129.215 55.4648 130.69 55.4648 132.152C55.4648 133.614 56.7805 135.089 58.4016 135.089C60.0241 135.089 61.3383 133.614 61.3383 132.152Z" fill="#90BFFF"/>
|
||||
</g>
|
||||
<g opacity="0.5">
|
||||
<path d="M363.819 232.001C363.819 230.539 362.503 229.064 360.882 229.064C359.259 229.064 357.945 230.539 357.945 232.001C357.945 233.461 359.259 234.937 360.882 234.937C362.503 234.937 363.819 233.461 363.819 232.001Z" fill="#4E6AF0"/>
|
||||
</g>
|
||||
<g opacity="0.5">
|
||||
<path d="M84.8324 211.444C84.8324 209.979 83.5168 208.507 81.8957 208.507C80.2732 208.507 78.959 209.979 78.959 211.444C78.959 212.909 80.2732 214.38 81.8957 214.38C83.5168 214.38 84.8324 212.909 84.8324 211.444Z" fill="#4E6AF0"/>
|
||||
</g>
|
||||
<g opacity="0.5">
|
||||
<path d="M331.516 164.456C331.516 162.994 330.202 161.519 328.579 161.519C326.957 161.519 325.643 162.994 325.643 164.456C325.643 165.917 326.957 167.393 328.579 167.393C330.202 167.393 331.516 165.917 331.516 164.456Z" fill="#EAF3F3"/>
|
||||
</g>
|
||||
<g opacity="0.5">
|
||||
<path d="M31.9711 270.178C31.9711 268.716 30.6554 267.241 29.0344 267.241C27.4118 267.241 26.0977 268.716 26.0977 270.178C26.0977 271.638 27.4118 273.115 29.0344 273.115C30.6554 273.115 31.9711 271.638 31.9711 270.178Z" fill="#EAF3F3"/>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M233.953 72.8392H172.833C170.045 72.8392 167.785 75.099 167.785 77.8866V120.158C167.785 122.946 170.045 125.206 172.833 125.206H233.953C236.741 125.206 239.001 122.946 239.001 120.158V77.8866C239.001 75.099 236.741 72.8392 233.953 72.8392Z" fill="#140B28"/>
|
||||
<path d="M230.404 70.2367H169.284C166.496 70.2367 164.236 72.4965 164.236 75.2841V117.556C164.236 120.344 166.496 122.603 169.284 122.603H230.404C233.192 122.603 235.452 120.344 235.452 117.556V75.2841C235.452 72.4965 233.192 70.2367 230.404 70.2367Z" fill="white"/>
|
||||
<path d="M230.405 70H169.284C166.366 70 164 72.3657 164 75.284V117.556C164 120.474 166.366 122.84 169.284 122.84H230.405C233.323 122.84 235.689 120.474 235.689 117.556V75.284C235.689 72.3657 233.323 70 230.405 70ZM169.284 70.4732H230.405C233.062 70.4732 235.216 72.6271 235.216 75.284V117.556C235.216 120.213 233.062 122.367 230.405 122.367H169.284C166.627 122.367 164.473 120.213 164.473 117.556V75.284C164.473 72.6271 166.627 70.4732 169.284 70.4732Z" fill="#140B28"/>
|
||||
<path d="M170.441 114.15H227.151C227.674 114.15 228.097 113.726 228.097 113.203V91.3854C228.097 90.8628 227.674 90.439 227.151 90.439H170.441C169.918 90.439 169.494 90.8628 169.494 91.3854V113.203C169.494 113.726 169.918 114.15 170.441 114.15Z" fill="#F770FF"/>
|
||||
<path d="M222.398 95.5524H174.448C174.077 95.5524 173.777 95.8526 173.777 96.2228V96.6171C173.777 96.9873 174.077 97.2875 174.448 97.2875H222.398C222.768 97.2875 223.068 96.9873 223.068 96.6171V96.2228C223.068 95.8526 222.768 95.5524 222.398 95.5524Z" fill="white"/>
|
||||
<path d="M222.398 101.31H174.448C174.077 101.31 173.777 101.61 173.777 101.98V102.374C173.777 102.745 174.077 103.045 174.448 103.045H222.398C222.768 103.045 223.068 102.745 223.068 102.374V101.98C223.068 101.61 222.768 101.31 222.398 101.31Z" fill="white"/>
|
||||
<path d="M211.83 107.067H174.448C174.077 107.067 173.777 107.367 173.777 107.737V108.131C173.777 108.502 174.077 108.802 174.448 108.802H211.83C212.2 108.802 212.5 108.502 212.5 108.131V107.737C212.5 107.367 212.2 107.067 211.83 107.067Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M170.441 85.7025H177.143C177.666 85.7025 178.089 85.2788 178.089 84.7561V78.0542C178.089 77.5315 177.666 77.1078 177.143 77.1078H170.441C169.918 77.1078 169.494 77.5315 169.494 78.0542V84.7561C169.494 85.2788 169.918 85.7025 170.441 85.7025Z" fill="#9059FF"/>
|
||||
<path d="M188.695 76.6956C189.982 76.2711 191.491 76.5649 192.304 77.504C192.757 78.0272 192.829 78.6623 192.523 79.3193C192.256 79.8931 191.701 80.4936 190.861 81.1418C190.523 81.4024 190.136 81.6726 189.701 81.9523L189.658 81.9793L189.674 81.9912C190.955 82.9687 192.162 83.1597 193.673 82.7808L193.808 82.7461C194.267 82.6245 194.626 82.4996 195.417 82.1889L196.2 81.8789C197.648 81.3081 198.477 81.0535 199.485 80.9347C200.885 80.7697 202.231 80.9975 203.616 81.7065C209.6 84.7689 212.634 85.237 217.076 83.5976C217.322 83.5071 217.594 83.6325 217.684 83.8777C217.775 84.1229 217.649 84.3949 217.404 84.4854C214.919 85.4027 212.826 85.666 210.619 85.3256L210.494 85.3059C208.456 84.9717 206.273 84.1292 203.185 82.5491C201.969 81.9271 200.812 81.7312 199.596 81.8746L199.516 81.8843C198.631 81.9972 197.856 82.2415 196.479 82.7861L195.787 83.0606C194.889 83.4135 194.513 83.5422 193.957 83.6854C192.157 84.1487 190.64 83.9185 189.1 82.7436C189.006 82.6718 188.91 82.5927 188.815 82.5075L188.806 82.4998L188.765 82.5243L188.629 82.6032C187.122 83.4734 185.187 84.4281 182.821 85.4701L182.707 85.5205C182.467 85.6256 182.188 85.5167 182.083 85.2774C181.978 85.0381 182.087 84.7589 182.326 84.6539L182.541 84.5595C184.78 83.5704 186.618 82.6641 188.052 81.8435L188.131 81.7978L188.111 81.7749C187.604 81.1699 187.171 80.4735 186.99 79.9123L186.978 79.8751C186.517 78.3731 187.276 77.1638 188.695 76.6956ZM191.589 78.1237C191.046 77.4974 189.939 77.2817 188.992 77.5942C188.032 77.911 187.584 78.6243 187.883 79.5976C188.025 80.0609 188.436 80.7029 188.904 81.2463L188.955 81.3043L188.984 81.2861C189.461 80.9875 189.878 80.7014 190.236 80.4281L190.283 80.3925C191.668 79.3244 192.004 78.6027 191.589 78.1237Z" fill="#9059FF"/>
|
||||
<path d="M300.992 110.288H214.442C210.495 110.288 207.295 113.488 207.295 117.435V177.294C207.295 181.242 210.495 184.442 214.442 184.442H300.992C304.939 184.442 308.139 181.242 308.139 177.294V117.435C308.139 113.488 304.939 110.288 300.992 110.288Z" fill="#140B28"/>
|
||||
<path d="M295.967 106.603H209.417C205.47 106.603 202.27 109.803 202.27 113.75V173.609C202.27 177.556 205.47 180.756 209.417 180.756H295.967C299.914 180.756 303.114 177.556 303.114 173.609V113.75C303.114 109.803 299.914 106.603 295.967 106.603Z" fill="white"/>
|
||||
<path d="M295.968 106.268H209.418C205.286 106.268 201.936 109.618 201.936 113.75V173.609C201.936 177.741 205.286 181.091 209.418 181.091H295.968C300.1 181.091 303.45 177.741 303.45 173.609V113.75C303.45 109.618 300.1 106.268 295.968 106.268ZM209.418 106.938H295.968C299.73 106.938 302.78 109.988 302.78 113.75V173.609C302.78 177.371 299.73 180.421 295.968 180.421H209.418C205.656 180.421 202.606 177.371 202.606 173.609V113.75C202.606 109.988 205.656 106.938 209.418 106.938Z" fill="#140B28"/>
|
||||
<path d="M211.057 168.786H291.362C292.102 168.786 292.702 168.186 292.702 167.446V136.55C292.702 135.81 292.102 135.21 291.362 135.21H211.057C210.317 135.21 209.717 135.81 209.717 136.55V167.446C209.717 168.186 210.317 168.786 211.057 168.786Z" fill="#F770FF"/>
|
||||
<path d="M284.63 142.451H216.731C216.206 142.451 215.781 142.876 215.781 143.4V143.959C215.781 144.483 216.206 144.908 216.731 144.908H284.63C285.155 144.908 285.58 144.483 285.58 143.959V143.4C285.58 142.876 285.155 142.451 284.63 142.451Z" fill="white"/>
|
||||
<path d="M284.63 150.604H216.731C216.206 150.604 215.781 151.029 215.781 151.553V152.111C215.781 152.635 216.206 153.06 216.731 153.06H284.63C285.155 153.06 285.58 152.635 285.58 152.111V151.553C285.58 151.029 285.155 150.604 284.63 150.604Z" fill="white"/>
|
||||
<path d="M269.666 158.756H216.731C216.206 158.756 215.781 159.181 215.781 159.705V160.263C215.781 160.788 216.206 161.213 216.731 161.213H269.666C270.19 161.213 270.615 160.788 270.615 160.263V159.705C270.615 159.181 270.19 158.756 269.666 158.756Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M211.057 128.503H220.548C221.288 128.503 221.888 127.903 221.888 127.163V117.673C221.888 116.933 221.288 116.333 220.548 116.333H211.057C210.317 116.333 209.717 116.933 209.717 117.673V127.163C209.717 127.903 210.317 128.503 211.057 128.503Z" fill="#9059FF"/>
|
||||
<path d="M236.906 115.749C238.728 115.148 240.865 115.564 242.017 116.894C242.658 117.635 242.76 118.534 242.327 119.464C241.949 120.277 241.163 121.127 239.973 122.045C239.494 122.414 238.947 122.797 238.33 123.193L238.27 123.231L238.292 123.248C240.106 124.632 241.815 124.903 243.956 124.366L244.146 124.317C244.796 124.144 245.305 123.968 246.425 123.528L247.533 123.089C249.583 122.281 250.758 121.92 252.185 121.752C254.167 121.518 256.073 121.841 258.035 122.845C266.509 127.181 270.805 127.844 277.095 125.522C277.443 125.394 277.828 125.572 277.956 125.919C278.084 126.266 277.907 126.652 277.559 126.78C274.04 128.079 271.077 128.452 267.951 127.97L267.775 127.941C264.888 127.468 261.797 126.275 257.424 124.038C255.703 123.157 254.065 122.879 252.342 123.083L252.229 123.096C250.975 123.256 249.878 123.602 247.929 124.373L246.948 124.762C245.677 125.262 245.145 125.444 244.357 125.647C241.808 126.303 239.66 125.977 237.479 124.313C237.346 124.212 237.211 124.1 237.076 123.979L237.064 123.968L237.005 124.003L236.812 124.114C234.678 125.347 231.938 126.699 228.588 128.174L228.426 128.245C228.087 128.394 227.692 128.24 227.543 127.901C227.394 127.562 227.548 127.167 227.887 127.018L228.191 126.885C231.362 125.484 233.964 124.201 235.995 123.039L236.107 122.974L236.079 122.941C235.362 122.085 234.748 121.099 234.491 120.304L234.474 120.251C233.822 118.124 234.897 116.412 236.906 115.749ZM241.004 117.771C240.236 116.884 238.668 116.579 237.326 117.021C235.967 117.47 235.333 118.48 235.756 119.858C235.957 120.514 236.539 121.423 237.202 122.193L237.274 122.275L237.316 122.249C237.991 121.826 238.582 121.421 239.089 121.034L239.154 120.984C241.115 119.471 241.591 118.45 241.004 117.771Z" fill="#9059FF"/>
|
||||
<path d="M242.293 139.995H112.146C106.21 139.995 101.398 144.807 101.398 150.742V240.754C101.398 246.689 106.21 251.501 112.146 251.501H242.293C248.229 251.501 253.041 246.689 253.041 240.754V150.742C253.041 144.807 248.229 139.995 242.293 139.995Z" fill="#140B28"/>
|
||||
<path d="M234.74 134.453H104.593C98.6576 134.453 93.8457 139.265 93.8457 145.201V235.212C93.8457 241.148 98.6576 245.96 104.593 245.96H234.74C240.676 245.96 245.488 241.148 245.488 235.212V145.201C245.488 139.265 240.676 134.453 234.74 134.453Z" fill="white"/>
|
||||
<path d="M234.738 133.949H104.591C98.3773 133.949 93.3398 138.987 93.3398 145.201V235.212C93.3398 241.426 98.3773 246.464 104.591 246.464H234.738C240.952 246.464 245.99 241.426 245.99 235.212V145.201C245.99 138.987 240.952 133.949 234.738 133.949ZM104.591 134.957H234.738C240.396 134.957 244.982 139.543 244.982 145.201V235.212C244.982 240.87 240.396 245.456 234.738 245.456H104.591C98.9338 245.456 94.3474 240.87 94.3474 235.212V145.201C94.3474 139.543 98.9338 134.957 104.591 134.957Z" fill="#140B28"/>
|
||||
<path d="M107.056 227.959H227.812C228.925 227.959 229.827 227.057 229.827 225.944V179.486C229.827 178.373 228.925 177.471 227.812 177.471H107.056C105.943 177.471 105.041 178.373 105.041 179.486V225.944C105.041 227.057 105.943 227.959 107.056 227.959Z" fill="#F770FF"/>
|
||||
<path d="M217.692 188.359H115.59C114.801 188.359 114.162 188.998 114.162 189.786V190.626C114.162 191.414 114.801 192.053 115.59 192.053H217.692C218.48 192.053 219.119 191.414 219.119 190.626V189.786C219.119 188.998 218.48 188.359 217.692 188.359Z" fill="white"/>
|
||||
<path d="M217.692 200.618H115.59C114.801 200.618 114.162 201.257 114.162 202.046V202.885C114.162 203.674 114.801 204.313 115.59 204.313H217.692C218.48 204.313 219.119 203.674 219.119 202.885V202.046C219.119 201.257 218.48 200.618 217.692 200.618Z" fill="white"/>
|
||||
<path d="M195.189 212.877H115.59C114.801 212.877 114.162 213.516 114.162 214.304V215.144C114.162 215.932 114.801 216.571 115.59 216.571H195.189C195.977 216.571 196.617 215.932 196.617 215.144V214.304C196.617 213.516 195.977 212.877 195.189 212.877Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M107.056 167.385H121.328C122.441 167.385 123.343 166.483 123.343 165.37V151.099C123.343 149.986 122.441 149.084 121.328 149.084H107.056C105.943 149.084 105.041 149.986 105.041 151.099V165.37C105.041 166.483 105.943 167.385 107.056 167.385Z" fill="#9059FF"/>
|
||||
<path d="M145.925 148.206C148.664 147.303 151.878 147.928 153.609 149.928C154.574 151.042 154.727 152.394 154.076 153.793C153.507 155.015 152.326 156.294 150.536 157.674C149.816 158.229 148.993 158.804 148.066 159.4L147.976 159.457L148.008 159.482C150.737 161.564 153.306 161.971 156.525 161.164L156.812 161.09C157.789 160.831 158.554 160.565 160.239 159.903L161.904 159.244C164.988 158.028 166.753 157.486 168.899 157.233C171.881 156.881 174.746 157.367 177.696 158.877C190.439 165.397 196.9 166.394 206.358 162.903C206.88 162.71 207.46 162.977 207.652 163.499C207.845 164.022 207.578 164.601 207.056 164.794C201.763 166.747 197.308 167.308 192.608 166.583L192.342 166.541C188.002 165.829 183.353 164.035 176.778 160.67C174.19 159.346 171.726 158.929 169.135 159.234L168.966 159.255C167.081 159.495 165.43 160.015 162.5 161.175L161.025 161.76C159.113 162.511 158.313 162.785 157.128 163.09C153.295 164.077 150.066 163.587 146.786 161.085C146.586 160.932 146.383 160.763 146.18 160.582L146.161 160.566L146.073 160.618L145.783 160.786C142.575 162.639 138.454 164.672 133.417 166.89L133.173 166.998C132.663 167.221 132.069 166.99 131.845 166.48C131.621 165.971 131.853 165.376 132.363 165.152L132.819 164.951C137.588 162.845 141.501 160.916 144.554 159.168L144.723 159.071L144.681 159.022C143.602 157.734 142.68 156.251 142.293 155.056L142.268 154.977C141.287 151.778 142.903 149.203 145.925 148.206ZM152.086 151.247C150.931 149.914 148.573 149.454 146.556 150.12C144.512 150.794 143.559 152.313 144.195 154.386C144.497 155.372 145.372 156.739 146.37 157.896L146.478 158.02L146.54 157.981C147.555 157.345 148.444 156.736 149.206 156.154L149.305 156.078C152.254 153.804 152.969 152.267 152.086 151.247Z" fill="#9059FF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M252.588 279.406C233.678 290.714 208.653 286.369 194.289 268.389C178.64 248.799 181.57 220.443 200.834 205.053C220.098 189.663 248.402 193.067 264.051 212.657C277.986 230.099 277.19 254.493 263.248 270.495L295.026 310.272C297.42 313.269 296.932 317.639 293.935 320.033C290.938 322.428 286.567 321.939 284.173 318.942L252.588 279.406ZM207.961 262.66C218.434 275.769 237.551 277.906 250.659 267.434C263.768 256.961 265.905 237.845 255.433 224.736C244.96 211.627 225.844 209.49 212.735 219.962C199.626 230.435 197.489 249.551 207.961 262.66Z" fill="#321C64"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M257.697 274.047C238.817 285.393 213.99 281.295 199.865 263.613C184.475 244.349 187.616 216.256 206.88 200.866C226.144 185.476 254.237 188.617 269.627 207.881C283.33 225.034 282.342 249.187 268.361 265.14L302.424 307.778C304.819 310.775 304.33 315.146 301.333 317.54C298.336 319.935 293.965 319.446 291.571 316.449L257.697 274.047ZM210.961 254.66C221.433 267.769 240.55 269.906 253.658 259.434C266.767 248.961 268.904 229.845 258.432 216.736C247.959 203.627 228.843 201.49 215.734 211.962C202.625 222.435 200.488 241.551 210.961 254.66Z" fill="#9059FF"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 25 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.32504 19.0139C7.97091 19.0139 7.63131 18.8731 7.38094 18.6227L3.37485 14.6166C3.13161 14.3647 2.99701 14.0274 3.00005 13.6773C3.00309 13.3272 3.14353 12.9922 3.39112 12.7447C3.63871 12.4971 3.97363 12.3566 4.32376 12.3536C4.67389 12.3505 5.0112 12.4851 5.26306 12.7284L8.14343 15.6088L16.5776 3.55978C16.782 3.27327 17.0913 3.07905 17.4381 3.01935C17.785 2.95966 18.1414 3.03931 18.4298 3.24099C18.7183 3.44267 18.9154 3.75007 18.9784 4.09634C19.0414 4.44261 18.9652 4.79976 18.7663 5.09011L9.41871 18.4437C9.30746 18.6046 9.16226 18.739 8.99335 18.8375C8.82445 18.936 8.63596 18.9963 8.44122 19.0139C8.40252 19.0159 8.36375 19.0159 8.32504 19.0139V19.0139Z" fill="white"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 789 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11C18.9951 15.4163 15.4163 18.9951 11 19ZM15.531 12.7673C14.346 11.3997 12.7052 13.2399 10.9984 13.2399C9.29261 13.2399 7.65069 11.3997 6.46573 12.7673C6.12973 13.1548 6.10285 13.7193 6.39069 14.1426C7.39533 15.621 9.07533 16.5999 10.9984 16.5999C12.9214 16.5999 14.6014 15.621 15.606 14.1426C15.895 13.7193 15.867 13.1548 15.531 12.7673ZM10.999 12.1997C12.8769 12.1997 14.399 10.6777 14.399 8.79974C14.399 6.92181 12.8769 5.39974 10.999 5.39974C9.12103 5.39974 7.59896 6.92181 7.59896 8.79974C7.59896 10.6777 9.12103 12.1997 10.999 12.1997Z" fill="white"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 792 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.7197 17.308L13.9055 12.4937C14.7793 11.2658 15.1599 9.75444 14.9717 8.25916C14.7836 6.76387 14.0405 5.39386 12.8897 4.42072C11.7389 3.44759 10.2645 2.94237 8.75872 3.00523C7.25295 3.06809 5.82577 3.69444 4.76011 4.76011C3.69444 5.82577 3.06809 7.25295 3.00523 8.75872C2.94237 10.2645 3.44759 11.7389 4.42072 12.8897C5.39386 14.0405 6.76387 14.7836 8.25916 14.9717C9.75444 15.1599 11.2658 14.7793 12.4937 13.9055L17.308 18.7197C17.4963 18.9016 17.7485 19.0022 18.0103 19C18.2721 18.9977 18.5225 18.8927 18.7076 18.7076C18.8927 18.5225 18.9977 18.2721 19 18.0103C19.0022 17.7485 18.9016 17.4963 18.7197 17.308ZM9.02828 13.0219C8.23842 13.0219 7.4663 12.7877 6.80956 12.3488C6.15281 11.91 5.64094 11.2863 5.33868 10.5566C5.03641 9.82683 4.95733 9.02385 5.11142 8.24917C5.26551 7.47449 5.64587 6.7629 6.20438 6.20438C6.7629 5.64587 7.47449 5.26551 8.24917 5.11142C9.02385 4.95733 9.82683 5.03641 10.5566 5.33868C11.2863 5.64094 11.91 6.15281 12.3488 6.80956C12.7877 7.4663 13.0219 8.23842 13.0219 9.02828C13.0219 10.0874 12.6011 11.1032 11.8522 11.8522C11.1032 12.6011 10.0874 13.0219 9.02828 13.0219Z" fill="white"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 1.2 KiB |
|
|
@ -0,0 +1,7 @@
|
|||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.9982 14.2283V8.01616C18.9961 7.67732 18.903 7.34487 18.7282 7.05167C18.5533 6.75847 18.3027 6.51468 18.0011 6.34437L16.3561 5.42211L18.0011 6.34437C18.3031 6.51418 18.5541 6.75787 18.729 7.05118C18.904 7.34449 18.9968 7.67719 18.9982 8.01616V14.2283ZM18.7315 15.1629C18.5585 15.4573 18.3074 15.7013 18.0043 15.8692L15.4257 17.3159C15.4193 17.319 15.4098 17.322 15.4035 17.3251C15.3698 17.3431 15.3348 17.3585 15.2987 17.3714C15.2891 17.3745 15.2764 17.3806 15.2637 17.3837C15.2183 17.3984 15.1715 17.4087 15.124 17.4146C15.1126 17.4171 15.1008 17.4182 15.0891 17.4177C15.0638 17.4212 15.0384 17.4233 15.0129 17.4238C15.0002 17.4238 14.9875 17.4207 14.9748 17.4207C14.9621 17.4207 14.9494 17.4177 14.9367 17.4177C14.8915 17.415 14.8468 17.4077 14.8033 17.3961C14.7945 17.3955 14.7859 17.3934 14.7779 17.3899C14.7397 17.3798 14.7025 17.3664 14.6667 17.3498C14.6572 17.3467 14.6477 17.3405 14.6382 17.3375C14.5972 17.3168 14.5579 17.293 14.5207 17.2665C14.5111 17.2604 14.5048 17.2542 14.4953 17.248C14.4623 17.2227 14.4315 17.1949 14.4032 17.1647C14.3968 17.1586 14.3905 17.1555 14.3873 17.1493C14.3622 17.1208 14.3389 17.091 14.3174 17.0599L12.9488 15.0395C12.4835 15.2034 11.9924 15.2869 11.4975 15.2863C9.12537 15.2863 7.1978 13.4109 7.1978 11.1068C7.1978 8.8027 9.12854 6.92734 11.5007 6.92734C13.8728 6.92734 15.8036 8.8027 15.8036 11.1068C15.8036 11.693 15.6764 12.2727 15.4301 12.8079C15.1839 13.3431 14.8242 13.8218 14.3746 14.2129L15.2764 15.5423L17.0611 14.5398C17.1026 14.5155 17.141 14.4865 17.1754 14.4535C17.1406 14.4883 17.1011 14.5184 17.0579 14.5429L15.2733 15.5454L15.5527 15.9803C15.7117 16.2296 15.9644 16.409 16.2573 16.4804C16.5501 16.5518 16.8601 16.5096 17.1214 16.3628L18.0043 15.8692C18.306 15.6995 18.5567 15.456 18.7315 15.1629ZM11.2721 4.68184C11.2534 4.68988 11.2354 4.69915 11.2181 4.7096L6.87389 7.14634L5.94027 7.6707C5.85423 7.71942 5.78285 7.78921 5.73326 7.8731C5.68366 7.95699 5.65759 8.05205 5.65765 8.14879V14.0648C5.65759 14.1616 5.68366 14.2566 5.73326 14.3405C5.78285 14.4244 5.85423 14.4942 5.94027 14.5429L11.2149 17.5009C11.3726 17.5895 11.4958 17.7263 11.5654 17.8898C11.6349 18.0534 11.6469 18.2347 11.5995 18.4056C11.552 18.5765 11.4479 18.7274 11.3031 18.8349C11.1583 18.9423 10.9811 19.0004 10.7989 19C10.6538 19.0003 10.5113 18.9631 10.3861 18.892L4.99395 15.8692C4.69229 15.6993 4.44177 15.4555 4.26736 15.1622C4.09296 14.8688 4.00078 14.5362 4 14.1975V8.01616C4.00039 7.67735 4.09242 7.34459 4.26686 7.05119C4.4413 6.75779 4.69203 6.51405 4.99395 6.34437L5.11145 6.2796L10.3892 3.32158L10.5067 3.25681C10.8088 3.08854 11.1509 3 11.4991 3C11.8473 3 12.1894 3.08854 12.4915 3.25681L12.609 3.32158L14.2857 4.25926C14.2126 4.21608 14.1396 4.17598 14.0666 4.13897C13.8083 3.99339 13.5158 3.91467 13.2172 3.91035C12.9186 3.90603 12.6239 3.97625 12.3613 4.11429L11.2721 4.68184ZM8.84909 11.1068C8.84909 11.6156 9.00442 12.113 9.29543 12.536C9.58645 12.959 10.0001 13.2887 10.484 13.4835C10.9679 13.6782 11.5005 13.7291 12.0142 13.6298C12.5279 13.5306 12.9998 13.2856 13.3702 12.9258C13.7406 12.566 13.9929 12.1077 14.0951 11.6087C14.1972 11.1097 14.1448 10.5924 13.9443 10.1224C13.7439 9.65232 13.4044 9.25056 12.9689 8.96789C12.5334 8.68523 12.0213 8.53435 11.4975 8.53435C10.7953 8.53501 10.1221 8.80624 9.62554 9.28853C9.12901 9.77082 8.84977 10.4248 8.84909 11.1068Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.003 6.34436L16.358 5.4221C16.358 5.4221 14.9957 4.65715 14.0685 4.13896C13.8102 3.99338 13.5177 3.91466 13.2191 3.91034C12.9205 3.90602 12.6258 3.97625 12.3632 4.11428L11.2168 4.71267C11.3029 4.66508 11.4003 4.64006 11.4994 4.64006C11.5985 4.64006 11.6959 4.66508 11.782 4.71267L17.0598 7.67069C17.1459 7.71941 17.2173 7.7892 17.2669 7.87309C17.3165 7.95699 17.3425 8.05205 17.3425 8.14879V14.0648C17.3425 14.1616 17.3165 14.2566 17.2669 14.3405C17.2173 14.4244 17.1459 14.4942 17.0598 14.5429L15.2752 15.5454L15.5546 15.9803C15.7136 16.2296 15.9663 16.409 16.2592 16.4804C16.552 16.5518 16.862 16.5096 17.1234 16.3628L18.0062 15.8692C18.3081 15.6996 18.5588 15.4558 18.7333 15.1624C18.9077 14.869 18.9997 14.5363 19.0001 14.1975V8.01615C18.9987 7.67718 18.9059 7.34448 18.731 7.05117C18.556 6.75786 18.305 6.51417 18.003 6.34436Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.003 6.34436L16.358 5.4221C16.358 5.4221 14.9957 4.65715 14.0685 4.13896C13.8102 3.99338 13.5177 3.91466 13.2191 3.91034C12.9205 3.90602 12.6258 3.97625 12.3632 4.11428L11.2168 4.71267C11.3029 4.66508 11.4003 4.64006 11.4994 4.64006C11.5985 4.64006 11.6959 4.66508 11.782 4.71267L17.0598 7.67069C17.1459 7.71941 17.2173 7.7892 17.2669 7.87309C17.3165 7.95699 17.3425 8.05205 17.3425 8.14879V14.0648C17.3425 14.1616 17.3165 14.2566 17.2669 14.3405C17.2173 14.4244 17.1459 14.4942 17.0598 14.5429L15.2752 15.5454L15.5546 15.9803C15.7136 16.2296 15.9663 16.409 16.2592 16.4804C16.552 16.5518 16.862 16.5096 17.1234 16.3628L18.0062 15.8692C18.3081 15.6996 18.5588 15.4558 18.7333 15.1624C18.9077 14.869 18.9997 14.5363 19.0001 14.1975V8.01615C18.9987 7.67718 18.9059 7.34448 18.731 7.05117C18.556 6.75786 18.305 6.51417 18.003 6.34436Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.003 6.34436L16.358 5.4221C16.358 5.4221 14.9957 4.65715 14.0685 4.13896C13.8102 3.99338 13.5177 3.91466 13.2191 3.91034C12.9205 3.90602 12.6258 3.97625 12.3632 4.11428L11.2168 4.71267C11.3029 4.66508 11.4003 4.64006 11.4994 4.64006C11.5985 4.64006 11.6959 4.66508 11.782 4.71267L17.0598 7.67069C17.1459 7.71941 17.2173 7.7892 17.2669 7.87309C17.3165 7.95699 17.3425 8.05205 17.3425 8.14879V14.0648C17.3425 14.1616 17.3165 14.2566 17.2669 14.3405C17.2173 14.4244 17.1459 14.4942 17.0598 14.5429L15.2752 15.5454L15.5546 15.9803C15.7136 16.2296 15.9663 16.409 16.2592 16.4804C16.552 16.5518 16.862 16.5096 17.1234 16.3628L18.0062 15.8692C18.3081 15.6996 18.5588 15.4558 18.7333 15.1624C18.9077 14.869 18.9997 14.5363 19.0001 14.1975V8.01615C18.9987 7.67718 18.9059 7.34448 18.731 7.05117C18.556 6.75786 18.305 6.51417 18.003 6.34436Z" fill="white"/>
|
||||
<path opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" d="M15.1474 15.3576L14.3726 14.2163C13.9586 14.578 13.4766 14.8587 12.9531 15.043L13.7756 16.2582C14.2392 15.9652 14.6965 15.665 15.1474 15.3576Z" fill="white"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 6.2 KiB |
|
|
@ -0,0 +1,50 @@
|
|||
<svg width="243" height="195" viewBox="0 0 243 195" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="0.5">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M106.59 11.3185C138.366 9.4651 166.403 35.2179 184.71 61.662C201.565 86.0098 206.736 116.966 196.861 144.989C188.011 170.106 162.441 179.045 137.838 188.389C116.819 196.371 95.0666 196.786 73.6066 190.125C45.3796 181.363 10.4612 175.572 2.43134 146.725C-5.7497 117.335 20.3476 92.6529 38.887 68.6059C57.7609 44.125 76.0263 13.1011 106.59 11.3185Z" fill="#D9BFFF"/>
|
||||
</g>
|
||||
<path d="M97.9143 35.6223C97.9927 37.6205 97.9175 39.0059 97.9143 42.5662C97.9134 42.8776 97.9143 42.2544 97.9143 42.5662C97.9126 45.4008 97.8487 47.6922 97.9143 49.5101C97.9466 50.413 98.757 51.2789 99.6502 51.2461C100.543 51.2133 101.419 50.413 101.386 49.5101C101.323 47.7431 101.385 45.3631 101.386 42.5662C101.385 42.8774 101.386 42.2553 101.386 42.5662C101.389 38.9621 101.466 37.679 101.386 35.6223C101.351 34.7194 100.543 33.8506 99.6502 33.8863C98.757 33.922 97.8787 34.7194 97.9143 35.6223Z" fill="#FCD400"/>
|
||||
<path d="M94.4447 44.3021C95.3337 44.349 96.6067 44.2666 97.9167 44.3021C97.612 44.2941 98.0849 44.3067 97.9167 44.3021C100.612 44.3734 101.698 44.177 103.125 44.3021C103.977 44.3769 104.784 43.3999 104.861 42.5661C104.937 41.7325 103.978 40.905 103.125 40.8302C101.612 40.6975 100.677 40.9031 97.9167 40.8302C97.6128 40.8222 98.0849 40.8347 97.9167 40.8302C96.6323 40.7953 95.3004 40.8753 94.4447 40.8302C93.5898 40.7851 92.7544 41.7303 92.7087 42.5661C92.6622 43.402 93.5898 44.257 94.4447 44.3021Z" fill="#FCD400"/>
|
||||
<path d="M200.339 117.213C201.525 117.164 201.671 117.166 203.811 117.213C204.146 117.222 205.359 117.21 205.547 117.213C207.244 117.249 207.85 117.268 209.018 117.213C209.909 117.171 210.796 116.394 210.754 115.477C210.714 114.562 209.908 113.7 209.018 113.741C207.937 113.793 207.179 113.775 205.547 113.741C205.361 113.737 204.145 113.75 203.811 113.741C201.605 113.692 201.614 113.688 200.339 113.741C199.449 113.778 198.567 114.561 198.603 115.477C198.638 116.394 199.448 117.251 200.339 117.213Z" fill="#EAF3F3"/>
|
||||
<path d="M205.544 120.685C205.563 119.864 205.538 118.385 205.544 117.213C205.543 117.574 205.545 117.013 205.544 117.213C205.558 114.494 205.474 113.447 205.544 112.006C205.587 111.119 204.717 110.311 203.808 110.27C202.899 110.228 202.115 111.118 202.072 112.006C202 113.508 202.086 114.448 202.072 117.213C202.071 117.574 202.073 117.014 202.072 117.213C202.066 118.369 202.09 119.885 202.072 120.685C202.053 121.573 202.899 122.403 203.808 122.421C204.718 122.441 205.525 121.573 205.544 120.685Z" fill="#EAF3F3"/>
|
||||
<path d="M188.185 16.5264C188.229 17.4675 188.093 18.5478 188.185 19.9984C188.172 19.7938 188.198 20.2032 188.185 19.9984C188.41 23.5401 188.185 24.958 188.185 26.9423C188.185 27.7763 189.142 28.6783 189.921 28.6783C190.701 28.6783 191.657 27.7763 191.657 26.9423C191.657 24.8673 191.886 23.6078 191.657 19.9984C191.644 19.7939 191.67 20.2026 191.657 19.9984C191.567 18.5643 191.7 17.4452 191.657 16.5264C191.617 15.6934 190.699 14.7487 189.921 14.7904C189.143 14.8321 188.145 15.6934 188.185 16.5264Z" fill="#90BFFF"/>
|
||||
<path d="M186.45 23.4704C188.096 23.6459 188.741 23.6424 191.658 23.4704C192.341 23.4301 193.013 23.489 193.393 23.4704C194.129 23.4343 194.548 23.4704 195.129 23.4704C196.001 23.4704 196.865 22.5775 196.865 21.7344C196.865 20.8914 196.001 19.9984 195.129 19.9984C194.488 19.9984 194.177 19.96 193.393 19.9984C192.999 20.0178 192.352 19.9575 191.658 19.9984C188.922 20.1597 187.856 20.1485 186.45 19.9984C185.584 19.9061 184.809 20.8965 184.714 21.7344C184.618 22.5723 185.584 23.3781 186.45 23.4704Z" fill="#90BFFF"/>
|
||||
<path d="M47.57 158.877C47.6138 159.818 47.4776 160.899 47.57 162.349C47.5573 162.145 47.5827 162.554 47.57 162.349C47.7951 165.891 47.57 167.309 47.57 169.293C47.57 170.127 48.527 171.029 49.306 171.029C50.0857 171.029 51.042 170.127 51.042 169.293C51.042 167.218 51.2713 165.958 51.042 162.349C51.0293 162.144 51.0554 162.553 51.042 162.349C50.9517 160.915 51.085 159.796 51.042 158.877C51.0032 158.044 50.085 157.1 49.306 157.141C48.5277 157.183 47.5312 158.044 47.57 158.877Z" fill="#90BFFF"/>
|
||||
<path d="M45.8343 165.821C47.4794 165.996 48.1259 165.993 51.0423 165.821C51.4437 165.797 52.5535 165.833 52.7783 165.821C53.8035 165.764 53.7918 165.821 54.5142 165.821C55.3849 165.821 56.2502 164.926 56.2502 164.085C56.2502 163.244 55.3849 162.349 54.5142 162.349C53.7201 162.349 53.8579 162.289 52.7783 162.349C52.5488 162.361 51.4476 162.325 51.0423 162.349C48.3065 162.51 47.2405 162.499 45.8343 162.349C44.9684 162.257 44.1938 163.249 44.0983 164.085C44.0029 164.921 44.9684 165.729 45.8343 165.821Z" fill="#90BFFF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M205.543 79.0218C205.656 80.8095 207.127 80.8059 207.279 79.0218C207.633 74.8788 209.732 72.3322 212.487 72.0778C212.256 72.0931 212.707 72.0742 212.487 72.0778C214.317 71.9525 214.321 70.3419 212.487 70.3419C212.244 70.3419 212.721 70.3237 212.487 70.3419C209.557 70.3658 207.937 70.367 207.279 66.8699C207.248 66.7079 207.357 65.561 207.279 65.1339C207.206 64.7396 207.328 65.381 207.279 65.1339C206.945 63.4667 205.631 63.4348 205.543 65.1339C205.529 65.3847 205.556 64.6999 205.543 65.1339C205.526 65.7192 205.574 66.572 205.543 66.8699C205.468 67.5918 205.922 67.9309 205.543 68.6059C204.874 69.7943 202.333 70.3752 200.335 70.3419C198.507 70.3122 198.514 71.9112 200.335 72.0778C202.698 72.2945 203.535 73.2826 203.807 73.8138C204.642 75.4697 205.424 77.1528 205.543 79.0218ZM212.487 70.3419C212.288 70.3556 212.671 70.3397 212.487 70.3419C212.317 70.2745 212.705 70.339 212.487 70.3419ZM212.487 72.0778C212.303 72.0778 212.66 72.0634 212.487 72.0778C212.333 72.1518 212.689 72.0612 212.487 72.0778ZM205.543 72.0778C206.132 71.6539 205.143 70.9542 205.543 70.3419C205.972 71.1238 206.615 71.6061 207.279 72.0778C206.685 72.6206 205.968 73.0544 205.543 73.8138C205.405 73.4914 205.701 72.3916 205.543 72.0778C206.039 72.4445 205.275 71.5561 205.543 72.0778Z" fill="#FCD400"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.2097 115.477C32.0409 115.354 32.0452 113.741 30.2097 113.741C29.9707 113.741 30.4401 113.723 30.2097 113.741C27.2612 113.766 25.6638 113.796 25.0017 110.269C24.9726 110.115 25.0757 108.938 25.0017 108.533C24.9292 108.137 25.0508 108.781 25.0017 108.533C24.6689 106.866 23.3539 106.834 23.2657 108.533C23.2529 108.784 23.2785 108.102 23.2657 108.533C23.2494 109.108 23.2949 109.977 23.2657 110.269C23.1925 111.004 23.6469 111.325 23.2657 112.005C22.5958 113.194 20.0504 113.781 18.0578 113.741C16.2294 113.706 16.2373 115.306 18.0578 115.477C20.4245 115.701 21.2574 116.683 21.5298 117.213C22.3618 118.869 23.1448 120.552 23.2657 122.421C23.3824 124.208 24.8488 124.204 25.0017 122.421C25.3559 118.274 27.4497 115.727 30.2097 115.477C30.4259 115.474 29.9828 115.493 30.2097 115.477ZM30.2097 113.741C30.0141 113.754 30.391 113.739 30.2097 113.741C30.0418 113.676 30.4244 113.739 30.2097 113.741ZM30.2097 115.477C30.029 115.477 30.3796 115.464 30.2097 115.477C30.0568 115.548 30.4081 115.461 30.2097 115.477ZM23.2657 115.477C23.8546 115.053 22.8654 114.355 23.2657 113.741C23.6946 114.524 24.3375 115.006 25.0017 115.477C24.4079 116.021 23.6917 116.453 23.2657 117.213C23.1285 116.891 23.4236 115.79 23.2657 115.477C23.7621 115.845 22.9976 114.954 23.2657 115.477Z" fill="#EAF3F3"/>
|
||||
<path d="M123.954 21.7344C123.954 20.8989 123.178 19.9984 122.218 19.9984C121.26 19.9984 120.482 20.8989 120.482 21.7344C120.482 22.5699 121.26 23.4704 122.218 23.4704C123.178 23.4704 123.954 22.5699 123.954 21.7344Z" fill="#90BFFF"/>
|
||||
<path d="M236.792 99.8536C236.792 99.0178 236.015 98.1176 235.056 98.1176C234.097 98.1176 233.32 99.0178 233.32 99.8536C233.32 100.689 234.097 101.59 235.056 101.59C236.015 101.59 236.792 100.689 236.792 99.8536Z" fill="#90BFFF"/>
|
||||
<path d="M231.585 44.3022C231.585 43.4649 230.808 42.5662 229.849 42.5662C228.89 42.5662 228.113 43.4649 228.113 44.3022C228.113 45.1395 228.89 46.0382 229.849 46.0382C230.808 46.0382 231.585 45.1395 231.585 44.3022Z" fill="#EAF3F3"/>
|
||||
<path d="M242.001 58.19C242.001 57.3545 241.224 56.454 240.265 56.454C239.306 56.454 238.529 57.3545 238.529 58.19C238.529 59.0256 239.306 59.926 240.265 59.926C241.224 59.926 242.001 59.0256 242.001 58.19Z" fill="#4E6AF0"/>
|
||||
<path d="M221.169 9.58251C221.169 8.74697 220.392 7.84653 219.433 7.84653C218.474 7.84653 217.697 8.74697 217.697 9.58251C217.697 10.4181 218.474 11.3185 219.433 11.3185C220.392 11.3185 221.169 10.4181 221.169 9.58251Z" fill="#FCD400"/>
|
||||
<path d="M14.5872 132.837C14.5872 132 13.8095 131.101 12.8512 131.101C11.8921 131.101 11.1152 132 11.1152 132.837C11.1152 133.675 11.8921 134.573 12.8512 134.573C13.8095 134.573 14.5872 133.675 14.5872 132.837Z" fill="#FCD400"/>
|
||||
<path d="M66.6673 47.7741C66.6673 46.8802 65.8904 46.0381 64.9313 46.0381C63.973 46.0381 63.1953 46.8802 63.1953 47.7741C63.1953 48.6681 63.973 49.5101 64.9313 49.5101C65.8904 49.5101 66.6673 48.6681 66.6673 47.7741Z" fill="#EAF3F3"/>
|
||||
<path d="M77.0833 11.3185C77.0833 10.4266 76.3064 9.58252 75.3473 9.58252C74.389 9.58252 73.6113 10.4266 73.6113 11.3185C73.6113 12.2104 74.389 13.0545 75.3473 13.0545C76.3064 13.0545 77.0833 12.2104 77.0833 11.3185Z" fill="#4E6AF0"/>
|
||||
<path d="M170.825 25.2064C170.825 24.4205 170.049 23.4704 169.089 23.4704C168.131 23.4704 167.354 24.4205 167.354 25.2064C167.354 25.9923 168.131 26.9423 169.089 26.9423C170.049 26.9423 170.825 25.9923 170.825 25.2064Z" fill="#EAF3F3"/>
|
||||
<path d="M153.466 2.63859C153.466 1.8013 152.689 0.902603 151.73 0.902603C150.772 0.902603 149.994 1.8013 149.994 2.63859C149.994 3.47595 150.772 4.37457 151.73 4.37457C152.689 4.37457 153.466 3.47595 153.466 2.63859Z" fill="#FCD400"/>
|
||||
<path d="M222.906 157.141C222.906 156.305 222.129 155.405 221.17 155.405C220.21 155.405 219.434 156.305 219.434 157.141C219.434 157.976 220.21 158.877 221.17 158.877C222.129 158.877 222.906 157.976 222.906 157.141Z" fill="#FCD400"/>
|
||||
<path d="M37.1556 77.2858C37.1556 76.4218 36.3787 75.5499 35.4196 75.5499C34.4613 75.5499 33.6836 76.4218 33.6836 77.2858C33.6836 78.1499 34.4613 79.0218 35.4196 79.0218C36.3787 79.0218 37.1556 78.1499 37.1556 77.2858Z" fill="#90BFFF"/>
|
||||
<path d="M210.753 134.573C210.753 133.709 209.975 132.837 209.017 132.837C208.058 132.837 207.281 133.709 207.281 134.573C207.281 135.437 208.058 136.309 209.017 136.309C209.975 136.309 210.753 135.437 210.753 134.573Z" fill="#4E6AF0"/>
|
||||
<path d="M51.0423 124.157C51.0423 123.291 50.2646 122.421 49.3063 122.421C48.3472 122.421 47.5703 123.291 47.5703 124.157C47.5703 125.023 48.3472 125.893 49.3063 125.893C50.2646 125.893 51.0423 125.023 51.0423 124.157Z" fill="#4E6AF0"/>
|
||||
<path d="M193.394 96.3816C193.394 95.5176 192.617 94.6457 191.658 94.6457C190.699 94.6457 189.922 95.5176 189.922 96.3816C189.922 97.2449 190.699 98.1176 191.658 98.1176C192.617 98.1176 193.394 97.2449 193.394 96.3816Z" fill="#EAF3F3"/>
|
||||
<path d="M19.7942 157.141C19.7942 156.277 19.0165 155.405 18.0582 155.405C17.0991 155.405 16.3223 156.277 16.3223 157.141C16.3223 158.004 17.0991 158.877 18.0582 158.877C19.0165 158.877 19.7942 158.004 19.7942 157.141Z" fill="#EAF3F3"/>
|
||||
<path d="M203.809 33.1503H134.37C130.978 33.1503 127.426 36.7386 127.426 40.0942V88.7018C127.426 92.0574 130.978 93.9097 134.37 93.9097H203.809C207.201 93.9097 210.753 92.0574 210.753 88.7018V40.0942C210.753 36.7386 207.201 33.1503 203.809 33.1503ZM134.37 33.1503H203.809C206.897 33.1503 210.753 37.0391 210.753 40.0942V88.7018C210.753 91.7569 206.897 93.9097 203.809 93.9097H134.37C131.281 93.9097 127.426 91.7569 127.426 88.7018V40.0942C127.426 37.0391 131.281 33.1503 134.37 33.1503Z" fill="#140B28"/>
|
||||
<path d="M209.016 35.6223H137.841C134.647 35.6223 132.633 37.5959 132.633 40.8302V91.1737C132.633 94.4081 134.647 96.3817 137.841 96.3817H209.016C212.21 96.3817 214.224 94.4081 214.224 91.1737V40.8302C214.224 37.5959 212.21 35.6223 209.016 35.6223Z" fill="#140B28"/>
|
||||
<path d="M203.809 32.1503H132.634C129.44 32.1503 127.426 34.1239 127.426 37.3583V87.7018C127.426 90.9361 129.44 92.9097 132.634 92.9097H203.809C207.003 92.9097 209.017 90.9361 209.017 87.7018V37.3583C209.017 34.1239 207.003 32.1503 203.809 32.1503Z" fill="white"/>
|
||||
<path d="M156.652 41.19C157.939 40.7656 159.448 41.0595 160.261 41.9986C160.714 42.5217 160.786 43.1568 160.48 43.8138C160.213 44.3876 159.658 44.9881 158.818 45.6363C158.48 45.8969 158.093 46.167 157.658 46.4467L157.615 46.4737L157.631 46.4856C158.912 47.4631 160.119 47.6542 161.63 47.2753L161.765 47.2405C162.224 47.1189 162.583 46.994 163.374 46.6833L164.157 46.3734C165.605 45.8026 166.434 45.5479 167.442 45.4291C168.842 45.2641 170.187 45.492 171.573 46.2011C177.557 49.2634 180.591 49.7313 185.033 48.092C185.278 48.0015 185.55 48.1269 185.641 48.3721C185.731 48.6173 185.606 48.8894 185.361 48.9798C182.875 49.8971 180.783 50.1605 178.576 49.8201L178.451 49.8003C176.413 49.4661 174.229 48.6236 171.142 47.0435C169.926 46.4215 168.769 46.2256 167.553 46.369L167.473 46.3787C166.588 46.4916 165.812 46.7359 164.436 47.2805L163.744 47.5551C162.846 47.908 162.47 48.0366 161.914 48.1798C160.114 48.6431 158.597 48.413 157.057 47.2381C156.963 47.1663 156.867 47.0872 156.772 47.002L156.763 46.9942L156.722 47.0187L156.586 47.0976C155.079 47.9678 153.144 48.9225 150.778 49.9645L150.664 50.0149C150.424 50.12 150.145 50.0111 150.04 49.7719C149.935 49.5326 150.044 49.2534 150.283 49.1484L150.498 49.0539C152.737 48.0648 154.575 47.1586 156.009 46.338L156.088 46.2923L156.068 46.2693C155.561 45.6643 155.128 44.968 154.947 44.4069L154.935 44.3696C154.474 42.8676 155.233 41.6583 156.652 41.19ZM159.546 42.6181C159.003 41.9918 157.896 41.7762 156.949 42.0887C155.989 42.4055 155.541 43.1188 155.84 44.092C155.982 44.5553 156.393 45.1973 156.861 45.7407L156.912 45.7988L156.941 45.7805C157.418 45.4819 157.835 45.1958 158.193 44.9225L158.24 44.887C159.625 43.8188 159.961 43.0972 159.546 42.6181Z" fill="#9059FF"/>
|
||||
<path d="M136.105 84.2298H200.336C200.94 84.2298 202.072 83.1061 202.072 82.4938V58.1901C202.072 57.5778 200.94 56.4541 200.336 56.4541H136.105C135.501 56.4541 134.369 57.5778 134.369 58.1901V82.4938C134.369 83.1061 135.501 84.2298 136.105 84.2298Z" fill="#F770FF"/>
|
||||
<path d="M196.867 61.662H139.58V63.398H196.867V61.662Z" fill="white"/>
|
||||
<path d="M196.867 68.6059H139.58V70.3419H196.867V68.6059Z" fill="white"/>
|
||||
<path d="M184.712 75.5499H139.577V77.2858H184.712V75.5499Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M136.105 51.2461H143.049C143.682 51.2461 144.785 50.1436 144.785 49.5101V42.5662C144.785 41.9328 143.682 40.8302 143.049 40.8302H136.105C135.472 40.8302 134.369 41.9328 134.369 42.5662V49.5101C134.369 50.1436 135.472 51.2461 136.105 51.2461Z" fill="#9059FF"/>
|
||||
<path d="M160.405 59.926H52.7737C47.8811 59.926 44.0938 63.7082 44.0938 68.6059V143.253C44.0938 148.151 47.8811 151.933 52.7737 151.933H160.405C165.297 151.933 169.085 148.151 169.085 143.253V68.6059C169.085 63.7082 165.297 59.926 160.405 59.926Z" fill="#140B28"/>
|
||||
<path d="M153.461 54.7181H45.8303C40.9378 54.7181 37.1504 58.5002 37.1504 63.398V138.045C37.1504 142.943 40.9378 146.725 45.8303 146.725H153.461C158.354 146.725 162.141 142.943 162.141 138.045V63.398C162.141 58.5002 158.354 54.7181 153.461 54.7181Z" fill="white"/>
|
||||
<path d="M80.1382 67.261C81.9051 66.678 83.9786 67.0817 85.0957 68.3717C85.7179 69.0903 85.8166 69.9628 85.3965 70.8654C85.0296 71.6536 84.2674 72.4784 83.1128 73.3689C82.6487 73.7269 82.1176 74.0979 81.5194 74.482L81.4611 74.5192L81.4822 74.5355C83.2425 75.8782 84.8999 76.1408 86.9766 75.6203L87.1616 75.5725C87.7921 75.4054 88.2853 75.2338 89.3722 74.8071L90.4468 74.3814C92.4359 73.5972 93.575 73.2474 94.9595 73.0842C96.8827 72.8576 98.7313 73.1707 100.635 74.1446C108.855 78.3514 113.023 78.9941 119.125 76.7422C119.462 76.6179 119.835 76.7902 119.96 77.127C120.084 77.4637 119.912 77.8375 119.575 77.9618C116.161 79.2219 113.286 79.5837 110.254 79.116L110.083 79.0888C107.283 78.6298 104.284 77.4724 100.042 75.3019C98.3726 74.4475 96.7833 74.1783 95.1117 74.3753L95.0023 74.3887C93.7863 74.5438 92.7213 74.8794 90.831 75.6274L89.8795 76.0046C88.646 76.4894 88.13 76.666 87.3657 76.8628C84.893 77.4992 82.8096 77.1831 80.6937 75.5692C80.5645 75.4706 80.4336 75.3619 80.3025 75.2449L80.2906 75.2342L80.2334 75.2679L80.0469 75.3762C77.9769 76.5716 75.3188 77.8831 72.0689 79.3144L71.9115 79.3837C71.5828 79.528 71.1993 79.3785 71.055 79.0498C70.9107 78.7211 71.0602 78.3376 71.3889 78.1933L71.6835 78.0636C74.7598 76.7048 77.2843 75.46 79.2538 74.3327L79.3626 74.27L79.3359 74.2384C78.6397 73.4073 78.0446 72.4508 77.7952 71.68L77.779 71.6288C77.1459 69.5655 78.1889 67.9042 80.1382 67.261ZM84.1129 69.2228C83.3679 68.3625 81.8466 68.0663 80.5456 68.4956C79.2268 68.9307 78.6116 69.9105 79.0219 71.2475C79.2172 71.8839 79.7815 72.7658 80.4253 73.5122L80.495 73.5921L80.5352 73.567C81.1899 73.1567 81.7633 72.7638 82.2552 72.3883L82.3189 72.3395C84.2214 70.8721 84.6828 69.8809 84.1129 69.2228Z" fill="#9059FF"/>
|
||||
<path d="M49.3024 132.837H148.253C149.167 132.837 149.989 132.02 149.989 131.101V92.9097C149.989 91.9913 149.167 91.1737 148.253 91.1737H49.3024C48.3889 91.1737 47.5664 91.9913 47.5664 92.9097V131.101C47.5664 132.02 48.3889 132.837 49.3024 132.837Z" fill="#F770FF"/>
|
||||
<path d="M139.573 99.8536H56.2457C55.5938 99.8536 54.5098 100.849 54.5098 101.59C54.5098 102.33 55.5938 103.326 56.2457 103.326H139.573C140.225 103.326 141.309 102.33 141.309 101.59C141.309 100.849 140.225 99.8536 139.573 99.8536Z" fill="white"/>
|
||||
<path d="M139.573 110.27H56.2457C55.5938 110.27 54.5098 111.265 54.5098 112.006C54.5098 112.746 55.5938 113.741 56.2457 113.741H139.573C140.225 113.741 141.309 112.746 141.309 112.006C141.309 111.265 140.225 110.27 139.573 110.27Z" fill="white"/>
|
||||
<path d="M120.477 120.685H56.2457C55.5984 120.685 54.5098 121.681 54.5098 122.421C54.5098 123.162 55.5984 124.157 56.2457 124.157H120.477C121.124 124.157 122.213 123.162 122.213 122.421C122.213 121.681 121.124 120.685 120.477 120.685Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.3024 82.4938H61.4543C62.4044 82.4938 63.1903 81.708 63.1903 80.7578V68.6059C63.1903 67.6558 62.4044 66.87 61.4543 66.87H49.3024C48.3523 66.87 47.5664 67.6558 47.5664 68.6059V80.7578C47.5664 81.708 48.3523 82.4938 49.3024 82.4938Z" fill="#9059FF"/>
|
||||
<path d="M199.469 133.705C199.469 152.973 184.222 168.425 165.617 168.425C147.013 168.425 131.766 152.973 131.766 133.705C131.766 114.438 147.013 98.9856 165.617 98.9856C184.222 98.9856 199.469 114.438 199.469 133.705Z" fill="#9059FF" stroke="#9059FF" stroke-width="8.67991"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M151.723 142.849C149.472 136.993 148.972 129.574 149.323 120.379L165.616 116.138L181.909 120.379C182.26 129.574 181.759 136.993 179.509 142.849C177.268 148.68 173.187 153.224 165.616 156.306C158.045 153.224 153.963 148.68 151.723 142.849ZM146.161 117.72L165.616 112.656L185.071 117.72C186.152 138.535 183.774 153.163 165.616 159.914C147.458 153.163 145.08 138.535 146.161 117.72ZM155.887 125.496L165.615 122.783V148.099C156.536 144.483 155.347 136.647 155.887 125.496Z" fill="#F9F9FA"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 19 KiB |
|
|
@ -0,0 +1,23 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
import { getServerSession } from "next-auth";
|
||||
import { SignInButton } from "../../../../(nextjs_migration)/components/client/SignInButton";
|
||||
import { redirect } from "next/navigation";
|
||||
import { hasSetupOnerep } from "../../../../functions/universal/user";
|
||||
import { View } from "./View";
|
||||
|
||||
export default async function Onboarding() {
|
||||
const session = await getServerSession();
|
||||
|
||||
if (!session) {
|
||||
return <SignInButton autoSignIn={true} />;
|
||||
}
|
||||
|
||||
if (hasSetupOnerep(session.user)) {
|
||||
return redirect("/user/dashboard/");
|
||||
}
|
||||
|
||||
return <View user={session.user} />;
|
||||
}
|
||||
|
|
@ -122,12 +122,9 @@ export const DashboardTopBanner = (props: DashboardTopBannerProps) => {
|
|||
<h3>{content.headline}</h3>
|
||||
<p>{content.description}</p>
|
||||
<span className={styles.cta}>
|
||||
<Button
|
||||
type="primary"
|
||||
small
|
||||
content={content.cta.content}
|
||||
onClick={content.cta.onClick}
|
||||
/>
|
||||
<Button type="primary" small onClick={content.cta.onClick}>
|
||||
{content.cta.content}
|
||||
</Button>
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -5,9 +5,25 @@
|
|||
import { getServerSession } from "next-auth";
|
||||
import styles from "./page.module.scss";
|
||||
import { Toolbar } from "../../../../../components/client/toolbar/Toolbar";
|
||||
import {
|
||||
canSubscribeToPremium,
|
||||
hasSetupOnerep,
|
||||
} from "../../../../../functions/universal/user";
|
||||
import { redirect } from "next/navigation";
|
||||
import { getCountryCode } from "../../../../../functions/server/getCountryCode";
|
||||
import { headers } from "next/headers";
|
||||
|
||||
export default async function DashboardPage() {
|
||||
const session = await getServerSession();
|
||||
const headersList = headers();
|
||||
const countryCode = getCountryCode(headersList);
|
||||
|
||||
if (
|
||||
!hasSetupOnerep(session?.user) &&
|
||||
canSubscribeToPremium({ user: session?.user, countryCode: countryCode })
|
||||
) {
|
||||
return redirect("/user/welcome/");
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.wrapper}>
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
|
||||
import { Shell as ShellEl } from "./Shell";
|
||||
import { getL10n } from "../functions/server/l10n";
|
||||
import { Toolbar } from "../components/client/toolbar/Toolbar";
|
||||
import { getL10n } from "../../functions/server/l10n";
|
||||
import { Toolbar } from "../../components/client/toolbar/Toolbar";
|
||||
|
||||
const meta: Meta<typeof ShellEl> = {
|
||||
title: "Pages/Shell",
|
||||
|
|
|
|||
|
|
@ -256,10 +256,9 @@ export const ExposureCard = (props: ExposureCardProps) => {
|
|||
</dl>
|
||||
</div>
|
||||
<span className={styles.fixItBtn}>
|
||||
<Button
|
||||
type={"primary"}
|
||||
content={l10n.getString("exposure-card-cta")}
|
||||
/>
|
||||
<Button type={"primary"}>
|
||||
{l10n.getString("exposure-card-cta")}
|
||||
</Button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
@import "../../../tokens";
|
||||
|
||||
.dialog {
|
||||
background-color: $color-white;
|
||||
width: calc(100% - (2 * $spacing-md));
|
||||
max-width: $content-lg;
|
||||
max-height: calc(100% - (2 * $spacing-md));
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $spacing-xl;
|
||||
border-radius: $border-radius-md;
|
||||
padding: $layout-sm;
|
||||
@media screen and (min-width: $screen-lg) {
|
||||
padding: $layout-xl;
|
||||
}
|
||||
|
||||
.illustrationWrapper {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
font: $text-title-2xs;
|
||||
text-align: center;
|
||||
color: $color-grey-50;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
import { ReactNode, useRef } from "react";
|
||||
import { AriaDialogProps, useDialog } from "react-aria";
|
||||
import styles from "./Dialog.module.scss";
|
||||
|
||||
export type Props = {
|
||||
children: ReactNode;
|
||||
title?: ReactNode;
|
||||
illustration?: ReactNode;
|
||||
} & AriaDialogProps;
|
||||
|
||||
export const Dialog = ({
|
||||
children,
|
||||
title,
|
||||
illustration,
|
||||
...otherProps
|
||||
}: Props) => {
|
||||
const dialogRef = useRef<HTMLDivElement>(null);
|
||||
const { dialogProps, titleProps } = useDialog(otherProps, dialogRef);
|
||||
|
||||
return (
|
||||
<div {...dialogProps} ref={dialogRef} className={styles.dialog}>
|
||||
{illustration && (
|
||||
<div className={styles.illustrationWrapper}>{illustration}</div>
|
||||
)}
|
||||
{title && (
|
||||
<h3 {...titleProps} className={styles.title}>
|
||||
{title}
|
||||
</h3>
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
@import "../../../tokens";
|
||||
|
||||
.underlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-color: rgba($color-black, 0.5);
|
||||
// Overlap all regular content on the site with a z-index,
|
||||
// the highest of which (at the time of writing) are the <Steps> in the
|
||||
// onboarding flow, whose images have a z-index of 1:
|
||||
z-index: 2;
|
||||
|
||||
.childrenWrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
import { ReactElement, useRef } from "react";
|
||||
import { AriaModalOverlayProps, Overlay, useModalOverlay } from "react-aria";
|
||||
import { OverlayTriggerState } from "react-stately";
|
||||
import styles from "./ModalOverlay.module.scss";
|
||||
import { Props as DialogProps } from "./Dialog";
|
||||
|
||||
export type Props = {
|
||||
// Sort-of force passing a `<Dialog>` element
|
||||
children: ReactElement<DialogProps>;
|
||||
state: OverlayTriggerState;
|
||||
} & AriaModalOverlayProps;
|
||||
|
||||
export const ModalOverlay = ({ state, children, ...otherProps }: Props) => {
|
||||
const modalRef = useRef<HTMLDivElement>(null);
|
||||
const { modalProps, underlayProps } = useModalOverlay(
|
||||
otherProps,
|
||||
state,
|
||||
modalRef
|
||||
);
|
||||
|
||||
return (
|
||||
<Overlay>
|
||||
<div className={styles.underlay} {...underlayProps}>
|
||||
<div {...modalProps} ref={modalRef} className={styles.childrenWrapper}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</Overlay>
|
||||
);
|
||||
};
|
||||
|
|
@ -2,19 +2,19 @@
|
|||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
import React, { HTMLAttributes } from "react";
|
||||
import React, { HTMLAttributes, ReactNode } from "react";
|
||||
import styles from "./button.module.scss";
|
||||
|
||||
export type Props = {
|
||||
type: "primary" | "secondary";
|
||||
content: string;
|
||||
children: ReactNode;
|
||||
destructive?: boolean;
|
||||
small?: boolean;
|
||||
onClick?: () => void;
|
||||
};
|
||||
|
||||
export const Button = (props: Props & HTMLAttributes<HTMLButtonElement>) => {
|
||||
const { type, content, destructive, small, ...otherProps } = props;
|
||||
const { type, children, destructive, small, ...otherProps } = props;
|
||||
|
||||
const classes = [
|
||||
styles.button,
|
||||
|
|
@ -27,7 +27,7 @@ export const Button = (props: Props & HTMLAttributes<HTMLButtonElement>) => {
|
|||
|
||||
return (
|
||||
<button {...otherProps} className={classes}>
|
||||
{content}
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ type Story = StoryObj<typeof Button>;
|
|||
export const Primary: Story = {
|
||||
args: {
|
||||
type: "primary",
|
||||
content: "Button",
|
||||
children: "Button",
|
||||
destructive: false,
|
||||
small: false,
|
||||
},
|
||||
|
|
@ -26,6 +26,6 @@ export const Primary: Story = {
|
|||
export const Secondary: Story = {
|
||||
args: {
|
||||
type: "secondary",
|
||||
content: "Button",
|
||||
children: "Button",
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
import { Session } from "next-auth";
|
||||
|
||||
export function hasPremium(user?: Session["user"]): boolean {
|
||||
return user?.fxa?.subscriptions.includes("monitor") ?? false;
|
||||
}
|
||||
|
||||
export function canSubscribeToPremium(params: {
|
||||
user?: Session["user"];
|
||||
countryCode: string;
|
||||
}): boolean {
|
||||
return hasPremium(params.user) && params.countryCode.toLowerCase() === "us";
|
||||
}
|
||||
|
||||
export function hasSetupOnerep(
|
||||
user?: Session["user"]
|
||||
): user is Session["user"] & { subscriber: { onerep_profile_id: number } } {
|
||||
return typeof user?.subscriber?.onerep_profile_id === "number";
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "jest.setup.ts"],
|
||||
"compilerOptions": {
|
||||
/* Visit https://aka.ms/tsconfig to read more about this file */
|
||||
/* Projects */
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче