titaniumnet-mirror/Nebula
1
0
Fork 0
mirror of https://github.com/NebulaServices/Nebula.git synced 2025-05-14 12:20:01 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Prettier and replace class with ClassName

Browse source
This commit is contained in:
incognitotgt 2024-01-01 19:00:00 -05:00
parent ddc2f47f97
commit d0ef235c24
18 changed files with 122 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

40
public/themes/catppuccinFrappe.css
View file

@ -1,29 +1,29 @@
@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap");
:root { :root {
--background-primary: #303446 !important; --background-primary: #303446 !important;
--background-lighter: #232634 !important; --background-lighter: #232634 !important;
--navbar-color: #232634 !important; --navbar-color: #232634 !important;
--navbar-height: 60px !important; --navbar-height: 60px !important;
--navbar-text-color: #ca9ee6 !important; --navbar-text-color: #ca9ee6 !important;
--navbar-link-color: #8caaee !important; --navbar-link-color: #8caaee !important;
--navbar-link-hover-color: #ca9ee6 !important; --navbar-link-hover-color: #ca9ee6 !important;
--navbar-font: "Roboto" !important; --navbar-font: "Roboto" !important;
--input-text-color: #c6d0f5 !important; --input-text-color: #c6d0f5 !important;
--input-placeholder-color: #b5bfe2 !important; --input-placeholder-color: #b5bfe2 !important;
--input-background-color: #292c3c !important; --input-background-color: #292c3c !important;
--input-border-color: #ca9ee6 !important; --input-border-color: #ca9ee6 !important;
--input-border-size: 1.3px !important; --input-border-size: 1.3px !important;
--navbar-logo-filter: none !important; --navbar-logo-filter: none !important;
--dropdown-option-hover-color: #232634 !important; --dropdown-option-hover-color: #232634 !important;
--tab-color: #414559 !important; --tab-color: #414559 !important;
} }
.font-inter { .font-inter {
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
font-weight: 300; font-weight: 300;
} }
.font-roboto { .font-roboto {
font-family: "Roboto"; font-family: "Roboto";
} }

40
public/themes/catppuccinMacchiato.css
View file

@ -1,29 +1,29 @@
@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap");
:root { :root {
--background-primary: #24273a !important; --background-primary: #24273a !important;
--background-lighter: #181926 !important; --background-lighter: #181926 !important;
--navbar-color: #181926 !important; --navbar-color: #181926 !important;
--navbar-height: 60px !important; --navbar-height: 60px !important;
--navbar-text-color: #c6a0f6 !important; --navbar-text-color: #c6a0f6 !important;
--navbar-link-color: #8aadf4 !important; --navbar-link-color: #8aadf4 !important;
--navbar-link-hover-color: #c6a0f6 !important; --navbar-link-hover-color: #c6a0f6 !important;
--navbar-font: "Roboto" !important; --navbar-font: "Roboto" !important;
--input-text-color: #cad3f5 !important; --input-text-color: #cad3f5 !important;
--input-placeholder-color: #b8c0e0 !important; --input-placeholder-color: #b8c0e0 !important;
--input-background-color: #1e2030 !important; --input-background-color: #1e2030 !important;
--input-border-color: #c6a0f6 !important; --input-border-color: #c6a0f6 !important;
--input-border-size: 1.3px !important; --input-border-size: 1.3px !important;
--navbar-logo-filter: none !important; --navbar-logo-filter: none !important;
--dropdown-option-hover-color: #181926 !important; --dropdown-option-hover-color: #181926 !important;
--tab-color: #363a4f; --tab-color: #363a4f;
} }
.font-inter { .font-inter {
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
font-weight: 300; font-weight: 300;
} }
.font-roboto { .font-roboto {
font-family: "Roboto"; font-family: "Roboto";
} }

4
src/LoadSuspense.tsx
View file

@ -2,7 +2,7 @@ import "./Suspense.css";
export function LoadSuspense() { export function LoadSuspense() {
return ( return (
<div class="suspenseContainer"> <div className="suspenseContainer">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
version="1.2" version="1.2"
@ -10,7 +10,7 @@ export function LoadSuspense() {
width="400" width="400"
height="400" height="400"
fill="#5e17eb" fill="#5e17eb"
class="animate-pulse-brighter" className="animate-pulse-brighter"
> >
<g id="svgg"> <g id="svgg">
<path <path

2
src/components/Header.tsx
View file

@ -18,7 +18,7 @@ export function Header() {
id="navbar" id="navbar"
className="flex h-16 flex-row items-center justify-between bg-navbar-color px-4" className="flex h-16 flex-row items-center justify-between bg-navbar-color px-4"
> >
<Link href="/" class="w-1/8"> <Link href="/" className="w-1/8">
<div className="relative flex flex-row items-center"> <div className="relative flex flex-row items-center">
<img <img
src="/logo.png" src="/logo.png"

6
src/components/HeaderRoute.tsx
View file

@ -2,10 +2,10 @@ import { Header } from "./Header";
export function HeaderRoute(props: { children: any }) { export function HeaderRoute(props: { children: any }) {
return ( return (
<div class="flex h-screen flex-col"> <div className="flex h-screen flex-col">
<Header /> <Header />
<div class="flex-1 bg-primary"> <div className="flex-1 bg-primary">
<main class="h-full">{props.children}</main> <main className="h-full">{props.children}</main>
</div> </div>
</div> </div>
); );

4
src/components/iframe/IframeHeader.tsx
View file

@ -32,7 +32,7 @@ export function IframeHeader(props: { url: string }) {
id="iframeNav" id="iframeNav"
className="flex h-16 flex-row items-center justify-between gap-3 bg-navbar-color px-4" className="flex h-16 flex-row items-center justify-between gap-3 bg-navbar-color px-4"
> >
<Link href="/" class="w-1/8"> <Link href="/" className="w-1/8">
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
<img <img
src="/logo.png" src="/logo.png"
@ -74,7 +74,7 @@ export function IframeHeader(props: { url: string }) {
}} }}
/> />
</div> </div>
<div id="navItems" class="w-1/8"> <div id="navItems" className="w-1/8">
<div className="mr-4 flex flex-row items-center justify-end gap-3"> <div className="mr-4 flex flex-row items-center justify-end gap-3">
<IoCodeSlashSharp <IoCodeSlashSharp
className="duration-0500 h-6 w-6 cursor-pointer text-navbar-text-color transition-all hover:scale-110 hover:brightness-125" className="duration-0500 h-6 w-6 cursor-pointer text-navbar-text-color transition-all hover:scale-110 hover:brightness-125"

14
src/pages/Home.tsx
View file

@ -43,18 +43,18 @@ export function Home() {
originalTitle={t("titles.home")} originalTitle={t("titles.home")}
originalFavicon="/logo.png" originalFavicon="/logo.png"
/> />
<div class="flex h-full flex-col items-center justify-center"> <div className="flex h-full flex-col items-center justify-center">
<div class="font-inter absolute bottom-0 left-0 p-4 text-sm italic text-input-text"> <div className="font-inter absolute bottom-0 left-0 p-4 text-sm italic text-input-text">
Nebula &copy; Nebula Services {new Date().getUTCFullYear()} Nebula &copy; Nebula Services {new Date().getUTCFullYear()}
</div> </div>
<a href="https://github.com/NebulaServices/Nebula"> <a href="https://github.com/NebulaServices/Nebula">
<div class="font-inter absolute bottom-0 right-0 p-4 text-sm text-input-text"> <div className="font-inter absolute bottom-0 right-0 p-4 text-sm text-input-text">
GitHub GitHub
</div> </div>
</a> </a>
<form <form
onSubmit={handleSubmit} onSubmit={handleSubmit}
class="flex h-full w-full flex-col items-center justify-center" className="flex h-full w-full flex-col items-center justify-center"
> >
<input <input
onFocus={() => { onFocus={() => {
@ -78,8 +78,8 @@ export function Home() {
placeholder={isFocused ? "" : t("home.placeholder")} placeholder={isFocused ? "" : t("home.placeholder")}
/> />
<div class="relative flex w-10/12 flex-col items-center md:w-3/12"> <div className="relative flex w-10/12 flex-col items-center md:w-3/12">
<div class="absolute w-full text-center"> <div className="absolute w-full text-center">
{showSuggestions && {showSuggestions &&
suggestions.map((suggestion, index) => ( suggestions.map((suggestion, index) => (
<a <a
@ -108,7 +108,7 @@ export function Home() {
Array.from({ length: 10 }, (_, index) => ( Array.from({ length: 10 }, (_, index) => (
<div <div
key={index} key={index}
class="font-roboto w-110 hover:bg-dropdown-option-hover-colo flex h-8 flex-none shrink-0 items-center justify-center border border-input-border-color p-2 text-2xl" className="font-roboto w-110 hover:bg-dropdown-option-hover-colo flex h-8 flex-none shrink-0 items-center justify-center border border-input-border-color p-2 text-2xl"
> >
Example suggestion Example suggestion
</div> </div>

2
src/pages/ProxyFrame.tsx
View file

@ -102,7 +102,7 @@ export function ProxyFrame(props: { url: string }) {
} }
return ( return (
<div class="h-screen w-screen bg-primary"> <div className="h-screen w-screen bg-primary">
<CloakedHead <CloakedHead
originalTitle={t("titles.home")} originalTitle={t("titles.home")}
originalFavicon="/logo.png" originalFavicon="/logo.png"

2
src/pages/Radon.tsx
View file

@ -10,7 +10,7 @@ export function Radon() {
window.__uv$config.prefix + window.__uv$config.prefix +
window.__uv$config.encodeUrl("https://radon.games") window.__uv$config.encodeUrl("https://radon.games")
} }
class="h-full w-full" className="h-full w-full"
></iframe> ></iframe>
</HeaderRoute> </HeaderRoute>
); );

4
src/pages/Settings/CloakPreset.tsx
View file

@ -17,11 +17,11 @@ const CloakPreset = (props: Props) => {
return ( return (
<div <div
onClick={cloak} onClick={cloak}
class="cursor-pointer rounded-full border border-input-border-color bg-lighter" className="cursor-pointer rounded-full border border-input-border-color bg-lighter"
> >
<img <img
src={props.faviconUrl === "none" ? "/logo.png" : props.faviconUrl} src={props.faviconUrl === "none" ? "/logo.png" : props.faviconUrl}
class="h-16 w-16 p-4" className="h-16 w-16 p-4"
/> />
</div> </div>
); );

11
src/pages/Settings/Customization.tsx
View file

@ -3,7 +3,6 @@ import { tabContentVariant, settingsPageVariant } from "./Variants";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import Dropdown from "./Dropdown"; import Dropdown from "./Dropdown";
function Customization({ id, active }) { function Customization({ id, active }) {
const { t } = useTranslation(); const { t } = useTranslation();
@ -28,9 +27,13 @@ function Customization({ id, active }) {
variants={settingsPageVariant} variants={settingsPageVariant}
className="content-card flex w-full flex-col items-center justify-center text-center" className="content-card flex w-full flex-col items-center justify-center text-center"
> >
<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 className="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="p-2 text-3xl font-bold text-input-text">{t("settings.theme.title")}</div> <div className="p-2 text-3xl font-bold text-input-text">
<div class="text-md p-4 font-bold text-input-text">{t("settings.theme.subtitle")}</div> {t("settings.theme.title")}
</div>
<div className="text-md p-4 font-bold text-input-text">
{t("settings.theme.subtitle")}
</div>
<Dropdown storageKey="theme" options={themes} refresh={true} /> <Dropdown storageKey="theme" options={themes} refresh={true} />
</div> </div>
</motion.div> </motion.div>

6
src/pages/Settings/Dropdown.tsx
View file

@ -35,11 +35,11 @@ const Dropdown = ({
onClick={() => setIsOpen(!isOpen)} onClick={() => setIsOpen(!isOpen)}
> >
<div className="flex h-full w-full select-none flex-row items-center"> <div className="flex h-full w-full select-none flex-row items-center">
<div class="h-full w-1/4"></div> <div className="h-full w-1/4"></div>
<div class="flex w-2/4 flex-col items-center"> <div className="flex w-2/4 flex-col items-center">
{options.find((o) => o.id === choice)?.label} {options.find((o) => o.id === choice)?.label}
</div> </div>
<div class="flex w-1/4 flex-col items-center"> <div className="flex w-1/4 flex-col items-center">
<FaAngleDown /> <FaAngleDown />
</div> </div>
</div> </div>

10
src/pages/Settings/Misc.tsx
View file

@ -25,9 +25,13 @@ const Misc = ({ id, active }) => {
variants={settingsPageVariant} variants={settingsPageVariant}
className="content-card flex w-full flex-row flex-wrap justify-center 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 className="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 font-bold text-input-text">{t("settings.languages.title")}</div> <div className="text-3xl font-bold text-input-text">
<div class="text-md font-bold text-input-text">{t("settings.languages.subtitle")}</div> {t("settings.languages.title")}
</div>
<div className="text-md font-bold text-input-text">
{t("settings.languages.subtitle")}
</div>
<Dropdown <Dropdown
storageKey="i18nextLng" storageKey="i18nextLng"
options={languages} options={languages}

30
src/pages/Settings/Proxy.tsx
View file

@ -38,23 +38,35 @@ const Proxy = ({ id, active }) => {
variants={settingsPageVariant} variants={settingsPageVariant}
className="content-card flex w-full flex-row flex-wrap justify-center 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 className="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="p-2 text-3xl font-bold text-input-text">{t("settings.proxy.title")}</div> <div className="p-2 text-3xl font-bold text-input-text">
<div class="text-md p-4 font-bold text-input-text">{t("settings.proxy.subtitle")}</div> {t("settings.proxy.title")}
</div>
<div className="text-md p-4 font-bold text-input-text">
{t("settings.proxy.subtitle")}
</div>
<Dropdown storageKey="proxy" options={engines} refresh={false} /> <Dropdown storageKey="proxy" options={engines} refresh={false} />
</div> </div>
<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 className="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="p-2 text-3xl font-bold text-input-text">{t("settings.proxymodes.title")}</div> <div className="p-2 text-3xl font-bold text-input-text">
<div class="text-md p-4 font-bold text-input-text">{t("settings.proxymodes.subtitle")}</div> {t("settings.proxymodes.title")}
</div>
<div className="text-md p-4 font-bold text-input-text">
{t("settings.proxymodes.subtitle")}
</div>
<Dropdown <Dropdown
storageKey="proxyMode" storageKey="proxyMode"
options={proxyModes} options={proxyModes}
refresh={false} refresh={false}
/> />
</div> </div>
<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 className="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="p-2 text-3xl font-bold text-input-text">{t("settings.search.title")}</div> <div className="p-2 text-3xl font-bold text-input-text">
<div class="text-md p-4 font-bold text-input-text">{t("settings.search.subtitle")}</div> {t("settings.search.title")}
</div>
<div className="text-md p-4 font-bold text-input-text">
{t("settings.search.subtitle")}
</div>
<Dropdown <Dropdown
storageKey="searchEngine" storageKey="searchEngine"
options={searchEngines} options={searchEngines}

2
src/pages/Settings/TabComponent.tsx
View file

@ -69,7 +69,7 @@ const TabComponent = ({ tabs, defaultIndex = 0 }) => {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div class="flex h-full w-full flex-col items-center"> <div className="flex h-full w-full flex-col items-center">
<div className="container h-full w-full"> <div className="container h-full w-full">
<div className="tabs-component"> <div className="tabs-component">
<ul className="tab-links" role="tablist"> <ul className="tab-links" role="tablist">

10
src/pages/Settings/TabSettings.tsx
View file

@ -20,13 +20,13 @@ const TabSettings = ({ id, active }) => {
variants={settingsPageVariant} variants={settingsPageVariant}
className="content-card flex w-full flex-col items-center justify-center text-center" className="content-card flex w-full flex-col items-center justify-center text-center"
> >
<div class="text-3xl font-bold text-input-text"> <div className="text-3xl font-bold text-input-text">
{t("settings.cloaking.title")} {t("settings.cloaking.title")}
</div> </div>
<div class="text-md pb-5 font-bold text-input-text"> <div className="text-md pb-5 font-bold text-input-text">
{t("settings.cloaking.subtitle")} {t("settings.cloaking.subtitle")}
</div> </div>
<div class="flex flex-row space-x-4"> <div className="flex flex-row space-x-4">
<CloakPreset faviconUrl="none" title="none" /> <CloakPreset faviconUrl="none" title="none" />
<CloakPreset <CloakPreset
faviconUrl="https://t1.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://google.com&size=32" faviconUrl="https://t1.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://google.com&size=32"
@ -49,9 +49,9 @@ const TabSettings = ({ id, active }) => {
title="Schoology" title="Schoology"
/> />
</div> </div>
<div class="relative p-4"> <div className="relative p-4">
<button <button
class="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl font-bold text-input-text placeholder:text-input-text focus:outline-none" className="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl font-bold text-input-text placeholder:text-input-text focus:outline-none"
onClick={() => { onClick={() => {
let newWindow = window.open("about:blank"); let newWindow = window.open("about:blank");
let iframe = document.createElement("iframe"); let iframe = document.createElement("iframe");

14
src/pages/_404.tsx
View file

@ -12,15 +12,15 @@ export function NotFound() {
originalTitle={t("titles.404")} originalTitle={t("titles.404")}
originalFavicon="/logo.png" originalFavicon="/logo.png"
/> />
<section class="h-full"> <section className="h-full">
<div class="flex h-full flex-col items-center justify-center"> <div className="flex h-full flex-col items-center justify-center">
<img src="/404.png" class="h-72"></img> <img src="/404.png" className="h-72"></img>
<div class="flex flex-col items-center p-6"> <div className="flex flex-col items-center p-6">
<p class="font-roboto text-4xl font-bold">{t("404.text")}</p> <p className="font-roboto text-4xl font-bold">{t("404.text")}</p>
<span class="font-roboto text-3xl">404</span> <span className="font-roboto text-3xl">404</span>
</div> </div>
<Link href="/"> <Link href="/">
<button class="font-roboto h-14 w-44 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none"> <button className="font-roboto h-14 w-44 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
{t("404.return")} {t("404.return")}
</button> </button>
</Link> </Link>

22
src/pages/discord.tsx
View file

@ -11,23 +11,25 @@ export function DiscordPage() {
originalTitle={t("titles.discord")} originalTitle={t("titles.discord")}
originalFavicon="/logo.png" originalFavicon="/logo.png"
/> />
<section class="h-full"> <section className="h-full">
<div class="flex h-full flex-col items-center justify-center"> <div className="flex h-full flex-col items-center justify-center">
<img src="/services.png" class="h-72 w-72"></img> <img src="/services.png" className="h-72 w-72"></img>
<div class="flex flex-col items-center p-6"> <div className="flex flex-col items-center p-6">
<p class="font-roboto text-4xl font-bold">{t("discord.title")}</p> <p className="font-roboto text-4xl font-bold">
<span class="font-roboto text-3xl">{t("discord.sub")}</span> {t("discord.title")}
</p>
<span className="font-roboto text-3xl">{t("discord.sub")}</span>
</div> </div>
<a href="https://discord.gg/unblocker" class="p-6"> <a href="https://discord.gg/unblocker" className="p-6">
<button class="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none"> <button className="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
{t("discord.button1")} {t("discord.button1")}
</button> </button>
</a> </a>
<a <a
href="/~/uv/https%3A%2F%2Fdiscord.com%2Finvite%2Funblocker" href="/~/uv/https%3A%2F%2Fdiscord.com%2Finvite%2Funblocker"
class="p-6" className="p-6"
> >
<button class="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none"> <button className="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
{t("discord.button2")} {t("discord.button2")}
</button> </button>
</a> </a>