encryption - WIP

src/app/features/settings/Settings.tsx

@@ -12,6 +12,7 @@ import { UserAvatar } from '../../components/user-avatar';
 import { nameInitials } from '../../utils/common';
 import { Notifications } from './notifications';
 import { Sessions } from './sessions';
+import { Encryption } from './encryption';
 import { EmojisStickers } from './emojis-stickers';
 import { DeveloperTools } from './developer-tools';
 import { About } from './about';
@@ -175,6 +176,9 @@ export function Settings({ initialPage, requestClose }: SettingsProps) {
       {activePage === SettingsPages.SessionsPage && (
         <Sessions requestClose={handlePageRequestClose} />
       )}
+      {activePage === SettingsPages.EncryptionPage && (
+        <Encryption requestClose={handlePageRequestClose} />
+      )}
       {activePage === SettingsPages.EmojisStickersPage && (
         <EmojisStickers requestClose={handlePageRequestClose} />
       )}

src/app/features/settings/encryption/Encryption.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Box, Text, IconButton, Icon, Icons, Scroll } from 'folds';
+import { Page, PageContent, PageHeader } from '../../../components/page';
+import { SequenceCard } from '../../../components/sequence-card';
+import { SequenceCardStyle } from '../styles.css';
+import { SettingTile } from '../../../components/setting-tile';
+
+type EncryptionProps = {
+  requestClose: () => void;
+};
+export function Encryption({ requestClose }: EncryptionProps) {
+  return (
+    <Page>
+      <PageHeader outlined={false}>
+        <Box grow="Yes" gap="200">
+          <Box grow="Yes" alignItems="Center" gap="200">
+            <Text size="H3" truncate>
+              Encryption
+            </Text>
+          </Box>
+          <Box shrink="No">
+            <IconButton onClick={requestClose} variant="Surface">
+              <Icon src={Icons.Cross} />
+            </IconButton>
+          </Box>
+        </Box>
+      </PageHeader>
+      <Box grow="Yes">
+        <Scroll hideTrack visibility="Hover">
+          <PageContent>
+            <Box direction="Column" gap="700">
+              <Box direction="Column" gap="100">
+                <Text size="L400">Online Backup</Text>
+                <SequenceCard
+                  className={SequenceCardStyle}
+                  variant="SurfaceVariant"
+                  direction="Column"
+                  gap="400"
+                >
+                  <SettingTile
+                    title="Messages Online Backup"
+                    description="Always keep secure backup of your encrypted messages data to decrypt messages later."
+                  />
+                </SequenceCard>
+              </Box>
+              <Box direction="Column" gap="100">
+                <Text size="L400">Local Backup</Text>
+                <SequenceCard
+                  className={SequenceCardStyle}
+                  variant="SurfaceVariant"
+                  direction="Column"
+                  gap="400"
+                >
+                  <SettingTile
+                    title="Export Messages Data"
+                    description="Save copy of encryption data on your device to decrypt messages later."
+                  />
+                </SequenceCard>
+                <SequenceCard
+                  className={SequenceCardStyle}
+                  variant="SurfaceVariant"
+                  direction="Column"
+                  gap="400"
+                >
+                  <SettingTile
+                    title="Import Messages Data"
+                    description="Load copy of encryption data from device to decrypt your messages."
+                  />
+                </SequenceCard>
+              </Box>
+            </Box>
+          </PageContent>
+        </Scroll>
+      </Box>
+    </Page>
+  );
+}

src/app/features/settings/encryption/index.ts

@@ -0,0 +1 @@
+export * from './Encryption';