From ac766c7a8ec57bd4b1aa5457ba096bfe870f2a26 Mon Sep 17 00:00:00 2001 From: anthony-pertsel <76824702+Anthonyp0329@users.noreply.github.com> Date: Wed, 28 Aug 2024 22:47:51 -0700 Subject: [PATCH] styling changes + citations --- dfm-sideline-sidekick-app/components/bar.tsx | 6 +- dfm-sideline-sidekick-app/icons/citeIcon.tsx | 21 +++ dfm-sideline-sidekick-app/package-lock.json | 142 ++++++++++++++++++ dfm-sideline-sidekick-app/package.json | 2 + dfm-sideline-sidekick-app/pages/HomePage.tsx | 50 +++++- .../pages/HomePageStyles.tsx | 9 ++ 6 files changed, 225 insertions(+), 5 deletions(-) create mode 100644 dfm-sideline-sidekick-app/icons/citeIcon.tsx diff --git a/dfm-sideline-sidekick-app/components/bar.tsx b/dfm-sideline-sidekick-app/components/bar.tsx index 579704a..0bf24c0 100644 --- 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" ? ( ) : ( - + + + )} ))} diff --git a/dfm-sideline-sidekick-app/icons/citeIcon.tsx b/dfm-sideline-sidekick-app/icons/citeIcon.tsx new file mode 100644 index 0000000..aadc715 --- /dev/null +++ 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 ( + + + + + + ); +}; diff --git a/dfm-sideline-sidekick-app/package-lock.json b/dfm-sideline-sidekick-app/package-lock.json index a5e05a6..382b94a 100644 --- a/dfm-sideline-sidekick-app/package-lock.json +++ b/dfm-sideline-sidekick-app/package-lock.json @@ -16,6 +16,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", @@ -6330,6 +6332,48 @@ "node": ">=14.0.0" } }, + "node_modules/@rneui/base": { + "version": "4.0.0-rc.7", + "resolved": "https://registry.npmjs.org/@rneui/base/-/base-4.0.0-rc.7.tgz", + "integrity": "sha512-dffzoYek3Qp+7wJzC42QjI/Fu1HOUNxFIR88t1laDrBV5QZQB55f+Vu5zLbC80/bh1b8fYtl63HTIWpORuA3Eg==", + "dependencies": { + "@types/react-native-vector-icons": "^6.4.10", + "color": "^3.2.1", + "deepmerge": "^4.2.2", + "hoist-non-react-statics": "^3.3.2", + "react-native-ratings": "^8.1.0", + "react-native-size-matters": "^0.4.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/react-native-elements" + }, + "peerDependencies": { + "react-native-safe-area-context": "^3.1.9 || ^4.0.0", + "react-native-vector-icons": ">7.0.0" + } + }, + "node_modules/@rneui/base/node_modules/color": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz", + "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==", + "dependencies": { + "color-convert": "^1.9.3", + "color-string": "^1.6.0" + } + }, + "node_modules/@rneui/themed": { + "version": "4.0.0-rc.8", + "resolved": "https://registry.npmjs.org/@rneui/themed/-/themed-4.0.0-rc.8.tgz", + "integrity": "sha512-8L/XOrL9OK/r+/iBLvx63TbIdZOXF8SIjN9eArMYm6kRbMr8m4BitXllDN8nBhBsSPNYvL6EAgjk+i2MfY4sBA==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/react-native-elements" + }, + "peerDependencies": { + "@rneui/base": "4.0.0-rc.7" + } + }, "node_modules/@segment/loosely-validate-event": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@segment/loosely-validate-event/-/loosely-validate-event-2.0.0.tgz", @@ -6447,6 +6491,23 @@ "csstype": "^3.0.2" } }, + "node_modules/@types/react-native": { + "version": "0.70.19", + "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.70.19.tgz", + "integrity": "sha512-c6WbyCgWTBgKKMESj/8b4w+zWcZSsCforson7UdXtXMecG3MxCinYi6ihhrHVPyUrVzORsvEzK8zg32z4pK6Sg==", + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/react-native-vector-icons": { + "version": "6.4.18", + "resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.18.tgz", + "integrity": "sha512-YGlNWb+k5laTBHd7+uZowB9DpIK3SXUneZqAiKQaj1jnJCZM0x71GDim5JCTMi4IFkhc9m8H/Gm28T5BjyivUw==", + "dependencies": { + "@types/react": "*", + "@types/react-native": "^0.70" + } + }, "node_modules/@types/scheduler": { "version": "0.16.8", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", @@ -15435,6 +15496,18 @@ "react-native": "*" } }, + "node_modules/react-native-ratings": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/react-native-ratings/-/react-native-ratings-8.1.0.tgz", + "integrity": "sha512-+QOJ4G3NjVkI1D+tk4EGx1dCvVfbD2nQdkrj9cXrcAoEiwmbep4z4bZbCKmWMpQ5h2dqbxABU8/eBnbDmvAc3g==", + "dependencies": { + "lodash": "^4.17.15" + }, + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, "node_modules/react-native-safe-area-context": { "version": "4.6.3", "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.6.3.tgz", @@ -15457,6 +15530,14 @@ "react-native": "*" } }, + "node_modules/react-native-size-matters": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/react-native-size-matters/-/react-native-size-matters-0.4.2.tgz", + "integrity": "sha512-DKE3f/sdcozd24oASgkP1iGg+YU3HoajRa5k3a4wkRzpiqREq8SGX12Y5zBgAt/8IivLQoTMYkyQu1/Giuy+zQ==", + "peerDependencies": { + "react-native": "*" + } + }, "node_modules/react-native-svg": { "version": "13.9.0", "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-13.9.0.tgz", @@ -22307,6 +22388,36 @@ "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.0.tgz", "integrity": "sha512-HOil5aFtme37dVQTB6M34G95kPM3MMuqSmIRVCC52eKV+Y/tGSqw9P3rWhlAx6A+mz+MoX+XxsGsNJbaI5qCgQ==" }, + "@rneui/base": { + "version": "4.0.0-rc.7", + "resolved": "https://registry.npmjs.org/@rneui/base/-/base-4.0.0-rc.7.tgz", + "integrity": "sha512-dffzoYek3Qp+7wJzC42QjI/Fu1HOUNxFIR88t1laDrBV5QZQB55f+Vu5zLbC80/bh1b8fYtl63HTIWpORuA3Eg==", + "requires": { + "@types/react-native-vector-icons": "^6.4.10", + "color": "^3.2.1", + "deepmerge": "^4.2.2", + "hoist-non-react-statics": "^3.3.2", + "react-native-ratings": "^8.1.0", + "react-native-size-matters": "^0.4.0" + }, + "dependencies": { + "color": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz", + "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==", + "requires": { + "color-convert": "^1.9.3", + "color-string": "^1.6.0" + } + } + } + }, + "@rneui/themed": { + "version": "4.0.0-rc.8", + "resolved": "https://registry.npmjs.org/@rneui/themed/-/themed-4.0.0-rc.8.tgz", + "integrity": "sha512-8L/XOrL9OK/r+/iBLvx63TbIdZOXF8SIjN9eArMYm6kRbMr8m4BitXllDN8nBhBsSPNYvL6EAgjk+i2MfY4sBA==", + "requires": {} + }, "@segment/loosely-validate-event": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@segment/loosely-validate-event/-/loosely-validate-event-2.0.0.tgz", @@ -22424,6 +22535,23 @@ "csstype": "^3.0.2" } }, + "@types/react-native": { + "version": "0.70.19", + "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.70.19.tgz", + "integrity": "sha512-c6WbyCgWTBgKKMESj/8b4w+zWcZSsCforson7UdXtXMecG3MxCinYi6ihhrHVPyUrVzORsvEzK8zg32z4pK6Sg==", + "requires": { + "@types/react": "*" + } + }, + "@types/react-native-vector-icons": { + "version": "6.4.18", + "resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.18.tgz", + "integrity": "sha512-YGlNWb+k5laTBHd7+uZowB9DpIK3SXUneZqAiKQaj1jnJCZM0x71GDim5JCTMi4IFkhc9m8H/Gm28T5BjyivUw==", + "requires": { + "@types/react": "*", + "@types/react-native": "^0.70" + } + }, "@types/scheduler": { "version": "0.16.8", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", @@ -29093,6 +29221,14 @@ "prop-types": "^15.7.2" } }, + "react-native-ratings": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/react-native-ratings/-/react-native-ratings-8.1.0.tgz", + "integrity": "sha512-+QOJ4G3NjVkI1D+tk4EGx1dCvVfbD2nQdkrj9cXrcAoEiwmbep4z4bZbCKmWMpQ5h2dqbxABU8/eBnbDmvAc3g==", + "requires": { + "lodash": "^4.17.15" + } + }, "react-native-safe-area-context": { "version": "4.6.3", "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.6.3.tgz", @@ -29108,6 +29244,12 @@ "warn-once": "^0.1.0" } }, + "react-native-size-matters": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/react-native-size-matters/-/react-native-size-matters-0.4.2.tgz", + "integrity": "sha512-DKE3f/sdcozd24oASgkP1iGg+YU3HoajRa5k3a4wkRzpiqREq8SGX12Y5zBgAt/8IivLQoTMYkyQu1/Giuy+zQ==", + "requires": {} + }, "react-native-svg": { "version": "13.9.0", "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-13.9.0.tgz", diff --git a/dfm-sideline-sidekick-app/package.json b/dfm-sideline-sidekick-app/package.json index 987dd3a..23e64ca 100644 --- 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 index 7a959e5..73c2deb 100644 --- a/dfm-sideline-sidekick-app/pages/HomePage.tsx +++ b/dfm-sideline-sidekick-app/pages/HomePage.tsx @@ -3,10 +3,19 @@ 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"; @@ -14,6 +23,7 @@ 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(false); const [bookmarks, setBookmarks] = useState(); 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} > - - Browse By Category - + + + Browse By Category + + + { + setTooltipShow(true); + }} + onClose={() => { + setTooltipShow(false); + }} + popover={ + + For support and citations for the info found in this app, visit{" "} + + void Linking.openURL("https://sideline-sidekick-app.web.app/citations") + } + > + this link + + . + + } + width={200} + height={100} + > + + + + {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 index b68bb1f..9c67468 100644 --- 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",