From 87339bbbc4346d1be2cf9c9fc510b53e825a0a98 Mon Sep 17 00:00:00 2001 From: Inaya Yusuf Date: Sat, 2 Dec 2023 12:02:31 -0800 Subject: [PATCH] bottom nav bar styling --- assets/clarity_library-line.svg | 16 +++++ assets/home_alt_outline copy.svg | 5 ++ assets/home_alt_outline.svg | 5 ++ assets/icons.tsx | 100 ++++++++++++++++++++++++++++++- assets/search_small.svg | 5 ++ src/app/(tabs)/_layout.tsx | 37 +++++++++--- src/styles/colors.ts | 18 +++++- 7 files changed, 175 insertions(+), 11 deletions(-) create mode 100644 assets/clarity_library-line.svg create mode 100644 assets/home_alt_outline copy.svg create mode 100644 assets/home_alt_outline.svg create mode 100644 assets/search_small.svg diff --git a/assets/clarity_library-line.svg b/assets/clarity_library-line.svg new file mode 100644 index 00000000..acb7aaad --- /dev/null +++ b/assets/clarity_library-line.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/assets/home_alt_outline copy.svg b/assets/home_alt_outline copy.svg new file mode 100644 index 00000000..600d9d85 --- /dev/null +++ b/assets/home_alt_outline copy.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/home_alt_outline.svg b/assets/home_alt_outline.svg new file mode 100644 index 00000000..a6883a14 --- /dev/null +++ b/assets/home_alt_outline.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/icons.tsx b/assets/icons.tsx index 05654a56..9922dd37 100644 --- a/assets/icons.tsx +++ b/assets/icons.tsx @@ -1,6 +1,6 @@ import { Ionicons } from '@expo/vector-icons'; import React from 'react'; -import { SvgXml } from 'react-native-svg'; +import { Svg, SvgXml } from 'react-native-svg'; export type IconType = | 'home_outline' @@ -11,7 +11,11 @@ export type IconType = | 'green_check' | 'hide_password' | 'grey_dot' - | 'settings_gear'; + | 'settings_gear' + | 'home_nav_bar' + | 'search_nav_bar' + | 'library_nav_bar' + | 'home_nav_active'; const IconSvgs: Record = { home_outline: , @@ -99,6 +103,26 @@ const IconSvgs: Record = { id="Vector_3" d="M14 15C13.9344 15.0008 13.8694 14.9879 13.8091 14.962C13.7489 14.9362 13.6946 14.898 13.65 14.85L1.65 2.84999C1.45 2.64999 1.45 2.33999 1.65 2.13999C1.85 1.93999 2.16 1.93999 2.36 2.13999L14.35 14.15C14.55 14.35 14.55 14.66 14.35 14.86C14.25 14.96 14.12 15.01 14 15.01V15Z" fill="#2D2D2D" + /> + + `} + /> + ), + + home_nav_bar: ( + + + `} @@ -118,12 +142,84 @@ const IconSvgs: Record = { id="Vector" d="M6.99992 10.9998C7.27421 10.9998 7.53288 10.9478 7.77593 10.8436C8.01897 10.7394 8.23077 10.5971 8.41132 10.4165C8.59187 10.236 8.73596 10.0224 8.84359 9.77593C8.95123 9.52941 9.00331 9.27074 8.99984 8.99992C8.99984 8.72215 8.94776 8.46348 8.84359 8.22391C8.73943 7.98433 8.59708 7.77254 8.41653 7.58852C8.23598 7.4045 8.02245 7.26041 7.77593 7.15624C7.52941 7.05208 7.27074 7 6.99992 7C6.72215 7 6.46348 7.05208 6.22391 7.15624C5.98433 7.26041 5.77254 7.40276 5.58852 7.58331C5.4045 7.76386 5.26041 7.97565 5.15624 8.2187C5.05208 8.46175 5 8.72215 5 8.99992C5 9.27421 5.05208 9.53288 5.15624 9.77593C5.26041 10.019 5.40276 10.2308 5.58331 10.4113C5.76386 10.5919 5.97565 10.736 6.2187 10.8436C6.46175 10.9512 6.72215 11.0033 6.99992 10.9998Z" fill="#797979" + /> + + `} + /> + ), + search_nav_bar: ( + + + + + `} + /> + ), + library_nav_bar: ( + + + + + + + + + + + + + + + + `} + /> + ), + home_nav_active: ( + + + `} /> ), }; + type Props = { className?: string; type: IconType; diff --git a/assets/search_small.svg b/assets/search_small.svg new file mode 100644 index 00000000..57d42ea0 --- /dev/null +++ b/assets/search_small.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/app/(tabs)/_layout.tsx b/src/app/(tabs)/_layout.tsx index 60ee9389..d36e3c9c 100644 --- a/src/app/(tabs)/_layout.tsx +++ b/src/app/(tabs)/_layout.tsx @@ -1,24 +1,44 @@ import { Ionicons } from '@expo/vector-icons'; import { Tabs } from 'expo-router'; +import Icon from '../../../assets/icons'; +import colors from '../../styles/colors'; + function HomeIcon({ color }: { color: string }) { - return ; + return ( + + ); } -function SearchIcon({ color }: { color: string }) { - return ; +function SearchIcon() { + return ; } -function DocumentIcon({ color }: { color: string }) { - return ; +function DocumentIcon() { + return ; } +// function HomeIcon({ color }: { color: string }) { +// return ; +// } +// function SearchIcon({ color }: { color: string }) { +// return ; +// } +// function DocumentIcon({ color }: { color: string }) { +// return ; +// } + function TabNav() { return ( HomeIcon({ color }), + // tabBarLabelStyle: { borderTopWidth: 12, paddingTop: 12 }, }} /> diff --git a/src/styles/colors.ts b/src/styles/colors.ts index 5946347e..f547193f 100644 --- a/src/styles/colors.ts +++ b/src/styles/colors.ts @@ -1,4 +1,20 @@ const colors = { + // Colors + gwnOrange: '#EB563B', + gwnOrangeDisabled: 'rgba(235, 86, 59, 0.4)', + lilac: '#B49BC6', + lime: '#ACC073', + melanin: '#703929', + citrus: '#E66E3F', + moss: '5A7906', + + // Neutrals + black: '#000000', + fadedBlack: '#2D2D2D', + white: '#FBFBFB', + grey: '#A7A5A5', + darkGrey: '#797979', + // Primary colors gwnOrange: '#EB563B', gwnOrangeDisabled: 'rgba(235, 86, 59, 0.4)', @@ -15,7 +31,7 @@ const colors = { textGrey: '#797979', // for sign in // Surface colors -- used for backgrounds - darkGrey: '#D9D9D9', + // darkGrey: '#D9D9D9', lightGrey: '#F9F9F9', white: '#FEFEFA',