updated: dark theme and layout pages

4 files changed, 65 insertions, 78 deletions

diff --git a/src/components/Code.svelte b/src/components/Code.svelte
index c8c1058a..9d54cc7b 100644
--- a/src/components/Code.svelte
+++ b/src/components/Code.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <div
-  class="bg-black text-white rounded-lg p-4 flex gap-4 whitespace-pre-wrap font-mono"
+  class="bg-stone-900 dark:bg-stone-800 text-white rounded-lg p-4 px-5 flex gap-4 whitespace-pre-wrap font-mono shadow-inner shadow-stone-950 dark:shadow-stone-900"
 >
   <div class="overflow-x-scroll max-w-full scrollbar-hide">
     <div class="break-all min-w-[800px]">{samples[sample]}</div>
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index 92fb23c6..f77e6b41 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -14,62 +14,47 @@
     { url: "/support", titleID: "support" },
   ];
 </script>
+<footer class="pt-16 bg-black">
+	<div class="max-w-[1296px] mx-auto px-8">
+		<!-- footer_top -->
+		<div class="footer_top pb-4">
+			<div class="flex-col md:flex-row flex md:items-center justify-between">
+				<div class="flex-1 mb-12 sm:mb-5">
+					<a href="#" class="footer_logo"><img src="images/footer-logo.png" alt="" /></a>
+					<p class="text-gray-200 mt-10">Copyright © 2023. Swapee.me</p>
+					<p class="text-gray-200 mt-3">All rights reserved.</p>
+					<a href="#" class="btn_language inline-block mt-6 font-bold !text-white hover:!text-black">English</a>
+				</div>
+				<div
+					class="flex-1 footer_top_right flex items-center justify-start md:justify-center "
+				>
+					<div class="flex max-sm:flex-col md:justify-end gap-x-6">
+						<div class="flex-1 xl:mb-0 mb-4 md:pr-0 sm:pr-5">
+							<h6 class="!text-white/80 mb-0">Business enquiries</h6>
+							<a href="mailto:[email protected]">[email protected]</a>
+						</div>
+						<div class="flex-1 xs:pr-5 mb-4 md:pr-0 sm:pr-5">
+							<h6 class="!text-white/80 mb-0">Support enquiries</h6>
+							<a href="mailto:[email protected]">[email protected]</a>
+						</div>
+					</div>
+				</div>
+			</div>
 
-<footer
-  class="space-y-10 md:space-y-0 text-xl block md:flex justify-around mb-20"
->
-  <div class="space-y-5">
-    <div class="text-center w-full">
-      <a href="/"><Icon icon="logo" style="w-48 mx-auto md:mx-0" /></a>
-    </div>
-    <div class="flex gap-2 justify-center sm:hidden">
-      <div>
-        <a href="/register">
-          <button
-            class="bg-black text-white border rounded-full px-4 py-2 font-bold hover:opacity-80 text-lg"
-          >
-            {$t("nav.startInSeconds")}
-          </button>
-        </a>
-      </div>
-    </div>
-    <div class="w-full flex">
-      <div class="mx-auto">
-        <LocaleSelector
-          style="p-2 text-center hover:opacity-80 cursor-pointer border rounded-full"
-        />
-      </div>
-    </div>
-  </div>
-
-  <div class="text-center md:text-left">
-    <p class="font-semibold">{$t("footer.followUs")}</p>
-    <ul class="mt-5 text-secondary space-y-3 font-medium">
-      {#each followLinks as link}
-        <li>
-          <a
-            href={link.url}
-            target="_blank"
-            rel="noreferrer"
-            class="hover:opacity-80">{$t("footer." + link.titleID)}</a
-          >
-        </li>
-      {/each}
-    </ul>
-  </div>
-
-  <div class="text-center md:text-left">
-    <p class="font-semibold">{$t("footer.company")}</p>
-    <ul class="mt-5 text-secondary space-y-3">
-      {#each companyLinks as link}
-        <li>
-          <a href={link.url} class="hover:opacity-80"
-            >{$t("footer." + link.titleID)}</a
-          >
-        </li>
-      {/each}
-    </ul>
-  </div>
-
-  <Icon icon="shield" style="mx-auto md:mx-0" />
+			<!-- footer_bottom -->
+			<div class="footer_bottom pt-4 pb-2">
+				<ul class="list-unstyled mb-0 ps-0">
+					<li class="pb-3 ">
+						<a href="/docs" class="!text-white/80 opacity-100 hover:!text-swapee-purple/100 font-semibold">Documentation</a>
+					</li>
+					<li class="pb-3">
+						<a href="/privacy" class="!text-white/80 opacity-100 hover:!text-swapee-purple/100 font-semibold">Privacy Policy</a>
+					</li>
+          <li class="pb-3">
+						<a href="/support" class="!text-white/80 opacity-100 hover:!text-swapee-purple/100 font-semibold">Support</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
 </footer>
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index 009ab063..e0a2aad0 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -19,13 +19,14 @@
 </script>
 
 <header
-  class="w-full lg:w-5/6 py-5 mx-auto fixed md:sticky z-10 top-0 bg-white/90"
+  class="w-full container px-10 lg:px-40 md:pb-5 pt-5 mx-auto fixed md:sticky z-10 top-0 bg-white/80 dark:bg-black/80 backdrop-blur-sm"
   bind:this={header}
 >
-	<nav class="block xl:flex flex-wrap justify-between items-center">
+	<nav class="reltive flex flex-wrap justify-between items-center max-md:pb-4">
 		<div class="flex justify-start md:justify-center items-center md:space-x-10">
-			<a href="/" on:click={() => scroll(header)}>
-				<img src="images/logo.png" class="max-w-[140px]" />
+			<a href="/" on:click={() => scroll(header)} class="">
+				<img src="images/logo.png" class="max-w-[140px] dark:hidden" alt="swapee logo" />
+        <img src="images/logo-white.png" class="max-w-[140px] hidden dark:inline-block" alt="swapee logo" />
 			</a>
 		</div>
 
@@ -46,24 +47,24 @@
       {/if}
       {#if user}
         <button
-          class="border rounded-full px-6 py-2 font-bold"
+          class="dark:!bg-black dark:!text-white border-black dark:!border-white !border-2 !font-bold px-6 py-2 rounded-full" 
           on:click={() => goto(`/${user.username}`)}
-          >Home
+         >Home
         </button>
         <button
-          class="bg-black text-white border rounded-full px-6 py-2 font-bold"
+          class="bg-black dark:!bg-white dark:!text-black !text-white border-2 border-black rounded-full px-6 py-2 font-bold"
           on:click={() => goto("/logout")}
         >
           {$t("nav.signOut")}
         </button>
       {:else}
         <button
-          class="border rounded-full px-6 py-2 font-bold hover:opacity-80"
+          class="dark:!bg-black dark:!text-white border-black dark:!border-white !border-2 !font-bold px-6 py-2 rounded-full hover:opacity-80"
           on:click={() => goto("/register")}
           >{$t("nav.startInSeconds")}
         </button>
         <button
-          class="bg-black text-white border rounded-full px-6 py-2 font-bold hover:opacity-80"
+          class="bg-black dark:!bg-white dark:!text-black !text-white border-2 border-black rounded-full px-6 py-2 font-bold hover:opacity-80"
           on:click={() => goto("/login")}
         >
           {$t("nav.signIn")}
@@ -73,46 +74,46 @@
 
     <!-- mobile nav -->
     <button
-      class="block md:hidden absolute top-[34.5px] right-10 z"
+      class="scale-125 z-50 md:hidden"
       on:click={() => (showMobileMenu = !showMobileMenu)}
-      ><Icon icon={!showMobileMenu ? "menu" : "close"} />
+      ><Icon icon={!showMobileMenu ? "menu" : "close"} style="dark:invert" />
     </button>
 
     <div
       class="container w-full px-10 md:hidden absolute top-0 {showMobileMenu
         ? 'right-0'
-        : 'right-[-100%]'} transition-all ease-in-out duration-300 h-[100vh] w-full bg-white"
+        : 'right-[-100%]'} transition-all ease-in-out duration-300 h-[100vh] w-full bg-white dark:bg-black"
     >
       <div class="space-y-8 mt-24 font-bold text-xl">
-        <button on:click={() => mobileMenuButtonClick(howItWorks)} class="block"
+        <button on:click={() => mobileMenuButtonClick(howItWorks)} class="block dark:!text-gray-200"
           >{$t("howItWorks.header")}</button
         >
-        <button on:click={() => mobileMenuButtonClick(faq)} class="block"
+        <button on:click={() => mobileMenuButtonClick(faq)} class="block dark:!text-gray-200"
           >{$t("faq.header")}</button
         >
-        <button on:click={() => mobileMenuButtonClick(about)} class="block"
+        <button on:click={() => mobileMenuButtonClick(about)} class="block dark:!text-gray-200"
           >{$t("about.header")}</button
         >
         {#if !user}
           <button
-            class="border rounded-full px-6 py-2 font-bold block w-full"
+            class="dark:!bg-black dark:!text-white border-black dark:!border-white !border-2 !font-bold px-6 py-2 rounded-full w-full"
             on:click={() => goto("/register")}
             >{$t("nav.startInSeconds")}
           </button>
           <button
-            class="bg-black text-white border rounded-full px-6 py-2 font-bold block w-full"
+            class="bg-black dark:!bg-white dark:!text-black !text-white border-2 border-black rounded-full px-6 py-2 font-bold w-full"
             on:click={() => goto("/login")}
           >
             {$t("nav.signIn")}
           </button>
         {:else}
           <button
-            class="border rounded-full px-6 py-2 font-bold block"
+            class="dark:!bg-black dark:!text-white border-black dark:!border-white !border-2 !font-bold px-6 py-2 rounded-full"
             on:click={() => goto(`/${user.username}`)}
             >{$t("nav.account")}
           </button>
           <button
-            class="bg-black text-white border rounded-full px-6 py-2 font-bold block"
+            class="bg-black dark:!bg-white dark:!text-black !text-white border-2 border-black rounded-full px-6 py-2 font-bold w-full"
             on:click={() => goto("/logout")}
           >
             {$t("nav.signOut")}
@@ -124,6 +125,7 @@
 </header>
 
 <style>
+  @import '../../static/style.css';
 	.z {
 		z-index: 100;
 	}
diff --git a/src/components/buttons/ThemeToggle.svelte b/src/components/buttons/ThemeToggle.svelte
index d62744c0..7b9a06e4 100644
--- a/src/components/buttons/ThemeToggle.svelte
+++ b/src/components/buttons/ThemeToggle.svelte
@@ -1,6 +1,6 @@
 <!-- <button {...$$restProps}>toggle</button> -->
 <button
-    class="text-gray-300 dark:!text-gray-600 hover:bg-gray-100 dark:!hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 border-2 border-gray-600 bg-black dark:!bg-white dark:!border-gray-300 dark:!focus:ring-gray-700 rounded-full text-sm p-2.5 transition-all"
+    class="text-white dark:!text-black hover:bg-gray-100 dark:!hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 border-2 border-gray-600 bg-black dark:!bg-white dark:!border-gray-300 dark:!focus:ring-gray-700 rounded-full text-sm p-2.5 transition-all"
     {...$$restProps}
 >
     <svg