notesnook/apps/mobile/src/components/intro/welcome.js

import React from 'react';
import Animated, { FadeInDown } from 'react-native-reanimated';
import Navigation from '../../services/navigation';
import { useThemeStore } from '../../stores/use-theme-store';
import { getElevation } from '../../utils';
import umami from '../../utils/analytics';
import { SIZE } from '../../utils/size';
import { AuthMode } from '../auth';
import { Button } from '../ui/button';
import { SvgView } from '../ui/svg';
import Heading from '../ui/typography/heading';
import Paragraph from '../ui/typography/paragraph';
const IMAGE = color =>
  `<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="1100.50064" height="691.70682" viewBox="0 0 1100.50064 691.70682" xmlns:xlink="http://www.w3.org/1999/xlink"><title>two_factor_authentication</title><path d="M1150.25032,388.23743h-1.85859V337.32194a29.4685,29.4685,0,0,0-29.46859-29.46853H1011.05186a29.4685,29.4685,0,0,0-29.46859,29.46853V616.64827a29.46851,29.46851,0,0,0,29.46859,29.46854h107.87128a29.46851,29.46851,0,0,0,29.46859-29.46854V424.47994h1.85859Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><path d="M1142.121,339.05342v278.92a22.01111,22.01111,0,0,1-22.01,22.01h-108.39a22.00248,22.00248,0,0,1-22-22.01v-278.92a22.00031,22.00031,0,0,1,22-22h13.15a10.4608,10.4608,0,0,0,9.68,14.4h61.8a10.44027,10.44027,0,0,0,9.67993-14.4H1120.111A22.00894,22.00894,0,0,1,1142.121,339.05342Z" transform="translate(-49.74968 -104.14659)" fill="#d0cde1"/><rect x="945.85129" y="355.70682" width="126" height="34" fill="${color}"/><path d="M1126.601,487.85341h-122a3.00328,3.00328,0,0,1-3-3v-30a3.00328,3.00328,0,0,1,3-3h122a3.00328,3.00328,0,0,1,3,3v30A3.00328,3.00328,0,0,1,1126.601,487.85341Zm-122-34a1.001,1.001,0,0,0-1,1v30a1.00067,1.00067,0,0,0,1,1h122a1.00067,1.00067,0,0,0,1-1v-30a1.001,1.001,0,0,0-1-1Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><rect x="959.85129" y="374.70682" width="16" height="2" fill="#3f3d56"/><rect x="981.85129" y="374.70682" width="16" height="2" fill="#3f3d56"/><rect x="1003.85129" y="374.70682" width="16" height="2" fill="#3f3d56"/><rect x="1025.85129" y="374.70682" width="16" height="2" fill="#3f3d56"/><rect x="1047.85129" y="374.70682" width="16" height="2" fill="#3f3d56"/><path d="M1142.121,589.61342v28.36a22.01111,22.01111,0,0,1-22.01,22.01h-108.39a22.00248,22.00248,0,0,1-22-22.01v-130.46Z" transform="translate(-49.74968 -104.14659)" opacity="0.1"/><rect x="99.85129" y="459.70682" width="473" height="232" fill="#d0cde1"/><path d="M502.351,795.85341H151.601a2.00591,2.00591,0,0,1-2-2v-228a2.00587,2.00587,0,0,1,2-2h4.44Z" transform="translate(-49.74968 -104.14659)" opacity="0.1"/><rect x="318.85129" y="490.70682" width="732.99951" height="2" fill="#3f3d56"/><path d="M600.34268,108.46435H390.853v-4.31776H295.86217v4.31776H85.5089a14.17039,14.17039,0,0,0-14.1704,14.1704V409.4906a14.17043,14.17043,0,0,0,14.1704,14.17045H600.34268a14.17044,14.17044,0,0,0,14.1704-14.17045V122.63475A14.17039,14.17039,0,0,0,600.34268,108.46435Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><rect x="40.59128" y="29.35679" width="505.16998" height="284.98004" fill="#d0cde1"/><circle cx="292.74433" cy="16.4075" r="5.18132" fill="${color}"/><path d="M240.601,239.85341h-12a3.00328,3.00328,0,0,1-3-3v-12a3.00328,3.00328,0,0,1,3-3h12a3.00328,3.00328,0,0,1,3,3v12A3.00328,3.00328,0,0,1,240.601,239.85341Zm-12-16a1.0013,1.0013,0,0,0-1,1v12a1.0013,1.0013,0,0,0,1,1h12a1.0013,1.0013,0,0,0,1-1v-12a1.0013,1.0013,0,0,0-1-1Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><rect x="176.85129" y="133.70682" width="228" height="2" fill="#3f3d56"/><rect x="345.85129" y="188.70682" width="53" height="16" fill="${color}"/><path d="M452.601,304.85341h-49a3.00328,3.00328,0,0,1-3-3v-12a3.00328,3.00328,0,0,1,3-3h49a3.00328,3.00328,0,0,1,3,3v12A3.00328,3.00328,0,0,1,452.601,304.85341Zm-49-16a1.0013,1.0013,0,0,0-1,1v12a1.0013,1.0013,0,0,0,1,1h49a1.0013,1.0013,0,0,0,1-1v-12a1.0013,1.0013,0,0,0-1-1Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><rect x="703.85129" y="206.70682" width="100" height="70" fill="${color}"/><path d="M863.601,375.35341h-96a4.00427,4.00427,0,0,1-4-4v-66a4.00427,4.00427,0,0,1,4-4h96a4.00426,4.00426,0,0,1,4,4v66A4.00426,4.00426,0,0,1,863.601,375.35341Zm-96-70v66H863.6039l-.00293-66Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><path d="M852.601,302.85341h-4a33,33,0,1,0-66,0h-4a37,37,0,1,1,74,0Z" transform="translate(-49.74968 -104.14659)" fill="#3f3d56"/><path d="M825.601,330.35341a10.00023,10.00023,0,1,0-15.29412,8.47258V349.5593a5.29411,5.29411,0,0,0,5.29412,5.29411h0a5.29411,5.29411,0,0,0,5.29411-5.29411V338.826A9.98327,9.98

export const WelcomeNotice = () => {
  const colors = useThemeStore(state => state.colors);
  return (
    <Animated.View
      entering={FadeInDown}
      style={{
        padding: 12,
        alignItems: 'center',
        justifyContent: 'center',
        width: '100%'
      }}
    >
      <SvgView width={200} height={200} src={IMAGE(colors.accent)} />

      <Heading>100% encrypted notes</Heading>
      <Paragraph
        style={{
          textAlign: 'center',
          width: '90%'
        }}
        size={SIZE.md}
      >
        Notesnook encrypts everything on your device before syncing. This means that no one can read
        your notes except you. Not even us.
      </Paragraph>

      <Button
        fontSize={SIZE.md}
        height={45}
        width={250}
        onPress={async () => {
          Navigation.navigate(
            {
              name: 'Auth'
            },
            {
              mode: AuthMode.welcomeSignup
            }
          );
          umami.pageView('/encryptionnotice', '/welcome/privacymode');
        }}
        style={{
          paddingHorizontal: 24,
          alignSelf: 'center',
          borderRadius: 100,
          ...getElevation(5),
          marginTop: 30
        }}
        type="accent"
        title="Create your account"
      />
    </Animated.View>
  );
};