Merge pull request #186 from IncognitoTGT/main

Made code prettier, also tried css for search suggestions. Themes are…
2023-12-29 17:25:40 -06:00 · 2023-12-29 17:25:40 -06:00 · 00c482aac5
commit 00c482aac5
parent ab9d7f8096 aa86e2a4d1
8 changed files with 112 additions and 57 deletions
--- 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,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
--- a/src/LoadSuspense.tsx
+++ b/src/LoadSuspense.tsx
@ -1,4 +1,4 @@
-import './Suspense.css'
+import "./Suspense.css";

 export function LoadSuspense() {
  return (
--- 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 &&
+      )}
+      {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>
+        <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>
  );
 }
--- 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>
--- a/src/pages/Home.tsx
+++ b/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 ${
-              isFocused ? "w-10/12 md:w-3/12" : "w-80"
+            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 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>
--- 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>
-  )
+  );
 }
--- 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>
--- a/src/routes.tsx
+++ b/src/routes.tsx
@ -26,4 +26,3 @@ export default function Routes() {
    </LocationProvider>
  );
 }
-