Merge pull request #195 from IncognitoTGT/main

feat: Improved about:blank, ironing out css

src/AboutBlank.tsx

@@ -8,6 +8,13 @@ export function AboutBlank(props: { url: string }) {
   iframe.style.height = "100%";
   iframe.style.border = "none";
   iframe.style.overflow = "hidden";
+  iframe.style.margin = "0";
+  iframe.style.padding = "0";
+  iframe.style.position = "fixed";
+  iframe.style.top = "0";
+  iframe.style.bottom = "0";
+  iframe.style.left = "0";
+  iframe.style.right = "0";
   newWindow.document.body.appendChild(iframe);
   window.location.replace("https://google.com");
   return (

src/components/Header.tsx

@@ -28,7 +28,7 @@ export function Header() {
               className="h-full w-full transition-all duration-1000 hover:rotate-[360deg]"
             />
           </div>
-          <h1 className="font-roboto text-2xl font-bold text-navbar-text-color md:text-4xl">
+          <h1 className="font-roboto text-2xl font-bold text-navbar-text-color">
             {t("header.title")}
           </h1>
         </div>
@@ -91,7 +91,7 @@ export function Header() {
         >
           <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"
+              className="flex h-full w-full"
               onClick={() => setIsActive(false)}
             >
               <div className="flex w-full flex-col justify-evenly md:flex-row">

src/components/iframe/IframeHeader.tsx

@@ -39,7 +39,7 @@ export function IframeHeader(props: { url: string }) {
             className="h-16 w-16 transition-all duration-1000 hover:rotate-[360deg]"
             alt="Nebula Logo"
           ></img>
-          <h1 className="font-roboto text-2xl font-bold text-navbar-text-color md:text-4xl">
+          <h1 className="font-roboto invisible whitespace-nowrap font-bold text-navbar-text-color sm:visible sm:text-2xl">
             {" "}
             {t("header.title")}{" "}
           </h1>
@@ -98,10 +98,10 @@ export function IframeHeader(props: { url: string }) {
                 script.onload = function () {
                   if (!proxyWindow) return;
                   proxyWindow.eruda.init({
-                      defaults: {
-                          displaySize: 45,
-                          theme: 'Material Palenight'
-                      }
+                    defaults: {
+                      displaySize: 45,
+                      theme: "Material Palenight"
+                    }
                   });
                   proxyWindow.eruda.show();
                 };

src/locales/en.json

@@ -46,7 +46,8 @@
     },
     "cloaking": {
       "title": "Cloaking",
-      "subtitle": "Choose how your tab looks"
+      "subtitle": "Choose how your tab looks",
+      "aboutblank": "Open in about:blank"
     },
     "search": {
       "title": "Search Engine",

src/locales/es.json

@@ -46,7 +46,8 @@
     },
     "cloaking": {
       "title": "Encubrimiento",
-      "subtitle": "Elige cómo se ve tu pestaña"
+      "subtitle": "Elige cómo se ve tu pestaña",
+      "aboutblank": "Abierte en about:blank"
     },
     "search": {
       "title": "Buscador",

src/locales/ja.json

@@ -46,7 +46,8 @@
     },
     "cloaking": {
       "title": "クローキング",
-      "subtitle": "タブの見た目を選択する"
+      "subtitle": "タブの見た目を選択する",
+      "aboutblank": "で開く about:blank"
     },
     "search": {
       "title": "検索エンジン",

src/pages/Settings/TabSettings.tsx

@@ -2,6 +2,7 @@ import { motion } from "framer-motion";
 import { tabContentVariant, settingsPageVariant } from "./Variants";
 import CloakPreset from "./CloakPreset";
 import { useTranslation } from "react-i18next";
+import { LoadSuspense } from "../../LoadSuspense";
 
 const TabSettings = ({ id, active }) => {
   const { t } = useTranslation();
@@ -19,8 +20,12 @@ const TabSettings = ({ id, active }) => {
         variants={settingsPageVariant}
         className="content-card flex w-full flex-col items-center justify-center text-center"
       >
-        <div class="text-3xl font-bold text-input-text">{t("settings.cloaking.title")}</div>
-        <div class="text-md font-bold pb-5 text-input-text">{t("settings.cloaking.subtitle")}</div>
+        <div class="text-3xl font-bold text-input-text">
+          {t("settings.cloaking.title")}
+        </div>
+        <div class="text-md pb-5 font-bold text-input-text">
+          {t("settings.cloaking.subtitle")}
+        </div>
         <div class="flex flex-row space-x-4">
           <CloakPreset faviconUrl="none" title="none" />
           <CloakPreset
@@ -44,6 +49,36 @@ const TabSettings = ({ id, active }) => {
             title="Schoology"
           />
         </div>
+        <div class="relative p-4">
+          <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"
+            onClick={() => {
+              let newWindow = window.open("about:blank");
+              let iframe = document.createElement("iframe");
+              iframe.src = window.location.origin;
+              iframe.style.width = "100%";
+              iframe.style.height = "100%";
+              iframe.style.border = "none";
+              iframe.style.overflow = "hidden";
+              iframe.style.margin = "0";
+              iframe.style.padding = "0";
+              iframe.style.position = "fixed";
+              iframe.style.top = "0";
+              iframe.style.bottom = "0";
+              iframe.style.left = "0";
+              iframe.style.right = "0";
+              newWindow.document.body.appendChild(iframe);
+              window.location.replace("https://google.com");
+              return (
+                <div>
+                  <LoadSuspense />
+                </div>
+              );
+            }}
+          >
+            {t("settings.cloaking.aboutblank")}
+          </button>
+        </div>
       </motion.div>
     </motion.div>
   );