feat: add tailwind, header and basic styling

web/package.json

@@ -37,10 +37,14 @@
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.3",
+    "autoprefixer": "^10.4.16",
     "eslint": "^8.45.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.3",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",
     "vite-plugin-eslint": "^1.8.1",

web/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}

web/src/App.css

@@ -1,12 +1,9 @@
 .container {
-  display: flex;
   width: clamp(200px, 1200px, 100vw);
   justify-content: center;
   align-items: center;
   flex-direction: column;
   font-family: sans-serif;
-  text-align: center;
-  margin-top: 15px;
-
+  text-align: center;  
   min-height: calc(100vh - 105px);
 }

web/src/App.tsx

@@ -15,9 +15,11 @@ const db: Database = getDatabase()
 const App = () => {
   return (
     <RecoilRoot>
-      <Header onToggleMenu={() => {}} />
-      <div className="container">
-        <Chat rtdbRef={db} />
+      <div id="primary-container" className="h-screen relative container">
+        <Header />
+        <div className="container py-8">
+          <Chat rtdbRef={db} />
+        </div>
       </div>
     </RecoilRoot>
   )

web/src/components/Chatroom/List/CreateRoom.tsx

@@ -67,31 +67,31 @@ export const CreateRoom = () => {
             </option>
           ))}
         </select>
+        {user.name && user.language ? (
+          <>
+            <input
+              type="text"
+              className="chatroom-create-input my-[20px]"
+              onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                setRoomName(e.target.value)
+              }}
+              value={roomName}
+            />
+            <button
+              className="chatroom-create-submit bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded max-w-xs mx-auto"
+              onClick={handleCreateRoom}
+              disabled={creating}
+            >
+              Create
+            </button>
+          </>
+        ) : (
+          <p>
+            Please provide your name & spoken language to create or join a
+            chatroom
+          </p>
+        )}
       </div>
-      {user.name && user.language ? (
-        <>
-          <input
-            type="text"
-            className="chatroom-create-input"
-            onChange={(e: ChangeEvent<HTMLInputElement>) => {
-              setRoomName(e.target.value)
-            }}
-            value={roomName}
-          />
-          <button
-            className="chatroom-create-submit"
-            onClick={handleCreateRoom}
-            disabled={creating}
-          >
-            Create
-          </button>
-        </>
-      ) : (
-        <p>
-          Please provide your name & spoken language to create or join a
-          chatroom
-        </p>
-      )}
     </div>
   )
 }

web/src/components/Chatroom/List/ListWrapper.tsx

@@ -36,7 +36,7 @@ export const ListWrapper: FC<ChatroomListProps> = ({ rtdbRef }) => {
   }
 
   return (
-    <div className="chatroom-list-container">
+    <div className="chatroom-list-container mx-auto">
       {loading && <p>Fetching chatrooms, please wait...</p>}
       {!loading && (
         <>

web/src/components/Header/Header.tsx

@@ -1,22 +1,21 @@
-import { FC } from 'react'
-import { FiAlignRight as Menu } from 'react-icons/fi'
+import { Branding } from './branding'
+import { GitHubIcon } from '../../icons/github-icon'
 
-import './styles.css'
-
-type HeaderProps = {
-  onToggleMenu: () => void
-}
-
-export const Header: FC<HeaderProps> = ({ onToggleMenu }) => (
-  <div className="header-bar">
-    <h1>
-      google <span>real time</span>
-    </h1>
-
-    <div className="menu-toggler" onClick={onToggleMenu}>
-      <Menu />
+export function Header() {
+  return (
+    <div className="flex flex-col items-start justify-between space-y-2 py-4 sm:flex-row sm:items-center sm:space-y-0 md:h-16 w-full mb-10">
+      <Branding />
+      <div className="ml-auto flex flex-1 space-x-2 sm:justify-end items-center">
+        <div className="mr-2">
+          <a
+            href="https://github.com/nearform/fast-speech-to-text"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <GitHubIcon />
+          </a>
+        </div>
+      </div>
     </div>
-  </div>
-)
-
-Header.displayName = 'Header'
+  )
+}

web/src/components/Header/branding.tsx

@@ -0,0 +1,15 @@
+import { IconWand } from '@/icons/icon-wand'
+
+export function Branding() {
+  return (
+    <div className="flex items-center gap-4">
+      <img src="/nearform-logo.svg" alt="Nearform" />
+      <div className="flex space-x-2 border-l border-blue-300 pl-2 items-center">
+        <IconWand />
+        <span className="text-blue-700 playground-title">
+          Fast speech to text experiments
+        </span>
+      </div>
+    </div>
+  )
+}

web/src/icons/github-icon.tsx

@@ -0,0 +1,18 @@
+export function GitHubIcon() {
+  return (
+    <svg
+      width="28"
+      height="29"
+      viewBox="0 0 28 29"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.0064 3.41659L14.0069 3.41659C16.6326 3.41695 19.1747 4.37536 21.1782 6.12382C23.1821 7.87259 24.5167 10.2981 24.9395 12.968C25.3624 15.638 24.845 18.3744 23.482 20.6869C22.1268 22.9861 20.0248 24.7156 17.5512 25.574C17.5197 25.5786 17.4965 25.5795 17.4805 25.579C17.4802 25.5753 17.48 25.5714 17.48 25.5672C17.48 25.4388 17.4816 25.2134 17.4836 24.9096C17.4847 24.7536 17.4859 24.5769 17.4871 24.382C17.4906 23.8147 17.4941 23.0983 17.4941 22.3044C17.5255 21.8256 17.4585 21.345 17.297 20.8936C17.2498 20.7615 17.1947 20.6327 17.1322 20.508C18.1859 20.3045 19.2582 19.9274 20.1342 19.1756C21.3013 18.174 22.0255 16.5925 22.0263 14.1748C22.0431 12.9561 21.641 11.7721 20.8936 10.828C21.1844 9.74902 21.1046 8.59644 20.6611 7.56541L20.5573 7.32423L20.308 7.24197L20.1252 7.79593C20.308 7.24197 20.3074 7.24178 20.3068 7.24159L20.3057 7.2412L20.3032 7.24042L20.2981 7.23879L20.2866 7.23533C20.2785 7.23294 20.2693 7.2304 20.2591 7.22777C20.2387 7.22253 20.2143 7.21697 20.1857 7.21166C20.1286 7.20103 20.0554 7.19146 19.9658 7.18726C19.7863 7.17882 19.5444 7.19204 19.237 7.25876C18.6639 7.38317 17.8676 7.69249 16.821 8.38957C14.9746 7.91932 13.0438 7.91935 11.1974 8.38966C10.1481 7.69226 9.34918 7.38299 8.77417 7.25866C8.46588 7.192 8.22326 7.17884 8.0434 7.18725C7.95367 7.19145 7.88039 7.20098 7.82319 7.21156C7.79463 7.21684 7.77019 7.22236 7.74983 7.22757C7.73965 7.23018 7.73051 7.2327 7.72238 7.23507L7.71097 7.2385L7.70584 7.24011L7.70343 7.24089L7.70225 7.24127C7.70168 7.24146 7.7011 7.24164 7.88288 7.79593L7.7011 7.24164L7.45043 7.32385L7.34661 7.56637C6.90503 8.59793 6.82728 9.75033 7.11993 10.8284C6.3724 11.7723 5.96972 12.956 5.9853 14.1745C5.98608 16.5883 6.70909 18.1707 7.87283 19.1756C8.74625 19.9299 9.8154 20.3113 10.8664 20.5181C10.7471 20.7638 10.6597 21.0253 10.6069 21.2957C10.4582 21.3551 10.3026 21.3948 10.1439 21.414C9.89663 21.4439 9.64592 21.4232 9.40609 21.353C9.16623 21.2828 8.94142 21.1643 8.7449 21.0035C8.54835 20.8427 8.38392 20.6428 8.2618 20.4148L8.26192 20.4147L8.25575 20.4038C8.02595 19.996 7.70764 19.6461 7.32408 19.3817C6.94045 19.1172 6.50197 18.9454 6.04198 18.8804L6.00597 18.8753L5.9696 18.8747L5.96034 19.458C5.9696 18.8747 5.96941 18.8747 5.96922 18.8747L5.96882 18.8747L5.96793 18.8747L5.96581 18.8747L5.96029 18.8746L5.94429 18.8746C5.93155 18.8747 5.91459 18.875 5.8943 18.8756C5.85424 18.8769 5.79855 18.8799 5.7352 18.8869C5.63183 18.8982 5.41857 18.9281 5.2307 19.0367C5.12983 19.095 4.9857 19.2051 4.90344 19.3967C4.81417 19.6048 4.83814 19.8129 4.90524 19.9768C5.01676 20.2493 5.27351 20.4699 5.54434 20.6598L5.55187 20.665L5.55956 20.6701C6.06312 20.9999 6.43848 21.5057 6.61405 22.0988L6.61391 22.0989L6.61785 22.1111L7.1734 21.9333C6.61785 22.1111 6.61798 22.1116 6.61811 22.112L6.6184 22.1129L6.61902 22.1148L6.62048 22.1192L6.62429 22.1304C6.62724 22.1389 6.63102 22.1495 6.63569 22.1619C6.64502 22.1868 6.65797 22.2194 6.67505 22.2582C6.70915 22.3358 6.76013 22.4396 6.83241 22.5585C6.97674 22.796 7.20899 23.0988 7.56508 23.3727C8.19628 23.858 9.14635 24.1997 10.5218 24.0355C10.5241 24.3464 10.5267 24.6339 10.5289 24.878C10.5318 25.1996 10.534 25.4458 10.534 25.5708C10.534 25.5751 10.5338 25.5792 10.5334 25.583C10.5177 25.5837 10.4946 25.5832 10.463 25.579C7.98662 24.7235 5.88113 22.9952 4.52299 20.6956C3.15653 18.382 2.6372 15.643 3.05996 12.9702C3.48269 10.2975 4.81911 7.86955 6.82591 6.12005C8.83236 4.37086 11.378 3.41368 14.0064 3.41659Z"
+        fill="#111928"
+        stroke="#111928"
+        strokeWidth="1.16667"
+      />
+    </svg>
+  )
+}

web/src/icons/icon-wand.tsx

@@ -0,0 +1,17 @@
+export function IconWand() {
+  return (
+    <svg
+      width="24"
+      height="25"
+      viewBox="0 0 24 25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M21.1959 6.60264L21.1954 6.60309L6.34543 21.2054C6.24833 21.3009 6.12013 21.35 5.989 21.35C5.85787 21.35 5.72967 21.3009 5.63257 21.2054L2.80457 18.4246C2.61281 18.236 2.61281 17.9357 2.80457 17.7472L17.6546 3.14487C17.851 2.95171 18.171 2.95171 18.3674 3.14487L21.1954 5.9257C21.3874 6.11451 21.3868 6.41541 21.1959 6.60264ZM5.63843 19.8328L5.989 20.1775L6.33957 19.8328L16.3186 10.0202L16.6811 9.66374L16.3186 9.30722L14.9046 7.91681L14.554 7.57209L14.2034 7.91681L4.22443 17.7294L3.86187 18.0859L4.22443 18.4424L5.63843 19.8328ZM17.0324 8.62885L17.383 8.97357L17.7336 8.62885L19.7756 6.62091L20.1381 6.2644L19.7756 5.90788L18.3616 4.51747L18.011 4.17275L17.6604 4.51747L15.6184 6.52541L15.2559 6.88192L15.6184 7.23844L17.0324 8.62885ZM16.5 18.5667V19.0667H17H18C18.2848 19.0667 18.5 19.2903 18.5 19.55C18.5 19.8098 18.2848 20.0334 18 20.0334H17H16.5V20.5334V21.5167C16.5 21.7764 16.2848 22 16 22C15.7152 22 15.5 21.7764 15.5 21.5167V20.5334V20.0334H15H14C13.7152 20.0334 13.5 19.8098 13.5 19.55C13.5 19.2903 13.7152 19.0667 14 19.0667H15H15.5V18.5667V17.5834C15.5 17.3237 15.7152 17.1001 16 17.1001C16.2848 17.1001 16.5 17.3237 16.5 17.5834V18.5667ZM4.5 10.7002V10.2002H4H3C2.71518 10.2002 2.5 9.97657 2.5 9.71683C2.5 9.4571 2.71518 9.23351 3 9.23351H4H4.5V8.73351V7.75019C4.5 7.49046 4.71518 7.26687 5 7.26687C5.28482 7.26687 5.5 7.49046 5.5 7.75019V8.73351V9.23351H6H7C7.28482 9.23351 7.5 9.4571 7.5 9.71683C7.5 9.97657 7.28482 10.2002 7 10.2002H6H5.5V10.7002V11.6835C5.5 11.9432 5.28482 12.1668 5 12.1668C4.71518 12.1668 4.5 11.9432 4.5 11.6835V10.7002ZM17.5 14.1501H18.5V15.1168H17.5V14.1501ZM11.5 4.30023V3.33359H12.5V4.30023H11.5ZM8.5 6.26687V5.30023H9.5V6.26687H8.5ZM5.5 3.33359H6.5V4.30023H5.5V3.33359ZM20.5 12.1668V11.2002H21.5V12.1668H20.5ZM20.5 17.0834V16.1168H21.5V17.0834H20.5Z"
+        fill="#1A56DB"
+        stroke="#1A56DB"
+      />
+    </svg>
+  )
+}

web/src/index.css

@@ -1,13 +1,87 @@
-body {
-  margin: 0px;
-  padding: 0px;
-  padding-top: 60px;
-
-  background-color: #2b3038;
-  color: white;
-  font-family: 'Helvetica', sans-serif;
-  display: flex;
-  justify-content: center;
-
-  overflow-x: hidden;
+@import url('https://fonts.googleapis.com/css2?family=Lexend&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 219, 40%, 11%, 1;
+
+    --background-accent-subtle: 246, 100%, 98%, 1;
+    --background-alt: 210, 20%, 98%, 1;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 221, 79%, 48%, 1;
+    --primary-foreground: 0, 0%, 100%, 1;
+    --primary-hover-button: 219, 40%, 11%, 1;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 220, 9%, 46%, 1;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --border: 216, 12%, 84%, 1;
+    --border-default-focus: 220, 9%, 46%, 1;
+    --border-secondary: 216, 12%, 84%, 1;
+    --border-subtle: 220, 13%, 91%, 1;
+    --border-hover: 218, 11%, 65%, 1;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
 }
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}