stylez

client/src/app.tsx

@@ -22,7 +22,7 @@ function App() {
             const user = await actions.getLogin();
             if (!user) return route('/login');
             setUser(user);
-            route('/');
+            route('/search');
         }
 
         getLogin();

client/src/components/header.tsx

@@ -11,9 +11,9 @@ const Header = ({ user }) => {
     );
 
     return (
-        <header class={'header'}>
+        <header>
-            <h1>N8CR8</h1>
             {user ? nav() : null}
+            <div></div>
         </header>
     );
 }

client/src/routes/login.tsx

@@ -6,7 +6,6 @@ const Login = ({ success }) => {
     const [mode, setMode] = useState('login')
     const [email, setEmail] = useState('')
     const [password, setPassword] = useState('');
-    // const [discogs, setDiscogs] = useState('');
     const [confirmPassword, setConfirmPassword] = useState('');
 
     async function postLogin() {
@@ -23,15 +22,15 @@ const Login = ({ success }) => {
         <div class="login">
             <form action="">
                 <div class="item">
-                    <label for="email">email: </label>
+                    <label for="email">email</label>
                     <input type="email" name="email" id="email" value={email} required onChange={(e) => setEmail(e.target.value)} />
                 </div>
                 <div class="item">
-                    <label for="password">confirm password: </label>
+                    <label for="password">password</label>
                     <input type="password" name="password" id="password" value={password} required onChange={(e) => setConfirmPassword(e.target.value)} />
                 </div>
                 <div class="item">
-                    <label for="password">confirm password: </label>
+                    <label for="password">confirm password</label>
                     <input type="password" name="password" id="password" value={password} required onChange={(e) => setConfirmPassword(e.target.value)} />
                 </div>
                 <div class="item">
@@ -47,11 +46,11 @@ const Login = ({ success }) => {
         <div class="login">
             <form action="">
                 <div class="item">
-                    <label for="email">email: </label>
+                    <label for="email">email</label>
                     <input type="email" name="email" id="email" value={email} required onChange={(e) => setEmail(e.target.value)} />
                 </div>
                 <div class="item">
-                    <label for="password">password: </label>
+                    <label for="password">password</label>
                     <input type="password" name="password" id="password" value={password} required onChange={(e) => setPassword(e.target.value)} />
                 </div>
                 <div class="item">
@@ -68,6 +67,7 @@ function LoginPage({ success }) {
     return (
         <div class="landing">
             <Login success={success} />
+            <div></div>
             <div class="info">
                 <p>Mates Crates is a record importing service.</p>
                 <p>We bundle orders together from thousands of online stores to reduce the cost of shipping vinyl.</p>

client/src/routes/search.tsx

@@ -4,21 +4,39 @@ import axios from 'axios';
 
 function result(r) {
     return (
-        <div>{r.title}</div>
+        <article key={r.id}>
+            <button> + </button>
+            <div>
+                <h3>{r.title}</h3>
+                <h5 class='alt-text' >{r.year}</h5>
+                <h5 class='alt-text'>{r.country}</h5>
+                <h5 class='alt-text'>{r.format.join(' ')}</h5>
+            </div>
+            <img src={r.thumb} />
+        </article>
     );
 }
 
 const User = () => {
-    const [artist, setArtist] = useState('')
+    const [artist, setArtist] = useState('nine inch nails')
-    const [title, setTitle] = useState('');
+    const [title, setTitle] = useState('the fragile');
     const [results, setResults] = useState([]);
+    const [noResults, setNoResults] = useState(false);
 
     async function fetchResults() {
         const { data } = await axios.post(`http://localhost:41337/want/search`, {
             artist,
             title,
         });
+
         console.log(data);
+
+        if (data.length === 0) {
+            setResults([]);
+            return setNoResults(true);
+        }
+
+        setNoResults(false);
         setResults(data);
     }
 
@@ -27,17 +45,28 @@ const User = () => {
         fetchResults();
     }
 
+    const topEl = results.length
+        ? <button onClick={() => window.scrollTo(0, 0)}> top </button>
+        : null;
+
+    const noResultsEl = noResults
+        ? <article>No Results</article>
+        : null;
+
     return (
-        <div class={'home'}>
+        <div class='search'>
-            <form action="" method="get" class="form-example">
+            <form action="" method="get">
-                <label for="artist">Artist: </label>
+                <label for="artist">Artist</label>
-                <input type="text" name="artist" id="artist" value={artist} onChange={e => setArtist(e.target.value) } required />
+                <input type="text" name="artist" placeholder="Ben Klock" id="artist" value={artist} onChange={e => setArtist(e.target.value) } required />
-                <label for="title">Title: </label>
+                <label for="title">Title</label>
-                <input type="text" name="title" id="title" value={title} onChange={e => setTitle(e.target.value)} required />
+                <input type="text" name="title" placeholder="Subzero" id="title" value={title} onChange={e => setTitle(e.target.value)} required />
                 <input type="submit" value="Search" onClick={handleSubmit} />
             </form>
+            <div></div>
             <div>
+                {noResultsEl}
                 {results.map(result)}
+                {topEl}
             </div>
         </div>
     );

client/src/style/index.less

@@ -47,17 +47,23 @@ html {
 :root {
     --breakpoint-medium: 35em;
     --breakpoint-large: 56em;
+
     --color-dark-blue: #101014;
     --color-mid-blue: #16171d;
     --color-light-blue: #1f2128;
     --color-mid-grey: #9BA0B3;
     --color-off-white: #F4F1D0;
     --color-accent-blue: #5E9ED6;
+
+    --color-blue-gray: #506485;
+
     --base-accent-color: var(--color-accent-blue);
+    --fg-color: var(--color-off-white);
     --hover-link-color: var(--color-off-white);
     --base-background-color: var(--color-dark-blue);
     --secondary-background-color: var(--color-mid-blue);
     --tertiary-background-color: var(--color-light-blue);
+
     --small-font-size: 0.75em;
     --base-font-size: 1em;
     --smedium-font-size: 1.333em;
@@ -68,12 +74,13 @@ html {
     --secondary-font-family: monospace;
     --base-font-color: var(--color-off-white);
     --secondary-font-color: var(--color-mid-grey);
+
     --base-line-height: 1.4;
     --header-line-height: 1.2;
+
     --min-font-size: var(--base-font-size);
     --max-font-size: var(--large-font-size);
-    --base-duration: .3s;
+
-    --base-timing: cubic-bezier(0.645, 0.045, 0.355, 1.000);
     --base-border-color: var(--secondary-font-color);
     --base-border: 1px solid var(--base-border-color);
     --hover-border: 1px solid var(--base-font-color);
@@ -81,10 +88,11 @@ html {
     --base-border-radius: .2rem;
     --base-focus: 2px solid var(--base-accent-color);
     --base-outline-offset: 0.25em;
-    --base-box-shadow: 0 1px 2px 0px rgba(0, 0, 0, .25);
+
-    --hover-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, .5);
     --base-spacing: 1rem;
     --base-spacing-half: calc(var(--base-spacing)/2);
+    --base-spacing-double: calc(var(--base-spacing)*2);
+
     --utility-bar-header-height: calc(var(--base-spacing) * 1.5);
 }
 
@@ -119,7 +127,17 @@ button, select {
 
 button, [type=button], [type=reset], [type=submit] {
     -webkit-appearance:button;
-    cursor:pointer
+    border-color: transparent;
+    cursor:pointer;
+
+    font-family: var(--secondary-font-family);
+    font-size: var(--small-font-size);
+    text-transform: uppercase;
+
+    &:hover {
+        background: var(--tertiary-background-color);
+        border-color: transparent;
+    }
 }
 
 // ok actual styles
@@ -129,23 +147,26 @@ body {
 }
 
 main {
-    padding: 0 10% 0 10%;
+    padding: 0 5% 0 5%;
 }
 
 button, [type=submit] {
     padding: var(--base-spacing-half);
+    background: var(--secondary-background-color);
+
 }
 
 .landing {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 0.5fr 2fr;
 
     .login {
-        flex: 1;
+        button {
+            width: 100%;
+        }
     }
 
     .info {
-        flex: 1;
-
         p {
             margin-bottom: var(--base-spacing);
         }
@@ -153,28 +174,80 @@ button, [type=submit] {
 
 }
 
-form {
+.alt-text {
+    font-family: var(--secondary-font-family);
+    font-size: var(--small-font-size);
+    text-transform: uppercase;
+}
+
+.search {
+    display: grid;
+    grid-template-columns: 1fr 0.5fr 2fr;
+
+    article {
+        display: grid;
+        grid-template-columns: 1fr 4fr 1fr;
+        background-color: var(--secondary-background-color);
+        padding: var(--base-spacing);
         margin-bottom: var(--base-spacing);
 
-    label {
+        button {
-        margin-bottom: var(--base-spacing-half);
+            margin-right: var(--base-spacing);
+            background: var(--tertiary-background-color);
+            border-color: var(--secondary-background-color);
         }
+    }
+}
+
+form {
+    margin-bottom: var(--base-spacing);
 
     label, input {
         display: block;
     }
+
+    input, button {
+        width: 100%;
+    }
+
+    input {
+        padding: var(--base-spacing-half);
+        margin-bottom: var(--base-spacing);
+    }
+
+    label {
+        font-family: var(--secondary-font-family);
+        font-size: var(--small-font-size);
+        text-transform: uppercase;
+        margin-bottom: var(--base-spacing-half);
+    }
+
+}
+
+a {
+    // padding-left: var(--base-spacing);
+    margin-right: var(--base-spacing);
+
+    color: var(--secondary-font-color);
+    font-family: var(--secondary-font-family);
+    font-size: var(--small-font-size);
+    text-transform: uppercase;
+
+    &:hover {
+        color: var(--fg-color);
+    }
 }
 
 
-.header {
+header {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr min-content 1fr;
+    padding-bottom: var(--base-spacing);
 }
 
 .home {
-    min-height: 100%;
+    display: grid;
-    width: 100%;
+    grid-template-columns: 1fr 0.5fr 2fr;
-
-    display: flex;
 
     .bundle {
         flex: 1;