app/assets/css/variables.css

@@ -5,9 +5,7 @@
     --result-background: #c4c1d2;
     --panel-background: #f5f5f5;
     --card-background: #c4c1d2;
-    --color-button-primary: #4caf50;
-    --color-button-warning: #f59e0b;
-    --color-button-danger: #fb3b3b;
+    --color-action-button: #4caf50;
     --color-action-button-text: #fff;
-    --color-error-text: #fb3b3b;
+    --color-error-text: red;
 }

app/components/common/button-action.vue

@@ -1,27 +1,20 @@
 <script lang="ts" setup>
-const props = defineProps<{
+defineProps<{
   buttonText: string
-  buttonColor?: 'primary' | 'warning' | 'danger'
 }>()
 
-const buttonColor = computed(() => props.buttonColor || 'primary')
-
 const emit = defineEmits(['action'])
 </script>
 
 <template>
-  <button
-      :style="{ 'background-color': `var(--color-button-${buttonColor})` }"
-      @click="emit('action')"
-  >
-    {{ buttonText }}
-  </button>
+  <button @click="emit('action')">{{ buttonText }}</button>
 </template>
 
 <style scoped>
 button {
   padding: 0.5rem 1rem;
   border-radius: 0.25rem;
+  background-color: var(--color-action-button);
   color: var(--color-action-button-text);
   border: none;
   cursor: pointer;

app/components/common/input-action.vue

@@ -26,7 +26,7 @@ const emit = defineEmits(['action'])
 
 <style scoped>
 button {
-  background-color: var(--color-button-primary, #007bff);
+  background-color: var(--color-action-button);
   color: var(--color-action-button-text, white);
   padding: .5rem 1rem;
   border: none;

app/components/list-settings.vue

@@ -2,7 +2,6 @@
 import type {MovieList} from "~/types/movie-list";
 import Card from "~/components/common/card.vue";
 import InputAction from "~/components/common/input-action.vue";
-import ButtonAction from "~/components/common/button-action.vue";
 import type {Role} from "~/types/role";
 import type {ResourceResponse} from "~/types/api";
 import type {User} from "~/types/user";
@@ -129,17 +128,13 @@ getRoles()
       </li>
       <li class="list-setting">
         <label for="delete-list-button">Delete MovieList</label>
-        <ButtonAction button-color="danger" button-text="Delete" @action="deleteList"/>
+        <button name="delete-list-button" @click="deleteList">Delete</button>
       </li>
     </ul>
   </Card>
 </template>
 
 <style scoped>
-select {
-  padding: 0.5rem;
-}
-
 .back-to-list:hover {
   text-decoration: underline;
 }
@@ -159,15 +154,6 @@ select {
   gap: 1rem;
 }
 
-.list-setting > button {
-  background-color: var(--color-button-primary, #4caf50);
-  color: white;
-  border: none;
-  border-radius: 0.25rem;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-}
-
 .list-setting-row {
   display: flex;
   gap: 1rem;
@@ -197,13 +183,9 @@ select {
   padding: 1rem;
 }
 
-summary {
-  cursor: pointer;
-}
-
 details ul > li {
   padding: 1rem;
-  border: rgba(0, 0, 0, 0.3) 1px solid;
+  border: black 1px solid;
 }
 
 details ul > li:not(:last-child) {

app/components/movie-list.vue

@@ -2,7 +2,6 @@
 import {type Movie} from "~/types/movie";
 import posterPlaceholder from "~/assets/img/poster-placeholder.svg";
 import Card from "~/components/common/card.vue";
-import ButtonAction from "~/components/common/button-action.vue";
 
 type SortField = 'title' | 'year'
 type SortDirection = 'asc' | 'desc'
@@ -119,7 +118,7 @@ const isSortActive = (field: SortField, direction: SortDirection): boolean => {
           </ul>
         </div>
       </div>
-      <ButtonAction v-if="canEdit" button-text="Add Movie" @action="emit('add-movie')" />
+      <button v-if="canEdit" class="add-movie-button" @click="emit('add-movie')">Add Movie</button>
     </div>
     <div v-if="filteredMovies.length === 0" class="movie-quote">
       <span class="quote">"You complete me."</span>
@@ -161,12 +160,6 @@ const isSortActive = (field: SortField, direction: SortDirection): boolean => {
   gap: 0.5rem;
 }
 
-.list-controls input {
-  padding: 0.5rem;
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  border-radius: 0.5rem;
-}
-
 .sort-menu-container {
   position: relative;
 }

app/components/panels/movie-details.vue

@@ -2,7 +2,6 @@
 import type {Movie} from "~/types/movie";
 import type {MovieCriticScore} from "~/types/movie-critic-score";
 import posterPlaceholder from "~/assets/img/poster-placeholder.svg";
-import ButtonAction from "~/components/common/button-action.vue";
 
 const props = defineProps<{
   selectedMovie: Movie;
@@ -58,11 +57,7 @@ const criticScores = computed(() => {
       </div>
     </dl>
 
-    <ButtonAction v-if="canEdit"
-                  button-text="Remove From List"
-                  buttonColor="danger"
-                  @action="emit('remove-movie', selectedMovie.id)"
-    />
+    <button v-if="canEdit" type="button" @click="emit('remove-movie', selectedMovie.id)">Remove From List</button>
   </div>
 </template>