From 0a8f8278b3ef78a6879038029f1ea233cd592a88 Mon Sep 17 00:00:00 2001
From: alf1e <alfiewbarlow@gmail.com>
Date: Wed, 4 Oct 2023 20:12:22 +0100
Subject: [PATCH] MAke it dark mode

---
 src/components/cta.astro           |  2 +-
 src/components/footer.astro        |  4 +--
 src/components/hero.astro          |  4 +--
 src/components/navbar/navbar.astro |  6 ++--
 src/components/pricing.astro       | 11 +++----
 src/components/sectionhead.astro   |  2 +-
 src/components/ui/link.astro       |  4 +--
 src/layouts/BlogLayout.astro       | 49 ------------------------------
 src/layouts/Layout.astro           |  8 +++++
 src/pages/404.astro                |  2 +-
 src/pages/about.astro              |  4 +--
 src/pages/pricing.astro            |  2 --
 12 files changed, 27 insertions(+), 71 deletions(-)
 delete mode 100644 src/layouts/BlogLayout.astro

diff --git a/src/components/cta.astro b/src/components/cta.astro
index 85ba9a6..6114c88 100644
--- a/src/components/cta.astro
+++ b/src/components/cta.astro
@@ -18,7 +18,7 @@ const {
 
 <div
   class="bg-black p-8 md:px-20 md:py-20 mt-20 mx-auto max-w-5xl rounded-lg flex flex-col items-center text-center">
-  <h2 class="text-white text-4xl md:text-6xl tracking-tight">
+  <h2 class="text-black text-4xl md:text-6xl tracking-tight">
     {header}
   </h2>
   <p class="text-slate-400 mt-4 text-lg md:text-xl">
diff --git a/src/components/footer.astro b/src/components/footer.astro
index 692e2d1..52ecfeb 100644
--- a/src/components/footer.astro
+++ b/src/components/footer.astro
@@ -1,5 +1,5 @@
 <footer class="my-20">
-  <p class="text-center text-sm text-slate-500">
+  <p class="text-center text-sm text-gray-300">
     Copyright © {new Date().getFullYear()} ItsMeAlfie0. All rights reserved.
   </p>
   <!--
@@ -7,7 +7,7 @@
     Please keep this backlink on your website if possible.
     or Purchase a commercial license from https://web3templates.com
   -->
-  <p class="text-center text-xs text-slate-500 mt-1">
+  <p class="text-center text-xs text-gray-300 mt-1">
     Template made by <a
       href="https://web3templates.com"
       target="_blank"
diff --git a/src/components/hero.astro b/src/components/hero.astro
index 5f8dc80..35d1df1 100644
--- a/src/components/hero.astro
+++ b/src/components/hero.astro
@@ -23,7 +23,7 @@ import { Icon } from "astro-icon";
       class="text-5xl lg:text-6xl xl:text-7xl font-bold lg:tracking-tight xl:tracking-tighter">
       Nebulus 
     </h1>
-    <p class="text-lg mt-4 text-slate-600 max-w-xl">
+    <p class="text-lg mt-4 text-slate-600 max-w-xl text-white">
       One bot for absolutely everything. From moderation to custom events, we have it all!
     </p>
     <div class="mt-6 flex flex-col sm:flex-row gap-3">
@@ -41,7 +41,7 @@ import { Icon } from "astro-icon";
         href="https://github.com/nebulus-bot"
         class="flex gap-1 items-center justify-center"
         target="_blank">
-        <Icon class="text-black w-4 h-4" name="bx:bxl-github" />
+        <Icon class="text-white w-4 h-4" name="bx:bxl-github" />
         GitHub Organization
       </Link>
     </div>
diff --git a/src/components/navbar/navbar.astro b/src/components/navbar/navbar.astro
index c4634b3..9b2c3cb 100644
--- a/src/components/navbar/navbar.astro
+++ b/src/components/navbar/navbar.astro
@@ -24,10 +24,10 @@ const menuitems = [
   <header class="flex flex-col lg:flex-row justify-between items-center my-5">
     <Astronav>
       <div class="flex w-full lg:w-auto items-center justify-between">
-        <a href="/" class="text-lg"><span class="font-bold text-slate-800">Nebulus</span>
+        <a href="/" class="text-lg"><span class="font-bold text-white">Nebulus</span>
         </a>
         <div class="block lg:hidden">
-          <MenuIcon class="w-4 h-4 text-gray-800" />
+          <MenuIcon class="w-4 h-4 text-white" />
         </div>
       </div>
       <MenuItems class="hidden w-full lg:w-auto mt-2 lg:flex lg:mt-0">
@@ -47,7 +47,7 @@ const menuitems = [
                   <li>
                     <a
                       href={item.path}
-                      class="flex lg:px-3 py-2 text-gray-600 hover:text-gray-900">
+                      class="flex lg:px-3 py-2 text-white-600 hover:text-gray-300">
                       {item.title}
                     </a>
                   </li>
diff --git a/src/components/pricing.astro b/src/components/pricing.astro
index d6064c0..7aae97c 100644
--- a/src/components/pricing.astro
+++ b/src/components/pricing.astro
@@ -7,10 +7,10 @@ const { plan } = Astro.props;
 
 <div>
   <div
-    class="flex flex-col w-full order-first lg:order-none border-2 border-[#D8DEE9] border-opacity-50 py-5 px-6 rounded-md">
+    class="flex flex-col w-full order-first lg:order-none border-2 border-gray-500 border-opacity-50 py-5 px-6 rounded-md">
     <div class="text-center">
-      <h4 class="text-lg font-medium text-gray-400">{plan.name}</h4><p
-        class="mt-3 text-4xl font-bold text-black md:text-4xl">
+      <h4 class="text-lg font-medium text-white-400">{plan.name}</h4><p
+        class="mt-3 text-4xl font-bold text-gray-300 md:text-4xl">
         {
           plan.price && typeof plan.price === "object"
             ? plan.price.monthly + " /month"
@@ -27,7 +27,7 @@ const { plan } = Astro.props;
     </div><ul class="grid mt-8 text-left gap-y-4">
       {
         plan.features.map((item) => (
-          <li class="flex items-start gap-3 text-gray-800">
+          <li class="flex items-start gap-3 text-white">
             <Tick class="w-6 h-6" />
             <span>{item}</span>
           </li>
@@ -36,8 +36,7 @@ const { plan } = Astro.props;
     </ul><div class="flex mt-8">
       <Link
         href={plan.button.link || "#"}
-        block
-        style={plan.popular ? "primary" : "outline"}>
+        block>
         {plan.button.text || "Get Started"}
       </Link>
     </div>
diff --git a/src/components/sectionhead.astro b/src/components/sectionhead.astro
index fb134ef..e4acc6a 100644
--- a/src/components/sectionhead.astro
+++ b/src/components/sectionhead.astro
@@ -6,7 +6,7 @@ const { align = "center" } = Astro.props;
   <h1 class="text-4xl lg:text-5xl font-bold lg:tracking-tight">
     <slot name="title">Title</slot>
   </h1>
-  <p class="text-lg mt-4 text-slate-600">
+  <p class="text-lg mt-4 text-gray-300">
     <slot name="desc">Some description goes here</slot>
   </p>
 </div>
diff --git a/src/components/ui/link.astro b/src/components/ui/link.astro
index 54976fc..daa519e 100644
--- a/src/components/ui/link.astro
+++ b/src/components/ui/link.astro
@@ -23,8 +23,8 @@ const sizes = {
 };
 
 const styles = {
-  outline: "bg-white border-2 border-black hover:bg-gray-100 text-black ",
-  primary: "bg-black text-white hover:bg-gray-800  border-2 border-transparent",
+  outline: "bg-gray-700 hover:bg-slate-900 text-white ",
+  primary: "bg-black text-white hover:bg-slate-900  border-2 border-transparent",
   inverted: "bg-white text-black   border-2 border-transparent",
   muted: "bg-gray-100 hover:bg-gray-200   border-2 border-transparent",
 };
diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro
deleted file mode 100644
index bd221a9..0000000
--- a/src/layouts/BlogLayout.astro
+++ /dev/null
@@ -1,49 +0,0 @@
----
-import Container from "@components/container.astro";
-import { getFormattedDate } from "@utils/all";
-import Layout from "./Layout.astro";
-
-const { frontmatter } = Astro.props;
----
-
-<Layout title={frontmatter.title}>
-  <Container>
-    <div class="mx-auto max-w-[735px] mt-14">
-      <span class="text-blue-400 uppercase tracking-wider text-sm font-medium">
-        {frontmatter.category}
-      </span>
-      <h1
-        class="text-4xl lg:text-5xl font-bold lg:tracking-tight mt-1 lg:leading-tight">
-        {frontmatter.title}
-      </h1>
-      <div class="flex gap-2 mt-3 items-center flex-wrap md:flex-nowrap">
-        <span class="text-gray-400">
-          {frontmatter.author}
-        </span>
-        <span class="text-gray-400">•</span>
-        <time class="text-gray-400" datetime={frontmatter.publishDate}>
-          {getFormattedDate(frontmatter.publishDate)}
-        </time>
-        <span class="text-gray-400 hidden md:block">•</span>
-        <div class="w-full md:w-auto flex flex-wrap gap-3">
-          {
-            frontmatter.tags.map((tag) => (
-              <span class="text-sm text-gray-500">#{tag}</span>
-            ))
-          }
-        </div>
-      </div>
-    </div>
-
-    <div class="mx-auto prose prose-lg mt-6">
-      <slot />
-    </div>
-    <div class="text-center mt-8">
-      <a
-        href="/blog"
-        class="bg-gray-100 px-5 py-3 rounded-md hover:bg-gray-200 transition"
-        >← Back to Blog</a
-      >
-    </div>
-  </Container>
-</Layout>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index d632888..52510df 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -43,6 +43,14 @@ const makeTitle = title
       img {
         content-visibility: auto;
       }
+
+      :root {
+        background: #32363E;
+      }
+
+      body {
+        color: #FFFFFF;
+      }
     </style>
   </body>
 </html>
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 5c208ec..b04c212 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -8,7 +8,7 @@ import Layout from "@layouts/Layout.astro";
     <div class="min-h-[calc(100vh-16rem)] flex items-center justify-center">
       <div class="mt-16 text-center">
         <h1 class="text-4xl lg:text-5xl font-bold lg:tracking-tight">404</h1>
-        <p class="text-lg mt-4 text-slate-600">Page not found. What were you looking for?</p>
+        <p class="text-lg mt-4 text-gray-300">Page not found. What were you looking for?</p>
       </div>
     </div>
   </Container>
diff --git a/src/pages/about.astro b/src/pages/about.astro
index a935501..7e83257 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -14,10 +14,10 @@ import Sectionhead from "@components/sectionhead.astro";
     </Sectionhead>
 
     <div class="flex flex-col gap-3 mx-auto max-w-4xl mt-16">
-      <h2 class="font-bold text-3xl text-gray-800">
+      <h2 class="font-bold text-3xl text-white">
         Empowering you to take power of your discord server.
       </h2>
-      <p class="text-lg leading-relaxed text-slate-500">
+      <p class="text-lg leading-relaxed text-gray-300">
         We're a small team of developers building tools for you to take power over your servers. 
         From fun games to custom events, we have all that you need!
       </p>
diff --git a/src/pages/pricing.astro b/src/pages/pricing.astro
index a8a420e..51747a2 100644
--- a/src/pages/pricing.astro
+++ b/src/pages/pricing.astro
@@ -8,7 +8,6 @@ const pricing = [
   {
     name: "Personal",
     price: "Free",
-    popular: false,
     features: [
       "Feature List Coming Soon!"
     ],
@@ -20,7 +19,6 @@ const pricing = [
   {
     name: "Startup",
     price: "TBD",
-    popular: true,
     features: [
       "All Free Features",
       "Feature List Coming Soon!",