From 186eeb759189c946de593a091a14ff96f19a4418 Mon Sep 17 00:00:00 2001
From: Lucian Petri <petri.lucian@outlook.com>
Date: Thu, 29 Dec 2022 19:27:00 +0200
Subject: [PATCH] Footer darkMode refactor

---
 website/package-lock.json         | 252 ++++++++++++++++++++++++++++++
 website/src/components/Footer.tsx | 141 +++++++++--------
 2 files changed, 330 insertions(+), 63 deletions(-)

diff --git a/website/package-lock.json b/website/package-lock.json
index 0fdaf529..bc1a4e7c 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -3767,6 +3767,51 @@
       "version": "13.1.0",
       "license": "MIT"
     },
+    "node_modules/@next/swc-android-arm-eabi": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.0.6.tgz",
+      "integrity": "sha512-FGFSj3v2Bluw8fD/X+1eXIEB0PhoJE0zfutsAauRhmNpjjZshLDgoXMWm1jTRL/04K/o9gwwO2+A8+sPVCH1uw==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-android-arm64": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-13.0.6.tgz",
+      "integrity": "sha512-7MgbtU7kimxuovVsd7jSJWMkIHBDBUsNLmmlkrBRHTvgzx5nDBXogP0hzZm7EImdOPwVMPpUHRQMBP9mbsiJYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.0.6.tgz",
+      "integrity": "sha512-AUVEpVTxbP/fxdFsjVI9d5a0CFn6NVV7A/RXOb0Y+pXKIIZ1V5rFjPwpYfIfyOo2lrqgehMNQcyMRoTrhq04xg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@next/swc-darwin-x64": {
       "version": "13.0.6",
       "cpu": [
@@ -3781,6 +3826,141 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@next/swc-freebsd-x64": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.0.6.tgz",
+      "integrity": "sha512-6Lbxd9gAdXneTkwHyYW/qtX1Tdw7ND9UbiGsGz/SP43ZInNWnW6q0au4hEVPZ9bOWWRKzcVoeTBdoMpQk9Hx9w==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm-gnueabihf": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.0.6.tgz",
+      "integrity": "sha512-wNdi5A519e1P+ozEuYOhWPzzE6m1y7mkO6NFwn6watUwO0X9nZs7fT9THmnekvmFQpaZ6U+xf2MQ9poQoCh6jQ==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.0.6.tgz",
+      "integrity": "sha512-e8KTRnleQY1KLk5PwGV5hrmvKksCc74QRpHl5ffWnEEAtL2FE0ave5aIkXqErsPdXkiKuA/owp3LjQrP+/AH7Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.0.6.tgz",
+      "integrity": "sha512-/7RF03C3mhjYpHN+pqOolgME3guiHU5T3TsejuyteqyEyzdEyLHod+jcYH6ft7UZ71a6TdOewvmbLOtzHW2O8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.0.6.tgz",
+      "integrity": "sha512-kxyEXnYHpOEkFnmrlwB1QlzJtjC6sAJytKcceIyFUHbCaD3W/Qb5tnclcnHKTaFccizZRePXvV25Ok/eUSpKTw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.0.6.tgz",
+      "integrity": "sha512-N0c6gubS3WW1oYYgo02xzZnNatfVQP/CiJq2ax+DJ55ePV62IACbRCU99TZNXXg+Kos6vNW4k+/qgvkvpGDeyA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.0.6.tgz",
+      "integrity": "sha512-QjeMB2EBqBFPb/ac0CYr7GytbhUkrG4EwFWbcE0vsRp4H8grt25kYpFQckL4Jak3SUrp7vKfDwZ/SwO7QdO8vw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.0.6.tgz",
+      "integrity": "sha512-EQzXtdqRTcmhT/tCq81rIwE36Y3fNHPInaCuJzM/kftdXfa0F+64y7FAoMO13npX8EG1+SamXgp/emSusKrCXg==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.0.6.tgz",
+      "integrity": "sha512-pSkqZ//UP/f2sS9T7IvHLfEWDPTX0vRyXJnAUNisKvO3eF3e1xdhDX7dix/X3Z3lnN4UjSwOzclAI87JFbOwmQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "license": "MIT",
@@ -24716,10 +24896,82 @@
     "@next/font": {
       "version": "13.1.0"
     },
+    "@next/swc-android-arm-eabi": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.0.6.tgz",
+      "integrity": "sha512-FGFSj3v2Bluw8fD/X+1eXIEB0PhoJE0zfutsAauRhmNpjjZshLDgoXMWm1jTRL/04K/o9gwwO2+A8+sPVCH1uw==",
+      "optional": true
+    },
+    "@next/swc-android-arm64": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-13.0.6.tgz",
+      "integrity": "sha512-7MgbtU7kimxuovVsd7jSJWMkIHBDBUsNLmmlkrBRHTvgzx5nDBXogP0hzZm7EImdOPwVMPpUHRQMBP9mbsiJYQ==",
+      "optional": true
+    },
+    "@next/swc-darwin-arm64": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.0.6.tgz",
+      "integrity": "sha512-AUVEpVTxbP/fxdFsjVI9d5a0CFn6NVV7A/RXOb0Y+pXKIIZ1V5rFjPwpYfIfyOo2lrqgehMNQcyMRoTrhq04xg==",
+      "optional": true
+    },
     "@next/swc-darwin-x64": {
       "version": "13.0.6",
       "optional": true
     },
+    "@next/swc-freebsd-x64": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.0.6.tgz",
+      "integrity": "sha512-6Lbxd9gAdXneTkwHyYW/qtX1Tdw7ND9UbiGsGz/SP43ZInNWnW6q0au4hEVPZ9bOWWRKzcVoeTBdoMpQk9Hx9w==",
+      "optional": true
+    },
+    "@next/swc-linux-arm-gnueabihf": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.0.6.tgz",
+      "integrity": "sha512-wNdi5A519e1P+ozEuYOhWPzzE6m1y7mkO6NFwn6watUwO0X9nZs7fT9THmnekvmFQpaZ6U+xf2MQ9poQoCh6jQ==",
+      "optional": true
+    },
+    "@next/swc-linux-arm64-gnu": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.0.6.tgz",
+      "integrity": "sha512-e8KTRnleQY1KLk5PwGV5hrmvKksCc74QRpHl5ffWnEEAtL2FE0ave5aIkXqErsPdXkiKuA/owp3LjQrP+/AH7Q==",
+      "optional": true
+    },
+    "@next/swc-linux-arm64-musl": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.0.6.tgz",
+      "integrity": "sha512-/7RF03C3mhjYpHN+pqOolgME3guiHU5T3TsejuyteqyEyzdEyLHod+jcYH6ft7UZ71a6TdOewvmbLOtzHW2O8A==",
+      "optional": true
+    },
+    "@next/swc-linux-x64-gnu": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.0.6.tgz",
+      "integrity": "sha512-kxyEXnYHpOEkFnmrlwB1QlzJtjC6sAJytKcceIyFUHbCaD3W/Qb5tnclcnHKTaFccizZRePXvV25Ok/eUSpKTw==",
+      "optional": true
+    },
+    "@next/swc-linux-x64-musl": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.0.6.tgz",
+      "integrity": "sha512-N0c6gubS3WW1oYYgo02xzZnNatfVQP/CiJq2ax+DJ55ePV62IACbRCU99TZNXXg+Kos6vNW4k+/qgvkvpGDeyA==",
+      "optional": true
+    },
+    "@next/swc-win32-arm64-msvc": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.0.6.tgz",
+      "integrity": "sha512-QjeMB2EBqBFPb/ac0CYr7GytbhUkrG4EwFWbcE0vsRp4H8grt25kYpFQckL4Jak3SUrp7vKfDwZ/SwO7QdO8vw==",
+      "optional": true
+    },
+    "@next/swc-win32-ia32-msvc": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.0.6.tgz",
+      "integrity": "sha512-EQzXtdqRTcmhT/tCq81rIwE36Y3fNHPInaCuJzM/kftdXfa0F+64y7FAoMO13npX8EG1+SamXgp/emSusKrCXg==",
+      "optional": true
+    },
+    "@next/swc-win32-x64-msvc": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.0.6.tgz",
+      "integrity": "sha512-pSkqZ//UP/f2sS9T7IvHLfEWDPTX0vRyXJnAUNisKvO3eF3e1xdhDX7dix/X3Z3lnN4UjSwOzclAI87JFbOwmQ==",
+      "optional": true
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "requires": {
diff --git a/website/src/components/Footer.tsx b/website/src/components/Footer.tsx
index 90fca02f..873cadad 100644
--- a/website/src/components/Footer.tsx
+++ b/website/src/components/Footer.tsx
@@ -1,75 +1,90 @@
 import Image from "next/image";
 import Link from "next/link";
 
-import { FaGithub, FaDiscord } from "react-icons/fa";
 import { Container } from "./Container";
+import { Box, Text, useColorModeValue } from "@chakra-ui/react";
 
 export function Footer() {
-  return (
-    <footer className="border-t border-gray-200 bg-white">
-      <main>
-        <Container className="">
-          <div className="flex flex-wrap justify-between gap-y-12 py-10 lg:items-center lg:py-16">
-            <div className="flex items-center text-black pr-8">
-              <Link href="/" aria-label="Home" className="flex items-center">
-                <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="52" height="52" alt="logo" />
-              </Link>
+  const backgroundColor = useColorModeValue("#FFFFFF", "#000000");
+  const foregroundColor = useColorModeValue("#000000", "#FFFFFF");
 
-              <div className="ml-2">
-                <p className="text-base font-bold">Open Assistant</p>
-                <p className="text-sm">Conversational AI for everyone.</p>
+  return (
+    <footer>
+      <Box backgroundColor={backgroundColor} className="border-t border-gray-200">
+        <main>
+          <Container className="">
+            <div className="flex flex-wrap justify-between gap-y-12 py-10 lg:items-center lg:py-16">
+              <div className="flex items-center text-black pr-8">
+                <Link href="/" aria-label="Home" className="flex items-center">
+                  <Image
+                    src="/images/logos/logo.svg"
+                    className="mx-auto object-fill"
+                    width="52"
+                    height="52"
+                    alt="logo"
+                  />
+                </Link>
+
+                <div className="ml-2">
+                  <Text color={foregroundColor} className="text-base font-bold">
+                    Open Assistant
+                  </Text>
+                  <Text color={foregroundColor} className="text-sm">
+                    Conversational AI for everyone.
+                  </Text>
+                </div>
               </div>
+              <nav className="flex justify-center gap-20">
+                <div className="flex flex-col text-sm leading-7">
+                  <b>Information</b>
+                  <div className="flex flex-col leading-5">
+                    <Link href="#" aria-label="Our Team" className="hover:underline underline-offset-2">
+                      Our Team
+                    </Link>
+                    <Link href="#join-us" aria-label="Join Us" className="hover:underline underline-offset-2">
+                      Join Us
+                    </Link>
+                  </div>
+                </div>
+                <div className="flex flex-col text-sm leading-7">
+                  <b>Legal</b>
+                  <div className="flex flex-col leading-5">
+                    <Link href="#" aria-label="Privacy Policy" className="hover:underline underline-offset-2">
+                      Privacy Policy
+                    </Link>
+                    <Link href="#" aria-label="Terms of Service" className="hover:underline underline-offset-2">
+                      Terms of Service
+                    </Link>
+                  </div>
+                </div>
+                <div className="flex flex-col text-sm leading-7">
+                  <b>Connect</b>
+                  <div className="flex flex-col leading-5">
+                    <Link
+                      href="https://github.com/LAION-AI/Open-Assistant"
+                      rel="noopener noreferrer nofollow"
+                      target="_blank"
+                      aria-label="Privacy Policy"
+                      className="hover:underline underline-offset-2"
+                    >
+                      Github
+                    </Link>
+                    <Link
+                      href="https://discord.gg/pXtnYk9c"
+                      rel="noopener noreferrer nofollow"
+                      target="_blank"
+                      aria-label="Terms of Service"
+                      className="hover:underline underline-offset-2"
+                    >
+                      Discord
+                    </Link>
+                  </div>
+                </div>
+              </nav>
             </div>
-            <nav className="flex justify-center gap-20">
-              <div className="flex flex-col text-sm leading-7">
-                <b>Information</b>
-                <div className="flex flex-col leading-5">
-                  <Link href="#" aria-label="Our Team" className="hover:underline underline-offset-2">
-                    Our Team
-                  </Link>
-                  <Link href="#join-us" aria-label="Join Us" className="hover:underline underline-offset-2">
-                    Join Us
-                  </Link>
-                </div>
-              </div>
-              <div className="flex flex-col text-sm leading-7">
-                <b>Legal</b>
-                <div className="flex flex-col leading-5">
-                  <Link href="#" aria-label="Privacy Policy" className="hover:underline underline-offset-2">
-                    Privacy Policy
-                  </Link>
-                  <Link href="#" aria-label="Terms of Service" className="hover:underline underline-offset-2">
-                    Terms of Service
-                  </Link>
-                </div>
-              </div>
-              <div className="flex flex-col text-sm leading-7">
-                <b>Connect</b>
-                <div className="flex flex-col leading-5">
-                  <Link
-                    href="https://github.com/LAION-AI/Open-Assistant"
-                    rel="noopener noreferrer nofollow"
-                    target="_blank"
-                    aria-label="Privacy Policy"
-                    className="hover:underline underline-offset-2"
-                  >
-                    Github
-                  </Link>
-                  <Link
-                    href="https://discord.gg/pXtnYk9c"
-                    rel="noopener noreferrer nofollow"
-                    target="_blank"
-                    aria-label="Terms of Service"
-                    className="hover:underline underline-offset-2"
-                  >
-                    Discord
-                  </Link>
-                </div>
-              </div>
-            </nav>
-          </div>
-        </Container>
-      </main>
+          </Container>
+        </main>
+      </Box>
     </footer>
   );
 }