updated list settings to use button action components

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;