add simple styles to tabar

AppShell.xaml

@@ -6,27 +6,38 @@
     xmlns:local="clr-namespace:ShoopNCook"
     xmlns:pages="clr-namespace:ShoopNCook.Pages"
     Shell.FlyoutBehavior="Disabled"
-    Shell.NavBarIsVisible="False">
+    Shell.NavBarIsVisible="False"
+    Shell.TabBarBackgroundColor="White"
+    Shell.TabBarTitleColor="{StaticResource Selected}"
+    Shell.TabBarUnselectedColor="{StaticResource TextColorSecondary}">
 
     <TabBar>
         <ShellContent
-            Title="Home Page"
+            x:Name="HomeTab"
+            Title="Home"
             ContentTemplate="{DataTemplate pages:HomePage}"
-            Route="HomePage" />
+            Route="HomePage"
+            Icon="home.svg"/>
 
         <ShellContent
-            Title="Favorites Page"
+            x:Name="FavoritesTab"
+            Title="Favorites"
             ContentTemplate="{DataTemplate pages:FavoritesPage}"
-            Route="Favorites" />
+            Route="Favorites"
+            Icon="hearth_on.svg"/>
 
         <ShellContent
-            Title="MyList Page"
+            x:Name="MyListTab"
+            Title="MyList"
             ContentTemplate="{DataTemplate pages:MyListPage}"
-            Route="MyList" />
+            Route="MyList"
+            Icon="list.svg"/>
 
         <ShellContent
-            Title="More Page"
+            x:Name="MoreTab"
+            Title="More"
             ContentTemplate="{DataTemplate pages:MorePage}"
-            Route="More"/>
+            Route="More"
+            Icon="more.svg"/>
     </TabBar>
 </Shell>

Pages/MorePage.xaml

@@ -5,6 +5,7 @@
              BackgroundColor="{StaticResource BackgroundPrimary}"
              xmlns:views="clr-namespace:ShoopNCook.Views"
              Title="MorePage">
+    
     <Grid
         RowDefinitions="Auto, *"
         Padding="20, 50, 20, 20">
@@ -30,6 +31,7 @@
             Grid.Row="1"
             VerticalOptions="Center"
             Margin="40, 0, 0, 0">
+            
             <views:HeadedButton Text="My Recipes" HeadSource="cookie.svg" HeadColor="#FF5441"/>
             <views:HeadedButton Text="Edit Profile" HeadSource="user_fill.svg" HeadColor="#FF5441"/>
             <views:HeadedButton Text="Dark Mode" HeadSource="moon_white.svg" HeadColor="#FFFFFF"/>

Resources/Images/home.svg

@@ -0,0 +1,3 @@
+<svg width="95" height="100" viewBox="0 0 95 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.174 93.8667V78.5781C33.174 74.6753 36.3609 71.5115 40.2922 71.5115H54.6631C56.551 71.5115 58.3616 72.256 59.6965 73.5813C61.0314 74.9065 61.7814 76.7039 61.7814 78.5781V93.8667C61.7695 95.4892 62.4104 97.0494 63.5619 98.2009C64.7134 99.3524 66.2803 100 67.9148 99.9999H77.7192C82.2982 100.012 86.6938 98.2142 89.9359 95.004C93.178 91.7939 95.0001 87.4349 95.0001 82.8891V39.3343C94.9999 35.6623 93.3604 32.1792 90.5232 29.8233L57.1702 3.37934C51.3684 -1.25719 43.0556 -1.10749 37.427 3.73489L4.83512 29.8233C1.86376 32.1098 0.0878225 35.6032 6.10352e-05 39.3343V82.8447C6.10352e-05 92.3193 7.73697 99.9999 17.2809 99.9999H26.8615C30.2562 100 33.015 97.2811 33.0396 93.9112L33.174 93.8667Z" fill="#A8A8AA"/>
+</svg>

Resources/Images/list.svg

@@ -0,0 +1,3 @@
+<svg width="136" height="78" viewBox="0 0 136 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M37.7778 11.7C36.1722 11.7 34.8264 11.1361 33.7403 10.0084C32.6542 8.8805 32.1111 7.483 32.1111 5.81588C32.1111 4.14863 32.6542 2.7625 33.7403 1.6575C34.8264 0.5525 36.1722 0 37.7778 0H130.333C131.939 0 133.285 0.563873 134.371 1.69162C135.457 2.8195 136 4.217 136 5.88412C136 7.55137 135.457 8.9375 134.371 10.0425C133.285 11.1475 131.939 11.7 130.333 11.7H37.7778ZM37.7778 44.85C36.1722 44.85 34.8264 44.2861 33.7403 43.1584C32.6542 42.0305 32.1111 40.633 32.1111 38.9659C32.1111 37.2986 32.6542 35.9125 33.7403 34.8075C34.8264 33.7025 36.1722 33.15 37.7778 33.15H130.333C131.939 33.15 133.285 33.7139 134.371 34.8416C135.457 35.9695 136 37.367 136 39.0341C136 40.7014 135.457 42.0875 134.371 43.1925C133.285 44.2975 131.939 44.85 130.333 44.85H37.7778ZM37.7778 78C36.1722 78 34.8264 77.4361 33.7403 76.3084C32.6542 75.1805 32.1111 73.783 32.1111 72.1159C32.1111 70.4486 32.6542 69.0625 33.7403 67.9575C34.8264 66.8525 36.1722 66.3 37.7778 66.3H130.333C131.939 66.3 133.285 66.8639 134.371 67.9916C135.457 69.1195 136 70.517 136 72.1841C136 73.8514 135.457 75.2375 134.371 76.3425C133.285 77.4475 131.939 78 130.333 78H37.7778ZM5.63361 11.7C4.01861 11.7 2.67593 11.1361 1.60556 10.0084C0.535185 8.8805 0 7.483 0 5.81588C0 4.14863 0.546204 2.7625 1.63861 1.6575C2.73114 0.5525 4.08485 0 5.69972 0C7.31472 0 8.65741 0.563873 9.72778 1.69162C10.7981 2.8195 11.3333 4.217 11.3333 5.88412C11.3333 7.55137 10.7871 8.9375 9.69472 10.0425C8.60219 11.1475 7.24848 11.7 5.63361 11.7ZM5.63361 44.85C4.01861 44.85 2.67593 44.2861 1.60556 43.1584C0.535185 42.0305 0 40.633 0 38.9659C0 37.2986 0.546204 35.9125 1.63861 34.8075C2.73114 33.7025 4.08485 33.15 5.69972 33.15C7.31472 33.15 8.65741 33.7139 9.72778 34.8416C10.7981 35.9695 11.3333 37.367 11.3333 39.0341C11.3333 40.7014 10.7871 42.0875 9.69472 43.1925C8.60219 44.2975 7.24848 44.85 5.63361 44.85ZM5.63361 78C4.01861 78 2.67593 77.4361 1.60556 76.3084C0.535185 75.1805 0 73.783 0 72.1159C0 70.4486 0.546204 69.0625 1.63861 67.9575C2.73114 66.8525 4.08485 66.3 5.69972 66.3C7.31472 66.3 8.65741 66.8639 9.72778 67.9916C10.7981 69.1195 11.3333 70.517 11.3333 72.1841C11.3333 73.8514 10.7871 75.2375 9.69472 76.3425C8.60219 77.4475 7.24848 78 5.63361 78Z" fill="#A8A8AA"/>
+</svg>

Resources/Images/more.svg

@@ -0,0 +1,3 @@
+<svg width="193" height="30" viewBox="0 0 193 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.0421004 14.3975C0.0536819 10.4148 1.48172 7.02368 4.32619 4.2241C7.17046 1.42452 10.584 0.0305238 14.567 0.0421058C18.5497 0.0536873 21.9408 1.48171 24.7404 4.32619C27.5399 7.17046 28.9339 10.584 28.9224 14.5669C28.9108 18.5496 27.4827 21.9408 24.6383 24.7404C21.794 27.54 18.3804 28.934 14.3975 28.9224C10.4148 28.9108 7.02368 27.4828 4.2241 24.6383C1.42452 21.794 0.0305184 18.3804 0.0421004 14.3975ZM81.8702 14.6355C81.8818 10.6528 83.3098 7.26163 86.1543 4.46205C88.9986 1.66247 92.4122 0.268475 96.3951 0.280057C100.378 0.291639 103.769 1.71966 106.568 4.56414C109.368 7.40841 110.762 10.822 110.75 14.8049C110.739 18.7876 109.311 22.1787 106.466 24.9783C103.622 27.7779 100.209 29.1719 96.2256 29.1603C92.2429 29.1487 88.8518 27.7207 86.0522 24.8762C83.2526 22.032 81.8586 18.6184 81.8702 14.6355ZM163.698 14.8734C163.71 10.8907 165.138 7.49959 167.982 4.70001C170.827 1.90043 174.24 0.506426 178.223 0.518008C182.206 0.52959 185.597 1.95762 188.397 4.80209C191.196 7.64636 192.59 11.0599 192.579 15.0428C192.567 19.0256 191.139 22.4167 188.295 25.2163C185.45 28.0159 182.037 29.4099 178.054 29.3983C174.071 29.3867 170.68 27.9587 167.88 25.1142C165.081 22.2699 163.687 18.8563 163.698 14.8734Z" fill="#A8A8AA"/>
+</svg>

ShoopNCook.csproj

@@ -56,11 +56,14 @@
 	  <None Remove="Resources\Images\facebook_logo.svg" />
 	  <None Remove="Resources\Images\hearth_off.svg" />
 	  <None Remove="Resources\Images\hearth_on.svg" />
+	  <None Remove="Resources\Images\Home.svg" />
+	  <None Remove="Resources\Images\list.svg" />
 	  <None Remove="Resources\Images\logout_arrow.svg" />
 	  <None Remove="Resources\Images\minus.svg" />
 	  <None Remove="Resources\Images\moon_white.svg" />
 	  <None Remove="Resources\Images\email_icon.svg" />
 	  <None Remove="Resources\Images\facebook_logo.svg" />
+	  <None Remove="Resources\Images\more.svg" />
 	  <None Remove="Resources\Images\password_icon.svg" />
 	  <None Remove="Resources\Images\search_options.svg" />
 	  <None Remove="Resources\Images\share.svg" />