style(explorer): remove background and update colors (yetanotherco#727)

Co-authored-by: Mariano A. Nicolini <mariano.nicolini.91@gmail.com>

Author: glpecile

explorer/assets/css/app.css

@@ -3,48 +3,48 @@
 @import "tailwindcss/utilities";
 
 @layer base {
-	:root {
-		--background: 101 68% 98%;
-		--foreground: 101 57% 0%;
-		--muted: 281 12% 92%;
-		--muted-foreground: 281 0% 33%;
-		--popover: 111.43 63.64% 97.84%;
-		--popover-foreground: 101 57% 0%;
-		--card: 111.43 63.64% 97.84%;
-		--card-foreground: 0 0% 0%;
-		--border: 101 3% 90%;
-		--input: 101 3% 90%;
-		--primary: 117.66 58.78% 74.31%;
-		--primary-foreground: 0 0% 8.85%;
-		--secondary: 165.75 41.24% 38.04%;
-		--secondary-foreground: 281 78% 97%;
-		--accent: 155.58 34.4% 49.02%;
-		--accent-foreground: 281 78% 97%;
-		--destructive: 1 83% 34%;
-		--destructive-foreground: 1 83% 94%;
-		--ring: 134.46 50.3% 67.65%;
-		--radius: 0.5rem;
-	}
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 101 57% 0%;
+        --muted: 281 12% 92%;
+        --muted-foreground: 281 0% 33%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 101 57% 0%;
+        --card: 0 0% 100%;
+        --card-foreground: 0 0% 0%;
+        --border: 101 3% 90%;
+        --input: 101 3% 90%;
+        --primary: 0 0% 0%;
+        --primary-foreground: 0 0% 100%;
+        --secondary: 201.97 97.26% 14.31%;
+        --secondary-foreground: 0 0% 100%;
+        --accent: 146.75 100% 54.71%;
+        --accent-foreground: 0 0% 0%;
+        --destructive: 1 83% 34%;
+        --destructive-foreground: 1 83% 94%;
+        --ring: 146.75 100% 54.71%;
+        --radius: 0.5rem;
+    }
 
-	.dark {
-		--background: 101 53% 0%;
-		--foreground: 101 22% 99%;
-		--muted: 281 12% 8%;
-		--muted-foreground: 281 0% 67%;
-		--popover: 101 53% 0%;
-		--popover-foreground: 101 22% 99%;
-		--card: 0 0% 1%;
-		--card-foreground: 0 0% 100%;
-		--border: 101 3% 12%;
-		--input: 101 3% 12%;
-		--primary: 117.66 58.78% 74.31%;
-		--primary-foreground: 0 0% 11.54%;
-		--secondary: 164.68 46.53% 19.8%;
-		--secondary-foreground: 281 78% 97%;
-		--accent: 165.88 42.5% 31.37%;
-		--accent-foreground: 281 78% 97%;
-		--destructive: 1 83% 50%;
-		--destructive-foreground: 0 0% 100%;
-		--ring: 165.75 41.24% 38.04%;
-	}
+    .dark {
+        --background: 0 0% 0%;
+        --foreground: 101 22% 99%;
+        --muted: 281 12% 8%;
+        --muted-foreground: 281 0% 67%;
+        --popover: 101 53% 0%;
+        --popover-foreground: 101 22% 99%;
+        --card: 0 0% 1%;
+        --card-foreground: 0 0% 100%;
+        --border: 101 3% 12%;
+        --input: 101 3% 12%;
+        --primary: 146.75 100% 54.71%;
+        --primary-foreground: 0 0% 11.54%;
+        --secondary: 201.97 97.26% 14.31%;
+        --secondary-foreground: 281 78% 97%;
+        --accent: 146.75 100% 54.71%;
+        --accent-foreground: 0 0% 0%;
+        --destructive: 1 83% 50%;
+        --destructive-foreground: 0 0% 100%;
+        --ring: 168.51 79.66% 23.14%;
+    }
 }

explorer/assets/js/app.js

@@ -40,7 +40,7 @@ let liveSocket = new LiveSocket("/live", Socket, {
 
 // Show progress bar on live navigation and form submits
 topbar.config({
-	barColors: { 0: "#9AE497" },
+	barColors: { 0: "#18FF7F" },
 	shadowColor: "rgba(0, 0, 0, .3)"
 });
 window.addEventListener("phx:page-loading-start", (_info) =>

explorer/lib/explorer_web/components/core_components.ex

@@ -254,8 +254,8 @@ defmodule ExplorerWeb.CoreComponents do
 
   def root_background(assigns) do
     ~H"""
-    <div class="bg-[url(/images/home.webp)] bg-cover min-h-screen">
-      <main class="px-4 sm:px-6 lg:px-8 pt-20 pb-8 selection:bg-primary/80">
+    <div class="min-h-screen">
+      <main class="px-4 sm:px-6 lg:px-8 pt-20 pb-8 selection:bg-accent/80">
         <%= render_slot(@inner_block) %>
       </main>
     </div>
@@ -394,8 +394,8 @@ defmodule ExplorerWeb.CoreComponents do
     <span class={[
       "px-3 py-1 rounded-full",
       case @status do
-        true -> "text-black bg-primary group-hover:bg-primary/80"
-        false -> "text-white bg-secondary group-hover:bg-secondary/80"
+        true -> "text-accent-foreground bg-accent group-hover:bg-primary/80"
+        false -> "text-background bg-foreground group-hover:bg-secondary/80"
       end,
       @class
     ]}>

explorer/lib/explorer_web/components/layouts/root.html.heex

@@ -45,7 +45,7 @@
       }  
     </script>
   </head>
-  <body class="antialiased bg-gray-100 dark:bg-zinc-950">
+  <body class="antialiased bg-gray-100 dark:bg-neutral-950">
     <%= @inner_content %>
   </body>
 </html>

explorer/lib/explorer_web/live/pages/home/index.html.heex

@@ -1,10 +1,7 @@
 <div class="flex flex-col items-center justify-end w-full min-h-32 relative max-w-96 mx-auto">
-  <label
-    for="input_nav_search"
-    class="text-5xl font-medium tracking-tighter drop-shadow-lg dark:text-primary"
-  >
+  <h1 class="text-5xl font-medium tracking-tighter drop-shadow-lg dark:text-primary">
     Aligned Explorer
-  </label>
+  </h1>
 </div>
 <div class="mt-8 text-foreground px-2 grid grid-cols-1 sm:grid-cols-3 justify-center gap-3 md:max-w-[50rem] mx-auto">
   <.card_link