app/app.vue

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

app/assets/css/variables.css

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

app/components/movie-list.vue

@@ -28,7 +28,6 @@ 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];
@@ -123,7 +122,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>
@@ -221,7 +220,6 @@ const isSortActive = (field: SortField, direction: SortDirection): boolean => {
   position: relative;
   width: 100%;
   height: 100%;
-  background-color: var(--color-movie-background);
 }
 
 .movie img {

app/components/panels/movie-details.vue

@@ -70,7 +70,6 @@ const criticScores = computed(() => {
 <style scoped>
 dt {
   font-weight: bold;
-  font-size: 1.3rem;
 }
 
 .movie-detail {
@@ -111,7 +110,6 @@ 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: var(--card-background);
+  background: white;
   border: 1px solid #ccc;
   border-radius: 0.5rem;
   list-style: none;
@@ -75,7 +75,7 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
 }
 
 .dropdown li:hover {
-  background: var(--color-list-item-hover);
+  background: #f0f0f0;
 }
 
 </style>

app/pages/account-settings.vue

@@ -3,23 +3,19 @@
 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 class="content">
+  <div>
     <PageTitle title="Account Settings"/>
 
-    <card>
     <div class="password-settings settings-section">
       <h2>Reset Password</h2>
       <PasswordResetForm/>
 
 
     </div>
-    </card>
 
-    <card>
     <div class="profile-settings settings-section">
       <div class="profile-header">
         <h2>Profile</h2>
@@ -28,7 +24,6 @@ import Card from "~/components/common/card.vue";
 
       <ProfileForm/>
     </div>
-    </card>
   </div>
 
 </template>

app/pages/lists/index.vue

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