Merge pull request #191 from IncognitoTGT/main

Themes and css improvements

README.md

@@ -57,6 +57,7 @@ For support, join our discord: discord.gg/unblocker
 - [Dynamic (one of the proxies we use)](https://github.com/NebulaServices/Dynamic)
 - [Rammerhead (one of the proxies we use)](https://github.com/binary-person/rammerhead)
 - [Bare Server Node](https://github.com/tomphttp/bare-server-node)
+- [Catppuccin (for the themes)](https://github.com/catppuccin/catppuccin)
 
 ## License
 

public/themes/catppuccinFrappe.css

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

public/themes/catppuccinLatte.css

@@ -0,0 +1,30 @@
+@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap");
+
+:root {
+    --background-primary: #eff1f5;
+    --background-lighter: #dce0e8;
+    --navbar-color: #dce0e8;
+    --navbar-height: 60px;
+    --navbar-text-color: #8839ef;
+    --navbar-link-color: #1e66f5;
+    --navbar-link-hover-color: #8839ef;
+    --navbar-font: "Roboto";
+    --input-text-color: #4c4f69;
+    --input-placeholder-color: #5c5f77;
+    --input-background-color: #e6e9ef;
+    --input-border-color: #8839ef;
+    --input-border-size: 1.3px;
+    --navbar-logo-filter: none;
+    --dropdown-option-hover-color: #dce0e8;
+    --tab-color: #ccd0da;
+}
+
+.font-inter {
+    font-family: "Inter", sans-serif;
+    font-weight: 300;
+}
+
+.font-roboto {
+    font-family: "Roboto";
+    color: #4c4f69
+}

public/themes/catppuccinMacchiato.css

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

public/themes/catppuccinMocha.css

@@ -16,6 +16,7 @@
   --input-border-size: 1.3px;
   --navbar-logo-filter: none;
   --dropdown-option-hover-color: #11111b;
+  --tab-color: #313244;
 }
 
 .font-inter {

public/themes/main.css

@@ -16,6 +16,7 @@
   --input-border-size: 1.3px;
   --navbar-logo-filter: none;
   --dropdown-option-hover-color: #312a49;
+  --tab-color: var(--black);
 }
 
 .font-inter {

src/components/iframe/IframeHeader.tsx

@@ -97,7 +97,12 @@ export function IframeHeader(props: { url: string }) {
                 script.src = "https://cdn.jsdelivr.net/npm/eruda";
                 script.onload = function () {
                   if (!proxyWindow) return;
-                  proxyWindow.eruda.init();
+                  proxyWindow.eruda.init({
+                      defaults: {
+                          displaySize: 45,
+                          theme: 'Material Palenight'
+                      }
+                  });
                   proxyWindow.eruda.show();
                 };
                 proxyDocument.head.appendChild(script);

src/locales/en.json

@@ -66,6 +66,9 @@
   "comingsoon": "Coming soon!",
   "themes": {
     "main": "Main",
-    "catppuccinMocha": "Catppuccin Mocha"
+    "catppuccinMocha": "Catppuccin Mocha",
+    "catppuccinMacchiato": "Catppuccin Macchiato",
+    "catppuccinFrappe": "Catppuccin Frappe",
+    "catppuccinLatte": "Catppuccin Latte"
   }
 }

src/locales/es.json

@@ -66,6 +66,9 @@
   "comingsoon": "¡Próximamente!",
   "themes": {
     "main": "Por defecto",
-    "catppuccinMocha": "Catppuccin Mocha"
+    "catppuccinMocha": "Catppuccin Mocha",
+    "catppuccinMacchiato": "Catppuccin Macchiato",
+    "catppuccinFrappe": "Catppuccin Frappe",
+    "catppuccinLatte": "Catppuccin Latte"
   }
 }

src/locales/ja.json

@@ -66,6 +66,9 @@
   "comingsoon": "近日公開",
   "themes": {
     "main": "デフォルト",
-    "catppuccinMocha": "Catppuccin Mocha"
+    "catppuccinMocha": "Catppuccin Mocha",
+    "catppuccinMacchiato": "Catppuccin Macchiato",
+    "catppuccinFrappe": "Catppuccin Frappe",
+    "catppuccinLatte": "Catppuccin Latte"
   }
 }

src/pages/Settings/Customization.tsx

@@ -9,7 +9,10 @@ function Customization({ id, active }) {
 
   const themes = [
     { id: "main", label: t("themes.main") },
-    { id: "catppucinMocha", label: t("themes.catppuccinMocha") }
+    { id: "catppuccinMocha", label: t("themes.catppuccinMocha") },
+    { id: "catppuccinMacchiato", label: t("themes.catppuccinMacchiato") },
+    { id: "catppuccinFrappe", label: t("themes.catppuccinFrappe") },
+    { id: "catppuccinLatte", label: t("themes.catppuccinLatte") }
   ];
 
   return (
@@ -26,8 +29,8 @@ function Customization({ id, active }) {
         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 class="p-2 text-3xl">{t("settings.theme.title")}</div>
+          <div class="p-2 text-3xl font-bold text-input-text">{t("settings.theme.title")}</div>
-          <div class="text-md p-4">{t("settings.theme.subtitle")}</div>
+          <div class="text-md p-4 font-bold text-input-text">{t("settings.theme.subtitle")}</div>
           <Dropdown storageKey="theme" options={themes} refresh={true} />
         </div>
       </motion.div>

src/pages/Settings/Misc.tsx

@@ -26,8 +26,8 @@ const Misc = ({ id, active }) => {
         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>
+          <div class="text-3xl font-bold text-input-text">{t("settings.languages.title")}</div>
-          <div class="text-md">{t("settings.languages.subtitle")}</div>
+          <div class="text-md font-bold text-input-text">{t("settings.languages.subtitle")}</div>
           <Dropdown
             storageKey="i18nextLng"
             options={languages}

src/pages/Settings/Proxy.tsx

@@ -39,13 +39,13 @@ const Proxy = ({ id, active }) => {
         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="p-2 text-3xl">{t("settings.proxy.title")}</div>
+          <div class="p-2 text-3xl font-bold text-input-text">{t("settings.proxy.title")}</div>
-          <div class="text-md p-4">{t("settings.proxy.subtitle")}</div>
+          <div class="text-md p-4 font-bold text-input-text">{t("settings.proxy.subtitle")}</div>
           <Dropdown storageKey="proxy" options={engines} refresh={false} />
         </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 class="p-2 text-3xl">{t("settings.proxymodes.title")}</div>
+          <div class="p-2 text-3xl font-bold text-input-text">{t("settings.proxymodes.title")}</div>
-          <div class="text-md p-4">{t("settings.proxymodes.subtitle")}</div>
+          <div class="text-md p-4 font-bold text-input-text">{t("settings.proxymodes.subtitle")}</div>
           <Dropdown
             storageKey="proxyMode"
             options={proxyModes}
@@ -53,8 +53,8 @@ const Proxy = ({ id, active }) => {
           />
         </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 class="p-2 text-3xl">{t("settings.search.title")}</div>
+          <div class="p-2 text-3xl font-bold text-input-text">{t("settings.search.title")}</div>
-          <div class="text-md p-4">{t("settings.search.subtitle")}</div>
+          <div class="text-md p-4 font-bold text-input-text">{t("settings.search.subtitle")}</div>
           <Dropdown
             storageKey="searchEngine"
             options={searchEngines}

src/pages/Settings/TabSettings.tsx

@@ -19,8 +19,8 @@ const TabSettings = ({ id, active }) => {
         variants={settingsPageVariant}
         className="content-card flex w-full flex-col items-center justify-center text-center"
       >
-        <div class="text-3xl">{t("settings.cloaking.title")}</div>
+        <div class="text-3xl font-bold text-input-text">{t("settings.cloaking.title")}</div>
-        <div class="text-md pb-5">{t("settings.cloaking.subtitle")}</div>
+        <div class="text-md font-bold pb-5 text-input-text">{t("settings.cloaking.subtitle")}</div>
         <div class="flex flex-row space-x-4">
           <CloakPreset faviconUrl="none" title="none" />
           <CloakPreset
@@ -39,6 +39,10 @@ const TabSettings = ({ id, active }) => {
             faviconUrl="https://ssl.gstatic.com/classroom/ic_product_classroom_144.png"
             title="Home"
           />
+          <CloakPreset
+            faviconUrl="https://asset-cdn.schoology.com/sites/all/themes/schoology_theme/favicon.ico"
+            title="Schoology"
+          />
         </div>
       </motion.div>
     </motion.div>

src/pages/Settings/styles.css

@@ -1,3 +1,4 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");
 * {
   box-sizing: border-box;
 }
@@ -11,7 +12,7 @@
 
 body {
   -webkit-font-smoothing: antialiased;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Roboto;
   background: var(--active-color);
   transition: background 1.5s ease;
 }
@@ -62,7 +63,7 @@ img {
   height: 30px;
   width: 30px;
   min-width: 30px;
-  fill: var(--black);
+  fill: var(--tab-color);
   transition: fill 0.5s ease;
 }