refactor: update class Names

Author: groovemen

build/assets/css/styles.css

@@ -1885,39 +1885,35 @@ h6 {
   background-color: hsla(0,0%,100%,0.8);
 }
 
-.bg-gradient-to-r {
-  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+.bg-gradient-horizontal-dark {
+  background-image: linear-gradient(90deg,transparent,rgba(0,0,0,.4),transparent);
 }
 
-.bg-gradient-slate-400 {
+.bg-gradient-slate {
   background-image: linear-gradient(310deg,#627594,#a8b8d8);
 }
 
-.bg-gradient-fuchsia-500 {
+.bg-gradient-fuchsia {
   background-image: linear-gradient(310deg,#7928ca,#ff0080);
 }
 
-.bg-gradient-gray-800 {
+.bg-gradient-dark-gray {
   background-image: linear-gradient(310deg,#141727,#3a416f);
 }
 
-.bg-gradient-horizontal-dark {
-  background-image: linear-gradient(90deg,transparent,rgba(0,0,0,.4),transparent);
-}
-
-.bg-gradient-red-600 {
+.bg-gradient-red {
   background-image: linear-gradient(310deg,#ea0606,#ff667c);
 }
 
-.bg-gradient-lime-500 {
+.bg-gradient-lime {
   background-image: linear-gradient(310deg,#17ad37,#98ec2d);
 }
 
-.bg-gradient-cyan-500 {
+.bg-gradient-cyan {
   background-image: linear-gradient(310deg,#2152ff,#21d4fd);
 }
 
-.bg-gradient-red-500 {
+.bg-gradient-orange {
   background-image: linear-gradient(310deg,#f53939,#fbcf33);
 }
 
@@ -1929,10 +1925,14 @@ h6 {
   background-image: linear-gradient(90deg,transparent,rgba(0,0,0,.1),transparent);
 }
 
-.bg-gradient-gray-200 {
+.bg-gradient-gray {
   background-image: linear-gradient(310deg,#ced4da,#ebeff4);
 }
 
+.bg-gradient-to-r {
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+}
+
 .from-transparent {
   --tw-gradient-from: transparent;
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(0 0 0 / 0));
@@ -3058,37 +3058,37 @@ h6 {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.after\:bg-gradient-gray-800::after {
+.after\:bg-gradient-dark-gray::after {
   content: var(--tw-content);
   background-image: linear-gradient(310deg,#141727,#3a416f);
 }
 
-.after\:bg-gradient-cyan-500::after {
+.after\:bg-gradient-cyan::after {
   content: var(--tw-content);
   background-image: linear-gradient(310deg,#2152ff,#21d4fd);
 }
 
-.after\:bg-gradient-red-500::after {
+.after\:bg-gradient-orange::after {
   content: var(--tw-content);
   background-image: linear-gradient(310deg,#f53939,#fbcf33);
 }
 
-.after\:bg-gradient-lime-500::after {
+.after\:bg-gradient-lime::after {
   content: var(--tw-content);
   background-image: linear-gradient(310deg,#17ad37,#98ec2d);
 }
 
-.after\:bg-gradient-red-600::after {
+.after\:bg-gradient-red::after {
   content: var(--tw-content);
   background-image: linear-gradient(310deg,#ea0606,#ff667c);
 }
 
-.after\:bg-gradient-slate-400::after {
+.after\:bg-gradient-slate::after {
   content: var(--tw-content);
   background-image: linear-gradient(310deg,#627594,#a8b8d8);
 }
 
-.after\:bg-gradient-fuchsia-500::after {
+.after\:bg-gradient-fuchsia::after {
   content: var(--tw-content);
   background-image: linear-gradient(310deg,#7928ca,#ff0080);
 }
@@ -3182,7 +3182,7 @@ h6 {
   background-image: none;
 }
 
-.checked\:bg-gradient-gray-800:checked {
+.checked\:bg-gradient-dark-gray:checked {
   background-image: linear-gradient(310deg,#141727,#3a416f);
 }
 
@@ -3961,7 +3961,7 @@ h6 {
     border-width: 0px;
   }
 
-  .xl-max\:bg-gradient-fuchsia-500 {
+  .xl-max\:bg-gradient-fuchsia {
     background-image: linear-gradient(310deg,#7928ca,#ff0080);
   }
 

build/assets/js/fixed-plugin.js

@@ -19,7 +19,7 @@ var transparentBtn = document.getElementById("transparent-style-btn");
 var whiteBtn = document.getElementById("white-style-btn");
 
 var non_active_style = ["bg-none", "bg-transparent", "text-fuchsia-500", "border-fuchsia-500"];
-var active_style = ["bg-gradient-fuchsia-500", "bg-fuchsia-500", "text-white", "border-transparent"];
+var active_style = ["bg-gradient-fuchsia", "bg-fuchsia-500", "text-white", "border-transparent"];
 
 var transparent_sidenav_classes = ["xl:bg-transparent", "shadow-none"];
 var transparent_sidenav_highlighted = ["shadow-soft-xl"];
@@ -95,8 +95,8 @@ function sidebarColor(a) {
   var activeSidenavCardIconColorClass;
 
   var checkedSidenavIconColor = "bg-gradient-" + color;
-  var checkedSidenavCardColor = "after:bg-gradient-" + (color == "fuchsia-500" ? "slate-400" : color);
-  var checkedSidenavCardIconColorClass = "bg-gradient-" + (color == "fuchsia-500" ? "slate-400" : color);
+  var checkedSidenavCardColor = "after:bg-gradient-" + (color == "fuchsia" ? "slate" : color);
+  var checkedSidenavCardIconColorClass = "bg-gradient-" + (color == "fuchsia" ? "slate" : color);
 
   var sidenavCard = document.getElementById("sidenavCard");
   var sidenavCardIcon = document.getElementById("sidenavCardIcon");
@@ -110,8 +110,8 @@ function sidebarColor(a) {
       parent[i].classList.toggle("border-slate-700");
 
       activeSidenavIconColorClass = "bg-gradient-" + activeColor;
-      activeSidenavCardColorClass = "after:bg-gradient-" + (activeColor == "fuchsia-500" ? "slate-400" : activeColor);
-      activeSidenavCardIconColorClass = "bg-gradient-" + (activeColor == "fuchsia-500" ? "slate-400" : activeColor);
+      activeSidenavCardColorClass = "after:bg-gradient-" + (activeColor == "fuchsia" ? "slate" : activeColor);
+      activeSidenavCardIconColorClass = "bg-gradient-" + (activeColor == "fuchsia" ? "slate" : activeColor);
     }
     parent[i].removeAttribute("active-color");
   }

build/assets/js/navbar-dropdown.js

@@ -5,7 +5,6 @@ var dropdown_menu = document.getElementById("dropdown-menu");
 var navbar = document.getElementById("navbarBlur");
 
 dropdown_trigger.addEventListener("click", function () {
-  // console.log("dropdown addEvent");
   dropdown_menu.classList.toggle("opacity-0");
   dropdown_menu.classList.toggle("pointer-events-none");
   dropdown_menu.classList.toggle("before:-top-5");

build/assets/js/perfect-scrollbar.js

@@ -8,9 +8,29 @@
       var ps = new PerfectScrollbar(mainpanel);
     }
 
-    if (document.getElementsByClassName("aside")[0]) {
-      var sidebar = document.querySelector("aside");
-      var ps1 = new PerfectScrollbar(sidebar);
+    if (document.querySelectorAll(".overflow-auto")[0]) {
+      var sidebar = document.querySelectorAll(".overflow-auto");
+      var i = 0;
+      var ps;
+      sidebar.forEach((element) => {
+        ps[i++] = new PerfectScrollbar(element);
+      });
+    }
+    if (document.querySelectorAll(".overflow-y-auto")[0]) {
+      var sidebar = document.querySelectorAll(".overflow-y-auto");
+      var i = 0;
+      var ps;
+      sidebar.forEach((element) => {
+        ps[i++] = new PerfectScrollbar(element);
+      });
+    }
+    if (document.querySelectorAll(".overflow-x-auto")[0]) {
+      var sidebar = document.querySelectorAll(".overflow-x-auto");
+      var i = 0;
+      var ps;
+      sidebar.forEach((element) => {
+        ps[i++] = new PerfectScrollbar(element);
+      });
     }
   }
 })();

build/assets/js/profile-pills.js

@@ -13,11 +13,6 @@ total.forEach(function (item, i) {
   tab.classList.add("shadow-soft-xxs");
   tab.style.animation = ".2s ease";
 
-  // .moving-tab : z-10
-  // .position-absolute: absolute
-  // .nav-link: "text-slate-700", "rounded-lg", "bg-inherit", "flex-auto", "text-center", "bg-none", "border-0", "block"
-  // .flex-column --> flex-col
-
   moving_div.classList.add("moving-tab", "z-10", "absolute", "nav-link", "text-slate-700", "rounded-lg", "bg-inherit", "flex-auto", "text-center", "bg-none", "border-0", "block");
   moving_div.appendChild(tab);
   item.appendChild(moving_div);
@@ -32,11 +27,9 @@ total.forEach(function (item, i) {
 
   item.onmouseover = function (event) {
     let target = getEventTarget(event);
-    // console.log(target);
-    let li = target.closest("li"); // get reference
+    let li = target.closest("li");
     if (li) {
-      let nodes = Array.from(li.closest("ul").children); // get array
-      // console.log(nodes);
+      let nodes = Array.from(li.closest("ul").children);
       let index = nodes.indexOf(li) + 1;
       item.querySelector("li:nth-child(" + index + ") .nav-link").onclick = function () {
         item.querySelectorAll("li").forEach(function (list_item) {
@@ -89,7 +82,7 @@ window.addEventListener("resize", function (event) {
     let li = item.querySelector(".nav-link.active").parentElement;
 
     if (li) {
-      let nodes = Array.from(li.closest("ul").children); // get array
+      let nodes = Array.from(li.closest("ul").children);
       let index = nodes.indexOf(li) + 1;
 
       let sum = 0;

build/assets/js/projects-dropdown.js

@@ -2,11 +2,9 @@ var dropdown_trigger_table = document.getElementById("dropdown-trigger-table");
 var dropdown_menu_table = document.getElementById("dropdown-menu-table");
 
 dropdown_trigger_table.addEventListener("click", function () {
-  // console.log("hello");
   dropdown_menu_table.classList.toggle("opacity-0");
   dropdown_menu_table.classList.toggle("pointer-events-auto");
   dropdown_menu_table.classList.toggle("before:-top-5");
-  // dropdown_menu_table.classList.toggle("before:top-0");
   if (dropdown_trigger_table.getAttribute("aria-expanded") == "false") {
     dropdown_trigger_table.setAttribute("aria-expanded", "true");
     dropdown_menu_table.classList.remove("transform-dropdown");

build/assets/js/sidenav-burger.js

@@ -12,7 +12,6 @@ sidenav_trigger.addEventListener("click", function () {
     sidenav.classList.toggle("xl:left-[18%]");
   }
   sidenav_close_button.classList.toggle("hidden");
-  //   console.log("sidenav addEvent");
   sidenav.classList.toggle("translate-x-0");
   sidenav.classList.toggle("shadow-soft-xl");
   if (page == "rtl") {

build/assets/js/sidenav-highlight.js

@@ -16,7 +16,7 @@ function highlightPage(pageName) {
   target_a.classList.add("font-semibold");
   target_a.classList.add("text-slate-700");
   target_a.classList.add("shadow-soft-xl");
-  target_div.classList.add("bg-gradient-fuchsia-500");
+  target_div.classList.add("bg-gradient-fuchsia");
 
   target_paths.forEach((path) => {
     path.classList.remove("fill-slate-20");