add: wording, vibration

Adapt wordings, add small vibration on edit and delete

app/assets/styles/button.css

@@ -1,6 +1,6 @@
 .Button {
     --padding: .2rem;
-    --background: var(--color-gradient-main-dark);
+    --background: var(--color-main-dark);
     --color: var(--color-lightest);
     --background-hover: var(--color-main-dark);
 
@@ -29,7 +29,7 @@
         border-radius: var(--radius-default);
 
         &.danger {
-            --background: var(--color-gradient-error);
+            --background: var(--color-error);
             --color: var(--color-lightest);
         }
     }

app/assets/styles/priceCard.css

@@ -25,13 +25,13 @@
         }
 
         & .bg-edit {
-            background: var(--color-gradient-main-dark);
+            background: var(--color-main-dark);
             padding: 2rem;
             text-align: left;
         }
 
         & .bg-delete {
-            background: var(--color-gradient-error-reverse);
+            background: var(--color-error);
             padding: 2rem;
             text-align: right;
             justify-content: flex-end;

app/components/Pp/PriceCard.vue

@@ -67,6 +67,7 @@ type Props = {
 const { card } = defineProps<Props>()
 const emit = defineEmits(['remove', 'update'])
 
+const { vibrate } = useVibrate()
 const top = useTemplateRef('top')
 const left = shallowRef<string>('0')
 
@@ -86,6 +87,7 @@ const { lengthX, direction, isSwiping } = useSwipe(top, {
     if (['down', 'up'].includes(direction.value)) return
     if (lengthX.value < -50) update()
     if (lengthX.value > 50) deleteCard()
+    vibrate(100)
     left.value = '0'
   },
 })

app/components/Pp/PriceCardDialog.vue

@@ -5,7 +5,7 @@
   >
     <form method="dialog">
       <header class="flex-row padding">
-        {{ cardLabel }}
+        {{ currentCardIndex > -1 ? 'Bearbeiten' : 'Neues Hinzufügen' }}
         <PpButton class="round text">
           <Icon name="uil:times" mode="svg" />
         </PpButton>
@@ -65,7 +65,7 @@
           </PpButton>
         </form>
         <PpButton class="raised" @click="validate">
-          <span>{{ cardLabel }}</span>
+          <span>{{ currentCardIndex > -1 ? 'Übernehmen' : 'Hinzufügen' }}</span>
         </PpButton>
       </footer>
   </dialog>