UI Fixes 2

public/mix-manifest.json

@@ -44,6 +44,7 @@
     "/js/chunks/app-others.js": "/js/chunks/app-others.js",
     "/js/chunks/app-sign-in-out.js": "/js/chunks/app-sign-in-out.js",
     "/js/chunks/app-adsense.js": "/js/chunks/app-adsense.js",
+    "/js/chunks/app-server.js": "/js/chunks/app-server.js",
     "/js/chunks/app-language.js": "/js/chunks/app-language.js",
     "/js/chunks/homepage.js": "/js/chunks/homepage.js",
     "/js/chunks/dynamic-page.js": "/js/chunks/dynamic-page.js",
@@ -67,6 +68,5 @@
     "/js/chunks/shared-with-me.js": "/js/chunks/shared-with-me.js",
     "/js/chunks/invitation.js": "/js/chunks/invitation.js",
     "/css/tailwind.css": "/css/tailwind.css",
-    "/css/app.css": "/css/app.css",
+    "/css/app.css": "/css/app.css"
-    "/js/chunks/app-server.js": "/js/chunks/app-server.js"
 }

resources/js/components/FilesView/FileActionsMobile.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="sticky top-14 z-20 block overflow-x-auto whitespace-nowrap bg-white px-4 pb-3 dark:bg-dark-background lg:hidden">
+    <div class="sticky top-14 z-[19] block overflow-x-auto whitespace-nowrap bg-white px-4 pb-3 dark:bg-dark-background lg:hidden">
         <!--Show Buttons-->
 		<slot v-if="!isMultiSelectMode" />
 

resources/js/components/FilesView/MobileToolbar.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        class="sticky top-0 z-20 block flex w-full items-center justify-between bg-white py-5 px-4 text-center dark:bg-dark-background lg:hidden"
+        class="sticky top-0 z-[19] block flex w-full items-center justify-between bg-white py-5 px-4 text-center dark:bg-dark-background lg:hidden"
     >
         <NavigationBar />
 

resources/js/components/Mobile/MenuMobile.vue

@@ -1,9 +1,22 @@
 <template>
-    <transition name="context-menu">
+    <div>
-        <div v-if="isVisible" @click="closeMenu" class="fixed bottom-0 left-0 right-0 z-50 overflow-hidden rounded-tl-xl rounded-tr-xl bg-white pb-4 dark:bg-2x-dark-foreground">
+        <transition name="context-menu">
-            <slot />
+            <div
-        </div>
+                v-if="isVisible"
-    </transition>
+                @click="closeMenu"
+                class="fixed bottom-0 left-0 right-0 z-50 overflow-hidden rounded-tl-xl rounded-tr-xl bg-white pb-4 dark:bg-2x-dark-foreground"
+            >
+                <slot />
+            </div>
+        </transition>
+		<transition name="vignette">
+			<div
+				v-if="isVisible"
+				@click="closeMenu"
+				class="fixed left-0 right-0 top-0 bottom-0 z-20 bg-dark-background bg-opacity-[0.35] dark:bg-opacity-[0.45]"
+			></div>
+		</transition>
+    </div>
 </template>
 
 <script>
@@ -60,4 +73,21 @@ export default {
 .context-menu-leave-active {
     position: fixed;
 }
+
+.vignette-enter-active {
+	animation: vignette-in 0.15s cubic-bezier(0.4, 0, 1, 1);
+}
+
+.vignette-leave-active {
+	animation: vignette-in 0.15s linear reverse;
+}
+
+@keyframes vignette-in {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
 </style>

resources/js/components/Others/MobileNavigation.vue

@@ -40,7 +40,7 @@
                 <Option @click.native="goToRoute('Profile')" :title="$t('menu.profile')" icon="user" :is-hover-disabled="true" />
                 <Option @click.native="goToRoute('Password')" :title="$t('menu.password')" icon="lock" :is-hover-disabled="true" />
                 <Option @click.native="goToRoute('Storage')" :title="$t('menu.storage')" icon="hard-drive" :is-hover-disabled="true" />
-                <Option @click.native="goToRoute('Billing')" v-if="config.isSaaS" :title="$t('Billing')" icon="cloud" :is-hover-disabled="true" />
+                <Option @click.native="goToRoute('Billing')" v-if="config.subscriptionType !== 'none'" :title="$t('Billing')" icon="cloud" :is-hover-disabled="true" />
             </OptionGroup>
 
             <!--Submenu: Admin settings-->
@@ -57,7 +57,7 @@
             </OptionGroup>
 
             <!--Submenu: Billing settings-->
-            <OptionGroup v-if="clickedSubmenu === 'admin' && config.isSaaS">
+            <OptionGroup v-if="clickedSubmenu === 'admin' && config.subscriptionType !== 'none'">
                 <Option @click.native="goToRoute('AppPayments')" :title="$t('Payments')" icon="credit-card" :is-hover-disabled="true" />
                 <Option
                     @click.native="goToRoute('Subscriptions')"

resources/js/components/Others/Popup/PopupWrapper.vue

@@ -44,21 +44,41 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-	@media only screen and (max-width: 690px) {
+
+	.popup-leave-active {
+		animation: popup-slide-in 0.15s ease reverse;
+	}
+
+	@media only screen and (min-width: 960px) {
 		.popup-enter-active {
-			animation: popup-slide-in 0.35s 0.15s ease both;
+			animation: popup-slide-in 0.25s 0.10s ease both;
 		}
-		.popup-leave-active {
+
-			animation: popup-slide-in 0.15s ease reverse;
+		@keyframes popup-slide-in {
+			0% {
+				opacity: 0;
+				transform: translateY(100px);
+			}
+
+			100% {
+				opacity: 1;
+				transform: translateY(0);
+			}
 		}
 	}
 
-	@keyframes popup-slide-in {
+	@media only screen and (max-width: 960px) {
-		0% {
+		.popup-enter-active {
-			transform: translateY(100%);
+			animation: popup-slide-in 0.35s 0.15s ease both;
 		}
-		100% {
+
-			transform: translateY(0);
+		@keyframes popup-slide-in {
+			0% {
+				transform: translateY(100%);
+			}
+			100% {
+				transform: translateY(0);
+			}
 		}
 	}
 </style>

resources/js/components/Others/Vignette.vue

@@ -1,6 +1,6 @@
 <template>
     <transition name="vignette">
-        <div v-if="isVisible" class="vignette" @click="closePopup"></div>
+        <div v-if="isVisible" class="vignette bg-dark-background bg-opacity-[0.35] dark:bg-opacity-[0.45]" @click="closePopup"></div>
     </transition>
 </template>
 
@@ -31,13 +31,11 @@ export default {
     created() {
         // Show vignette
         events.$on('popup:open', () => (this.isVisibleVignette = true))
-        events.$on('mobile-menu:show', () => (this.isVisibleVignette = true))
         events.$on('alert:open', () => (this.isVisibleVignette = true))
         events.$on('success:open', () => (this.isVisibleVignette = true))
         events.$on('confirm:open', () => (this.isVisibleVignette = true))
 
         // Hide vignette
-        events.$on('mobile-menu:hide', () => (this.isVisibleVignette = false))
         events.$on('popup:close', () => (this.isVisibleVignette = false))
     },
 }
@@ -54,20 +52,14 @@ export default {
     left: 0;
     bottom: 0;
     z-index: 40;
-    background: $light_mode_vignette;
-}
-
-// Dark mode
-.dark .vignette {
-    background: $dark_mode_vignette;
 }
 
 .vignette-enter-active {
-    animation: vignette-in 0.35s ease;
+    animation: vignette-in 0.15s linear;
 }
 
 .vignette-leave-active {
-    animation: vignette-in 0.15s ease reverse;
+    animation: vignette-in 0.15s cubic-bezier(0.4, 0, 1, 1) reverse;
 }
 
 @keyframes vignette-in {

resources/js/views/Admin/AppSettings/AppSettingsTabs/Server.vue

@@ -17,10 +17,10 @@
 					</small>
 				</div>
 				<div class="flex items-center">
-					<check-icon v-if="cron.running" size="16" class="vue-feather text-theme"/>
+					<check-icon v-if="cron.running" size="16" class="vue-feather text-green-600 dark:text-green-600"/>
-					<x-icon v-if="!cron.running" size="16" class="vue-feather text-red-600" />
+					<x-icon v-if="!cron.running" size="16" class="vue-feather text-red-600 dark:text-red-600" />
 
-					<span class="ml-3 text-sm font-bold" :class="cron.running ? 'text-green-600' : 'text-red-600'">
+					<span class="ml-3 text-sm font-bold" :class="cron.running ? 'text-green-600 dark:text-green-600' : 'text-red-600 dark:text-red-600'">
 						{{ cron.running ? 'Working correctly' : "Doesn't work" }}
 					</span>
 				</div>
@@ -46,9 +46,9 @@
 					<b class="text-sm font-bold block">{{ filename }}</b>
 				</div>
 				<div class="flex items-center">
-					<check-icon size="16" class="vue-feather text-theme"/>
+					<check-icon size="16" class="vue-feather text-green-600 dark:text-green-600"/>
 
-					<span class="ml-3 text-sm font-bold text-green-600">
+					<span class="ml-3 text-sm font-bold text-green-600 dark:text-green-600">
 						Stored Successfully
 					</span>
 				</div>
@@ -69,10 +69,10 @@
 					</small>
 				</div>
 				<div class="flex items-center">
-					<check-icon v-if="phpVersion.acceptable" size="16" class="vue-feather text-theme"/>
+					<check-icon v-if="phpVersion.acceptable" size="16" class="vue-feather text-green-600 dark:text-green-600"/>
-					<x-icon v-if="!phpVersion.acceptable" size="16" class="vue-feather text-red-600" />
+					<x-icon v-if="!phpVersion.acceptable" size="16" class="vue-feather text-red-600 dark:text-red-600" />
 
-					<span class="ml-3 text-sm font-bold" :class="phpVersion.acceptable ? 'text-green-600' : 'text-red-600'">
+					<span class="ml-3 text-sm font-bold" :class="phpVersion.acceptable ? 'text-green-600 dark:text-green-600' : 'text-red-600 dark:text-red-600'">
 						{{ phpVersion.current }}
 					</span>
 				</div>
@@ -86,10 +86,10 @@
 					</small>
 				</div>
 				<div class="flex items-center">
-					<check-icon v-if="values.status" size="16" class="vue-feather text-theme"/>
+					<check-icon v-if="values.status" size="16" class="vue-feather text-green-600 dark:text-green-600"/>
-					<x-icon v-if="!values.status" size="16" class="vue-feather text-red-600" />
+					<x-icon v-if="!values.status" size="16" class="vue-feather text-red-600 dark:text-red-600" />
 
-					<span class="ml-3 text-sm font-bold" :class="values.status ? 'text-green-600' : 'text-red-600'">
+					<span class="ml-3 text-sm font-bold" :class="values.status ? 'text-green-600 dark:text-green-600' : 'text-red-600 dark:text-red-600'">
 						{{ values.current }}{{ setting !== 'max_execution_time' ? 'M' : '' }}
 					</span>
 				</div>
@@ -107,10 +107,10 @@
 					{{ module }}
 				</b>
 				<div class="flex items-center">
-					<check-icon v-if="value" size="16" class="vue-feather text-theme"/>
+					<check-icon v-if="value" size="16" class="vue-feather text-green-600 dark:text-green-600"/>
-					<x-icon v-if="!value" size="16" class="vue-feather text-red-600"/>
+					<x-icon v-if="!value" size="16" class="vue-feather text-red-600 dark:text-red-600"/>
 
-					<span class="ml-3 text-sm font-bold" :class="value ? 'text-green-600' : 'text-red-600'">
+					<span class="ml-3 text-sm font-bold" :class="value ? 'text-green-600 dark:text-green-600' : 'text-red-600 dark:text-red-600'">
 						{{ value ? 'Module Installed' : 'Missing Module' }}
 					</span>
 				</div>

resources/views/index.blade.php

@@ -31,6 +31,8 @@
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 
 <head>
+    <meta name="theme-color" content="{{ $settings->app_color ?? '#00BC7E' }}">
+
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
     <meta name="description" content="{{ $settings->app_description ?? __t('app_description') }}">

webpack.mix.js

@@ -29,10 +29,10 @@ mix
             clientLogLevel: 'none'
         }
     })*/
-    /*.options({
+    .options({
         hmrOptions: {
             host: '192.168.1.112',
             port: '8080'
         },
-    })*/
+    })
     .disableNotifications();