update components

Author: daniel-cintra

stubs/resources/js/Components/Form/AppCombobox.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="w-48">
         <AppButton
-            class="btn btn-primary mb-2 flex w-full align-middle"
+            class="btn btn-primary flex w-full align-middle"
             aria-haspopup="true"
             :aria-expanded="isOpen"
             @click="toggleState"
@@ -47,17 +47,16 @@
                         role="option"
                         :aria-selected="index === highlightedIndex"
                     >
-                        <a
-                            href="#"
-                            class="block px-4 py-2 text-sm hover:bg-skin-neutral-3 hover:text-skin-neutral-12"
+                        <span
+                            class="block px-4 py-2 text-sm hover:bg-skin-neutral-3 hover:text-skin-neutral-12 hover:cursor-pointer"
                             :class="{
                                 'bg-skin-neutral-3 text-skin-neutral-12':
                                     index === highlightedIndex
                             }"
                             @click="updateModelValue(option)"
                         >
                             {{ option.label }}
-                        </a>
+                        </span>
                     </li>
                 </ul>
             </div>

stubs/resources/js/Components/Form/AppRadioButton.vue

@@ -1,13 +1,16 @@
 <template>
     <div class="mb-4 flex items-center">
-        <input
-            v-bind="$attrs"
-            type="radio"
-            :checked="isChecked"
-            class="h-4 w-4 text-skin-primary-9 focus:ring-2 focus:ring-skin-primary-7"
-            @change="$emit('update:modelValue', value)"
-        />
-        <slot></slot>
+        <AppLabel class="hover:cursor-pointer" :for="$attrs.id">
+            <input
+                v-bind="$attrs"
+                type="radio"
+                :checked="isChecked"
+                class="h-4 w-4 text-skin-primary-9 hover:cursor-pointer focus:ring-2 focus:ring-skin-primary-7"
+                @change="$emit('update:modelValue', value)"
+            />
+
+            <slot></slot>
+        </AppLabel>
     </div>
 </template>
 

stubs/resources/js/Components/Form/AppTipTapEditor.vue

@@ -280,7 +280,7 @@
         <textarea
             v-show="codeMode"
             v-model="htmlContent"
-            class="min-h-[240px] w-full border-skin-neutral-7"
+            class="min-h-[240px] w-full border border-solid border-skin-neutral-7 bg-skin-neutral-1 font-sans text-xs leading-5 tracking-normal"
             @input="syncEditor"
         >
         </textarea>
@@ -454,13 +454,14 @@ const addVideo = () => {
 
 <style>
 .app-tip-tap-error {
-    border: 1px solid red;
+    border: 1px solid theme('colors.skin.error.DEFAULT');
     border-radius: 3px;
 }
 
 .ProseMirror {
     min-height: 120px;
     padding: 5px 10px;
+    background-color: theme('colors.skin.neutral.1');
 }
 
 .ProseMirror p {
@@ -469,7 +470,7 @@ const addVideo = () => {
 
 .ProseMirror a {
     text-decoration: underline;
-    color: blue;
+    color: theme('colors.skin.primary.11');
 }
 
 /* Heading Sizes, See: https://tailwindcss.com/docs/font-size */
@@ -521,7 +522,7 @@ const addVideo = () => {
 .ProseMirror table td,
 .ProseMirror table th {
     min-width: 1em;
-    border: 2px solid #ced4da;
+    border: 2px solid theme('colors.skin.neutral.6');
     padding: 3px 5px;
     vertical-align: top;
     box-sizing: border-box;
@@ -535,7 +536,7 @@ const addVideo = () => {
 .ProseMirror th {
     font-weight: bold;
     text-align: left;
-    background-color: #f1f3f5;
+    background-color: theme('colors.skin.neutral.2');
 }
 
 .ProseMirror .selectedCell:after {
@@ -556,7 +557,7 @@ const addVideo = () => {
     top: 0;
     bottom: -2px;
     width: 4px;
-    background-color: #adf;
+    background-color: theme('colors.skin.neutral.3');
     pointer-events: none;
 }
 

stubs/resources/js/Components/Misc/AppButton.vue

@@ -30,11 +30,11 @@ const emit = defineEmits(['click'])
 }
 
 .btn-primary-outline {
-    @apply border border-skin-primary-7 text-skin-primary-11 hover:bg-skin-primary-3 hover:text-skin-primary-12 focus-visible:outline-skin-primary-11;
+    @apply border border-skin-primary-7 text-skin-primary-11 hover:bg-skin-primary-4 focus-visible:outline-skin-primary-11;
 }
 
 .btn-neutral-outline {
-    @apply border border-skin-neutral-7 text-skin-neutral-12 hover:bg-skin-neutral-3 focus-visible:outline-skin-neutral-12;
+    @apply border border-skin-neutral-7 text-skin-neutral-12 hover:bg-skin-neutral-4 focus-visible:outline-skin-neutral-11;
 }
 
 .btn-icon {

stubs/resources/js/Components/Overlay/AppConfirmDialog.vue

@@ -5,7 +5,9 @@
             <div
                 class="flex items-center justify-between rounded-t border-b border-skin-neutral-6 p-5"
             >
-                <h3 class="text-xl font-semibold lg:text-2xl">Confirmation</h3>
+                <h3 class="text-xl font-semibold lg:text-2xl">
+                    {{ __('Confirmation') }}
+                </h3>
                 <AppButton class="btn btn-neutral btn-icon" @click="closeModal">
                     <i class="ri-close-line h-5 w-5"></i>
                 </AppButton>
@@ -16,7 +18,7 @@
         <template #body>
             <div class="space-y-6 p-5">
                 <p class="text-base leading-relaxed">
-                    Are you sure you want to proceed?
+                    {{ __('Are you sure you want to proceed?') }}
                 </p>
             </div>
         </template>
@@ -27,11 +29,11 @@
                 class="flex items-center justify-end space-x-2 rounded-b border-t border-skin-neutral-6 p-5"
             >
                 <AppButton class="btn btn-neutral mr-3" @click="closeModal">
-                    Cancel
+                    {{ __('No') }}
                 </AppButton>
 
                 <AppButton class="btn btn-destructive" @click="deleteItem()">
-                    Yes, delete
+                    {{ __('Yes') }}
                 </AppButton>
             </div>
         </template>