From 59b76ea11787be9813f0dc616ab42e437fdd6c6a Mon Sep 17 00:00:00 2001
From: Lucas Patenaude <LUPA7501@colorado.edu>
Date: Wed, 24 Apr 2024 20:00:06 -0600
Subject: [PATCH] More styling added to account page

---
 .../css/login-and-registration/account.css    | 35 ++++++++++++++-----
 .../login_and_registration.css                |  3 ++
 .../user-menu/account-screen.hbs              | 22 ++++++------
 3 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/ProjectSourceCode/src/resources/css/login-and-registration/account.css b/ProjectSourceCode/src/resources/css/login-and-registration/account.css
index bf510da..63b9a65 100644
--- a/ProjectSourceCode/src/resources/css/login-and-registration/account.css
+++ b/ProjectSourceCode/src/resources/css/login-and-registration/account.css
@@ -9,9 +9,17 @@
 }
 
 #account-header-container {
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     padding: 10px;
-    font-size: 32px;
     border-bottom: 3px solid red;
+
+    #username {
+        font-size: 23px;
+        font-weight: 500;
+    }  
 }
 
 #login-form-container {
@@ -19,17 +27,28 @@
     flex-direction: column;
 }
 
+#favorite-teams-container {
+    padding: 10px;
+}
+
 .favorite-teams-card {
+    
     display: flex;
-
-    border: 1px solid black;
-    border-radius: 12px;
-
-    padding: 10px 90px;
-
+    align-items: center; /* Align items vertically in the center */
+    background-color: white;
+    border: 1px solid rgb(218, 218, 218);
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
+    border-radius: 8px;
+    padding: 10px 20px;
     margin: 10px 0;
 
+    
+}
+
+.favorite-teams-card-logo-container {
+
     img {
-        width: 40px;
+        width: 80px;
+        max-height: 80px;
     }
 }
\ No newline at end of file
diff --git a/ProjectSourceCode/src/resources/css/login-and-registration/login_and_registration.css b/ProjectSourceCode/src/resources/css/login-and-registration/login_and_registration.css
index abb0b6f..80ab728 100644
--- a/ProjectSourceCode/src/resources/css/login-and-registration/login_and_registration.css
+++ b/ProjectSourceCode/src/resources/css/login-and-registration/login_and_registration.css
@@ -24,6 +24,9 @@
 }
 
 .account-portal-button {
+    width: 60px;
+    text-decoration: none;
+
     padding: 5px 10px;
     background-color: red;
     border-color: red;
diff --git a/ProjectSourceCode/src/views/partials/navigation-bar/user-menu/account-screen.hbs b/ProjectSourceCode/src/views/partials/navigation-bar/user-menu/account-screen.hbs
index 922f00c..48f70ce 100644
--- a/ProjectSourceCode/src/views/partials/navigation-bar/user-menu/account-screen.hbs
+++ b/ProjectSourceCode/src/views/partials/navigation-bar/user-menu/account-screen.hbs
@@ -1,25 +1,27 @@
-<!-- Linking forms.css -->
 <div class="account-portal-container" id="account-pane">
 
     <div id="account-pane-content-container">
-
         <div id="account-header-container">
             <a id="username">Hello, {{user.username}}</a>
+
+            <div class="logout-container">
+                <a id="logout-button" class="account-portal-button" href="/logout">Logout</a>
+            </div>
         </div>
 
-        <div id="login-form-container" class="form-container">
-            <a style="text-decoration: underline;">Favorite Teams:</a> <br>
+        <div id="favorite-teams-container">
+            <a id="favorite-teams-header">Favorite Teams:</a>
 
             {{#each fav_teams}}
                 <div class="favorite-teams-card">
-                    <img id="teamlogo" src="{{this.teamlogo}}" alt="teamlogo">
-                    <span>{{this.teamname}}</span> <br>
-                </div>
-            {{/each}}            
+                    <div class="favorite-teams-card-logo-container">
+                        <img id="teamlogo" src="{{this.teamlogo}}" alt="teamlogo">
+                    </div>
 
-            <a class="account-portal-button" id="logout-button" href="/logout">Logout</a>
+                    <span>{{this.teamname}}</span>
+                </div>
+            {{/each}}
         </div>
 
     </div>
-
 </div>