From 3c6075a1008264ebba5b76ed8bddbcb84006c05f Mon Sep 17 00:00:00 2001
From: Kabiir <kabiirk@gmail.com>
Date: Sat, 29 Oct 2022 00:38:53 +0530
Subject: [PATCH] Active Theme indication + 'Done' button centered

---
 public/dashboard/css/style.css | 13 +++++++++++++
 views/dashboard/appearance.ejs | 18 ++++++++++++++++--
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/public/dashboard/css/style.css b/public/dashboard/css/style.css
index f5c07ed..5fd347d 100644
--- a/public/dashboard/css/style.css
+++ b/public/dashboard/css/style.css
@@ -386,6 +386,18 @@ padding: 0.05rem 0.4rem 0.15rem;
     padding-bottom: 2rem;
 }
 
+.active-theme{
+    /* border: #2b2d42 0.1rem solid;
+    border-radius: 5%; */
+    box-shadow: inset 0 0 0 2px #2b2d42;
+}
+
+.theme-submit-parent{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
 .theme-submit{
     background-color:#06d6a0 ;
     padding: 1rem;
@@ -407,6 +419,7 @@ padding: 0.05rem 0.4rem 0.15rem;
 .theme-card{
     justify-content: center;
     text-align: center;
+    border-radius: 5%;
 }
 
 .theme-img{
diff --git a/views/dashboard/appearance.ejs b/views/dashboard/appearance.ejs
index 63e564d..0a794ca 100644
--- a/views/dashboard/appearance.ejs
+++ b/views/dashboard/appearance.ejs
@@ -185,7 +185,9 @@
                     </div>
                 </div>
             </div>
-            <a class="theme-submit">Done</a>
+            <div class="theme-submit-parent">
+                <a class="theme-submit">Done</a>
+            </div>
         </div>
        </div>
       
@@ -216,6 +218,8 @@
                 location.reload();
             }
             console.log(data);
+            // Set active theme on page-load
+            $("."+data.theme).addClass("active-theme");
             console.log(status);
         });
     });
@@ -259,10 +263,20 @@
     const toggleModal = () => {
         document.querySelector('.modal').classList.toggle('hidden');
     }
+
     const setTheme = (themeName) => {
-        // const themeCard = document.getElementsByClassName('theme-cards')
         const selecttheme = document.querySelector('#profileTheme');
         selecttheme.value = themeName;
+
+        // Set active Theme on button click
+        const themeArray = document.getElementsByClassName("theme-card");
+        // set all themes as inactive first
+        for(i=0; i<themeArray.length; i++){
+            themeArray[i].classList.remove("active-theme");
+        }
+        // Set border on active theme onClick
+        const activeTheme = document.getElementsByClassName(themeName);
+        activeTheme[0].classList.add("active-theme");
     }
 
     // Toggle Dialog Box