Merge pull request #373 from BinaryStudioAcademy/task/OV-368-create-c…

…onsent-component

OV-368: Create consent component

frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts

@@ -17,6 +17,7 @@ import {
     faStop,
     faT,
     faTableColumns,
+    faVideoCamera,
     faVolumeHigh,
     faVolumeOff,
 } from '@fortawesome/free-solid-svg-icons';
@@ -42,6 +43,7 @@ const CloudArrowDown = convertIcon(faCloudArrowDown);
 const VolumeHigh = convertIcon(faVolumeHigh);
 const VolumeOff = convertIcon(faVolumeOff);
 const Stop = convertIcon(faStop);
+const VideoCamera = convertIcon(faVideoCamera);
 const Image = convertIcon(faImage);
 
 export {
@@ -63,6 +65,7 @@ export {
     Stop,
     T,
     TableColumns,
+    VideoCamera,
     VolumeHigh,
     VolumeOff,
 };

frontend/src/bundles/common/icons/icon-name.ts

@@ -32,6 +32,7 @@ import {
     Stop,
     T,
     TableColumns,
+    VideoCamera,
     VolumeHigh,
     VolumeOff,
 } from './helper/icon-conversion.helper.js';
@@ -70,6 +71,7 @@ const IconName = {
     LOGO_TEXT: LogoText,
     DELETE: DeleteIcon,
     WARNING: WarningIcon,
+    VIDEO_CAMERA: VideoCamera,
     IMAGE: Image,
 } as const;
 

frontend/src/bundles/create-avatar/components/consent/consent.tsx

@@ -0,0 +1,38 @@
+import {
+    Box,
+    Button,
+    Flex,
+    Icon,
+    Text,
+} from '~/bundles/common/components/components.js';
+import { IconName } from '~/bundles/common/icons/icons.js';
+
+import styles from './styles.module.css';
+
+const Consent: React.FC = () => {
+    return (
+        <Flex className={styles['flex-container']}>
+            <Text variant={'title'} color={'background.600'} marginTop={'2vh'}>
+                Concent
+            </Text>
+            <Text variant={'body1'} color="typography.600" mb={3}>
+                To prevent misuse of technology, we just need to confirm the
+                person in the video is you.
+            </Text>
+            <Box
+                className={styles['recordSection']}
+                borderColor={'background.50'}
+            >
+                <Icon
+                    as={IconName.VIDEO_CAMERA}
+                    boxSize={100}
+                    color={'background.600'}
+                />
+                <Button label="Record a consent" width="220px" />
+            </Box>
+            <Button label="Generate Avatar" width="220px" />
+        </Flex>
+    );
+};
+
+export { Consent };

frontend/src/bundles/create-avatar/components/consent/styles.module.css

@@ -0,0 +1,32 @@
+.flex-container {
+    flex-direction: column;
+    background-color: white;
+    padding: 30px;
+    border-radius: 10px;
+    align-items: center;
+    padding-bottom: 80px;
+}
+
+.inner-flex {
+    color: var(--chakra-colors-typography-600);
+    font-size: 14px;
+    justify-content: center;
+    gap: 40px;
+}
+
+.recordSection {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-width: 2px;
+    border-radius: 11px;
+    padding: 8vh;
+    padding-left: 20vh;
+    padding-right: 20vh;
+    justify-content: center;
+    margin-bottom: 5vh;
+}
+
+.icon {
+    margin-bottom: 16px;
+}