File Collection Page Hardcoded

client-new/App.tsx

@@ -78,11 +78,12 @@ export default function App() {
       },
     },
     colors: {
-      deepEvergreen: "#0C362F",
+      deepEvergreen: "#0F4F43",
       lightGreen: "#43A574",
       darkGreen: "#0F4F43",
       muteEggplant: "#251B22",
       creamyCanvas: "#FFF9EE",
+      barkBrown: "#2F1D12"
     },
     fonts: {
       madeDillan: "MADE Dillan", // access fontFamily="madeDillan"

client-new/app.json

@@ -4,7 +4,7 @@
     "slug": "legacy",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./assets/icon.png",
+    "icon": "./assets/app-icon.png",
     "userInterfaceStyle": "light",
     "splash": {
       "image": "./assets/splash.png",

client-new/src/components/filecollection/FileList.tsx

@@ -0,0 +1,23 @@
+import { View, Text, ThreeDotsIcon } from 'native-base';
+import React from 'react';
+import FileIcon from '../icons/FileIcon';
+import {
+  widthPercentageToDP as w,
+  heightPercentageToDP as h
+} from 'react-native-responsive-screen';
+import { IFile } from '@/interfaces/IFile';
+import FileRow from './FileRow';
+
+type FileListProps = {
+  files: IFile[]
+}
+
+export default function FileList(props: FileListProps) {
+  return (
+    <View paddingTop={h('2%')}>
+      {props.files.map((file, index) => (
+        <FileRow key={index} file={file}/>
+      ))}
+    </View>
+  );
+}

client-new/src/components/filecollection/FileRow.tsx

@@ -0,0 +1,42 @@
+import { IFile } from '@/interfaces/IFile';
+import { View, Text, ThreeDotsIcon } from 'native-base';
+import React from 'react';
+import FileIcon from '../icons/FileIcon';
+import {
+  widthPercentageToDP as w,
+  heightPercentageToDP as h
+} from 'react-native-responsive-screen';
+
+type FileRowProps = {
+  file: IFile;
+};
+
+export default function FileRow(props: FileRowProps) {
+  return (
+    <View flexDirection={'row'}>
+      <View justifyContent={'center'} paddingBottom={h('1.5%')}>
+        <FileIcon />
+      </View>
+
+      <View
+        display={'flex'}
+        flexGrow={1}
+        marginLeft={w('5%')}
+        borderBottomColor={'#4A4A4A33'}
+        borderBottomWidth={1.25}
+        paddingBottom={h('1.5%')}
+        marginTop={h('1%')}
+      >
+        <Text>{props.file.fileName}</Text>
+        <Text>1 item ∙ 200 KB</Text>
+      </View>
+      <View
+        paddingRight={0}
+        justifyContent={'center'}
+        paddingBottom={h('1.5%')}
+      >
+        <ThreeDotsIcon />
+      </View>
+    </View>
+  );
+}

client-new/src/components/icons/FileIcon.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import {
+  widthPercentageToDP as w,
+  heightPercentageToDP as h
+} from 'react-native-responsive-screen';
+import { View } from 'native-base';
+
+const originalWidth = 26;
+const originalHeight = 32;
+const aspectRatio = originalWidth / originalHeight;
+
+const FileIcon = (props) => (
+  <View width={w('8%')} style={{ aspectRatio }}>
+    <Svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      fill="none"
+      viewBox={`0 0 ${originalWidth} ${originalHeight}`}
+      {...props}
+    >
+      <Path
+        fill="#4A4A4A"
+        d="M16.125 0h-12.5A3.125 3.125 0 0 0 .5 3.125v25a3.125 3.125 0 0 0 3.125 3.125h18.75a3.125 3.125 0 0 0 3.125-3.125V9.375L16.125 0Zm6.25 28.125H3.625v-25h10.938v7.813h7.812v17.187Z"
+      />
+    </Svg>
+  </View>
+);
+export default FileIcon;

client-new/src/components/icons/ThreeDotsIcon.tsx

@@ -0,0 +1,30 @@
+import { View } from 'native-base';
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import {
+  widthPercentageToDP as w,
+  heightPercentageToDP as h
+} from 'react-native-responsive-screen';
+
+const originalWidth = 24;
+const originalHeight = 24;
+const aspectRatio = originalWidth / originalHeight;
+
+const ThreeDotsIcon = (props) => (
+  <View width={w('8%')} style={{ aspectRatio }}>
+    <Svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={'100%'}
+      height={'100%'}
+      fill="none"
+      viewBox={`0 0 ${originalWidth} ${originalHeight}`}
+      {...props}
+    >
+      <Path
+        fill="#6B7280"
+        d="M12 16.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm0-6a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm0-6a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"
+      />
+    </Svg>
+  </View>
+);
+export default ThreeDotsIcon;

client-new/src/components/reusable/LegacyWordMarkWithBackArrow.tsx

@@ -0,0 +1,45 @@
+import {Pressable, Text, View} from "native-base";
+import Svg, {Path} from "react-native-svg";
+import {color} from "native-base/lib/typescript/theme/styled-system";
+import React from "react";
+
+export type LegacyWordmarkWithBackArrowProps = {
+  handleOnPress: () => void;
+};
+
+export default function LegacyWordmarkWithBackArrow(
+  props: LegacyWordmarkWithBackArrowProps
+) {
+  return (
+    <View style={{flexDirection: "row", alignItems: "center"}}>
+      <Pressable onPress={() => props.handleOnPress()}>
+        <Svg width='24' height='25' viewBox='0 0 24 25' fill='none'>
+          <Path
+            d='M13.7751 18.7606L8.48206 13.4676C8.10712 13.0925 7.89648 12.5839 7.89648 12.0536C7.89648 11.5232 8.10712 11.0146 8.48206 10.6396L13.7751 5.34656L15.1891 6.76056L9.90006 12.0536L15.1931 17.3466L13.7751 18.7606Z'
+            fill='#374957'
+          />
+        </Svg>
+      </Pressable>
+      <View marginLeft='auto'>
+        <Svg width='107' height='23' viewBox='0 0 107 23' fill='none'>
+          <Path
+            d='M11.4238 13.5435C13.3144 13.5334 15.205 13.5183 17.1008 13.5183C17.2841 13.5183 17.5302 13.4177 17.635 13.6391C17.7293 13.8453 17.525 13.9761 17.415 14.1321C16.1634 15.8275 14.5922 17.0148 12.4136 17.5027C11.0624 17.8096 9.74266 18.0662 8.34958 18.0612C5.96146 18.0511 3.5681 18.0612 1.17998 18.1064C0.452021 18.1215 0.253009 17.8851 0.258246 17.2009C0.279195 14.3534 0.195401 11.506 0.232061 8.65855C0.268721 5.77589 1.53086 3.44157 3.89804 1.67072C4.12324 1.50471 4.42175 1.25821 4.6679 1.36889C4.91404 1.47956 4.78835 1.84681 4.79358 2.09835C4.81977 5.64005 4.85119 9.18175 4.84596 12.7235C4.84596 13.3825 5.06592 13.6039 5.75198 13.5837C7.64257 13.5385 9.53317 13.5535 11.429 13.5435H11.4238Z'
+            fill='#0F4F43'
+          />
+          <Path
+            d='M6.96634 5.83764C6.95564 4.18184 6.96099 2.52604 6.92889 0.870236C6.92354 0.456286 7.03589 0.25436 7.49597 0.208927C8.30378 0.123108 9.1009 -0.018243 9.91942 0.00194969C10.8824 0.0221424 10.9145 0.0372857 10.9145 0.915668C10.9252 2.92989 10.9519 4.94916 10.9305 6.96339C10.9305 7.4682 11.0857 7.61965 11.6153 7.6146C13.7231 7.57927 15.8363 7.58936 17.9441 7.57926C18.9712 7.57422 18.9605 7.57926 18.998 8.50813C19.0194 9.15934 18.8749 9.80045 18.8482 10.4416C18.8214 11.1483 18.5379 11.3755 17.7836 11.3704C14.7824 11.3452 11.7865 11.3856 8.78526 11.4007C7.59048 11.4075 6.98952 10.8505 6.98239 9.72979C6.97704 8.43241 6.96634 7.14007 6.96099 5.84269L6.96634 5.83764Z'
+            fill='#0F4F43'
+          />
+          <Path
+            d='M16.301 5.34902C15.6459 5.34902 14.9907 5.33891 14.3356 5.36419C13.8627 5.37936 13.6508 5.2024 13.6558 4.69683C13.6656 3.35201 13.6607 2.00721 13.6361 0.662389C13.6262 0.182097 13.843 0.0253597 14.2666 0.020304C15.6212 0.020304 16.9808 0.0152594 18.3355 9.2317e-05C18.8133 -0.00496339 18.9906 0.197267 18.9857 0.697782C18.966 2.01732 18.9709 3.34191 19.0005 4.66145C19.0103 5.17208 18.8034 5.34903 18.3355 5.33892C17.6557 5.32881 16.9759 5.33892 16.301 5.34398V5.34902Z'
+            fill='#0F4F43'
+          />
+          <Path
+            d='M36.375 11.8753C36.6417 11.942 36.8083 12.067 36.875 12.2503C36.9583 12.4337 36.9917 12.742 36.975 13.1753C36.925 14.5253 36.7917 15.6003 36.575 16.4003C36.475 16.817 36.275 17.1087 35.975 17.2753C35.6917 17.442 35.1833 17.5253 34.45 17.5253H25.075C24.525 17.5253 24.1417 17.467 23.925 17.3503C23.7083 17.2337 23.6 17.0253 23.6 16.7253C23.6 16.4087 23.6917 16.1587 23.875 15.9753C24.0583 15.792 24.25 15.6503 24.45 15.5503C24.6667 15.4337 24.8667 15.1587 25.05 14.7253C25.2333 14.2753 25.325 13.6587 25.325 12.8753V4.47533C25.325 3.90866 25.2667 3.442 25.15 3.07533C25.0333 2.692 24.8917 2.417 24.725 2.25033C24.575 2.08366 24.4167 1.942 24.25 1.82533C24.0833 1.70866 23.9417 1.57533 23.825 1.42533C23.7083 1.27533 23.65 1.07533 23.65 0.825329C23.65 0.525328 23.75 0.316995 23.95 0.200329C24.1667 0.083662 24.5583 0.0253284 25.125 0.0253284H29.7C30.2333 0.0253284 30.6083 0.083662 30.825 0.200329C31.0583 0.316995 31.175 0.525328 31.175 0.825329C31.175 1.10866 31.0833 1.35033 30.9 1.55033C30.7167 1.73366 30.5167 1.88366 30.3 2.00033C30.1 2.117 29.9083 2.392 29.725 2.82533C29.5417 3.242 29.45 3.792 29.45 4.47533V14.6003C29.45 15.0003 29.575 15.292 29.825 15.4753C30.075 15.642 30.5583 15.7253 31.275 15.7253L32.175 15.7003C32.875 15.7003 33.4167 15.492 33.8 15.0753C34.2 14.642 34.65 13.892 35.15 12.8253C35.5167 12.092 35.925 11.7753 36.375 11.8753ZM49.1607 13.4003C49.4274 13.1337 49.6607 13.092 49.8607 13.2753C50.0774 13.4587 50.1191 13.742 49.9857 14.1253C49.7024 15.0087 49.0107 15.842 47.9107 16.6253C46.8274 17.392 45.5024 17.7753 43.9357 17.7753C42.1524 17.7753 40.7024 17.2337 39.5857 16.1503C38.4857 15.0503 37.9357 13.6253 37.9357 11.8753C37.9357 9.992 38.5857 8.42533 39.8857 7.17533C41.2024 5.90866 42.7274 5.27533 44.4607 5.27533C45.9441 5.27533 47.1274 5.667 48.0107 6.45033C48.8941 7.217 49.4191 8.17533 49.5857 9.32533C49.6357 9.75866 49.4441 10.0753 49.0107 10.2753C46.9774 11.2587 44.7607 12.217 42.3607 13.1503C43.0274 14.3837 44.1274 15.0003 45.6607 15.0003C46.8607 15.0003 48.0274 14.467 49.1607 13.4003ZM43.2107 7.15033C42.6941 7.267 42.2857 7.57533 41.9857 8.07533C41.7024 8.55866 41.5607 9.17533 41.5607 9.92533C41.5607 10.5087 41.6357 11.042 41.7857 11.5253C43.2524 11.0087 44.3941 10.5587 45.2107 10.1753C45.5941 9.992 45.8191 9.80866 45.8857 9.62533C45.9191 9.47533 45.9024 9.292 45.8357 9.07533C45.6357 8.37533 45.2857 7.842 44.7857 7.47533C44.3024 7.10866 43.7774 7.00033 43.2107 7.15033ZM61.2867 15.2253C62.4034 15.2253 63.2701 15.5003 63.8867 16.0503C64.5034 16.6003 64.8117 17.3337 64.8117 18.2503C64.8117 19.617 64.1201 20.7087 62.7367 21.5253C61.3701 22.3587 59.6034 22.7753 57.4367 22.7753C56.4867 22.7753 55.5951 22.6837 54.7617 22.5003C53.9451 22.317 53.2284 21.992 52.6117 21.5253C52.0117 21.0587 51.7117 20.492 51.7117 19.8253C51.7117 19.4253 51.8451 19.0503 52.1117 18.7003C52.3951 18.3503 52.7701 18.0837 53.2367 17.9003C52.2034 17.417 51.6867 16.6837 51.6867 15.7003C51.6867 14.7003 52.3284 13.8837 53.6117 13.2503C52.4617 12.5503 51.8867 11.5337 51.8867 10.2003C51.8867 8.90033 52.4534 7.767 53.5867 6.80033C54.7201 5.83366 56.1284 5.32533 57.8117 5.27533H58.6117C58.7117 5.27533 58.8867 5.292 59.1367 5.32533C59.4034 5.342 59.6201 5.35033 59.7867 5.35033C60.6201 5.35033 61.4284 4.917 62.2117 4.05033C62.5451 3.63366 62.9284 3.42533 63.3617 3.42533C63.6617 3.42533 63.9201 3.53366 64.1367 3.75033C64.3534 3.967 64.4617 4.23366 64.4617 4.55033C64.4617 5.117 64.2117 5.55866 63.7117 5.87533C63.2117 6.192 62.6117 6.392 61.9117 6.47533C62.8117 7.242 63.2617 8.242 63.2617 9.47533C63.2617 10.8087 62.7284 11.9087 61.6617 12.7753C60.5951 13.642 59.2201 14.1003 57.5367 14.1503C56.6034 14.167 55.7534 14.067 54.9867 13.8503C54.7201 14.067 54.5867 14.317 54.5867 14.6003C54.5867 15.2003 55.2034 15.5003 56.4367 15.5003C56.9367 15.5003 57.7784 15.4587 58.9617 15.3753C60.1451 15.2753 60.9201 15.2253 61.2867 15.2253ZM57.2617 6.80033C56.7784 6.80033 56.3867 7.00866 56.0867 7.42533C55.7867 7.842 55.6367 8.37533 55.6367 9.02533C55.6367 10.042 55.8284 10.9087 56.2117 11.6253C56.6117 12.3253 57.1867 12.6753 57.9367 12.6753C58.4034 12.6753 58.7784 12.4753 59.0617 12.0753C59.3617 11.6753 59.5117 11.117 59.5117 10.4003C59.5117 9.50033 59.3117 8.67533 58.9117 7.92533C58.5284 7.17533 57.9784 6.80033 57.2617 6.80033ZM58.1367 21.1003C60.3034 21.1003 61.3867 20.567 61.3867 19.5003C61.3867 18.8837 60.9701 18.5837 60.1367 18.6003C59.7034 18.6003 59.0451 18.6253 58.1617 18.6753C57.2951 18.7253 56.5867 18.742 56.0367 18.7253C55.2034 18.692 54.7867 19.0003 54.7867 19.6503C54.7867 20.617 55.9034 21.1003 58.1367 21.1003ZM79.3637 15.4253C79.497 15.4087 79.6053 15.4503 79.6887 15.5503C79.772 15.6337 79.8137 15.7503 79.8137 15.9003C79.8137 16.367 79.5053 16.792 78.8887 17.1753C78.272 17.542 77.647 17.7253 77.0137 17.7253C75.8803 17.7253 75.1053 17.1253 74.6887 15.9253C73.5053 17.1253 72.022 17.7253 70.2387 17.7253C68.922 17.7253 67.847 17.392 67.0137 16.7253C66.1803 16.042 65.7637 15.1753 65.7637 14.1253C65.7637 12.892 66.2803 11.892 67.3137 11.1253C68.347 10.3587 69.7887 9.97533 71.6387 9.97533C71.8553 9.97533 72.4053 10.017 73.2887 10.1003C73.0387 9.30033 72.7137 8.68366 72.3137 8.25033C71.9303 7.817 71.347 7.60033 70.5637 7.60033C69.7803 7.60033 68.822 7.90866 67.6887 8.52533C67.4387 8.692 67.2137 8.692 67.0137 8.52533C66.8303 8.342 66.8303 8.08366 67.0137 7.75033C67.3803 7.117 68.0303 6.55033 68.9637 6.05033C69.897 5.53366 70.9303 5.27533 72.0637 5.27533C72.7137 5.27533 73.297 5.37533 73.8137 5.57533C74.347 5.75866 74.772 5.98366 75.0887 6.25033C75.4053 6.50033 75.697 6.85033 75.9637 7.30033C76.2303 7.75033 76.422 8.142 76.5387 8.47533C76.672 8.80866 76.8137 9.22533 76.9637 9.72533L78.2387 14.0753C78.372 14.542 78.522 14.892 78.6887 15.1253C78.8553 15.342 79.0803 15.442 79.3637 15.4253ZM71.9637 15.7503C72.6137 15.7503 73.172 15.5753 73.6387 15.2253C74.1053 14.8587 74.2887 14.4337 74.1887 13.9503C74.1553 13.7837 73.9803 13.2087 73.6637 12.2253C73.4803 11.6753 72.9303 11.4003 72.0137 11.4003C71.2303 11.4003 70.6053 11.592 70.1387 11.9753C69.6887 12.342 69.4637 12.8337 69.4637 13.4503C69.4637 14.117 69.6887 14.667 70.1387 15.1003C70.6053 15.5337 71.2137 15.7503 71.9637 15.7503ZM86.3947 17.7753C84.4947 17.7753 82.9947 17.2003 81.8947 16.0503C80.8114 14.9003 80.2697 13.517 80.2697 11.9003C80.2697 10.0003 80.9114 8.42533 82.1947 7.17533C83.4947 5.90866 85.0614 5.27533 86.8947 5.27533C88.4114 5.27533 89.6447 5.68366 90.5947 6.50033C91.5614 7.317 92.0447 8.30033 92.0447 9.45033C92.0447 10.067 91.8614 10.542 91.4947 10.8753C91.1447 11.2087 90.7197 11.3753 90.2197 11.3753C89.6697 11.3753 89.2531 11.2253 88.9697 10.9253C88.6864 10.6253 88.4781 10.2003 88.3447 9.65033C87.8781 7.95033 87.1197 7.10033 86.0697 7.10033C85.4364 7.10033 84.9364 7.35866 84.5697 7.87533C84.2197 8.392 84.0447 9.092 84.0447 9.97533C84.0447 11.4587 84.4197 12.667 85.1697 13.6003C85.9197 14.517 86.9114 14.9753 88.1447 14.9753C88.6114 14.9753 89.0447 14.9087 89.4447 14.7753C89.8614 14.6253 90.1781 14.4753 90.3947 14.3253C90.6281 14.1587 90.9281 13.9253 91.2947 13.6253C91.5781 13.3753 91.8114 13.3337 91.9947 13.5003C92.1947 13.667 92.2364 13.9503 92.1197 14.3503C91.8364 15.217 91.1947 16.0087 90.1947 16.7253C89.2114 17.4253 87.9447 17.7753 86.3947 17.7753ZM103.518 5.52533H105.443C106.26 5.52533 106.668 5.75866 106.668 6.22533C106.668 6.47533 106.601 6.67533 106.468 6.82533C106.351 6.97533 106.201 7.10033 106.018 7.20033C105.851 7.30033 105.643 7.50033 105.393 7.80033C105.16 8.08366 104.951 8.45866 104.768 8.92533L101.668 16.9253C100.868 18.992 100.06 20.4837 99.243 21.4003C98.4263 22.317 97.2596 22.7753 95.743 22.7753C94.8763 22.7753 94.1096 22.5503 93.443 22.1003C92.7763 21.6503 92.443 21.017 92.443 20.2003C92.443 19.6837 92.6013 19.2253 92.918 18.8253C93.2346 18.442 93.668 18.2503 94.218 18.2503C94.5846 18.2503 94.893 18.3837 95.143 18.6503C95.4096 18.9337 95.6013 19.2337 95.718 19.5503C95.8346 19.8837 96.0096 20.1837 96.243 20.4503C96.4763 20.7337 96.7513 20.8753 97.068 20.8753C97.4513 20.8753 97.768 20.6837 98.018 20.3003C98.2846 19.9337 98.418 19.467 98.418 18.9003C98.418 18.4837 98.3096 17.9753 98.093 17.3753L94.718 8.92533C94.5346 8.45866 94.318 8.08366 94.068 7.80033C93.8346 7.50033 93.6263 7.30033 93.443 7.20033C93.2763 7.10033 93.1263 6.97533 92.993 6.82533C92.8763 6.67533 92.818 6.47533 92.818 6.22533C92.818 5.75866 93.2013 5.52533 93.968 5.52533H98.268C99.0846 5.52533 99.493 5.75866 99.493 6.22533C99.493 6.492 99.3763 6.73366 99.143 6.95033C98.9263 7.167 98.7763 7.367 98.693 7.55033C98.6096 7.73366 98.6763 8.192 98.893 8.92533L100.968 14.2503L102.943 8.92533C103.16 8.192 103.226 7.73366 103.143 7.55033C103.06 7.367 102.91 7.167 102.693 6.95033C102.476 6.73366 102.368 6.492 102.368 6.22533C102.368 5.75866 102.751 5.52533 103.518 5.52533Z'
+            fill='#0F4F43'
+          />
+        </Svg>
+      </View>
+    </View>
+  );
+}

client-new/src/components/reusable/ScreenBody.tsx

@@ -0,0 +1,14 @@
+import { View } from 'native-base';
+import {
+    widthPercentageToDP as w,
+    heightPercentageToDP as h
+  } from 'react-native-responsive-screen';
+import React from 'react';
+
+export default function ScreenBody({ children }) {
+  return (
+    <View paddingLeft={w('8%')} paddingRight={w('8%')}>
+      {children}
+    </View>
+  );
+}

client-new/src/components/reusable/TaskTag.tsx

@@ -0,0 +1,39 @@
+import { View, Text, Pressable } from 'native-base';
+import {
+  widthPercentageToDP as w,
+  heightPercentageToDP as h
+} from 'react-native-responsive-screen';
+import React from 'react';
+import { moderateScale } from '@/utils/FontSizeUtils';
+
+type TaskTagProps = {
+  taskText: string;
+  taskPressed: boolean;
+  taskPressFunction?: () => void;
+};
+
+export default function TaskTag(props: TaskTagProps) {
+  return (
+    <Pressable
+      paddingX={w('3.5%')}
+      paddingY={h('1.5%')}
+      backgroundColor={props.taskPressed ? 'deepEvergreen' : '#00000000'}
+      alignSelf={'flex-start'}
+      borderRadius={30}
+      borderColor={'deepEvergreen'}
+      borderWidth={1.5}
+      onPress={props.taskPressFunction}
+      marginTop={h('0.75%')}
+      marginRight={w('0.5%')}
+    >
+      <Text
+        fontFamily={'inter'}
+        fontWeight={'600'}
+        fontSize={moderateScale(13)}
+        color={props.taskPressed ? '#FFFFFF' : 'deepEvergreen'}
+      >
+        {props.taskText}
+      </Text>
+    </Pressable>
+  );
+}

client-new/src/components/reusable/TaskTagGrid.tsx

@@ -0,0 +1,47 @@
+import { View } from 'native-base';
+import React, { useState } from 'react';
+import TaskTag from './TaskTag';
+import {
+  widthPercentageToDP as w,
+  heightPercentageToDP as h
+} from 'react-native-responsive-screen';
+
+type TaskTagGridProps = {
+    pressed: string;
+};
+
+export default function TaskTagGrid(props: TaskTagGridProps) {
+  const [pressed, setPressed] = useState(props.pressed);
+
+  const pressTag = (tagNum: string) => {
+    if (pressed === tagNum) {
+      setPressed(null);
+    } else {
+      setPressed(tagNum);
+    }
+  };
+  return (
+    <View flexDirection={'row'} flexWrap={'wrap'} mt={h('2%')}>
+      <TaskTag
+        taskText={'Emotional'}
+        taskPressed={pressed === 'Emotional'}
+        taskPressFunction={() => pressTag('Emotional')}
+      />
+      <TaskTag
+        taskText={'Financial'}
+        taskPressed={pressed === 'Financial'}
+        taskPressFunction={() => pressTag('Financial')}
+      />
+      <TaskTag
+        taskText={'Value Based'}
+        taskPressed={pressed === 'Value Based'}
+        taskPressFunction={() => pressTag('Value Based')}
+      />
+      <TaskTag
+        taskText={'Holistic'}
+        taskPressed={pressed === 'Holistic'}
+        taskPressFunction={() => pressTag('Holistic')}
+      />
+    </View>
+  );
+}

client-new/src/interfaces/IFile.ts

@@ -0,0 +1,5 @@
+export interface IFile {
+    fileName: string;
+    userId: number;
+    tags: string[];
+}

client-new/src/navigation/Router.tsx

@@ -11,7 +11,7 @@ export default function Router() {
 
   return (
     <NavigationContainer>
-      {false ? <AppStack /> : <AuthStack />}
+      {true ? <AppStack /> : <AuthStack />}
     </NavigationContainer>
   );
 }