Added basic root styling

jamie6king · Nov 19, 2024 · 55cef55 · 55cef55
1 parent ba74493
commit 55cef55
Show file tree

Hide file tree

Showing 2 changed files with 139 additions and 27 deletions.
diff --git a/client/Root.jsx b/client/Root.jsx
@@ -3,11 +3,10 @@ import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import ReactCountryFlag from "react-country-flag";
-import { AsyncTypeahead } from "react-bootstrap-typeahead";
+import { AsyncTypeahead, Highlighter, Menu, MenuItem } from "react-bootstrap-typeahead";
 
 // import styles
-// import 'bootstrap/dist/css/bootstrap.min.css';
-// import 'react-bootstrap-typeahead/css/Typeahead.css';
+import * as Styles from "./styles/root.module.scss";
 
 
 export default function Root() {
@@ -24,11 +23,11 @@ export default function Root() {
     // load list of locations
     const onType = (search) => {
 
+        setLoading(true)
+
         const url = "http://localhost:3000/locations"
 
         if (searchTimeout) clearTimeout(searchTimeout);
-        setLoading(true)
-
         searchTimeout = setTimeout(async () => {
             try {
 
@@ -54,7 +53,7 @@ export default function Root() {
             } finally {
                 setLoading(false);
             };
-        }, 500);
+        }, 1000);
     };
 
     const findLocation = (e) => {
@@ -66,27 +65,45 @@ export default function Root() {
     }
 
     return (
-        <div>
-            <form onSubmit={findLocation}>
-                <AsyncTypeahead
-                    id="city"
-                    autoFocus
-                    isLoading={isLoading}
-                    minLength={2}
-                    onSearch={onType}
-                    options={suggestions}
-                    labelKey={city => `${city.name}`}
-                    selected={city}
-                    onChange={setCity}
-                    renderMenuItemChildren={(city) => (
-                        <>
-                            <ReactCountryFlag countryCode={city.countryCode} />
-                            <span style={{paddingLeft: 8}}>{city.name}</span>
-                        </>
-                    )}
-                />
-
-                <input type="submit" value="Search" />
+        <div className={Styles.wrapper}>
+            <form onSubmit={findLocation} className={Styles.form}>
+                <p>SkyCast</p>
+                <div className={Styles.formBox}>
+                    <AsyncTypeahead
+                                    id="city"
+                                    className={Styles.input}
+                                    autoFocus
+                                    isLoading={isLoading}
+                                    minLength={2}
+                                    onSearch={onType}
+                                    options={suggestions}
+                                    labelKey={city => `${city.name}`}
+                                    selected={city}
+                                    searchText={"Searching..."}
+                                    onChange={setCity}
+                                    renderInput={({ inputRef, referenceElementRef, ...inputProps }) => (
+                                        <input
+                                            {...inputProps}
+                                            ref={(input) => {
+                                                inputRef(input);
+                                                referenceElementRef(input);
+                                            }}
+                                            placeholder="Location name"
+                                        />
+                                    )}
+                                    renderMenu={(results, menuProps) => (
+                                            <Menu {...menuProps} className={Styles.inputMenu}>
+                                                { results.map((city, index) => (
+                                                    <MenuItem option={city} position={index} key={index}>
+                                                        <ReactCountryFlag countryCode={city.countryCode} />
+                                                        <span style={{ paddingLeft: 8 }}>{city.name}</span>                                                    </MenuItem>
+                                                ))}
+                                            </Menu>
+                                        )
+                                    }
+                        />
+                    <input className={`${Styles.submit} ${(city.length === 0) ? `${Styles.inactive}` : `${Styles.active}`}`} type="submit" value="Search" />
+                </div>
             </form>
         </div>
     )

diff --git a/client/styles/root.module.scss b/client/styles/root.module.scss
@@ -0,0 +1,95 @@
+.wrapper {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #121212;
+}
+
+.form {
+    display: flex;
+    flex-direction: column;
+
+    p {
+        margin-bottom: 64px;
+        font-size: 48pt;
+        text-align: center;
+        color: #ffffff;
+    }
+}
+
+.formBox {
+    display: flex;
+    flex-direction: row;
+}
+
+.input {
+    position: relative;
+    height: 100px;
+
+    input {
+        width: 500px;
+        height: 48px;
+        padding: 0 8px;
+        font-size: 14pt;
+        font-weight: 300;
+        outline: none;
+        border: none;
+        border-radius: 8px;
+        background-color: #1e1e1e;
+        color: #ffffff;
+
+        &::placeholder {
+            color: #7f7f7f;
+        }
+    }
+}
+
+.inputMenu {
+    margin-top: 8px;
+    padding: 8px;
+    display: flex !important;
+    flex-direction: column;
+    background-color: #1e1e1e;
+    color: #ffffff;
+    border-radius: 8px;
+
+    a {
+        padding: 8px 12px;
+        border-radius: 4px;
+        color: #ffffff;
+        text-decoration: none;
+
+        &[aria-selected=true] {
+            background-color: #ffffff;
+            color: #000000;
+        }
+    }
+}
+
+.submit {
+    height: 48px;
+    margin-left: 8px;
+    padding: 0 16px;
+    font-size: 14pt;
+    font-weight: 500;
+    outline: none;
+    border: none;
+    border-radius: 8px;
+    background-color: #1e1e1e;
+    color: #ffffff;
+    cursor: pointer;
+    transition: 0.1s ease-in-out;
+}
+
+.inactive {
+    cursor: not-allowed;
+}
+
+.active {
+    &:hover {
+        background-color: #ffffff;
+        color: #000000;
+    }
+}