rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: import svg files from stylekit (#844)

Browse Source 
* chore: install stylekit with its new name

* feat: import svg files from stylekit

* feat: import the remaining svgs from stylekit

* fix: import 'warning' icon from stylekit

* chore: import warning icon from stylekit

* chore: bump stylekit version

* chore: update sn dependencies
This commit is contained in:
Vardan Hakobyan
2022-02-15 12:12:34 +04:00
committed by GitHub
parent 0e1b94b5cd
commit 00d57aa69d
89 changed files with 1034 additions and 1476 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/purchaseFlow/PurchaseFlowView.tsx
View File

@@ -5,7 +5,7 @@ import { observer } from 'mobx-react-lite';
import { FunctionComponent } from 'preact';
import { CreateAccount } from './panes/CreateAccount';
import { SignIn } from './panes/SignIn';
import SNLogoFull from '../../svg/ic-sn-logo-full.svg';
import { SNLogoFull } from '@standardnotes/stylekit';
type PaneSelectorProps = {
currentPane: PurchaseFlowPane;

24
app/assets/javascripts/purchaseFlow/panes/CreateAccount.tsx
View File

@@ -5,13 +5,15 @@ import { PurchaseFlowPane } from '@/ui_models/app_state/purchase_flow_state';
import { observer } from 'mobx-react-lite';
import { FunctionComponent } from 'preact';
import { useEffect, useRef, useState } from 'preact/hooks';
import Illustration from '../../../svg/create-account-illustration.svg';
import Circle from '../../../svg/circle-55.svg';
import BlueDot from '../../../svg/blue-dot.svg';
import Diamond from '../../../svg/diamond-with-horizontal-lines.svg';
import { FloatingLabelInput } from '@/components/FloatingLabelInput';
import { isEmailValid } from '@/utils';
import { loadPurchaseFlowUrl } from '../PurchaseFlowWrapper';
import {
BlueDotIcon,
CircleIcon,
DiamondIcon,
CreateAccountIllustration,
} from '@standardnotes/stylekit';
type Props = {
appState: AppState;
@@ -120,13 +122,13 @@ export const CreateAccount: FunctionComponent<Props> = observer(
return (
<div className="flex items-center">
<Circle className="absolute w-8 h-8 top-40% -left-28" />
<BlueDot className="absolute w-4 h-4 top-35% -left-10" />
<Diamond className="absolute w-26 h-26 -bottom-5 left-0 -translate-x-1/2 -z-index-1" />
<CircleIcon className="absolute w-8 h-8 top-40% -left-28" />
<BlueDotIcon className="absolute w-4 h-4 top-35% -left-10" />
<DiamondIcon className="absolute w-26 h-26 -bottom-5 left-0 -translate-x-1/2 -z-index-1" />
<Circle className="absolute w-8 h-8 bottom-35% -right-20" />
<BlueDot className="absolute w-4 h-4 bottom-25% -right-10" />
<Diamond className="absolute w-18 h-18 top-0 -right-2 translate-x-1/2 -z-index-1" />
<CircleIcon className="absolute w-8 h-8 bottom-35% -right-20" />
<BlueDotIcon className="absolute w-4 h-4 bottom-25% -right-10" />
<DiamondIcon className="absolute w-18 h-18 top-0 -right-2 translate-x-1/2 -z-index-1" />
<div className="mr-12 md:mr-0">
<h1 className="mt-0 mb-2 text-2xl">Create your free account</h1>
@@ -211,7 +213,7 @@ export const CreateAccount: FunctionComponent<Props> = observer(
/>
</div>
</div>
<Illustration className="md:hidden" />
<CreateAccountIllustration className="md:hidden" />
</div>
);
}

16
app/assets/javascripts/purchaseFlow/panes/SignIn.tsx
View File

@@ -5,12 +5,10 @@ import { PurchaseFlowPane } from '@/ui_models/app_state/purchase_flow_state';
import { observer } from 'mobx-react-lite';
import { FunctionComponent } from 'preact';
import { useEffect, useRef, useState } from 'preact/hooks';
import Circle from '../../../svg/circle-55.svg';
import BlueDot from '../../../svg/blue-dot.svg';
import Diamond from '../../../svg/diamond-with-horizontal-lines.svg';
import { FloatingLabelInput } from '@/components/FloatingLabelInput';
import { isEmailValid } from '@/utils';
import { loadPurchaseFlowUrl } from '../PurchaseFlowWrapper';
import { BlueDotIcon, CircleIcon, DiamondIcon } from '@standardnotes/stylekit';
type Props = {
appState: AppState;
@@ -101,13 +99,13 @@ export const SignIn: FunctionComponent<Props> = observer(
return (
<div className="flex items-center">
<Circle className="absolute w-8 h-8 top-35% -left-56" />
<BlueDot className="absolute w-4 h-4 top-30% -left-40" />
<Diamond className="absolute w-26 h-26 -bottom-5 left-0 -translate-x-1/2 -z-index-1" />
<CircleIcon className="absolute w-8 h-8 top-35% -left-56" />
<BlueDotIcon className="absolute w-4 h-4 top-30% -left-40" />
<DiamondIcon className="absolute w-26 h-26 -bottom-5 left-0 -translate-x-1/2 -z-index-1" />
<Circle className="absolute w-8 h-8 bottom-30% -right-56" />
<BlueDot className="absolute w-4 h-4 bottom-20% -right-44" />
<Diamond className="absolute w-18 h-18 top-0 -right-2 translate-x-1/2 -z-index-1" />
<CircleIcon className="absolute w-8 h-8 bottom-30% -right-56" />
<BlueDotIcon className="absolute w-4 h-4 bottom-20% -right-44" />
<DiamondIcon className="absolute w-18 h-18 top-0 -right-2 translate-x-1/2 -z-index-1" />
<div>
<h1 className="mt-0 mb-2 text-2xl">Sign in</h1>