Added pages and basic drawer

src/Components/Background/Background.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { View } from "react-native";
+import styles from "../../styles";
+
+export interface props {
+  children: React.ReactNode;
+}
+
+export default function Background(props: props) {
+  return (
+    <View style={styles.background}>
+      <View style={{ margin: 8 }} />
+      {props.children}
+    </View>
+  );
+}

src/Components/Buttons/ButtonAlignLeft/ButtonAlignLeft.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import {Text, View, Pressable, GestureResponderEvent} from 'react-native';
+import {StyleSheet} from 'react-native';
+import styles from '../../../styles';
+
+export interface props {
+  children: React.ReactNode;
+  onPress: (event: GestureResponderEvent) => void;
+  color: string;
+  width: number;
+}
+
+export default function ButtonAlignLeft(props: props) {
+  switch (props.color) {
+    case 'Red':
+      return (
+        <Pressable
+          onPress={props.onPress}
+          style={{
+            ...styles.button_generic,
+            ...{
+              backgroundColor: '#bc231e',
+              width: props.width,
+              justifyContent: 'flex-start',
+            },
+          }}>
+          {props.children}
+        </Pressable>
+      );
+    case 'Yellow':
+      return (
+        <Pressable
+          onPress={props.onPress}
+          style={{
+            ...styles.button_generic,
+            ...{
+              backgroundColor: '#e2b465',
+              width: props.width,
+              justifyContent: 'flex-start',
+            },
+          }}>
+          {props.children}
+        </Pressable>
+      );
+    case 'Green':
+      return (
+        <Pressable
+          onPress={props.onPress}
+          style={{
+            ...styles.button_generic,
+            ...{
+              backgroundColor: '#0dbc6a',
+              width: props.width,
+              justifyContent: 'flex-start',
+            },
+          }}>
+          {props.children}
+        </Pressable>
+      );
+    case 'Blue':
+      return (
+        <Pressable
+          onPress={props.onPress}
+          style={{
+            ...styles.button_generic,
+            ...{
+              backgroundColor: '#005997',
+              width: props.width,
+              justifyContent: 'flex-start',
+            },
+          }}>
+          {props.children}
+        </Pressable>
+      );
+  }
+  return (
+    <Pressable
+      onPress={props.onPress}
+      style={{
+        ...styles.button_generic,
+        ...{backgroundColor: '#bc231e'},
+      }}>
+      <Text style={{...styles.text_white, ...{fontSize: 32}}}>
+        Invalid button color specified
+      </Text>
+    </Pressable>
+  );
+}

src/Components/Buttons/ButtonCentered/ButtonCentered.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import {Text, View, Pressable, GestureResponderEvent} from 'react-native';
+import {StyleSheet} from 'react-native';
+import styles from '../../../styles';
+
+export interface props {
+  children: React.ReactNode;
+  onPress: (event: GestureResponderEvent) => void;
+  color: string;
+  width: number;
+}
+
+export default function ButtonCentered(props: props) {
+  switch (props.color) {
+    case 'Red':
+      return (
+        <Pressable
+          onPress={props.onPress}
+          style={{
+            ...styles.button_generic,
+            ...{backgroundColor: '#bc231e', width: props.width},
+          }}>
+          {props.children}
+        </Pressable>
+      );
+    case 'Yellow':
+      return (
+        <Pressable
+          onPress={props.onPress}
+          style={{
+            ...styles.button_generic,
+            ...{backgroundColor: '#e2b465', width: props.width},
+          }}>
+          {props.children}
+        </Pressable>
+      );
+    case 'Green':
+      return (
+        <Pressable
+          onPress={props.onPress}
+          style={{
+            ...styles.button_generic,
+            ...{backgroundColor: '#0dbc6a', width: props.width},
+          }}>
+          {props.children}
+        </Pressable>
+      );
+    case 'Blue':
+      return (
+        <Pressable
+          onPress={props.onPress}
+          style={{
+            ...styles.button_generic,
+            ...{backgroundColor: '#005997', width: props.width},
+          }}>
+          {props.children}
+        </Pressable>
+      );
+  }
+  return (
+    <Pressable
+      onPress={props.onPress}
+      style={{
+        ...styles.button_generic,
+        ...{backgroundColor: '#bc231e'},
+      }}>
+      <Text style={{...styles.text_white, ...{fontSize: 32}}}>
+        Invalid button color specified
+      </Text>
+    </Pressable>
+  );
+}

src/Components/Drawer/DrawerScreenSettings/CustomDrawerContent/CustomDrawerContent.tsx

@@ -0,0 +1,91 @@
+import * as React from "react";
+import { DrawerContentScrollView } from "@react-navigation/drawer";
+import { useNavigation } from "@react-navigation/native";
+import { Text, View } from "react-native";
+import ButtonAlignLeft from "../../../Buttons/ButtonAlignLeft/ButtonAlignLeft";
+import styles from "../../../../styles";
+
+import { RootDrawerParamList } from "../../../../Interfaces/Interfaces";
+
+import AddIcon from "../../../Icons/AddIcon/AddIcon";
+import HomeIcon from "../../../Icons/HomeIcon/HomeIcon";
+import LoginIcon from "../../../Icons/LoginIcon/LoginIcon";
+import SignupIcon from "../../../Icons/SignupIcon/SignupIcon";
+import UserIcon from "../../../Icons/UserIcon/UserIcon";
+import AppIcon from "../../../Icons/AppIcon/AppIcon";
+
+export default function CustomDrawerContent(props: {}) {
+  const navigation = useNavigation<RootDrawerParamList>();
+  const width = 224;
+  return (
+    <DrawerContentScrollView {...props}>
+      <View
+        style={{
+          ...styles.flex_row,
+          ...{ justifyContent: "center" },
+        }}
+      >
+        <AppIcon size={32} color="white" />
+        <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
+          Clip Notes
+        </Text>
+      </View>
+      <ButtonAlignLeft
+        color="Blue"
+        width={width}
+        onPress={() => {
+          navigation.navigate("Home");
+        }}
+      >
+        <HomeIcon size={32} color="white" />
+        <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>Home</Text>
+      </ButtonAlignLeft>
+      <ButtonAlignLeft
+        color="Green"
+        width={width}
+        onPress={() => {
+          navigation.navigate("Add Note");
+        }}
+      >
+        <AddIcon size={32} color="white" />
+        <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
+          Add Note
+        </Text>
+      </ButtonAlignLeft>
+      <ButtonAlignLeft
+        color="Green"
+        width={width}
+        onPress={() => {
+          navigation.navigate("Login");
+        }}
+      >
+        <LoginIcon size={32} color="white" />
+        <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>Login</Text>
+      </ButtonAlignLeft>
+      <ButtonAlignLeft
+        color="Yellow"
+        width={width}
+        onPress={() => {
+          navigation.navigate("User Info");
+        }}
+      >
+        <UserIcon size={32} color="white" />
+        <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
+          User Info
+        </Text>
+      </ButtonAlignLeft>
+      <ButtonAlignLeft
+        color="Yellow"
+        width={width}
+        onPress={() => {
+          navigation.navigate("Register");
+        }}
+      >
+        <SignupIcon size={32} color="white" />
+        <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
+          Register
+        </Text>
+      </ButtonAlignLeft>
+    </DrawerContentScrollView>
+  );
+}

src/Components/Drawer/DrawerScreenSettings/DrawerScreenSettings.tsx

@@ -0,0 +1,25 @@
+import { View, Image, Text } from "react-native";
+import type { DrawerNavigationOptions } from "@react-navigation/drawer";
+import AppIcon from "../../Icons/AppIcon/AppIcon";
+const DrawerScreenSettings: DrawerNavigationOptions = {
+  headerTitleStyle: { color: "white", fontSize: 26 },
+  unmountOnBlur: true,
+  headerStyle: { backgroundColor: "#0087e4" },
+  headerTintColor: "white",
+  drawerType: "slide",
+  drawerLabelStyle: {
+    color: "white",
+  },
+  drawerStyle: {
+    backgroundColor: "#002d4d",
+    width: 260,
+  },
+  headerRight: () => (
+    <View
+      style={{ flexDirection: "row", marginRight: 16, alignItems: "center" }}
+    >
+      <AppIcon size={32} color="white" />
+    </View>
+  ),
+};
+export default DrawerScreenSettings;

src/Components/Icons/AddIcon/AddIcon.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "../../../Interfaces/Interfaces";
+
+import { Svg, Path } from "react-native-svg";
+
+export default function AddIcon(props: IconProps) {
+  return (
+    <>
+      <Svg
+        width={props.size}
+        height={props.size}
+        viewBox="0 0 24 24"
+        strokeWidth="2"
+        stroke={props.color}
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
+        <Path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></Path>
+        <Path d="M9 12l6 0"></Path>
+        <Path d="M12 9l0 6"></Path>
+      </Svg>
+    </>
+  );
+}

src/Components/Icons/AppIcon/AppIcon.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { IconProps } from "../../../Interfaces/Interfaces";
+
+import { Svg, Path } from "react-native-svg";
+
+export default function AppIcon(props: IconProps) {
+  return (
+    <>
+      <Svg
+        width={props.size + "px"}
+        height={props.size + "px"}
+        viewBox="0 0 24 24"
+        strokeWidth="2"
+        stroke={props.color}
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
+        <Path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"></Path>
+        <Path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></Path>
+        <Path d="M9 12h6"></Path>
+        <Path d="M9 16h6"></Path>
+      </Svg>
+    </>
+  );
+}

src/Components/Icons/HomeIcon/HomeIcon.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "../../../Interfaces/Interfaces";
+
+import { Svg, Path } from "react-native-svg";
+
+export default function HomeIcon(props: IconProps) {
+  return (
+    <>
+      <Svg
+        width={props.size}
+        height={props.size}
+        viewBox="0 0 24 24"
+        strokeWidth="2"
+        stroke={props.color}
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
+        <Path d="M5 12l-2 0l9 -9l9 9l-2 0"></Path>
+        <Path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></Path>
+        <Path d="M10 12h4v4h-4z"></Path>
+      </Svg>
+    </>
+  );
+}

src/Components/Icons/LoginIcon/LoginIcon.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { IconProps } from "../../../Interfaces/Interfaces";
+
+import { Svg, Path } from "react-native-svg";
+
+export default function LoginIcon(props: IconProps) {
+  return (
+    <>
+      <Svg
+        width={props.size}
+        height={props.size}
+        viewBox="0 0 24 24"
+        strokeWidth="2"
+        stroke={props.color}
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
+        <Path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></Path>
+        <Path d="M20 12h-13l3 -3m0 6l-3 -3"></Path>
+      </Svg>
+    </>
+  );
+}

src/Components/Icons/SignupIcon/SignupIcon.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "../../../Interfaces/Interfaces";
+
+import { Svg, Path } from "react-native-svg";
+
+export default function SignupIcon(props: IconProps) {
+  return (
+    <>
+      <Svg
+        width={props.size}
+        height={props.size}
+        viewBox="0 0 24 24"
+        strokeWidth="2"
+        stroke={props.color}
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
+        <Path d="M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></Path>
+        <Path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></Path>
+        <Path d="M16 11h6m-3 -3v6"></Path>
+      </Svg>
+    </>
+  );
+}

src/Components/Icons/UserIcon/UserIcon.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { IconProps } from "../../../Interfaces/Interfaces";
+
+import { Svg, Path } from "react-native-svg";
+
+export default function UserIcon(props: IconProps) {
+  return (
+    <>
+      <Svg
+        width={props.size}
+        height={props.size}
+        viewBox="0 0 24 24"
+        strokeWidth="2"
+        stroke={props.color}
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
+        <Path d="M12 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></Path>
+        <Path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></Path>
+      </Svg>
+    </>
+  );
+}

src/Interfaces/Interfaces.tsx

@@ -0,0 +1,8 @@
+export interface IconProps {
+  size: number;
+  color: string;
+}
+
+export interface RootDrawerParamList {
+  navigate: any;
+}

src/Routes/AddNote/AddNote.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import {View, Text} from 'react-native';
+import styles from '../../styles';
+import Background from '../../Components/Background/Background';
+
+export default function AddNote() {
+  return (
+    <Background>
+      <Text style={{...styles.text_white, ...{fontSize: 32}}}>Add Note</Text>
+    </Background>
+  );
+}

src/Routes/Home/Home.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import {View, Text} from 'react-native';
+import styles from '../../styles';
+import Background from '../../Components/Background/Background';
+import AppIcon from '../../Components/Icons/AppIcon/AppIcon';
+
+export default function Home() {
+  return (
+    <Background>
+      <View
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}>
+        <AppIcon size={64} color="white" />
+        <Text style={{...styles.text_white, ...{fontSize: 32}}}>
+          Clip Notes
+        </Text>
+      </View>
+      <View style={{margin: 16}} />
+    </Background>
+  );
+}

src/Routes/Login/Login.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import {View, Text} from 'react-native';
+import styles from '../../styles';
+import Background from '../../Components/Background/Background';
+
+export default function Login() {
+  return (
+    <Background>
+      <Text style={{...styles.text_white, ...{fontSize: 32}}}>Login</Text>
+    </Background>
+  );
+}

src/Routes/Register/Register.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import {View, Text} from 'react-native';
+import styles from '../../styles';
+import Background from '../../Components/Background/Background';
+
+export default function Register() {
+  return (
+    <Background>
+      <Text style={{...styles.text_white, ...{fontSize: 32}}}>Register</Text>
+    </Background>
+  );
+}

src/Routes/UserInfo/UserInfo.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import {View, Text} from 'react-native';
+import styles from '../../styles';
+import Background from '../../Components/Background/Background';
+
+export default function UserInfo() {
+  return (
+    <Background>
+      <Text style={{...styles.text_white, ...{fontSize: 32}}}>UserInfo</Text>
+    </Background>
+  );
+}

src/styles.tsx

@@ -0,0 +1,35 @@
+import {StyleSheet} from 'react-native';
+const styles = StyleSheet.create({
+  background: {
+    backgroundColor: '#002d4c',
+    height: '100%',
+    width: '100%',
+  },
+  text_white: {
+    color: 'white',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  button_generic: {
+    justifyContent: 'center',
+    alignSelf: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    margin: 8,
+    padding: 8,
+    borderRadius: 16,
+  },
+  flex_row: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  flex_column: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
+});
+
+export default styles;