Merge pull request #186 from IncognitoTGT/main

Made code prettier, also tried css for search suggestions. Themes are…

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,11 +16,13 @@ NebulaWeb is an official flagship of Nebula Services and Nebula Developer Labs.
 # Deployment
 
 Table of contents
+
 - Deployment
 
-
 ---
+
 ## Deployment
+
 Run these commands on your server:  
 `git clone https://https://github.com/NebulaServices/Nebula.git`  
 `pnpm i`  
@@ -31,7 +31,6 @@ Run these commands on your server:
 You may also need to run `npm i -g pnpm tsx`  
 Thanks for using Nebula!
 
-
 ## Tech Stack
 
 - TypeScript, Tailwind

src/LoadSuspense.tsx

@@ -1,4 +1,4 @@
-import './Suspense.css'
+import "./Suspense.css";
 
 export function LoadSuspense() {
   return (

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 }} >
+      <motion.button
-            <RxHamburgerMenu />
+        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
-            <div className="h-[calc(100%-4rem)] w-full mt-16 lg:h-full lg:mt-auto md:h-full md:mt-auto">
+          className={`fixed inset-0 z-10 flex md:relative md:right-0 ${
-            <div className="flex h-full w-full whitespace-nowrap" onClick={() => setIsActive(false)} >
+            window.innerWidth <= 768 && !isActive && "hidden"
-                <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" />
+          <div className="mt-16 h-[calc(100%-4rem)] w-full md:mt-auto md:h-full lg:mt-auto lg:h-full">
-                <HeaderButton href="/discord" Icon={RiLinksFill} translationKey="header.discord" />
+            <div
-                </div>
+              className="flex h-full w-full whitespace-nowrap"
-            </div>
+              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 &&
+      {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"}`}
+        <motion.div
-                initial={{ x: 0 }}
+          className={`fixed inset-0 z-10 flex md:relative md:right-0 ${
-                animate={{ x: isActive ? 0 : 1000 }}
+            window.innerWidth <= 768 && !isActive && "hidden"
-                transition={{ duration: 0.5 }}
+          }`}
-                >
+          initial={{ x: 0 }}
-                <div className="h-[calc(100%-4rem)] w-full mt-16 lg:h-full lg:mt-auto md:h-full md:mt-auto">
+          animate={{ x: isActive ? 0 : 1000 }}
-                <div className="flex h-full w-full whitespace-nowrap" onClick={() => setIsActive(false)} >
+          transition={{ duration: 0.5 }}
-                    <div className="flex w-full flex-col justify-evenly md:flex-row">
+        >
-                        <HeaderButton href="/games" Icon={HiOutlineCube} translationKey="header.games" />
+          <div className="mt-16 h-[calc(100%-4rem)] w-full md:mt-auto md:h-full lg:mt-auto lg:h-full">
-                        <HeaderButton href="/settings" Icon={RxMixerVertical} translationKey="header.settings" />
+            <div
-                        <HeaderButton href="/discord" Icon={RiLinksFill} translationKey="header.discord" />
+              className="flex h-full w-full whitespace-nowrap"
-                    </div>
+              onClick={() => setIsActive(false)}
-                </div>
+            >
+              <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>
   );
 }

src/components/HeaderButton.tsx

@@ -12,12 +12,10 @@ export function HeaderButton(props: HeaderButtonProps) {
   const { t } = useTranslation();
 
   return (
-    <Link
+    <Link href={href} className="flex h-full w-full bg-navbar-color sm:h-auto">
-      href={href}
+      <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">
-      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">
         <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>

src/pages/Home.tsx

@@ -70,8 +70,8 @@ export function Home() {
             type="text"
             value={inputValue}
             onChange={handleInputChange}
-            className={`font-roboto h-14 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none ${
+            className={`font-roboto h-14 rounded-t-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none ${
-              isFocused ? "w-10/12 md:w-3/12" : "w-80"
+              isFocused ? "w-10/12 md:w-3/12" : "w-80 rounded-2xl"
             } transition-all duration-300`}
             placeholder={isFocused ? "" : t("home.placeholder")}
           />
@@ -91,13 +91,16 @@ export function Home() {
                       )
                     }
                   >
-                    <div key={index}>{suggestion}</div>
+                    <div
+                      class={`font-roboto w-110 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>

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>
-  )
+  );
 }

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>

src/routes.tsx

@@ -26,4 +26,3 @@ export default function Routes() {
     </LocationProvider>
   );
 }
-