Merge pull request #2 from fruition/feat/update-style

Feat/update style
fruition · Mar 29, 2024 · 82c53b6 · 82c53b6
2 parents 9b1feca + cfe3aea
commit 82c53b6
Show file tree

Hide file tree

Showing 24 changed files with 2,142 additions and 1,661 deletions.
diff --git a/public/error.html b/public/error.html
@@ -7,33 +7,70 @@
   </head>
   <body>
     <section>
-      <a class="t" href="/"><h1><img src="https://i.ibb.co/q1gZN2p/web-check-logo.png" width="48" />Web-Check</h1></a>
+      <a class="t" href="/"
+        ><h1>
+          <img
+            src="https://i.ibb.co/q1gZN2p/web-check-logo.png"
+            width="48"
+          />Web-Check
+        </h1></a
+      >
       <p class="moji">😪</p>
       <p>There was an error finding this route.</p>
-      <span>Docs and Source: <a href="https://github.com/lissy93/web-check">github.com/lissy93/web-check</a></span>
+      <span
+        >Docs and Source:
+        <a href="https://github.com/lissy93/web-check"
+          >github.com/lissy93/web-check</a
+        ></span
+      >
     </section>
     <style>
-      body { background: #141d2b; color: #fff; }
+      body {
+        background: #141d2b;
+        color: #fff;
+      }
       h1 {
-        color: #9fef00; text-shadow: #0f1620 2px 2px 0px;
-        font-size: 3rem; margin: 1rem auto; flex-wrap: wrap;
-        display: flex; align-items: flex-start; gap: 1rem;
+        color: #2065f8;
+        font-size: 3rem;
+        margin: 1rem auto;
+        flex-wrap: wrap;
+        display: flex;
+        align-items: flex-start;
+        gap: 1rem;
       }
       section {
-        display: flex; flex-direction: column; align-items: center; margin: 1rem; gap: 0.5rem;
-        background: #1a2332; box-shadow: #0f1620 4px 4px 0px; border-radius: 8px; padding: 1rem;
-        max-width: 800px; margin: 1rem auto;
-      }
-      p { font-size: 1.2rem; }
-      a { color: #9fef00; font-family: monospace; }
-      a.t { text-decoration: none; margin: 0;}
-      span { opacity: 0.8; font-size: 0.85rem; }
-      h1 {
-        font-family: PTMono, Ubuntu, Fira Sans, Helvetica, sans-serif;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin: 1rem;
+        gap: 0.5rem;
+        background: #1a2332;
+        border-radius: 8px;
+        padding: 1rem;
+        max-width: 800px;
+        margin: 1rem auto;
+      }
+      p {
+        font-size: 1.2rem;
+      }
+      a {
+        color: #2065f8;
+      }
+      a.t {
+        text-decoration: none;
+        margin: 0;
+      }
+      span {
+        opacity: 0.8;
+        font-size: 0.85rem;
+      }
+      code {
+        color: #2065f8cc;
+      }
+      .moji {
+        font-size: 8rem;
+        margin: 0;
       }
-      p, span, a, section, div { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; }
-      code { color: #9fef00cc;}
-      .moji { font-size: 8rem; margin: 0; }
     </style>
   </body>
 </html>
diff --git a/public/index.html b/public/index.html
@@ -4,29 +4,44 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#9fef00" />
+    <meta name="theme-color" content="#2065f8" />
     <meta
       name="description"
       content="All-in-one OSINT tool, for quickly checking a websites data"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="stylesheet" href="https://use.typekit.net/iot2mrs.css" />
     <title>Fruition's Website Checker</title>
-    <script defer data-domain="web-check.as93.net" src="https://no-track.as93.net/js/script.js"></script>
+    <script
+      defer
+      data-domain="web-check.as93.net"
+      src="https://no-track.as93.net/js/script.js"
+    ></script>
 
     <!-- OpenGraph Social Tags -->
-    <meta property="og:title" content="Fruiton's Website Checker">
-    <meta property="og:description" content="Fruition's All-in-one Website OSINT Scanner">
-    <meta property="og:image" content="/banner.png">
-    <meta property="og:url" content="https://check.fruition.net">
-    <meta name="twitter:card" content="summary_large_image">
+    <meta property="og:title" content="Fruiton's Website Checker" />
+    <meta
+      property="og:description"
+      content="Fruition's All-in-one Website OSINT Scanner"
+    />
+    <meta property="og:image" content="/banner.png" />
+    <meta property="og:url" content="https://check.fruition.net" />
+    <meta name="twitter:card" content="summary_large_image" />
   </head>
   <body>
     <noscript>
-      <b>Welcome to Fruition's Web Checker, the free and open source tool for viewing all available information about a website.</b><br />
-      Get started by entering a URL, and clicking the "Scan" button, or view the code and docs
-      on <a href="https://github.com/lissy93/web-check">GitHub</a>.<br />
-      <small>Licensed under MIT, ©️ <a href="https://aliciasykes.com">Alicia Sykes</a> 2023.</small>
+      <b
+        >Welcome to Fruition's Web Checker, the free and open source tool for
+        viewing all available information about a website.</b
+      ><br />
+      Get started by entering a URL, and clicking the "Scan" button, or view the
+      code and docs on
+      <a href="https://github.com/lissy93/web-check">GitHub</a>.<br />
+      <small
+        >Licensed under MIT, ©️
+        <a href="https://aliciasykes.com">Alicia Sykes</a> 2023.</small
+      >
       <br /><br />
       JavaScript is required to continue, please enable it in your browser.
     </noscript>

diff --git a/public/manifest.json b/public/manifest.json
@@ -15,6 +15,6 @@
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#9fef00",
+  "theme_color": "#2065f8",
   "background_color": "#141d2b"
 }
diff --git a/public/placeholder.html b/public/placeholder.html
@@ -7,31 +7,65 @@
   </head>
   <body>
     <section>
-      <a class="t" href="/"><h1><img src="https://i.ibb.co/q1gZN2p/web-check-logo.png" width="48" />Web-Check</h1></a>
+      <a class="t" href="/"
+        ><h1>
+          <img
+            src="https://i.ibb.co/q1gZN2p/web-check-logo.png"
+            width="48"
+          />Web-Check
+        </h1></a
+      >
       <p><!-- CONTENT --></p>
-      <span>Docs and Source: <a href="https://github.com/lissy93/web-check">github.com/lissy93/web-check</a></span>
+      <span
+        >Docs and Source:
+        <a href="https://github.com/lissy93/web-check"
+          >github.com/lissy93/web-check</a
+        ></span
+      >
     </section>
     <style>
-      body { background: #141d2b; color: #fff; }
+      body {
+        background: #141d2b;
+        color: #fff;
+      }
       h1 {
-        color: #9fef00; text-shadow: #0f1620 2px 2px 0px;
-        font-size: 3rem; margin: 1rem auto; flex-wrap: wrap;
-        display: flex; align-items: flex-start; gap: 1rem;
+        color: #2065f8;
+        font-size: 3rem;
+        margin: 1rem auto;
+        flex-wrap: wrap;
+        display: flex;
+        align-items: flex-start;
+        gap: 1rem;
       }
       section {
-        display: flex; flex-direction: column; align-items: center; margin: 1rem; gap: 0.5rem;
-        background: #1a2332; box-shadow: #0f1620 4px 4px 0px; border-radius: 8px; padding: 1rem;
-        max-width: 800px; margin: 1rem auto;
-      }
-      p { font-size: 1.2rem; }
-      a { color: #9fef00; font-family: monospace; }
-      a.t { text-decoration: none; margin: 0;}
-      span { opacity: 0.8; font-size: 0.85rem; }
-      h1 {
-        font-family: PTMono, Ubuntu, Fira Sans, Helvetica, sans-serif;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin: 1rem;
+        gap: 0.5rem;
+        background: #1a2332;
+        border-radius: 8px;
+        padding: 1rem;
+        max-width: 800px;
+        margin: 1rem auto;
+      }
+      p {
+        font-size: 1.2rem;
+      }
+      a {
+        color: #2065f8;
+      }
+      a.t {
+        text-decoration: none;
+        margin: 0;
+      }
+      span {
+        opacity: 0.8;
+        font-size: 0.85rem;
+      }
+      code {
+        color: #2065f8cc;
       }
-      p, span, a, section, div { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; }
-      code { color: #9fef00cc;}
     </style>
   </body>
 </html>
diff --git a/public/web-check.png b/public/web-check.png
diff --git a/src/components/Form/Button.tsx b/src/components/Form/Button.tsx
@@ -1,48 +1,39 @@
-import styled, { keyframes } from 'styled-components';
-import colors from 'styles/colors';
-import { InputSize, applySize } from 'styles/dimensions';
+import styled, { keyframes } from "styled-components";
+import colors from "styles/colors";
+import { InputSize, applySize } from "styles/dimensions";
 
-type LoadState = 'loading' | 'success' | 'error';
+type LoadState = "loading" | "success" | "error";
 
 interface ButtonProps {
   children: React.ReactNode;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  size?: InputSize,
-  bgColor?: string,
-  fgColor?: string,
-  styles?: string,
-  title?: string,
-  loadState?: LoadState,
-};
+  size?: InputSize;
+  bgColor?: string;
+  fgColor?: string;
+  styles?: string;
+  title?: string;
+  loadState?: LoadState;
+}
 
 const StyledButton = styled.button<ButtonProps>`
   cursor: pointer;
   border: none;
   border-radius: 0.25rem;
-  font-family: PTMono;
-  box-sizing: border-box; 
+  box-sizing: border-box;
   width: -moz-available;
   display: flex;
   justify-content: center;
   gap: 1rem;
-  box-shadow: 3px 3px 0px ${colors.fgShadowColor};
-  &:hover {
-    box-shadow: 5px 5px 0px ${colors.fgShadowColor};
-  }
-  &:active {
-    box-shadow: -3px -3px 0px ${colors.fgShadowColor};
-  }
-  ${props => applySize(props.size)};
-  ${(props) => props.bgColor ?
-    `background: ${props.bgColor};` : `background: ${colors.primary};`
-  }
-  ${(props) => props.fgColor ?
-    `color: ${props.fgColor};` : `color: ${colors.background};`
-  }
-  ${props => props.styles}
+  ${(props) => applySize(props.size)};
+  ${(props) =>
+    props.bgColor
+      ? `background: ${props.bgColor};`
+      : `background: ${colors.primary};`}
+  ${(props) =>
+    props.fgColor ? `color: ${props.fgColor};` : `color: ${colors.background};`}
+  ${(props) => props.styles}
 `;
 
-
 const spinAnimation = keyframes`
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
@@ -57,24 +48,33 @@ const SimpleLoader = styled.div`
 `;
 
 const Loader = (props: { loadState: LoadState }) => {
-  if (props.loadState === 'loading') return <SimpleLoader />
-  if (props.loadState === 'success') return <span>✔</span>
-  if (props.loadState === 'error') return <span>✗</span>
+  if (props.loadState === "loading") return <SimpleLoader />;
+  if (props.loadState === "success") return <span>✔</span>;
+  if (props.loadState === "error") return <span>✗</span>;
   return <span></span>;
 };
 
 const Button = (props: ButtonProps): JSX.Element => {
-  const { children, size, bgColor, fgColor, onClick, styles, title, loadState } = props;
+  const {
+    children,
+    size,
+    bgColor,
+    fgColor,
+    onClick,
+    styles,
+    title,
+    loadState,
+  } = props;
   return (
     <StyledButton
-      onClick={onClick || (() => null) }
+      onClick={onClick || (() => null)}
       size={size}
       bgColor={bgColor}
       fgColor={fgColor}
       styles={styles}
       title={title?.toString()}
-      >
-      { loadState && <Loader loadState={loadState} /> }
+    >
+      {loadState && <Loader loadState={loadState} />}
       {children}
     </StyledButton>
   );