From 6e69a37b2b2a36194a44817d0a30cf6cd4aedae6 Mon Sep 17 00:00:00 2001
From: Kira <iam@kirajiroux.com>
Date: Wed, 30 Aug 2023 14:24:52 -0700
Subject: [PATCH] Finished visual appearance of app

---
 MAUI_Weather/MVVM/Views/WeatherView.xaml     | 46 +++++++++++++++++++-
 MAUI_Weather/Resources/Styles/AppStyles.xaml | 18 ++++++++
 MAUI_Weather/Resources/Styles/Colors.xaml    |  1 +
 3 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/MAUI_Weather/MVVM/Views/WeatherView.xaml b/MAUI_Weather/MVVM/Views/WeatherView.xaml
index 3436c09..93b2c4f 100644
--- a/MAUI_Weather/MVVM/Views/WeatherView.xaml
+++ b/MAUI_Weather/MVVM/Views/WeatherView.xaml
@@ -11,15 +11,59 @@
             <Frame/>
             <SearchBar Placeholder="Search" VerticalOptions="Center"/>
         </Grid>
-        <!--  -->
+        <!-- Title -->
         <VerticalStackLayout Grid.Row="1" Style="{StaticResource MainStackLayout}">
             <Label Text="Rome" Style="{StaticResource Title}"/>
             <Label Text="November 2077"/>
         </VerticalStackLayout>
+        <!-- Weather Preview Anim -->
         <skia:SKLottieView
             Grid.Row="2"
             RepeatCount="-1"
             Source="storm.json"/>
+        <!-- Weather Information -->
+        <Grid Grid.Row="3" ColumnDefinitions="*,*,*">
+            <VerticalStackLayout HorizontalOptions="Center" Spacing="10">
+                <Label Style="{StaticResource WeatherTitle}" Text="Temp" />
+                <Label Style="{StaticResource WeatherValue}" Text="60" />
+            </VerticalStackLayout>
+            <VerticalStackLayout Grid.Column="1" HorizontalOptions="Center" Spacing="10">
+                <Label Style="{StaticResource WeatherTitle}" Text="Wind" />
+                <Label Style="{StaticResource WeatherValue}" Text="10mph" />
+            </VerticalStackLayout>
+            <VerticalStackLayout Grid.Column="2" HorizontalOptions="Center" Spacing="10">
+                <Label Style="{StaticResource WeatherTitle}" Text="Weather" />
+                <Label Style="{StaticResource WeatherValue}" Text="Sunny" />
+            </VerticalStackLayout>
+        </Grid>
+        <!-- Weather Forecast -->
+        <CollectionView Grid.Row="4" HorizontalOptions="Center">
+            <CollectionView.ItemsSource>
+                <x:Array Type="{x:Type x:String}">
+                    <x:String>1</x:String>
+                    <x:String>2</x:String>
+                    <x:String>3</x:String>
+                    <x:String>4</x:String>
+                    <x:String>5</x:String>
+                </x:Array>
+            </CollectionView.ItemsSource>
+            <CollectionView.ItemsLayout>
+                <LinearItemsLayout ItemSpacing="10" Orientation="Horizontal"/>
+            </CollectionView.ItemsLayout>
+            <CollectionView.ItemTemplate>
+                <DataTemplate>
+                    <Frame Style="{StaticResource Card}">
+                        <VerticalStackLayout Spacing="5" VerticalOptions="Center">
+                            <skia:SKLottieView IsAnimationEnabled="False" HeightRequest="50" WidthRequest="50" Source="mist.json"/>
+                            <Label Text="Date" TextColor="{StaticResource Yellow100Accent}"/>
+                            <Label Text="Temp"/>
+                            <Label Text="Sunny"/>
+                        </VerticalStackLayout>
+                    </Frame>
+                </DataTemplate>
+            </CollectionView.ItemTemplate>
+        </CollectionView>
+        
 
     </Grid>
 </ContentPage>
\ No newline at end of file
diff --git a/MAUI_Weather/Resources/Styles/AppStyles.xaml b/MAUI_Weather/Resources/Styles/AppStyles.xaml
index d8399a1..e5eb507 100644
--- a/MAUI_Weather/Resources/Styles/AppStyles.xaml
+++ b/MAUI_Weather/Resources/Styles/AppStyles.xaml
@@ -23,4 +23,22 @@
         <Setter Property="FontSize" Value="Large"/>
     </Style>
 
+    <Style x:Key="WeatherTitle" TargetType="Label">
+        <Setter Property="FontFamily" Value="RubikLight"/>
+    </Style>
+
+    <Style x:Key="WeatherValue" TargetType="Label">
+        <Setter Property="FontAttributes" Value="Bold"/>
+    </Style>
+
+    <Style x:Key="Card" TargetType="Frame">
+        <Setter Property="Padding" Value="0"/>
+        <Setter Property="BackgroundColor" Value="{StaticResource Cardblue}"/>
+        <Setter Property="BorderColor" Value="Transparent"/>
+        <Setter Property="CornerRadius" Value="25"/>
+        <Setter Property="HeightRequest" Value="150"/>
+        <Setter Property="WidthRequest" Value="150"/>
+        <Setter Property="Opacity" Value=".1"/>
+    </Style>
+
 </ResourceDictionary>
\ No newline at end of file
diff --git a/MAUI_Weather/Resources/Styles/Colors.xaml b/MAUI_Weather/Resources/Styles/Colors.xaml
index b172a32..c104f6a 100644
--- a/MAUI_Weather/Resources/Styles/Colors.xaml
+++ b/MAUI_Weather/Resources/Styles/Colors.xaml
@@ -8,6 +8,7 @@
     https://colorhunt.co/palette/0c134f1d267d5c469cd4adfc
     -->
     <Color x:Key="Darkblue">#0c134f</Color>
+    <Color x:Key="Cardblue">#1d267d</Color>
     <Color x:Key="Lightpurple">#d4adfc</Color>
     
     <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->