From 2828b09d54b77cc02ed12a9190d0f2763c295457 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Gur=C3=A1=C5=88?= <skemgi2@gmail.com>
Date: Tue, 29 Aug 2023 10:36:11 +0200
Subject: [PATCH] Fixed visual errors and improved some visuals

1. The rounded corners issue is gone
2. Fixed light theme status indicator, so on latest insiders it wont hide active green button
3. Added new visuals to navigation menu to make it more clear what card is active
---
 app/css/material-dark.php  | 27 +++++++++++++++------------
 app/css/material-light.php | 33 ++++++++++++++++++---------------
 2 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/app/css/material-dark.php b/app/css/material-dark.php
index 27216ffb..2ca08fd9 100644
--- a/app/css/material-dark.php
+++ b/app/css/material-dark.php
@@ -46,16 +46,7 @@ function lightenColor($color, $percent)
     return sprintf("#%02x%02x%02x", $r, $g, $b);
 }
 
-// Function to calculate luminance
-function calculateLuminance($color) {
-  $rgb = sscanf($color, "#%02x%02x%02x");
-  list($r, $g, $b) = $rgb;
-  return (0.299 * $r + 0.587 * $g + 0.114 * $b) / 255;
-}
-
-$luminance = calculateLuminance($backgroundColor);
-$textColor = $luminance > 0.5 ? 'black' : 'white';
-
+$textColor = lightenColor($baseColor, 95);
 // Create other color variables
 $cardsColor = darkenColor($baseColor, 60);
 $secondaryColor = lightenColor($baseColor, 30);
@@ -75,6 +66,14 @@ html * {
   color: <?php echo $textColor; ?>;
 }
 
+.nav-item.active .nav-link {
+  position: relative;
+  background-color: <?php echo $secondaryColor; ?>;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+  border-top-right-radius: 18px;
+  border-bottom-right-radius: 18px;
+}
+
 h2 {
   font-size: 2rem !important;
 }
@@ -93,7 +92,7 @@ h5.card-title {
 }
 
 .sidebar-light .nav-item.active .nav-link i {
-  color: <?php echo $primaryColor; ?>;
+  color: <?php echo $textColor; ?>;
 }
 
 .sidebar .nav-item.active .nav-link {
@@ -208,6 +207,8 @@ a:focus, a:hover {
 .card-header {
   border-bottom-left-radius: 0px!important;
   border-bottom-right-radius: 0px!important;
+  position: relative;
+  margin-bottom: -18px;
 }
 
 .card>.card-header .fa {
@@ -237,7 +238,7 @@ hr {
 }
 
 .sidebar-brand-text {
-  color: <?php echo $primaryColor; ?>;
+  color: <?php echo $secondaryColor; ?>;
 }
 
 .ra-raspap:before {
@@ -277,6 +278,8 @@ hr {
   border-top: 0px;
   border-bottom-right-radius: 18px!important;
   border-bottom-left-radius: 18px!important;
+  position: relative;
+  margin-top: -18px;
 }
 
 .modal-footer {
diff --git a/app/css/material-light.php b/app/css/material-light.php
index 749afde6..52bba635 100644
--- a/app/css/material-light.php
+++ b/app/css/material-light.php
@@ -47,21 +47,12 @@ function lightenColor($color, $percent)
     return sprintf("#%02x%02x%02x", $r, $g, $b);
 }
 
-// Function to calculate luminance
-function calculateLuminance($color) {
-  $rgb = sscanf($color, "#%02x%02x%02x");
-  list($r, $g, $b) = $rgb;
-  return (0.299 * $r + 0.587 * $g + 0.114 * $b) / 255;
-}
-
-$luminance = calculateLuminance($backgroundColor);
-$textColor = $luminance < 0.7 ? 'white' : 'black';
-
+$textColor = lightenColor($baseColor, 95);
 // Create other color variables
-$cardsColor = lightenColor($baseColor, 60);
-$secondaryColor = lightenColor($baseColor, 50);
+$cardsColor = lightenColor($baseColor, 50);
+$secondaryColor = lightenColor($baseColor, 30);
 $primaryColor = $baseColor;
-$backgroundColor = lightenColor($baseColor, 70);
+$backgroundColor = lightenColor($baseColor, 60);
 
 ?>
 
@@ -76,6 +67,14 @@ html * {
   color: <?php echo $textColor; ?>;
 }
 
+.nav-item.active .nav-link {
+  position: relative;
+  background-color: <?php echo $secondaryColor; ?>;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+  border-top-right-radius: 18px;
+  border-bottom-right-radius: 18px;
+}
+
 h2 {
   font-size: 2rem !important;
 }
@@ -94,7 +93,7 @@ h5.card-title {
 }
 
 .sidebar-light .nav-item.active .nav-link i {
-  color: <?php echo $primaryColor; ?>;
+  color: <?php echo $textColor; ?>;
 }
 
 .sidebar .nav-item.active .nav-link {
@@ -210,6 +209,8 @@ a:focus, a:hover {
 .card-header {
   border-bottom-left-radius: 0px!important;
   border-bottom-right-radius: 0px!important;
+  position: relative;
+  margin-bottom: -18px;
 }
 
 .card>.card-header .fa {
@@ -279,6 +280,8 @@ hr {
   border-top: 0px;
   border-bottom-right-radius: 18px!important;
   border-bottom-left-radius: 18px!important;
+  position: relative;
+  margin-top: -18px;
 }
 
 .modal-footer {
@@ -522,7 +525,7 @@ button.btn.btn-light.js-toggle-password {
 }
 
 .btn.service-status {
-  background-color: <?php echo $backgroundColor; ?>;
+  background-color: <?php echo $secondaryColor; ?>;
 }
 
 input.btn.btn-success {