app/app.vue

@@ -13,6 +13,7 @@
 body {
   background-color: var(--color-primary);
   font-family: var(--font-body), serif;
+  color: var(--color-surface);
 }
 
 .content {

app/assets/css/variables.css

@@ -1,14 +1,16 @@
 :root {
-    --color-primary: #f5f5f5;
+    --color-primary: #0a439e;
     --color-surface: #fff;
     --font-body: 'Ubuntu', serif;
     --result-background: #c4c1d2;
-    --panel-background: #f5f5f5;
+    --card-background: #575757;
-    --card-background: #c4c1d2;
+    --panel-background: var(--card-background);
     --color-button-primary: #4caf50;
     --color-button-warning: #f59e0b;
     --color-button-danger: #fb3b3b;
     --color-action-button-text: #fff;
-    --color-success-text: #4caf50;
+    --color-list-item-hover: #0058bd;
+    --color-success-text: #4caf50p;
     --color-error-text: #fb3b3b;
+    --color-movie-background: #453e3e;
 }

app/components/movie-list.vue

@@ -28,6 +28,7 @@ const sortMovies = (movies: Movie[]): Movie[] => {
   if (!currentSort.value) return movies;
 
   const {field, direction} = currentSort.value;
+  console.log(movies)
   return [...movies].sort((a, b) => {
     const aVal = a[field];
     const bVal = b[field];
@@ -122,7 +123,7 @@ const isSortActive = (field: SortField, direction: SortDirection): boolean => {
           </ul>
         </div>
       </div>
-      <ButtonAction v-if="canEdit" button-text="Add Movie" @action="emit('add-movie')" />
+      <ButtonAction v-if="canEdit" button-text="Add Movie" @action="emit('add-movie')"/>
     </div>
     <div v-if="filteredMovies.length === 0" class="movie-quote">
       <span class="quote">"You complete me."</span>
@@ -220,6 +221,7 @@ const isSortActive = (field: SortField, direction: SortDirection): boolean => {
   position: relative;
   width: 100%;
   height: 100%;
+  background-color: var(--color-movie-background);
 }
 
 .movie img {
@@ -271,4 +273,4 @@ const isSortActive = (field: SortField, direction: SortDirection): boolean => {
     flex-grow: 1;
   }
 }
-</style>
+</style>

app/components/panels/movie-details.vue

@@ -70,6 +70,7 @@ const criticScores = computed(() => {
 <style scoped>
 dt {
   font-weight: bold;
+  font-size: 1.3rem;
 }
 
 .movie-detail {
@@ -110,6 +111,7 @@ dt {
 
 .movie-title {
   text-align: center;
+  font-size: 2rem;
 }
 
 @media (max-width: 1300px) {

app/components/profile-menu.vue

@@ -58,7 +58,7 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
   right: 0;
   top: 100%;
   margin-top: 0.5rem;
-  background: white;
+  background: var(--card-background);
   border: 1px solid #ccc;
   border-radius: 0.5rem;
   list-style: none;
@@ -75,7 +75,7 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
 }
 
 .dropdown li:hover {
-  background: #f0f0f0;
+  background: var(--color-list-item-hover);
 }
 
 </style>

app/pages/account-settings.vue

@@ -3,27 +3,32 @@
 import PageTitle from "~/components/common/page-title.vue";
 import PasswordResetForm from "~/components/forms/password-reset-form.vue";
 import ProfileForm from "~/components/forms/profile-form.vue";
+import Card from "~/components/common/card.vue";
 </script>
 
 <template>
-  <div>
+  <div class="content">
     <PageTitle title="Account Settings"/>
 
-    <div class="password-settings settings-section">
+    <card>
-      <h2>Reset Password</h2>
+      <div class="password-settings settings-section">
-      <PasswordResetForm/>
+        <h2>Reset Password</h2>
+        <PasswordResetForm/>
 
 
-    </div>
-
-    <div class="profile-settings settings-section">
-      <div class="profile-header">
-        <h2>Profile</h2>
-        <span class="public-profile-link">View Public Profile</span>
       </div>
+    </card>
 
-      <ProfileForm/>
+    <card>
-    </div>
+      <div class="profile-settings settings-section">
+        <div class="profile-header">
+          <h2>Profile</h2>
+          <span class="public-profile-link">View Public Profile</span>
+        </div>
+
+        <ProfileForm/>
+      </div>
+    </card>
   </div>
 
 </template>

app/pages/lists/index.vue

@@ -83,7 +83,7 @@ const refreshLists = () => {
 }
 
 .movie-list li:hover {
-  background-color: #eee;
+  background-color: var(--color-list-item-hover);
 }
 
 .not-found-message {