updated list settings to use button action components

app/assets/css/variables.css

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

app/components/common/button-action.vue

@@ -1,20 +1,27 @@
 <script lang="ts" setup>
-defineProps<{
+const props = defineProps<{
   buttonText: string
+  buttonColor?: 'primary' | 'warning' | 'danger'
 }>()
 
+const buttonColor = computed(() => props.buttonColor || 'primary')
+
 const emit = defineEmits(['action'])
 </script>
 
 <template>
-  <button @click="emit('action')">{{ buttonText }}</button>
+  <button
+      :style="{ 'background-color': `var(--color-button-${buttonColor})` }"
+      @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-action-button);
+  background-color: var(--color-button-primary, #007bff);
   color: var(--color-action-button-text, white);
   padding: .5rem 1rem;
   border: none;

app/components/list-settings.vue

@@ -2,6 +2,7 @@
 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";
@@ -128,13 +129,17 @@ getRoles()
       </li>
       <li class="list-setting">
         <label for="delete-list-button">Delete MovieList</label>
-        <button name="delete-list-button" @click="deleteList">Delete</button>
+        <ButtonAction button-color="danger" button-text="Delete" @action="deleteList"/>
       </li>
     </ul>
   </Card>
 </template>
 
 <style scoped>
+select {
+  padding: 0.5rem;
+}
+
 .back-to-list:hover {
   text-decoration: underline;
 }
@@ -154,6 +159,15 @@ getRoles()
   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;
@@ -183,9 +197,13 @@ getRoles()
   padding: 1rem;
 }
 
+summary {
+  cursor: pointer;
+}
+
 details ul > li {
   padding: 1rem;
-  border: black 1px solid;
+  border: rgba(0, 0, 0, 0.3) 1px solid;
 }
 
 details ul > li:not(:last-child) {

app/components/movie-list.vue

@@ -2,6 +2,7 @@
 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'
@@ -118,7 +119,7 @@ const isSortActive = (field: SortField, direction: SortDirection): boolean => {
           </ul>
         </div>
       </div>
-      <button v-if="canEdit" class="add-movie-button" @click="emit('add-movie')">Add Movie</button>
+      <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>
@@ -160,6 +161,12 @@ 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,6 +2,7 @@
 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;
@@ -57,7 +58,11 @@ const criticScores = computed(() => {
       </div>
     </dl>
 
-    <button v-if="canEdit" type="button" @click="emit('remove-movie', selectedMovie.id)">Remove From List</button>
+    <ButtonAction v-if="canEdit"
+                  button-text="Remove From List"
+                  buttonColor="danger"
+                  @action="emit('remove-movie', selectedMovie.id)"
+    />
   </div>
 </template>