Merge pull request #73 from mbaraa/refactor/themes-stuff

Refactor: Themes Fixes
mbaraa · Jun 10, 2024 · f5d6a87 · f5d6a87
2 parents afd071c + 09758eb
commit f5d6a87
Show file tree

Hide file tree

Showing 9 changed files with 17 additions and 30 deletions.
diff --git a/app/static/css/themes/black.css b/app/static/css/themes/black.css
@@ -9,12 +9,8 @@
   --secondary-color-30: #ffffff4c;
   --secondary-color-69: #ffffffb0;
 
-  --accent-color: #d3fcbf;
-  --accent-color-20: #d3fcbf33;
-  --accent-color-30: #d3fcbf4c;
-  --accent-color-69: #d3fcbfb0;
-}
-
-body {
-  background-color: #131313;
+  --accent-color: #236104;
+  --accent-color-20: #23610433;
+  --accent-color-30: #2361044c;
+  --accent-color-69: #236104b0;
 }
diff --git a/app/static/css/themes/dank.css b/app/static/css/themes/dank.css
@@ -14,7 +14,3 @@
   --accent-color-30: #0000004c;
   --accent-color-69: #000000b0;
 }
-
-body {
-  background-color: #305922;
-}
diff --git a/app/static/css/themes/white.css b/app/static/css/themes/white.css
@@ -14,7 +14,3 @@
   --accent-color-30: #d5ffc14c;
   --accent-color-69: #d5ffc1b0;
 }
-
-body {
-  background-color: #dedede;
-}
diff --git a/app/views/components/header/header.templ b/app/views/components/header/header.templ
@@ -26,7 +26,7 @@ templ Header() {
 		class={
 			"bg-primary", "p-[15px]", "md:p-[10px]", "text-secondary", "w-full",
 			"flex", "flex-col", "md:flex-row", "justify-between", "items-center",
-			"gap-y-5",
+			"gap-y-5", "border-b", "border-b-secondary",
 		}
 	>
 		<div class={ "w-full", "md:w-fit" }>

diff --git a/app/views/components/mobilenav/mobilenav.templ b/app/views/components/mobilenav/mobilenav.templ
@@ -5,10 +5,13 @@ import "dankmuzikk/views/icons"
 
 templ MobileNav() {
 	<div
-		class={ "fixed", "bottom-0", "left-0", "h-auto", "w-full" }
+		class={ "fixed", "bottom-0", "left-0", "h-auto", "w-full", }
 	>
 		<nav
-			class={ "bg-primary",  "h-[55px]", "m-[5px]", "rounded-[10px]", "flex", "justify-center", "items-center" }
+			class={
+				"bg-primary", "h-[55px]", "m-[5px]", "rounded-[10px]", "flex", "justify-center",
+				"items-center", "shadow-sm", "shadow-secondary",
+			}
 		>
 			<ul class={ "w-full", "m-0", "p-5", "px-14", "list-none", "flex", "justify-between" }>
 				<li>

diff --git a/app/views/components/player/desktop_player.templ b/app/views/components/player/desktop_player.templ
@@ -5,7 +5,7 @@ templ desktopPlayer() {
 		class={
 			"fixed", "bottom-0", "w-screen", "h-[90px]", "rounded-t-3xl", "text-secondary",
 			"font-Ubuntu", "flex", "items-center", "justify-between", "gap-x-4", "p-[20px]",
-			"bg-secondary-trans-20", "backdrop-blur-lg", "shadow-t-md", "shadow-t-accent",
+			"bg-secondary-trans-20", "backdrop-blur-lg", "shadow-md", "shadow-secondary",
 		}
 	>
 		<!-- details -->

diff --git a/app/views/components/player/mobile_player.templ b/app/views/components/player/mobile_player.templ
@@ -8,7 +8,7 @@ templ mobilePlayer() {
 		<div
 			id="ze-player"
 			class={
-				"bg-secondary-trans-20", "backdrop-blur-lg", "shadow-sm", "shadow-accent",
+				"bg-secondary-trans-20", "backdrop-blur-lg", "shadow-sm", "shadow-secondary",
 				"mx-[5px]", "rounded-[15px]", "text-secondary", "collapsed",
 			}
 		>

diff --git a/app/views/components/themeswitch/themeswitch.templ b/app/views/components/themeswitch/themeswitch.templ
@@ -66,7 +66,6 @@ script changeTheme(themeName string) {
             accent20: "#00000033",
             accent30: "#0000004c",
             accent69: "#000000b0",
-            bg: "#305922",
         },
         black: {
             primary: "#000000",
@@ -77,11 +76,10 @@ script changeTheme(themeName string) {
             secondary20: "#ffffff33",
             secondary30: "#ffffff4c",
             secondary69: "#ffffffb0",
-            accent: "#d3fcbf",
-            accent20: "#d3fcbf33",
-            accent30: "#d3fcbf4C",
-            accent69: "#d3fcbfB0",
-            bg: "#131313",
+            accent: "#236104",
+            accent20: "#23610433",
+            accent30: "#2361044C",
+            accent69: "#236104B0",
         },
         white: {
             primary: "#ffffff",
@@ -96,7 +94,6 @@ script changeTheme(themeName string) {
             accent20: "#d5ffc133",
             accent30: "#d5ffc14c",
             accent69: "#d5ffc1b0",
-            bg: "#ededed",
         },
     };
 
@@ -118,6 +115,5 @@ script changeTheme(themeName string) {
     style.setProperty('--accent-color-20', theme.accent20);
     style.setProperty('--accent-color-30', theme.accent30);
     style.setProperty('--accent-color-69', theme.accent69);
-    document.body.style.backgroundColor = theme.bg;
     //document.getElementById("popover-theme-switcher").style.display = "none";
 }
diff --git a/app/views/layouts/default.templ b/app/views/layouts/default.templ
@@ -49,7 +49,7 @@ templ Default(title string, children ...templ.Component) {
 		</head>
 		<body
 			hx-ext="loading-states"
-			class={ "min-w-screen", "min-h-screen", "p-0", "m-0", "font-Ubuntu" }
+			class={ "min-w-screen", "min-h-screen", "p-0", "m-0", "font-Ubuntu", "bg-primary" }
 		>
 			@header.Header()
 			<div class="refresher">