docs: cleanup styles

sibiraj-s · Nov 3, 2023 · 99ac5c4 · 99ac5c4
1 parent 266ccf2
commit 99ac5c4
Show file tree

Hide file tree

Showing 11 changed files with 433 additions and 141 deletions.
diff --git a/docs/App.tsx b/docs/App.tsx
@@ -9,7 +9,7 @@ const App = (): JSX.Element => {
   return (
     <HashRouter>
       <Nav />
-      <div className='container'>
+      <div className='relative h-screen p-4 flex flex-col'>
         <Routes>
           <Route path='/' element={<BrowserDetector />} />
           <Route path='/ua-parser' element={<UserAgentParser />} />

diff --git a/docs/BrowserDetector.tsx b/docs/BrowserDetector.tsx
@@ -9,21 +9,21 @@ const BrowserDetectorComponent = (): JSX.Element => {
 
   return (
     <React.Fragment>
-      <div className='content justify-center browser-detector'>
+      <div className='m-auto text-center'>
         {isKnownBrowser
           && <React.Fragment>
-            <p className='text'>
+            <p className='text-4xl text-center mb-4'>
               You are viewing this page in -
-              <span className='browser-name'>{'{'}{parsedUA.name as string}{'}'}</span>
+              <span className='text-red-600'>{'{'}{parsedUA.name as string}{'}'}</span>
             </p>
-            <p className='sub-text'>{parsedUA.platform as string}, v{parsedUA.version}</p>
+            <p className='whitespace-nowrap text-red-700 text-lg'>{parsedUA.platform as string}, v{parsedUA.version}</p>
           </React.Fragment>
         }
         {!isKnownBrowser
-          && <p className='text'><span className='browser-name'>{'{ Unknown Browser }'}</span></p>
+          && <p className='text-4xl text-red-600'>{'{ Unknown Browser }'}</p>
         }
       </div>
-      <footer className='footer'>BrowserDetector: v{BrowserDetector.VERSION}</footer>
+      <footer className='absolute bottom-2 left-4 text-sm'>BrowserDetector: v{BrowserDetector.VERSION}</footer>
     </React.Fragment>
   );
 };

diff --git a/docs/Nav.tsx b/docs/Nav.tsx
@@ -19,8 +19,8 @@ const Nav = (): JSX.Element => {
   }, [location]);
 
   return (
-    <nav className='nav'>
-      <Link className='text-crimson' to={goToPath.to}>{goToPath.name}</Link>
+    <nav className='flex justify-end p-4 fixed w-full z-10'>
+      <Link className='text-red-500 underline underline-offset-2' to={goToPath.to}>{goToPath.name}</Link>
     </nav>
   );
 };

diff --git a/docs/UserAgentParser.tsx b/docs/UserAgentParser.tsx
@@ -33,15 +33,15 @@ const UserAgentParserComponent = (): JSX.Element => {
   };
 
   return (
-    <div className='content useragent-parser'>
-      <p className='ua-text'><span className='text-crimson'>{'{'}UserAgent{'}'}</span> Parser</p>
-      <input type='text' className='ua-input' placeholder='Enter useragent string' onChange={handleChange} />
-      <div className='parsed-ua'>
+    <div className='max-w-2xl m-auto'>
+      <p className='text-center text-4xl mb-4'><span className='text-red-600'>{'{'}UserAgent{'}'}</span> Parser</p>
+      <input type='text' className='w-full bg-transparent outline-none px-2 py-3 border-b border-gray-500' placeholder='Enter useragent string' onChange={handleChange} />
+      <div className='bg-white p-2 rounded-md w-full mt-8 text-sm'>
         {isKnownBrowser
-          && <div className='current-ua'>
+          && <div>
             <b>Current UserAgent:</b> {parsedUA.userAgent}
-            <div className='parsed-results'>
-              <p className='parsed-results__title'>Parsed Results:</p>
+            <div className='mt-6'>
+              <p className='font-medium underline mb-2'>Parsed Results:</p>
               <table>
                 <tbody>
                   {uaDisplayTable.map(({ key, name }: DisplayTable) => <tr key={`uaKey__${key}`}><td>{name}</td><td>: {parsedUA[key]?.toString()}</td></tr>)}
@@ -51,8 +51,8 @@ const UserAgentParserComponent = (): JSX.Element => {
           </div>
         }
         {!isKnownBrowser
-          && <div className='current-ua'>
-            <span className='text-crimson'>Error: Unknown browser or Invalid UserAgent</span>
+          && <div>
+            <span className='text-red-600'>Error: Unknown browser or Invalid UserAgent</span>
           </div>
         }
       </div>

diff --git a/docs/index.scss b/docs/index.scss
@@ -1,131 +1,12 @@
-@import url("https://fonts.googleapis.com/css?family=Inconsolata:400,700");
-
-$crimson: #dc143c;
-
-*,
-:after,
-:before {
-  box-sizing: border-box;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 html,
 body {
-  font-size: 16px;
-  font-family: "Inconsolata", monospace;
-}
-
-@media only screen and (max-width: 600px) {
-  html,
-  body {
-    font-size: 14px;
-  }
-}
-
-.text-crimson {
-  color: $crimson;
+  font-family: "Inconsolata Variable", monospace;
 }
 
 body {
-  margin: 0;
-  padding: 0;
   background: url("./assets/project-paper.png");
 }
-
-.nav {
-  display: flex;
-  justify-content: flex-end;
-  padding: 1rem;
-  position: fixed;
-  width: 100%;
-  z-index: 1;
-}
-
-.container {
-  position: relative;
-  height: 100vh;
-  padding: 1rem;
-
-  .content {
-    height: 100%;
-
-    &.justify-center {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-direction: column;
-    }
-
-    &.browser-detector {
-      .text {
-        font-size: 2.5rem;
-        text-align: center;
-        margin: 0;
-
-        .browser-name {
-          color: $crimson;
-          white-space: nowrap;
-        }
-      }
-
-      .sub-text {
-        font-size: 1.2rem;
-      }
-    }
-
-    &.useragent-parser {
-      padding-top: 5rem;
-      max-width: 700px;
-      margin: auto;
-      font-size: 0.9rem;
-
-      .ua-text {
-        font-size: 2rem;
-        margin-bottom: 1rem;
-        text-align: center;
-      }
-
-      .ua-input {
-        width: 100%;
-        padding: 0.75rem 0.5rem;
-        border: transparent;
-        border-bottom: 1px solid gray;
-        background: transparent;
-        font-size: 1rem;
-        margin-bottom: 2rem;
-
-        &:focus {
-          outline: none;
-        }
-      }
-
-      .parsed-ua {
-        width: 100%;
-        background-color: white;
-        padding: 0.5rem;
-        border-radius: 0.25rem;
-
-        .parsed-results {
-          margin-top: 1.5rem;
-        }
-
-        .parsed-results__title {
-          text-decoration: underline;
-          margin-bottom: 0.2rem;
-          margin-left: 2px;
-          font-weight: 700;
-        }
-      }
-    }
-  }
-
-  .footer {
-    position: absolute;
-    bottom: 0.5rem;
-    left: 1rem;
-    font-size: 0.85rem;
-
-    @media only screen and (max-height: 300px) {
-      display: none;
-    }
-  }
-}
diff --git a/docs/index.tsx b/docs/index.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
+import '@fontsource-variable/inconsolata';
+
 import App from './App';
 
 import './index.scss';