⚙️ - added settings (none atm)

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",

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>

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;
+`;

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;

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>
   );
 };

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;
 `;
 

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;
 `;