chore: add styles for the show view

Author: yaroslav8765

adminforth/modules/styles.ts

@@ -278,6 +278,13 @@ export const styles = () => ({
     lightListViewButtonFocusRing: "#F3F4F6",
     lightListViewButtonBorder: "#D1D5DB",
 
+    /* Show View */
+    lightShowViewButtonBackground: "#FFFFFF",
+    lightShowViewButtonBackgroundHover: "#F3F4F6",
+    lightShowViewButtonText: "#111827",
+    lightShowViewButtonTextHover: "alias:lightPrimary",
+    lightShowViewButtonFocusRing: "#F3F4F6",
+    lightShowViewButtonBorder: "#D1D5DB",
 
     /* Login View */
     lightLoginViewBackground: "#FFFFFF",
@@ -556,6 +563,14 @@ export const styles = () => ({
     darkListViewButtonFocusRing: "#374151",
     darkListViewButtonBorder: "#4B5563",
 
+    /* Show View */
+    darkShowViewButtonBackground: "#1F2937",
+    darkShowViewButtonBackgroundHover: "#374151",
+    darkShowViewButtonText: "#9CA3AF",
+    darkShowViewButtonTextHover: "#FFFFFF",
+    darkShowViewButtonFocusRing: "#374151",
+    darkShowViewButtonBorder: "#4B5563",
+
     /* Login view */
     darkLoginViewBackground: "#374151",
     darkLoginViewTextColor: "#FFFFFF",

adminforth/spa/src/views/ShowView.vue

@@ -28,21 +28,21 @@
       </template>
       <RouterLink v-if="coreStore.resource?.options?.allowedActions?.create"
         :to="{ name: 'resource-create', params: { resourceId: $route.params.resourceId } }"
-        class="af-add-new-button flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
+        class="af-add-new-button flex items-center py-1 px-3 text-sm font-medium text-lightShowViewButtonText focus:outline-none bg-lightShowViewButtonBackground rounded border border-lightShowViewButtonBorder hover:bg-lightShowViewButtonBackgroundHover hover:text-lightShowViewButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightShowViewButtonFocusRing dark:focus:ring-darkShowViewButtonFocusRing dark:bg-darkShowViewButtonBackground dark:text-darkShowViewButtonText dark:border-darkShowViewButtonBorder dark:hover:text-darkShowViewButtonTextHover dark:hover:bg-darkShowViewButtonBackgroundHover rounded-default"
       >
         <IconPlusOutline class="w-4 h-4 me-2"/>
         {{ $t('Add new') }}
       </RouterLink>
 
       <RouterLink v-if="coreStore?.resourceOptions?.allowedActions?.edit" :to="{ name: 'resource-edit', params: { resourceId: $route.params.resourceId, primaryKey: $route.params.primaryKey } }" 
-        class="flex items-center af-edit-button py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+        class="flex items-center af-edit-button py-1 px-3 text-sm font-medium text-lightShowViewButtonText focus:outline-none bg-lightShowViewButtonBackground rounded-default border border-lightShowViewButtonBorder hover:bg-lightShowViewButtonBackgroundHover hover:text-lightShowViewButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightShowViewButtonFocusRing dark:focus:ring-darkShowViewButtonFocusRing dark:bg-darkShowViewButtonBackground dark:text-darkShowViewButtonText dark:border-darkShowViewButtonBorder dark:hover:text-darkShowViewButtonTextHover dark:hover:bg-darkShowViewButtonBackgroundHover"
       >
         <IconPenSolid class="w-4 h-4" />
         {{ $t('Edit') }}
       </RouterLink>
 
       <button v-if="coreStore?.resourceOptions?.allowedActions?.delete"  @click="deleteRecord"
-        class="flex items-center af-delete-button py-1 px-3 text-sm font-medium rounded-default text-red-600 focus:outline-none bg-white  border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+        class="flex items-center af-delete-button py-1 px-3 text-sm font-medium rounded-default text-red-600 focus:outline-none bg-lightShowViewButtonBackground  border border-lightShowViewButtonBorder hover:bg-lightShowViewButtonBackgroundHover hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-lightShowViewButtonFocusRing dark:focus:ring-darkShowViewButtonFocusRing dark:bg-darkShowViewButtonBackground dark:text-red-500 dark:border-darkShowViewButtonBorder dark:hover:text-darkShowViewButtonTextHover dark:hover:bg-darkShowViewButtonBackgroundHover"
       >
         <IconTrashBinSolid class="w-4 h-4" />
         {{ $t('Delete') }}

dev-demo/index.ts

@@ -396,6 +396,13 @@ export const admin = new AdminForth({
           ListViewButtonTextHover: "alias:lightListViewButtonText opacity:0.8",
           ListViewButtonFocusRing: "alias:lightlistViewButtonBackground",
           ListViewButtonBorder: "alias:lightListViewButtonBackground darken",
+          
+          ShowViewButtonBackground: "alias:lightPrimary",
+          ShowViewButtonBackgroundHover: "alias:lightShowViewButtonBackground lighten",
+          ShowViewButtonText: "alias:lightShowViewButtonBackground inverse",
+          ShowViewButtonTextHover: "alias:lightShowViewButtonText opacity:0.8",
+          ShowViewButtonFocusRing: "alias:lightShowViewButtonBackground",
+          ShowViewButtonBorder: "alias:lightShowViewButtonBackground darken",
 
           LoginViewBackground: "alias:lightPrimary lighten",
           LoginViewTextColor: "alias:lightLoginViewBackground inverse",
@@ -632,6 +639,13 @@ export const admin = new AdminForth({
           ListViewButtonFocusRing: "alias:darklistViewButtonBackground",
           ListViewButtonBorder: "alias:darkListViewButtonBackground darken",
 
+          ShowViewButtonBackground: "alias:darkPrimary",
+          ShowViewButtonBackgroundHover: "alias:darkShowViewButtonBackground lighten",
+          ShowViewButtonText: "alias:darkShowViewButtonBackground inverse",
+          ShowViewButtonTextHover: "alias:darkShowViewButtonText opacity:0.8",
+          ShowViewButtonFocusRing: "alias:darkShowViewButtonBackground",
+          ShowViewButtonBorder: "alias:darkShowViewButtonBackground darken",
+
           LoginViewBackground: "alias:darkPrimary lighten",
           LoginViewTextColor: "alias:darkLoginViewBackground inverse",
           LoginViewSubTextColor: "alias:darkLoginViewTextColor opacity:0.8",