From 3ba2d8ba062dedbf1bb2df6e23baa3851d8eaec7 Mon Sep 17 00:00:00 2001
From: incognitotgt <mashoor539@icloud.com>
Date: Fri, 29 Dec 2023 18:11:37 -0500
Subject: [PATCH] Made code prettier, also tried css for search suggestions.
 Themes are coming tommorrow <@578375908247863296>

---
 README.md                       |  13 ++--
 src/LoadSuspense.tsx            |   2 +-
 src/components/Header.tsx       | 117 +++++++++++++++++++++++---------
 src/components/HeaderButton.tsx |   8 +--
 src/pages/Home.tsx              |  13 ++--
 src/pages/Radon.tsx             |   9 ++-
 src/pages/Settings/Misc.tsx     |   2 +-
 src/routes.tsx                  |   1 -
 8 files changed, 110 insertions(+), 55 deletions(-)

diff --git a/README.md b/README.md
index 1d82d3c..d60a3dc 100644
--- a/README.md
+++ b/README.md
@@ -2,12 +2,10 @@
 
 NebulaWeb is an official flagship of Nebula Services and Nebula Developer Labs. NebulaWeb is a stunning, sleek, and functional web-proxy with support for thousands of popular sites. With NebulaWeb, the sky is the limit.
 
-
-
 ![license](https://img.shields.io/badge/License-GNU%20AGPL%20v3-blue)
 
-
 ## Features
+
 - Stunning and highly functional UI
 - 3 different backend proxies
 - Hides your IP from sites
@@ -18,20 +16,21 @@ NebulaWeb is an official flagship of Nebula Services and Nebula Developer Labs.
 # Deployment
 
 Table of contents
+
 - Deployment
 
-
 ---
-## Deployment  
+
+## Deployment
+
 Run these commands on your server:  
 `git clone https://https://github.com/NebulaServices/Nebula.git`  
 `pnpm i`  
-`npm run bstart`  
+`npm run bstart`
 
 You may also need to run `npm i -g pnpm tsx`  
 Thanks for using Nebula!
 
-
 ## Tech Stack
 
 - TypeScript, Tailwind
diff --git a/src/LoadSuspense.tsx b/src/LoadSuspense.tsx
index f5eccbc..ede4679 100644
--- a/src/LoadSuspense.tsx
+++ b/src/LoadSuspense.tsx
@@ -1,4 +1,4 @@
-import './Suspense.css'
+import "./Suspense.css";
 
 export function LoadSuspense() {
   return (
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 6630aa3..a3feac5 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,7 +1,7 @@
 import { HeaderButton } from "./HeaderButton";
 import { useTranslation } from "react-i18next";
 import { Link } from "preact-router";
-import { motion } from "framer-motion"
+import { motion } from "framer-motion";
 
 // Header icons
 import { HiOutlineCube } from "react-icons/hi";
@@ -14,50 +14,103 @@ export function Header() {
   const [isActive, setIsActive] = useState(false);
 
   return (
-    <div id="navbar" className="flex h-16 flex-row items-center justify-between bg-navbar-color px-4">
+    <div
+      id="navbar"
+      className="flex h-16 flex-row items-center justify-between bg-navbar-color px-4"
+    >
       <Link href="/" class="w-1/8">
         <div className="flex flex-row items-center">
-          <img src="/logo.png" alt="Nebula Logo" className="h-16 w-16 transition-all duration-1000 hover:rotate-[360deg]"></img>
+          <img
+            src="/logo.png"
+            alt="Nebula Logo"
+            className="h-16 w-16 transition-all duration-1000 hover:rotate-[360deg]"
+          ></img>
           <h1 className="font-roboto text-2xl font-bold text-navbar-text-color md:text-4xl">
             {t("header.title")}
           </h1>
         </div>
       </Link>
-      <motion.button type="button" className="z-20 md:hidden text-text-color text-bold text-3xl mr-4" aria-expanded={isActive} aria-controls="navbar-default" onClick={() => setIsActive(!isActive)} initial={{ rotate: 0 }} animate={{ rotate: isActive ? 90 : 0 }} transition={{ duration: 0.5 }} >
-            <RxHamburgerMenu />
+      <motion.button
+        type="button"
+        className="text-bold z-20 mr-4 text-3xl text-text-color md:hidden"
+        aria-expanded={isActive}
+        aria-controls="navbar-default"
+        onClick={() => setIsActive(!isActive)}
+        initial={{ rotate: 0 }}
+        animate={{ rotate: isActive ? 90 : 0 }}
+        transition={{ duration: 0.5 }}
+      >
+        <RxHamburgerMenu />
       </motion.button>
-      {window.innerWidth >= 768 &&
+      {window.innerWidth >= 768 && (
         //standard menu
-        <div className={`fixed inset-0 z-10 flex md:relative md:right-0 ${ window.innerWidth <= 768 && !isActive && "hidden"}`}>
-            <div className="h-[calc(100%-4rem)] w-full mt-16 lg:h-full lg:mt-auto md:h-full md:mt-auto">
-            <div className="flex h-full w-full whitespace-nowrap" onClick={() => setIsActive(false)} >
-                <div className="flex w-full flex-col justify-evenly md:flex-row">
-                <HeaderButton href="/games" Icon={HiOutlineCube} translationKey="header.games" />
-                <HeaderButton href="/settings" Icon={RxMixerVertical} translationKey="header.settings" />
-                <HeaderButton href="/discord" Icon={RiLinksFill} translationKey="header.discord" />
-                </div>
-            </div>
+        <div
+          className={`fixed inset-0 z-10 flex md:relative md:right-0 ${
+            window.innerWidth <= 768 && !isActive && "hidden"
+          }`}
+        >
+          <div className="mt-16 h-[calc(100%-4rem)] w-full md:mt-auto md:h-full lg:mt-auto lg:h-full">
+            <div
+              className="flex h-full w-full whitespace-nowrap"
+              onClick={() => setIsActive(false)}
+            >
+              <div className="flex w-full flex-col justify-evenly md:flex-row">
+                <HeaderButton
+                  href="/games"
+                  Icon={HiOutlineCube}
+                  translationKey="header.games"
+                />
+                <HeaderButton
+                  href="/settings"
+                  Icon={RxMixerVertical}
+                  translationKey="header.settings"
+                />
+                <HeaderButton
+                  href="/discord"
+                  Icon={RiLinksFill}
+                  translationKey="header.discord"
+                />
+              </div>
             </div>
+          </div>
         </div>
-      }
-    {window.innerWidth <= 768 &&
-        //animated mobile menu 
-            <motion.div className={`fixed inset-0 z-10 flex md:relative md:right-0 ${ window.innerWidth <= 768 && !isActive && "hidden"}`}
-                initial={{ x: 0 }}
-                animate={{ x: isActive ? 0 : 1000 }}
-                transition={{ duration: 0.5 }}
-                >
-                <div className="h-[calc(100%-4rem)] w-full mt-16 lg:h-full lg:mt-auto md:h-full md:mt-auto">
-                <div className="flex h-full w-full whitespace-nowrap" onClick={() => setIsActive(false)} >
-                    <div className="flex w-full flex-col justify-evenly md:flex-row">
-                        <HeaderButton href="/games" Icon={HiOutlineCube} translationKey="header.games" />
-                        <HeaderButton href="/settings" Icon={RxMixerVertical} translationKey="header.settings" />
-                        <HeaderButton href="/discord" Icon={RiLinksFill} translationKey="header.discord" />
-                    </div>
-                </div>
+      )}
+      {window.innerWidth <= 768 && (
+        //animated mobile menu
+        <motion.div
+          className={`fixed inset-0 z-10 flex md:relative md:right-0 ${
+            window.innerWidth <= 768 && !isActive && "hidden"
+          }`}
+          initial={{ x: 0 }}
+          animate={{ x: isActive ? 0 : 1000 }}
+          transition={{ duration: 0.5 }}
+        >
+          <div className="mt-16 h-[calc(100%-4rem)] w-full md:mt-auto md:h-full lg:mt-auto lg:h-full">
+            <div
+              className="flex h-full w-full whitespace-nowrap"
+              onClick={() => setIsActive(false)}
+            >
+              <div className="flex w-full flex-col justify-evenly md:flex-row">
+                <HeaderButton
+                  href="/games"
+                  Icon={HiOutlineCube}
+                  translationKey="header.games"
+                />
+                <HeaderButton
+                  href="/settings"
+                  Icon={RxMixerVertical}
+                  translationKey="header.settings"
+                />
+                <HeaderButton
+                  href="/discord"
+                  Icon={RiLinksFill}
+                  translationKey="header.discord"
+                />
+              </div>
             </div>
+          </div>
         </motion.div>
-    }
+      )}
     </div>
   );
 }
diff --git a/src/components/HeaderButton.tsx b/src/components/HeaderButton.tsx
index 0ea12d5..8abd37d 100644
--- a/src/components/HeaderButton.tsx
+++ b/src/components/HeaderButton.tsx
@@ -12,12 +12,10 @@ export function HeaderButton(props: HeaderButtonProps) {
   const { t } = useTranslation();
 
   return (
-    <Link
-      href={href}
-      className="flex h-full w-full bg-navbar-color sm:h-auto">
-      <div className="group flex flex-row items-center justify-center p-4 w-full border-t-2 border-solid border-navbar-text-color md:border-none">
+    <Link href={href} className="flex h-full w-full bg-navbar-color sm:h-auto">
+      <div className="group flex w-full flex-row items-center justify-center border-t-2 border-solid border-navbar-text-color p-4 md:border-none">
         <Icon className="h-10 w-10 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6" />
-        <span className="font-roboto pl-1 text-text-color text-4xl text-center font-bold transition duration-500 group-hover:text-text-hover-color md:text-lg">
+        <span className="font-roboto pl-1 text-center text-4xl font-bold text-text-color transition duration-500 group-hover:text-text-hover-color md:text-lg">
           {t(translationKey)}
         </span>
       </div>
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 9456799..1d4f607 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -91,13 +91,16 @@ export function Home() {
                       )
                     }
                   >
-                    <div key={index}>{suggestion}</div>
+                    <div
+                      class={`font-roboto w-110 -rounded-2xl h-14 flex-none shrink-0 justify-center border border-input-border-color p-2 text-2xl hover:bg-dropdown-option-hover-color ${
+                        index === suggestion.length - 2 ? "rounded-b-2xl" : ""
+                      }`}
+                      key={index}
+                    >
+                      {suggestion}
+                    </div>
                   </a>
                 ))}
-              {/*} {isFocused &&
-                Array.from({ length: 5 }, (_, index) => (
-                  <div key={index}>Example suggestion</div>
-                ))} */}
             </div>
           </div>
         </form>
diff --git a/src/pages/Radon.tsx b/src/pages/Radon.tsx
index 333ef63..50cd956 100644
--- a/src/pages/Radon.tsx
+++ b/src/pages/Radon.tsx
@@ -3,7 +3,10 @@ import { HeaderRoute } from "../components/HeaderRoute";
 export function Radon() {
   return (
     <HeaderRoute>
-      <iframe src="/~/uv/https%3A%2F%2Fradon.games%2F" class="w-full h-full"></iframe>
+      <iframe
+        src="/~/uv/https%3A%2F%2Fradon.games%2F"
+        class="h-full w-full"
+      ></iframe>
     </HeaderRoute>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/src/pages/Settings/Misc.tsx b/src/pages/Settings/Misc.tsx
index a8b461f..2e8e3cc 100644
--- a/src/pages/Settings/Misc.tsx
+++ b/src/pages/Settings/Misc.tsx
@@ -23,7 +23,7 @@ const Misc = ({ id, active }) => {
     >
       <motion.div
         variants={settingsPageVariant}
-        className="content-card flex flex-row flex-wrap justify-center w-full gap-4"
+        className="content-card flex w-full flex-row flex-wrap justify-center gap-4"
       >
         <div class="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-7 text-center">
           <div class="text-3xl">{t("settings.languages.title")}</div>
diff --git a/src/routes.tsx b/src/routes.tsx
index 869231b..9a0feaf 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -26,4 +26,3 @@ export default function Routes() {
     </LocationProvider>
   );
 }
-