styling changes + citations

TritonSE · Aug 29, 2024 · ac766c7 · ac766c7
1 parent 59f5dc3
commit ac766c7
Show file tree

Hide file tree

Showing 6 changed files with 225 additions and 5 deletions.
diff --git a/dfm-sideline-sidekick-app/components/bar.tsx b/dfm-sideline-sidekick-app/components/bar.tsx
@@ -52,7 +52,11 @@ export const BottomNavBar: React.FC<{ items: NavItem[] }> = ({ items }) => {
           ) : item.icon === "home" ? (
             <HomeIcon fillColor={selectedItemId === item.id ? "#001F3F" : "#C0C8CB"} />
           ) : (
-            <GeneralPrinciplesIcon fillColor={selectedItemId === item.id ? "#001F3F" : "#C0C8CB"} />
+            <View style={{ width: 29 }}>
+              <GeneralPrinciplesIcon
+                fillColor={selectedItemId === item.id ? "#001F3F" : "#C0C8CB"}
+              />
+            </View>
           )}
         </TouchableOpacity>
       ))}

diff --git a/dfm-sideline-sidekick-app/icons/citeIcon.tsx b/dfm-sideline-sidekick-app/icons/citeIcon.tsx
@@ -0,0 +1,21 @@
+import { View } from "react-native";
+import { Path, Svg } from "react-native-svg";
+
+export const CiteIcon = () => {
+  return (
+    <View>
+      <Svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="21"
+        viewBox="0 0 20 21"
+        fill="none"
+      >
+        <Path
+          d="M10.8332 7.89876H9.1665V6.2321H10.8332M10.8332 14.5654H9.1665V9.56543H10.8332M9.99984 2.06543C8.90549 2.06543 7.82185 2.28098 6.81081 2.69977C5.79976 3.11856 4.8811 3.73238 4.10728 4.50621C2.54448 6.06901 1.6665 8.18863 1.6665 10.3988C1.6665 12.6089 2.54448 14.7285 4.10728 16.2913C4.8811 17.0651 5.79976 17.679 6.81081 18.0978C7.82185 18.5165 8.90549 18.7321 9.99984 18.7321C12.21 18.7321 14.3296 17.8541 15.8924 16.2913C17.4552 14.7285 18.3332 12.6089 18.3332 10.3988C18.3332 9.30441 18.1176 8.22078 17.6988 7.20973C17.28 6.19869 16.6662 5.28003 15.8924 4.50621C15.1186 3.73238 14.1999 3.11856 13.1889 2.69977C12.1778 2.28098 11.0942 2.06543 9.99984 2.06543Z"
+          fill="#182B49"
+        />
+      </Svg>
+    </View>
+  );
+};
diff --git a/dfm-sideline-sidekick-app/package-lock.json b/dfm-sideline-sidekick-app/package-lock.json
diff --git a/dfm-sideline-sidekick-app/package.json b/dfm-sideline-sidekick-app/package.json
@@ -23,6 +23,8 @@
     "@react-navigation/native": "^6.1.10",
     "@react-navigation/native-stack": "^6.9.18",
     "@react-navigation/stack": "^6.3.21",
+    "@rneui/base": "^4.0.0-rc.7",
+    "@rneui/themed": "^4.0.0-rc.8",
     "@types/react": "~18.2.14",
     "axios": "^1.6.7",
     "expo": "~49.0.15",

diff --git a/dfm-sideline-sidekick-app/pages/HomePage.tsx b/dfm-sideline-sidekick-app/pages/HomePage.tsx
@@ -3,17 +3,27 @@
 import { Roboto_400Regular, Roboto_500Medium, Roboto_700Bold } from "@expo-google-fonts/roboto";
 import { useNavigation } from "@react-navigation/native";
 import { StackNavigationProp } from "@react-navigation/stack";
+import { Tooltip } from "@rneui/themed";
 import * as Font from "expo-font";
 import { useEffect, useState } from "react";
 import React from "react";
-import { Pressable, SafeAreaView, ScrollView, Text, TouchableOpacity, View } from "react-native";
+import {
+  Linking,
+  Pressable,
+  SafeAreaView,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
 import Icon from "react-native-vector-icons/Feather";
 
 import { getAllBookmarks } from "../components/bookmarkRoutes";
 import { Carousel, CarouselItem } from "../components/carousel";
 import { RootStackParamList } from "../components/viewAll";
 import { useData } from "../functions/DataContext";
 import { ArrowIcon } from "../icons/arrowIcon";
+import { CiteIcon } from "../icons/citeIcon";
 
 import styles from "./HomePageStyles";
 import SearchPage from "./SearchPage";
@@ -32,6 +42,7 @@ const HomePage = () => {
   const [isFontsLoaded, setIsFontsLoaded] = useState<boolean>(false);
   const [bookmarks, setBookmarks] = useState<Bookmark[]>();
   const [searchShowing, setSearchShowing] = useState(false);
+  const [tooltipShow, setTooltipShow] = useState(false);
 
   const { jsonData } = useData();
   const emergencies = jsonData?.emergencies ?? [];
@@ -141,9 +152,40 @@ const HomePage = () => {
           style={styles.topMargin}
         >
           <View>
-            <Text style={[styles.subtitle, styles.horizontalPadding, styles.topPadding]}>
-              Browse By Category
-            </Text>
+            <View style={styles.citationTitle}>
+              <Text style={[styles.subtitle, styles.horizontalPadding, styles.topPadding]}>
+                Browse By Category
+              </Text>
+              <View style={styles.citeIcon}>
+                <Tooltip
+                  visible={tooltipShow}
+                  onOpen={() => {
+                    setTooltipShow(true);
+                  }}
+                  onClose={() => {
+                    setTooltipShow(false);
+                  }}
+                  popover={
+                    <Text style={{ color: "#fff" }}>
+                      For support and citations for the info found in this app, visit{" "}
+                      <Text
+                        style={{ color: "#0000EE", textDecorationLine: "underline" }}
+                        onPress={() =>
+                          void Linking.openURL("https://sideline-sidekick-app.web.app/citations")
+                        }
+                      >
+                        this link
+                      </Text>
+                      .
+                    </Text>
+                  }
+                  width={200}
+                  height={100}
+                >
+                  <CiteIcon />
+                </Tooltip>
+              </View>
+            </View>
             <View style={styles.categories}>
               {cards.map((card, index) => {
                 const route = routes[index];

diff --git a/dfm-sideline-sidekick-app/pages/HomePageStyles.tsx b/dfm-sideline-sidekick-app/pages/HomePageStyles.tsx
@@ -25,6 +25,15 @@ const styles = StyleSheet.create({
     fontWeight: "600",
     textAlign: "left",
     maxWidth: "70%",
+    paddingRight: 4,
+  },
+  citationTitle: {
+    flexDirection: "row",
+    alignItems: "flex-end",
+    justifyContent: "flex-start",
+  },
+  citeIcon: {
+    paddingBottom: 2,
   },
   searchContainer: {
     flexDirection: "row",