From c61cbabd824b7cc7cd38b48c5a969ebde17f6e33 Mon Sep 17 00:00:00 2001
From: Tdanks2000 <tommydanks2000@hotmail.com>
Date: Fri, 2 Dec 2022 15:15:01 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9A=99=EF=B8=8F=20-=20added=20settings=20(no?=
 =?UTF-8?q?ne=20atm)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  2 ++
 src/components/NavigationBar/index.js         |  4 +--
 .../settings/disclaimer/disclaimer.styles.js  | 31 ++++++++++++++++
 src/components/settings/disclaimer/index.js   | 35 +++++++++++++++++++
 src/components/settings/index.js              |  2 ++
 src/components/settings/settings.styles.js    |  8 ++---
 src/containers/Container.styles.js            |  6 ++--
 7 files changed, 79 insertions(+), 9 deletions(-)
 create mode 100644 src/components/settings/disclaimer/disclaimer.styles.js
 create mode 100644 src/components/settings/disclaimer/index.js

diff --git a/package.json b/package.json
index 891876e..6257462 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,9 @@
     "axios": "^1.2.0",
     "dayjs": "^1.11.6",
     "expo": "~47.0.8",
+    "expo-application": "~5.0.1",
     "expo-av": "~13.0.2",
+    "expo-constants": "~14.0.2",
     "expo-font": "~11.0.1",
     "expo-keep-awake": "~11.0.1",
     "expo-navigation-bar": "~2.0.1",
diff --git a/src/components/NavigationBar/index.js b/src/components/NavigationBar/index.js
index 9f8e963..2c1e6de 100644
--- a/src/components/NavigationBar/index.js
+++ b/src/components/NavigationBar/index.js
@@ -32,8 +32,8 @@ const NavBar = ({ currentRoute }) => {
         </NavBarIconItem>
         <NavBarIconItem onPress={() => handleStackChange("Settings")}>
           <NavBarIcon
-            name="list-ul"
-            isFocused={currentRoute === "List" ? true : false}
+            name="cog"
+            isFocused={currentRoute === "Settings" ? true : false}
           />
         </NavBarIconItem>
       </NavBarWrapper>
diff --git a/src/components/settings/disclaimer/disclaimer.styles.js b/src/components/settings/disclaimer/disclaimer.styles.js
new file mode 100644
index 0000000..7badea7
--- /dev/null
+++ b/src/components/settings/disclaimer/disclaimer.styles.js
@@ -0,0 +1,31 @@
+import styled from "styled-components/native";
+import Icon from "react-native-vector-icons/FontAwesome5";
+
+export const Container = styled.View``;
+
+export const Text = styled.Text`
+  font-family: ${({ theme }) => theme.text.font.secondary};
+  color: ${({ theme }) => theme.text.primary};
+`;
+
+export const AppVersion = styled(Text)`
+  width: 100%;
+  font-size: 20px;
+  text-align: center;
+`;
+
+export const SocialWrapper = styled.View`
+  width: 100%;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-top: 25px;
+  margin-bottom: 25px;
+`;
+
+export const SocialIconWrapper = styled.TouchableOpacity``;
+
+export const Social = styled(Icon)`
+  color: ${({ theme }) => theme.text.primary};
+  font-size: 26px;
+`;
diff --git a/src/components/settings/disclaimer/index.js b/src/components/settings/disclaimer/index.js
new file mode 100644
index 0000000..8328089
--- /dev/null
+++ b/src/components/settings/disclaimer/index.js
@@ -0,0 +1,35 @@
+import { Linking, View } from "react-native";
+import React from "react";
+import {
+  AppVersion,
+  Social,
+  SocialIconWrapper,
+  SocialWrapper,
+  Text,
+} from "./disclaimer.styles";
+import Constants from "expo-constants";
+
+const Disclaimer = () => {
+  const version = Constants.manifest.version;
+
+  const onPress = (url) => {
+    Linking.openURL(url);
+  };
+
+  return (
+    <View>
+      <SocialWrapper>
+        <SocialIconWrapper
+          onPress={() =>
+            onPress("https://github.com/TDanks2000/StreamAble-app")
+          }
+        >
+          <Social name="github" />
+        </SocialIconWrapper>
+      </SocialWrapper>
+      <AppVersion>Version {version}</AppVersion>
+    </View>
+  );
+};
+
+export default Disclaimer;
diff --git a/src/components/settings/index.js b/src/components/settings/index.js
index 9c8fb9e..94f69be 100644
--- a/src/components/settings/index.js
+++ b/src/components/settings/index.js
@@ -7,6 +7,7 @@ import {
   SettingsCardIcon,
   SettingsCardTitle,
 } from "./settings.styles";
+import Disclaimer from "./disclaimer";
 
 const Settings = () => {
   return (
@@ -32,6 +33,7 @@ const Settings = () => {
           <SettingsCardIcon />
         </SettingsCard>
       </Wrapper>
+      <Disclaimer />
     </Container>
   );
 };
diff --git a/src/components/settings/settings.styles.js b/src/components/settings/settings.styles.js
index 0a71171..c2b7b95 100644
--- a/src/components/settings/settings.styles.js
+++ b/src/components/settings/settings.styles.js
@@ -11,15 +11,15 @@ export const Wrapper = styled.View`
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
-  padding: 10px 0;
+  padding: 15px 0;
 `;
 
 export const SettingsCard = styled.TouchableOpacity`
   width: 100%;
-  padding: 15px 25px;
+  padding: 5px 0;
   margin-bottom: 25px;
   border-radius: 8px;
-  background-color: ${({ theme }) => rgba(theme.base.mainColor, 0.8)};
+  // background-color: ${({ theme }) => rgba(theme.base.mainColor, 0.8)};
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -29,7 +29,7 @@ export const SettingsCard = styled.TouchableOpacity`
 export const SettingsCardTitle = styled.Text`
   font-size: 15px;
   font-family: ${({ theme }) => theme.text.font.secondary}
-  color: ${({ theme }) => theme.text.primary};
+  color: ${({ theme }) => theme.base.mainColor};
   text-transform: uppercase;
 `;
 
diff --git a/src/containers/Container.styles.js b/src/containers/Container.styles.js
index 6904051..ca753b5 100644
--- a/src/containers/Container.styles.js
+++ b/src/containers/Container.styles.js
@@ -18,12 +18,12 @@ export const Title = styled.Text`
 
 export const Heading = styled.Text`
   width: 100%;
-  padding-bottom: 5px;
-  border-bottom-width: 1.5px;
+  padding-bottom: 20px;
+  border-bottom-width: 2px;
   border-bottom-color: ${({ theme }) => theme.text.primary};
   font-size: 23px;
   font-family: ${({ theme }) => theme.text.font.secondary};
   color: ${({ theme }) => theme.text.primary};
-  margin-bottom: 15px;
+  margin-bottom: 20px;
   text-transform: uppercase;
 `;