From 0f357ace50b4ab91fc9e373196d24de6ba8c85be Mon Sep 17 00:00:00 2001
From: Peter Papp <peterpapp@makingcg.com>
Date: Sat, 27 Mar 2021 11:47:09 +0100
Subject: [PATCH] index.blade.php fixes

---
 resources/views/index.blade.php               |   8 +-
 .../others/color-template.blade.php           | 102 +++++++++---------
 2 files changed, 57 insertions(+), 53 deletions(-)

diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index 1038e6ed..eab0430a 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -16,7 +16,7 @@
     <meta property="og:url" content="{{ url('/') }}">
     <meta property="og:title" content="{{ $settings->app_title ?? 'VueFileManager' }} | {{ $settings->app_description ?? __('vuefilemanager.app_description') }}">
     <meta property="og:description" content="{{ $settings->app_description ?? __('vuefilemanager.app_description') }}">
-    <meta property="og:image" content="{{ $settings->app_og_image ? url($settings->app_og_image) : '' }}">
+    <meta property="og:image" content="{{ isset($settings->app_og_image) ? url($settings->app_og_image) : '' }}">
 
     {{-- Apple Mobile Web App--}}
     <meta name="apple-mobile-web-app-capable" content="yes">
@@ -24,8 +24,8 @@
     <meta name="apple-mobile-web-app-title" content="{{ $settings->app_title ?? 'VueFileManager' }}">
 
     {{--Icons--}}
-    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="{{ $settings->app_touch_icon ? url($settings->app_touch_icon) : '' }}">
-    <link rel="icon" href="{{ $settings->app_favicon ? url($settings->app_favicon) : asset('favicon.png') }}?v={{ get_version() }}">
+    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="{{ isset($settings->app_touch_icon) ? url($settings->app_touch_icon) : '' }}">
+    <link rel="icon" href="{{ isset($settings->app_favicon) ? url($settings->app_favicon) : asset('favicon.png') }}?v={{ get_version() }}">
 
     {{--Format Detection--}}
     <meta name="format-detection" content="telephone=no">
@@ -42,7 +42,7 @@
             api: '{{ url('/api') }}',
             locale: '{{ \Illuminate\Support\Facades\App::getLocale() }}',
 
-            app_color: '{{ $settings->app_color }}',
+            app_color: '{{ $settings->app_color ?? '#00BC7E' }}',
             app_logo: '{{ $settings->app_logo ?? null }}',
             app_footer: '{!! $settings->footer_content ?? null !!}',
             app_name: '{{ $settings->app_title ?? 'VueFileManager' }}',
diff --git a/resources/views/vuefilemanager/others/color-template.blade.php b/resources/views/vuefilemanager/others/color-template.blade.php
index 074850d6..04ec8648 100644
--- a/resources/views/vuefilemanager/others/color-template.blade.php
+++ b/resources/views/vuefilemanager/others/color-template.blade.php
@@ -1,98 +1,102 @@
 <style>
 
+        @php
+            $color = $settings->app_color ?? '#00BC7E';
+        @endphp
+
         {{-- Group options --}}
-        .group:hover .group-hover-text-theme {color: {{ $settings->app_color }} !important;}
+        .group:hover .group-hover-text-theme {color: {{ $color }} !important;}
 
 
         {{-- Single option --}}
-        .svg-color-theme {fill: {{ $settings->app_color }}}
+        .svg-color-theme {fill: {{ $color }}}
 
-        .svg-stroke-theme {stroke: {{ $settings->app_color }}}
-        .hover-svg-stroke-theme:hover {stroke: {{ $settings->app_color }}}
+        .svg-stroke-theme {stroke: {{ $color }}}
+        .hover-svg-stroke-theme:hover {stroke: {{ $color }}}
 
-        .hover-svg-stroke-theme:hover rect {stroke: {{ $settings->app_color }}}
-        .hover-svg-stroke-theme:hover line {stroke: {{ $settings->app_color }}}
+        .hover-svg-stroke-theme:hover rect {stroke: {{ $color }}}
+        .hover-svg-stroke-theme:hover line {stroke: {{ $color }}}
 
-        .bg-theme {background: {{ $settings->app_color }}}
-        .bg-theme-50 {background: {{ $settings->app_color }}05}
-        .bg-theme-100 {background: {{ $settings->app_color }}10}
-        .bg-theme-800 {background: {{ $settings->app_color }}80}
-        .hover-bg-theme:hover {background: {{ $settings->app_color }}}
-        .hover-bg-theme-100:hover {background: {{ $settings->app_color }}10 !important;}
+        .bg-theme {background: {{ $color }}}
+        .bg-theme-50 {background: {{ $color }}05}
+        .bg-theme-100 {background: {{ $color }}10}
+        .bg-theme-800 {background: {{ $color }}80}
+        .hover-bg-theme:hover {background: {{ $color }}}
+        .hover-bg-theme-100:hover {background: {{ $color }}10 !important;}
 
-        .text-theme {color: {{ $settings->app_color }}}
-        .hover-text-theme:hover {color: {{ $settings->app_color }}}
+        .text-theme {color: {{ $color }}}
+        .hover-text-theme:hover {color: {{ $color }}}
 
-        .shadow-theme {box-shadow: 0 7px 16px 2px {{ $settings->app_color }}40}
+        .shadow-theme {box-shadow: 0 7px 16px 2px {{ $color }}40}
 
-        .border-theme {border-color: {{ $settings->app_color }}}
-        .border-top-theme {border-top-color: {{ $settings->app_color }} !important;}
-        .border-left-theme {border-left-color: {{ $settings->app_color }} !important;}
-        .hover-border-theme:hover {border-color: {{ $settings->app_color }}}
+        .border-theme {border-color: {{ $color }}}
+        .border-top-theme {border-top-color: {{ $color }} !important;}
+        .border-left-theme {border-left-color: {{ $color }} !important;}
+        .hover-border-theme:hover {border-color: {{ $color }}}
 
-        .focus-within-border-theme:focus-within {border-color: {{ $settings->app_color }} !important;}
+        .focus-within-border-theme:focus-within {border-color: {{ $color }} !important;}
 
-        .focus-border-theme:focus {border-color: {{ $settings->app_color }}}
-        .focus-border-theme:focus[type='email'] {border-color: {{ $settings->app_color }}}
-        .focus-border-theme:focus[type='text'] {border-color: {{ $settings->app_color }}}
-        .focus-border-theme:focus[type='password'] {border-color: {{ $settings->app_color }}}
-        .focus-border-theme:focus[type='number'] {border-color: {{ $settings->app_color }}}
+        .focus-border-theme:focus {border-color: {{ $color }}}
+        .focus-border-theme:focus[type='email'] {border-color: {{ $color }}}
+        .focus-border-theme:focus[type='text'] {border-color: {{ $color }}}
+        .focus-border-theme:focus[type='password'] {border-color: {{ $color }}}
+        .focus-border-theme:focus[type='number'] {border-color: {{ $color }}}
 
         {{-- Global Active Class --}}
-        .active.active-bg-theme-100 {background: {{ $settings->app_color }}10 !important;}
-        .active.active-border-theme {border-color: {{ $settings->app_color }} !important;}
-        .active .active-text-theme {color: {{ $settings->app_color }}}
+        .active.active-bg-theme-100 {background: {{ $color }}10 !important;}
+        .active.active-border-theme {border-color: {{ $color }} !important;}
+        .active .active-text-theme {color: {{ $color }}}
 
         {{-- Emoji Picker --}}
-        .active-menu.focus-border-theme {border-color: {{ $settings->app_color }} !important;}
+        .active-menu.focus-border-theme {border-color: {{ $color }} !important;}
 
         {{-- Menubar --}}
-        .router-link-active.home .button-icon {background: {{ $settings->app_color }}10}
+        .router-link-active.home .button-icon {background: {{ $color }}10}
 
         {{-- Content Panel --}}
-        .router-link-active .text-theme {color: {{ $settings->app_color }} !important}
-        .router-link-active .text-theme svg {color: {{ $settings->app_color }} !important}
-        .router-link-active.border-bottom-theme {border-bottom-color: {{ $settings->app_color }} !important;}
+        .router-link-active .text-theme {color: {{ $color }} !important}
+        .router-link-active .text-theme svg {color: {{ $color }} !important}
+        .router-link-active.border-bottom-theme {border-bottom-color: {{ $color }} !important;}
 
-        .is-active .text-theme {color: {{ $settings->app_color }} !important}
-        .is-active .text-theme svg {color: {{ $settings->app_color }} !important}
+        .is-active .text-theme {color: {{ $color }} !important}
+        .is-active .text-theme svg {color: {{ $color }} !important}
 
-        .menu-list-item.link:hover {color: {{ $settings->app_color }}}
-        .menu-list-item.link:hover .text-theme svg {color: {{ $settings->app_color }}}
+        .menu-list-item.link:hover {color: {{ $color }}}
+        .menu-list-item.link:hover .text-theme svg {color: {{ $color }}}
 
         {{-- Select Input --}}
-        .input-area.is-active {border-color: {{ $settings->app_color }} !important}
+        .input-area.is-active {border-color: {{ $color }} !important}
 
         {{-- ButtonBase --}}
-        .button-base.theme-solid {background: {{ $settings->app_color }}}
+        .button-base.theme-solid {background: {{ $color }}}
         .button-base.theme-solid polyline,
         .button-base.theme-solid path {
             color: white;
         }
 
 
-        .button-base.theme {background: {{ $settings->app_color }}10}
-        .button-base.theme {color: {{ $settings->app_color }}}
-        .button-base.theme .content {color: {{ $settings->app_color }}}
+        .button-base.theme {background: {{ $color }}10}
+        .button-base.theme {color: {{ $color }}}
+        .button-base.theme .content {color: {{ $color }}}
 
         .button-base.theme polyline,
         .button-base.theme path {
-            color: {{ $settings->app_color }}
+            color: {{ $color }}
         }
 
-        .switch.active {background: {{ $settings->app_color }} !important;}
+        .switch.active {background: {{ $color }} !important;}
 
 
         {{-- Dragged borders --}}
-        .file-item.is-dragenter {border-color: {{ $settings->app_color }} !important;}
-        .folder-item.is-dragenter {border-color: {{ $settings->app_color }} !important;}
-        .favourites.is-dragenter .menu-list {border-color: {{ $settings->app_color }} !important;}
+        .file-item.is-dragenter {border-color: {{ $color }} !important;}
+        .folder-item.is-dragenter {border-color: {{ $color }} !important;}
+        .favourites.is-dragenter .menu-list {border-color: {{ $color }} !important;}
 
         {{-- Stripe --}}
-        .StripeElement--focus {border-color: {{ $settings->app_color }} !important;}
+        .StripeElement--focus {border-color: {{ $color }} !important;}
 
         {{-- Dark mode --}}
         @media (prefers-color-scheme: dark) {
-            .dark-text-theme {color: {{ $settings->app_color }}}
+            .dark-text-theme {color: {{ $color }}}
         }
     </style>
\ No newline at end of file