various styles

client/src/components/offer.tsx

@@ -29,11 +29,11 @@ export default function Offer(offer) {
     return (
         <div class="offer">
             <section>
-                <h2>{details.artists_sort} - {details.title} <a href={details.uri} target="_blank"><ExternalLink /></a></h2>
-                <h5 class='alt-text' >{details.year}</h5>
-                <h5 class='alt-text'>{details.formats[0].descriptions.join(' ')}</h5>
-                <h5 class='number'>mcrates price: ${offer.total}</h5>
-                <h5 class='number'>shipped by itself: ${offer.comparison}</h5>
+                <h3>{details.artists_sort} - {details.title} <a href={details.uri} target="_blank"><ExternalLink /></a></h3>
+                <div class='alt-text' >{details.year}</div>
+                <div class='alt-text'>{details.formats[0].descriptions.join(' ')}</div>
+                <div class='number'>mcrates price: ${offer.total}</div>
+                <div class='number'>shipped by itself: ${offer.comparison}</div>
             </section>
             <img src={details.thumb} />
             <button onClick={() => setStatus('Accepted')} disabled={accepted} class={classes} >{btnText}</button>

client/src/components/want.tsx

@@ -1,5 +1,6 @@
 import { h } from 'preact';
 import { useState, useCallback } from 'preact/hooks';
+import { ExternalLink } from 'react-feather';
 
 import { useSelector } from 'react-redux'
 import { State } from './../store'
@@ -25,11 +26,13 @@ function Want(want) {
     return (
         <article key={r.id}>
             <div>
-                <h3>{r.artists_sort} - {r.title}</h3>
-                <h5 class='alt-text' >{r.year}</h5>
-                <h5 class='alt-text'>{r.formats[0].descriptions.join(' ')}</h5>
+                <h3>{r.artists_sort} - {r.title} <a href={r.uri} target="_blank"><ExternalLink /></a></h3>
             </div>
             <img src={r.thumb} />
+            <div class='details'>
+                <div class='alt'>{r.year}</div>
+                <div class='alt'>{r.formats[0].descriptions.join(' ')}</div>
+            </div>
             <button onClick={onClick} >{text}</button>
         </article>
     );

client/src/routes/acp.tsx

@@ -7,13 +7,15 @@ import { useSelector, useDispatch } from 'react-redux'
 import { State } from './../store';
 
 enum Status {
-    Pending      = 'Pending',
     Accepted     = 'Accepted',
+    Pending      = 'Pending',
     Declined     = 'Declined',
-    Ordered      = 'Ordered',
+    Confirmed    = 'Confirmed',
     Complete     = 'Complete',
 }
 
+const POSITIVE_STATUS = [Status.Accepted, Status.Confirmed, Status.Complete];
+
 function Item({ item }) {
     const ws = useSelector((state: State) => state.ws);
     console.log(item);
@@ -26,8 +28,12 @@ function Item({ item }) {
         ws.sendAcpOfferStatusSet(item.id, e.target.value);
     }
 
+    const bold = POSITIVE_STATUS.includes(item.status)
+        ? 'bold'
+        : '';
+
     return (
-        <div key={item.id}>
+        <div key={item.id} class={bold}>
             <a href={item.listing.data.uri} target="_blank" >
                 <h4>{item.listing.data.release.description}</h4>
             </a>
@@ -43,11 +49,13 @@ function Item({ item }) {
 }
 
 function SellerGroup(group) {
+    const ready = group.offers.filter(item => POSITIVE_STATUS.includes(item.status)).length;
+
     return (
         <div class="bundle">
            <section>
                 <h2>{group.username} - {group.seller}</h2>
-                <h3>{group.offers.length} offers</h3>
+                <h3>{ready} / {group.offers.length} offers</h3>
                 <h4>Ships: {group.mentionsAustralia && 'AU'} {group.mentionsWorldwide && 'WORLD'}</h4>
             </section>
 

client/src/routes/info.tsx

@@ -12,13 +12,15 @@ const Info = () => {
                 </section>
 
                 <section>
-                    <h3>How It Works</h3>
+                    <h2>How It Works</h2>
                     <p> First, add some records to your <span class='alt'>List</span> on the <a href='/search'>Search Page</a>. </p>
-                    <p> Mates Crates will then make offers to you for releases you add to your <a href='/list'>List</a>. </p>
+                    <p> Mates Crates will then make <span class='alt'>Offers</span> to you for releases you add to your <a href='/list'>List</a>. </p>
+                    <p> Check back regularly for updated <span class='alt'>Offers</span>, the global record marketplace is a living thing. </p>
                 </section>
 
                 <section>
                     <h2>Offers</h2>
+                    <p> Not all items on your <span class='alt'>List</span> will have offers. However, as new users join the site the number of offers we can make increases, so be sure to tell your friends!</p>
                     <p> Think of offers like an expression of interest, they are not confirmed until they are set to <span class='alt-text'>Confirmed</span> status. </p>
                     <p> After that they will be shipped to Melbourne and ready for pick up. </p>
                 </section>
@@ -32,9 +34,11 @@ const Info = () => {
                 <section>
                     <h2>FAQ</h2>
                     <h3> Record Condition </h3>
-                    <p> All Mates Crates offers are for records that are either mint condition or close to it. </p>
+                    <p> All Mates Crates offers are for records that are either mint or very good condition. </p>
                     <h3> Delivery Times </h3>
                     <p> Records are usually available for pickup within a week. We order in bulk, which often means express, insured shipping to Melbourne. </p>
+                    <h3> Duplicates </h3>
+                    <p> Sometimes we can get a record from multiple sources, these appear as duplicate offers. Accepting multiple offers increases the chance the item will be confirmed. </p>
                     <h3> Friends </h3>
                     <p> Please invite other collectors to the site. More users means offers can become cheaper and shipped sooner. </p>
                 </section>

client/src/style/index.less

@@ -8,7 +8,7 @@ html {
   box-sizing: inherit;
 }
 
-body, h1, h2, h3, h4, h5, h6, p, ol, ul {
+body, h4, h5, h6, p, ol, ul {
   margin: 0;
   padding: 0;
   font-weight: normal;
@@ -100,9 +100,9 @@ html {
     --max-font-size: var(--large-font-size);
 
     --base-border-color: var(--secondary-font-color);
-    --base-border: 1px solid var(--base-border-color);
-    --hover-border: 1px solid var(--base-font-color);
-    --focus-border: 1px solid var(--base-font-color);
+    --base-border: 2px solid var(--base-border-color);
+    --hover-border: 2px solid var(--base-font-color);
+    --focus-border: 2px solid var(--base-font-color);
     --base-border-radius: .2rem;
     --base-focus: 2px solid var(--base-accent-color);
     --base-outline-offset: 0.25em;
@@ -158,6 +158,35 @@ button, [type=button], [type=reset], [type=submit] {
     }
 }
 
+h1, h2, h3, h4, h5, h6 {
+    margin-top:0;
+    line-height:var(--header-line-height);
+}
+
+h1 {
+    margin-bottom:var(--base-spacing);
+    font-size:var(--large-font-size)
+}
+
+h2 {
+    margin-bottom:var(--base-spacing);
+    font-size:var(--medium-font-size);
+}
+
+h3 {
+    margin-bottom:calc(var(--base-spacing)/2);
+    font-size:var(--smedium-font-size)
+}
+
+h4 {
+    margin-bottom:calc(var(--base-spacing)/3);
+    font-size:var(--base-font-size)
+}
+
+p {
+    margin:0 0 var(--base-spacing)
+}
+
 // ok actual styles
 
 body {
@@ -208,8 +237,11 @@ button, [type=submit] {
 
 article {
     background-color: var(--secondary-background-color);
-}
 
+    button {
+        border-color: var(--tertiary-background-color);
+    }
+}
 
 .search {
     display: grid;
@@ -241,14 +273,23 @@ article {
 
     article {
         display: grid;
+
+        // grid-template-rows:
+        //     1fr min-content min-content;
+
         grid-template-areas:
             "title img"
+            "details details"
             "remove remove";
 
         button {
             grid-area: remove
         }
 
+        .details {
+            grid-area: details;
+        }
+
         padding: var(--base-spacing);
         margin: var(--base-spacing-half);
     }
@@ -318,7 +359,6 @@ header {
         }
 
         .items {
-            // grid-column: 1 / -1;
             display: grid;
             grid-template-columns: repeat(5, 1fr);
 
@@ -327,7 +367,11 @@ header {
                 margin-bottom: var(--base-spacing);
 
                 display: grid;
-                // grid-template-rows: 1fr 1fr 1fr;
+
+                &.bold {
+                    font-weight: bold;
+                    background: var(--tertiary-background-color);
+                }
             }
         }
     }
@@ -339,6 +383,7 @@ header {
 
     .offer {
         display: grid;
+        grid-template-columns: 1fr min-content;
         grid-template-areas:
             "details img"
             "btn neg";
@@ -358,7 +403,9 @@ header {
         }
 
         button {
+            margin-top: var(--base-spacing-half);
             grid-area: btn;
+            border-color: var(--tertiary-background-color);
 
             &.accepted {
                 background: var(--color-accent-blue);