add dark mode in baseFileUploader

* add dark mode in sidebar and header

* add dark theme in blade file

.github/workflows/uffizzi-build.yml

@@ -14,6 +14,8 @@ jobs:
     steps:
       - name: Checkout git repo
         uses: actions/checkout@v3
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2        
       - name: Generate UUID image name
         id: uuid
         run: echo "UUID_TAG_APP=$(uuidgen)" >> $GITHUB_ENV
@@ -31,10 +33,11 @@ jobs:
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
           file: ./uffizzi/Dockerfile
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
 
   build-nginx:
-    needs: 
-      - build-application
     name: Build and Push `nginx`
     runs-on: ubuntu-latest
     if: ${{ github.event_name != 'pull_request' || github.event.action != 'closed' }}
@@ -62,8 +65,6 @@ jobs:
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
           file: ./uffizzi/nginx/Dockerfile
-          build-args: |
-            BASE_IMAGE=${{ needs.build-application.outputs.tags }}
           cache-from: type=gha
           cache-to: type=gha,mode=max
 

resources/scripts/admin/layouts/LayoutBasic.vue

@@ -12,8 +12,6 @@
       class="h-screen h-screen-ios overflow-y-auto md:pl-56 xl:pl-64 min-h-0"
     >
       <div class="pt-16 pb-16">
-        <h1>Testing</h1>
-
         <router-view />
       </div>
     </main>

resources/scripts/admin/layouts/LayoutInstallation.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="h-screen overflow-y-auto text-base">
-    <h1>Testing</h1>
     <NotificationRoot />
 
     <div class="container mx-auto px-4">

resources/scripts/admin/layouts/LayoutLogin.vue

@@ -93,9 +93,6 @@
         >
           {{ pageHeading }}
         </h1>
-
-        <h1>Testing</h1>
-
         <p
           class="
             hidden

resources/scripts/admin/layouts/partials/TheSiteHeader.vue

@@ -15,6 +15,13 @@
       bg-gradient-to-r
       from-primary-500
       to-primary-400
+      dark:from-gray-700/70 dark:to-gray-800/70
+      bg-primary-500
+      dark:bg-transparent
+      dark:backdrop-blur-xl
+      dark:shadow-glass
+      dark:border
+      dark:border-white/10
     "
   >
     <router-link
@@ -53,6 +60,7 @@
         cursor-pointer
         md:hidden md:ml-0
         hover:bg-gray-100
+        dark:bg-gray-800 dark:border-gray-500 dark:border
       "
       @click.prevent="onToggle"
     >

resources/scripts/admin/layouts/partials/TheSiteSidebar.vue

@@ -15,7 +15,9 @@
         leave-from="opacity-100"
         leave-to="opacity-0"
       >
-        <DialogOverlay class="fixed inset-0 bg-gray-600 bg-opacity-75" />
+        <DialogOverlay
+          class="fixed inset-0 bg-gray-600 bg-opacity-75 dark:bg-gray-900/90"
+        />
       </TransitionChild>
 
       <TransitionChild
@@ -27,7 +29,9 @@
         leave-from="translate-x-0"
         leave-to="-translate-x-full"
       >
-        <div class="relative flex flex-col flex-1 w-full max-w-xs bg-white">
+        <div
+          class="relative flex flex-col flex-1 w-full max-w-xs bg-white dark:bg-gray-800"
+        >
           <TransitionChild
             as="template"
             enter="ease-in-out duration-300"
@@ -40,18 +44,17 @@
             <div class="absolute top-0 right-0 pt-2 -mr-12">
               <button
                 class="
-                  flex
+                flex
-                  items-center
+                items-center
-                  justify-center
+                justify-center
-                  w-10
+                w-10
-                  h-10
+                h-10
-                  ml-1
+                ml-1
-                  rounded-full
+                rounded-full
-                  focus:outline-none
+                focus:outline-none
-                  focus:ring-2
+                focus:ring-2
-                  focus:ring-inset
+                focus:ring-inset
-                  focus:ring-white
+                focus:ring-white"
-                "
                 @click="globalStore.setSidebarVisibility(false)"
               >
                 <span class="sr-only">Close sidebar</span>
@@ -82,8 +85,8 @@
                 :to="item.link"
                 :class="[
                   hasActiveUrl(item.link)
-                    ? 'text-primary-500 border-primary-500 bg-gray-100 '
+                    ? 'text-primary-500 border-primary-500 bg-gray-100 dark:shadow-glass dark:backdrop-blur-xl dark:hover:bg-gray-700  dark:bg-gray-700/50 dark:text-primary-400 dark:font-medium'
-                    : 'text-black',
+                    : 'text-black dark:text-gray-300',
                   'cursor-pointer px-0 pl-4 py-3 border-transparent flex items-center border-l-4 border-solid text-sm not-italic font-medium',
                 ]"
                 @click="globalStore.setSidebarVisibility(false)"
@@ -100,6 +103,10 @@
                 />
                 {{ $t(item.title) }}
               </router-link>
+              <LightDarkSwitch
+                :show-label="false"
+                class="absolute right-6 top-6 !w-auto"
+              />
             </nav>
           </div>
         </div>
@@ -113,17 +120,16 @@
   <!-- DESKTOP MENU -->
   <div
     class="
-      hidden
+    hidden
-      w-56
+    w-56
-      h-screen
+    h-screen
-      pb-32
+    bg-white
-      overflow-y-auto
+    border-r border-gray-200 border-solid
-      bg-white
+    xl:w-64
-      border-r border-gray-200 border-solid
+    md:fixed md:flex md:flex-col md:inset-y-0
-      xl:w-64
+    pt-16
-      md:fixed md:flex md:flex-col md:inset-y-0
+    dark:border-gray-800
-      pt-16
+    dark:bg-gray-800/80"
-    "
   >
     <div
       v-for="menu in globalStore.menuGroups"
@@ -136,8 +142,8 @@
         :to="item.link"
         :class="[
           hasActiveUrl(item.link)
-            ? 'text-primary-500 border-primary-500 bg-gray-100 '
+            ? 'text-primary-500 border-primary-500 bg-gray-100 dark:border-primary-400 dark:shadow-glass dark:backdrop-blur-xl dark:hover:bg-gray-700 dark:bg-gray-700/50 dark:text-primary-400 dark:font-medium'
-            : 'text-black',
+            : 'text-black dark:hover:bg-transparent dark:hover:text-white dark:text-gray-300',
           'cursor-pointer px-0 pl-6 hover:bg-gray-50 py-3 group flex items-center border-l-4 border-solid border-transparent text-sm not-italic font-medium',
         ]"
       >
@@ -145,8 +151,8 @@
           :name="item.icon"
           :class="[
             hasActiveUrl(item.link)
-              ? 'text-primary-500 group-hover:text-primary-500 '
+              ? 'text-primary-500 group-hover:text-primary-500 dark:text-primary-400 dark:group-hover:text-primary-500 '
-              : 'text-gray-400 group-hover:text-black',
+              : 'text-gray-400 group-hover:text-black dark:text-gray-400 dark:group-hover:text-white',
             'mr-4 shrink-0 h-5 w-5 ',
           ]"
         />
@@ -154,6 +160,9 @@
         {{ $t(item.title) }}
       </router-link>
     </div>
+    <LightDarkSwitch
+      class="absolute bottom-0 py-4 border-t border-gray-200 dark:border-gray-700"
+    />
   </div>
 </template>
 
@@ -169,6 +178,7 @@ import {
 
 import { useRoute } from 'vue-router'
 import { useGlobalStore } from '@/scripts/admin/stores/global'
+import LightDarkSwitch from '@/scripts/components/LightDarkSwitcher.vue'
 
 const route = useRoute()
 const globalStore = useGlobalStore()

resources/scripts/admin/stores/global.js

@@ -34,6 +34,7 @@ export const useGlobalStore = (useWindow = false) => {
       isAppLoaded: false,
       isSidebarOpen: false,
       areCurrenciesLoading: false,
+      isDarkModeOn: false,
 
       downloadReport: null,
     }),
@@ -70,8 +71,8 @@ export const useGlobalStore = (useWindow = false) => {
               moduleStore.apiToken = response.data.global_settings.api_token
               moduleStore.enableModules = response.data.modules
 
-                // company store
+              // company store
-                companyStore.companies = response.data.companies
+              companyStore.companies = response.data.companies
               companyStore.selectedCompany = response.data.current_company
               companyStore.setSelectedCompany(response.data.current_company)
               companyStore.selectedCompanySettings =

resources/scripts/components/LightDarkSwitcher.vue

@@ -0,0 +1,101 @@
+<!-- This example requires Tailwind CSS v2.0+ -->
+<script lang="ts" setup>
+import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue'
+import { useGlobalStore } from '@/scripts/admin/stores/global'
+import { computed, ref } from 'vue'
+defineProps({
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  vertical: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const globalStore = useGlobalStore()
+
+const enabled = ref(
+  localStorage.getItem('theme') === 'dark' ||
+    document.documentElement.classList.contains('dark')
+)
+
+globalStore.isDarkModeOn = enabled
+
+function onChange(val) {
+  if (val) {
+    localStorage.theme = 'dark'
+    document.documentElement.classList.add('dark')
+    document.documentElement.style.setProperty('color-scheme', 'dark')
+    globalStore.isDarkModeOn = true
+  } else {
+    localStorage.theme = 'light'
+    document.documentElement.classList.remove('dark')
+    document.documentElement.style.setProperty('color-scheme', 'light')
+    globalStore.isDarkModeOn = false
+  }
+}
+</script>
+
+<template>
+  <div class="w-full flex justify-center">
+    <SwitchGroup
+      as="div"
+      class="flex items-center"
+      :class="vertical ? 'flex-col justify-center' : 'flex-row'"
+    >
+      <Switch
+        v-model="enabled"
+        class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:ring-offset-gray-700"
+        :class="[enabled ? 'bg-primary-600' : 'bg-gray-200']"
+        @update:modelValue="onChange"
+      >
+        <span class="sr-only">Use setting</span>
+        <span
+          class="pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
+          :class="[enabled ? 'translate-x-5' : 'translate-x-0']"
+        >
+          <span
+            class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
+            :class="[
+              enabled
+                ? 'opacity-0 ease-out duration-100'
+                : 'opacity-100 ease-in duration-200',
+            ]"
+            aria-hidden="true"
+          >
+            <BaseIcon class="h-3 w-3 text-yellow-500" name="SunIcon" />
+          </span>
+          <span
+            class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
+            :class="[
+              enabled
+                ? 'opacity-100 ease-in duration-200'
+                : 'opacity-0 ease-out duration-100',
+            ]"
+            aria-hidden="true"
+          >
+            <BaseIcon class="h-3 w-3 text-primary-500" name="MoonIcon" />
+          </span>
+        </span>
+      </Switch>
+      <SwitchLabel
+        v-if="showLabel"
+        as="span"
+        class="cursor-pointer"
+        :class="vertical ? 'px-1 text-center mt-2' : 'ml-3'"
+      >
+        <span
+          v-if="enabled"
+          class="text-sm font-medium text-gray-500 dark:text-gray-400"
+        >
+          Dark Mode
+        </span>
+        <span v-else class="text-sm font-medium text-gray-500">
+          Light Mode
+        </span>
+      </SwitchLabel>
+    </SwitchGroup>
+  </div>
+</template>

resources/scripts/components/base/BaseFileUploader.vue

@@ -21,6 +21,7 @@
       group
       min-h-[100px]
       bg-gray-50
+      dark:bg-gray-700 dark:border-gray-600
     "
     :class="avatar ? 'w-32 h-32' : 'w-full'"
   >
@@ -49,7 +50,7 @@
 
       <a
         href="#"
-        class="absolute z-30 bg-white rounded-full -bottom-3 -right-3 group"
+        class="absolute z-30 bg-white rounded-full -bottom-3 -right-3 group dark:bg-gray-900"
         @click.prevent.stop="onBrowse"
       >
         <BaseIcon
@@ -95,7 +96,7 @@
 
     <div
       v-else-if="localFiles.length && avatar && !multiple"
-      class="flex w-full h-full border border-gray-200 rounded"
+      class="flex w-full h-full border border-gray-200 rounded dark:border-gray-600"
     >
       <img
         v-if="localFiles[0].image"
@@ -169,10 +170,11 @@
           -right-3
           group
           hover:border-gray-300
+          dark:border-gray-600 dark:bg-gray-900 dark:hover:border-gray-700
         "
         @click.prevent.stop="onAvatarRemove(localFiles[0])"
       >
-        <BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black" />
+        <BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black dark:text-white" />
       </a>
     </div>
 
@@ -195,6 +197,7 @@
           hover:border-gray-500
           relative
           max-w-md
+          dark:border-gray-600 dark:bg-transparent dark:hover:border-gray-700
         "
         @click.prevent
       >
@@ -270,6 +273,7 @@
             -right-3
             group
             hover:border-gray-300
+            dark:border-gray-600 dark:bg-gray-900 dark:hover:border-gray-700
           "
           @click.prevent.stop="onFileRemove(index)"
         >
@@ -293,6 +297,7 @@
           hover:border-gray-500
           relative
           max-w-md
+          dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-700
         "
         @click.prevent
       >
@@ -368,10 +373,11 @@
             -right-3
             group
             hover:border-gray-300
+            dark:border-gray-600 dark:bg-gray-900 dark:hover:border-gray-700
           "
           @click.prevent.stop="onFileRemove(index)"
         >
-          <BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black" />
+          <BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black dark:text-white" />
         </a>
       </a>
     </div>

resources/views/app.blade.php

@@ -17,7 +17,7 @@
     <meta name="csrf-token" content="{{ csrf_token() }}">
 
     <!-- Module Styles -->
-    @foreach(\Crater\Services\Module\ModuleFacade::allStyles() as $name => $path)
+    @foreach (\Crater\Services\Module\ModuleFacade::allStyles() as $name => $path)
         <link rel="stylesheet" href="/modules/styles/{{ $name }}">
     @endforeach
 
@@ -25,8 +25,8 @@
 </head>
 
 <body
-    class="h-full overflow-hidden bg-gray-100 font-base
+    class="h-full overflow-hidden bg-gray-100 dark:bg-gray-900 dark:text-white font-base
-    @if(isset($current_theme)) theme-{{ $current_theme }} @else theme-{{get_app_setting('admin_portal_theme') ?? 'crater'}} @endif ">
+    @if (isset($current_theme)) theme-{{ $current_theme }} @else theme-{{ get_app_setting('admin_portal_theme') ?? 'crater' }} @endif ">
 
     <!-- Module Scripts -->
     @foreach (\Crater\Services\Module\ModuleFacade::allScripts() as $name => $path)
@@ -38,6 +38,14 @@
     @endforeach
 
     <script type="module">
+        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            document.documentElement.classList.add('dark')
+            document.documentElement.style.setProperty('color-scheme', 'dark');
+        } else {
+            document.documentElement.classList.remove('dark')
+            document.documentElement.style.setProperty('color-scheme', 'light')
+        }
+
         @if(isset($customer_logo))
 
         window.customer_logo = "/storage/{{$customer_logo}}"

tailwind.config.js

@@ -19,6 +19,7 @@ module.exports = {
     './resources/scripts/**/*.js',
     './resources/scripts/**/*.vue',
   ],
+  darkMode: 'class',
   theme: {
     extend: {
       colors: {

uffizzi/Dockerfile

@@ -11,8 +11,7 @@ RUN apt-get update && apt-get install -y \
     unzip \
     libzip-dev \
     libmagickwand-dev \
-    mariadb-client \
+    mariadb-client
-    npm
 
 # Clear cache
 RUN apt-get clean && rm -rf /var/lib/apt/lists/*
@@ -46,19 +45,4 @@ RUN chmod -R 775 composer.json composer.lock \
 RUN chown -R $(whoami):$(whoami) /var/log/
 RUN chmod -R 775 /var/log
 
-# Cleanup manually generated build files
-RUN rm -rf /var/www/public/build
-RUN npm config set user 0
-RUN npm config set unsafe-perm true
-# Frontend bulding
-RUN sed -i 's/DB_CONNECTION=mysql/DB_CONNECTION=sqlite/g' /var/www/.env
-RUN sed -i 's/DB_DATABASE=crater/DB_DATABASE=\/tmp\/crater.sqlite/g' /var/www/.env
-RUN touch /tmp/crater.sqlite
-RUN composer install --no-interaction --prefer-dist
-RUN npm i -f
-RUN npm install --save-dev sass
-RUN export NODE_OPTIONS="--max-old-space-size=4096" && /usr/bin/npx vite build --target=es2020
-RUN sed -i 's/DB_CONNECTION=sqlite/DB_CONNECTION=mysql/g' /var/www/.env
-RUN sed -i 's/DB_DATABASE=\/tmp\/crater.sqlite/DB_DATABASE=crater/g' /var/www/.env
-
 USER crater-user

uffizzi/nginx/Dockerfile

@@ -1,9 +1,7 @@
-ARG BASE_IMAGE
-
-FROM $BASE_IMAGE as build
 FROM nginx:1.17-alpine
 
 RUN rm /etc/nginx/conf.d/default.conf
 
-COPY --from=build /var/www /var/www
+COPY ./ /var/www
 COPY ./uffizzi/nginx/nginx /etc/nginx/conf.d/
+