feat: made text setting elements

apps/web/src/navigation/navigators/settingnavigator.js

@@ -1,11 +1,21 @@
-import { Settings, Account, General } from "../../views";
+import {
+  Settings,
+  Account,
+  General,
+  TOS,
+  About,
+  PrivacyPolicy
+} from "../../views";
 import Navigator from "../index";
 import { createRoute } from "../routes";
 
 const routes = {
   ...createRoute("settings", Settings, { title: "Settings" }),
   ...createRoute("account", Account),
-  ...createRoute("general", General)
+  ...createRoute("general", General),
+  ...createRoute("TOS", TOS),
+  ...createRoute("about", About),
+  ...createRoute("privacy", PrivacyPolicy)
 };
 const SettingsNavigator = new Navigator("SettingsNavigator", routes, {
   backButtonEnabled: true

apps/web/src/utils/sample.js

@@ -0,0 +1,10 @@
+export const Sample = {
+  text:
+    " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do" +
+    "eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad" +
+    "minim veniam, quis nostrud exercitation ullamco laboris nisi ut" +
+    "aliquip ex ea commodo consequat. Duis aute irure dolor in" +
+    "reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla" +
+    "pariatur. Excepteur sint occaecat cupidatat non proident, sunt in" +
+    "culpa qui officia deserunt mollit anim id est laborum."
+};

apps/web/src/views/About.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { Text, Flex } from "rebass";
+import { Sample } from "../utils/sample";
+
+function About() {
+  return (
+    <Flex flexDirection="column" flex="1 1 auto">
+      <Flex flexDirection="column" flex="1 1 auto">
+        <Text p="20px">{Sample.text}</Text>
+      </Flex>
+    </Flex>
+  );
+}
+
+export default About;

apps/web/src/views/PrivacyPolicy.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { Text, Flex } from "rebass";
+import { Sample } from "../utils/sample";
+
+function PrivacyPolicy() {
+  return (
+    <Flex flexDirection="column" flex="1 1 auto">
+      <Flex flexDirection="column" flex="1 1 auto">
+        <Text p="20px">{Sample.text}</Text>
+      </Flex>
+    </Flex>
+  );
+}
+
+export default PrivacyPolicy;

apps/web/src/views/Settings.js

@@ -14,21 +14,21 @@ const Settings = props => {
           variant="setting"
           onClick={() => {
             props.navigator.navigate("general", {
-              title: "General"
+              title: Titles.general
             });
           }}
         >
-          General
+          {Titles.general}
         </Button>
         <Button
           variant="setting"
           onClick={() => {
             props.navigator.navigate("account", {
-              title: "Account"
+              title: Titles.account
             });
           }}
         >
-          Account
+          {Titles.account}
         </Button>
         <Box
           sx={{
@@ -118,9 +118,36 @@ const Settings = props => {
             </Flex> */}
           </Flex>
         </Box>
-        <Button variant="setting">Terms of Service</Button>
-        <Button variant="setting">Privacy Policy</Button>
-        <Button variant="setting">About</Button>
+        <Button
+          variant="setting"
+          onClick={() => {
+            props.navigator.navigate("TOS", {
+              title: Titles.TOS
+            });
+          }}
+        >
+          {Titles.TOS}
+        </Button>
+        <Button
+          variant="setting"
+          onClick={() => {
+            props.navigator.navigate("privacy", {
+              title: Titles.privacy
+            });
+          }}
+        >
+          {Titles.privacy}
+        </Button>
+        <Button
+          variant="setting"
+          onClick={() => {
+            props.navigator.navigate("about", {
+              title: Titles.about
+            });
+          }}
+        >
+          {Titles.about}
+        </Button>
       </Flex>
     </Flex>
   );
@@ -144,4 +171,12 @@ const SettingsContainer = props => {
   );
 };
 
+const Titles = {
+  general: "General",
+  account: "Account",
+  TOS: "Terms of Service",
+  privacy: "Privacy Policy",
+  about: "About"
+};
+
 export { Settings, SettingsContainer };

apps/web/src/views/TOS.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { Text, Flex } from "rebass";
+import { Sample } from "../utils/sample";
+
+function TOS() {
+  return (
+    <Flex flexDirection="column" flex="1 1 auto">
+      <Flex flexDirection="column" flex="1 1 auto">
+        <Text p="20px">{Sample.text}</Text>
+      </Flex>
+    </Flex>
+  );
+}
+
+export default TOS;

apps/web/src/views/index.js

@@ -9,3 +9,6 @@ export const Trash = require("./Trash").default;
 export const Account = require("./Account").default;
 export const SettingsContainer = require("./Settings").SettingsContainer;
 export const General = require("./General").default;
+export const About = require("./About").default;
+export const TOS = require("./TOS").default;
+export const PrivacyPolicy = require("./PrivacyPolicy").default;