feat: adjust styles

Agoric · Dec 29, 2023 · 305cb84 · 305cb84
1 parent a44cafe
commit 305cb84
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 87 deletions.
diff --git a/ui/src/App.css b/ui/src/App.css
@@ -49,14 +49,61 @@
   border-radius: 10%;
 }
 
-.want {
-  border-collapse: collapse;
+.coin {
+  width: 2em;
+  margin: 10px;
 }
 
-.want td {
-  border: 1px solid;
+.trade {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: #171717;
+  border-radius: 25px;
+  margin-bottom: 15px;
+}
+
+.item-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 15px 25px 15px;
+  margin: 5px;
+}
+
+.row-center {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+input {
+  border: none;
+  background: #242424;
+  text-align: center;
+  padding: 5px 10px;
+  border-radius: 15px;
+  font-size: 1.2rem;
+  width: 75px;
+}
+
+@media (prefers-color-scheme: light) {
+  .trade {
+    background: #fafafa;
+    border: 1px solid #e5e5e5;
+  }
+  input {
+    background: #e5e5e5;
+  }
 }
 
 .error {
-  background-color: red;
+  background-color: #E11D48;
+  color: #fff;
+}
+
+/* increment/decrement arrows always visible */
+input[type=number]::-webkit-inner-spin-button {
+  opacity: 1
 }
diff --git a/ui/src/assets/IST.png b/ui/src/assets/IST.png
diff --git a/ui/src/components/Trade.tsx b/ui/src/components/Trade.tsx
@@ -1,10 +1,11 @@
 import { FormEvent, useState } from 'react';
 import { stringifyAmountValue } from '@agoric/ui-components';
 import scrollIcon from '../assets/scroll.png';
+import istIcon from '../assets/IST.png';
 import mapIcon from '../assets/map.png';
 import potionIcon from '../assets/potionBlue.png';
 
-const { entries, keys, values } = Object;
+const { entries, values } = Object;
 const sum = (xs: bigint[]) => xs.reduce((acc, next) => acc + next, 0n);
 
 const terms = {
@@ -25,14 +26,49 @@ const parseValue = (numeral: string, purse: Purse): bigint => {
   return BigInt(num);
 };
 
+const Item = ({
+  icon,
+  coinIcon,
+  label,
+  value,
+  onChange,
+  inputClassName,
+  inputStep,
+}: {
+  icon?: string;
+  coinIcon?: string;
+  label: string;
+  value: number | string;
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+  inputClassName: string;
+  inputStep?: string;
+}) => (
+  <div className="item-col">
+    <label htmlFor={label}>
+      {label.charAt(0).toUpperCase() + label.slice(1)}
+    </label>
+    {icon && <img className="piece" src={icon} title={label} />}
+    {coinIcon && <img className="coin" src={coinIcon} title={label} />}
+    <input
+      title={label}
+      type="number"
+      min="0"
+      max="3"
+      value={value}
+      step={inputStep || '1'}
+      onChange={onChange}
+      className={`trade-input ${inputClassName}`}
+    />
+  </div>
+);
+
 type TradeProps = {
   makeOffer: (giveValue: bigint, wantChoices: Record<string, bigint>) => void;
   istPurse: Purse;
   walletConnected: boolean;
 };
 
-// TODO: don't wait for connect wallet to show Give.
-// IST displayInfo is available in vbankAsset or boardAux
+// TODO: IST displayInfo is available in vbankAsset or boardAux
 const Trade = ({ makeOffer, istPurse, walletConnected }: TradeProps) => {
   const [giveValue, setGiveValue] = useState(terms.price);
   const [choices, setChoices] = useState<ItemChoices>({ map: 1n, scroll: 2n });
@@ -48,84 +84,49 @@ const Trade = ({ makeOffer, istPurse, walletConnected }: TradeProps) => {
     setChoices(newChoices);
   };
 
-  const renderGiveValue = (purse: Purse) => (
-    <input
-      type="number"
-      min="0"
-      value={stringifyAmountValue(
-        { ...purse.currentAmount, value: giveValue },
-        purse.displayInfo.assetKind,
-        purse.displayInfo.decimalPlaces,
-      )}
-      onChange={ev => setGiveValue(parseValue(ev?.target?.value, purse))}
-      className={giveValue >= terms.price ? 'ok' : 'error'}
-      step="0.01"
-    />
-  );
-
-  const WantPlaces = () => (
+  return (
     <>
-      <thead>
-        <tr>
-          <th colSpan={keys(nameToIcon).length}>Want: Choose up to 3 items</th>
-        </tr>
-      </thead>
-      <tbody className="want">
-        <tr>
+      <div className="trade">
+        <h3>Want: Choose up to 3 items</h3>
+        <div className="row-center">
           {entries(nameToIcon).map(([title, icon]) => (
-            <td key={title}>
-              <img className="piece" src={icon} title={title} />
-            </td>
-          ))}
-        </tr>
-
-        <tr>
-          {keys(nameToIcon).map(title => (
-            <td key={title}>
-              <input
-                title={title}
-                type="number"
-                min="0"
-                max="3"
-                value={Number(choices[title as ItemName])}
-                step="1"
-                onChange={changeChoice}
-                className={
-                  sum(values(choices)) <= terms.maxItems ? 'ok' : 'error'
-                }
-              />
-              <br />
-              {title}
-            </td>
+            <Item
+              key={title}
+              icon={icon}
+              value={Number(choices[title as ItemName] || 0n)}
+              label={title}
+              onChange={changeChoice}
+              inputClassName={
+                sum(values(choices)) <= terms.maxItems ? 'ok' : 'error'
+              }
+            />
           ))}
-        </tr>
-      </tbody>
-    </>
-  );
-
-  return (
-    <>
-      <table className="want">
-        <WantPlaces />
-        {istPurse && (
-          <>
-            <thead>
-              <tr>
-                <th colSpan={keys(nameToIcon).length}>
-                  Give: Offer at least 0.25 IST
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td></td>
-                <td>{renderGiveValue(istPurse)}</td>
-                <td>IST</td>
-              </tr>
-            </tbody>
-          </>
-        )}
-      </table>
+        </div>
+      </div>
+      <div className="trade">
+        <h3>Give: Offer at least 0.25 IST</h3>
+        <div className="row-center">
+          <Item
+            key="IST"
+            coinIcon={istIcon}
+            value={
+              istPurse
+                ? stringifyAmountValue(
+                    { ...istPurse.currentAmount, value: giveValue },
+                    istPurse.displayInfo.assetKind,
+                    istPurse.displayInfo.decimalPlaces,
+                  )
+                : '0.25'
+            }
+            label="IST"
+            onChange={ev =>
+              setGiveValue(parseValue(ev?.target?.value, istPurse))
+            }
+            inputClassName={giveValue >= terms.price ? 'ok' : 'error'}
+            inputStep="0.01"
+          />
+        </div>
+      </div>
       <div>
         {walletConnected && (
           <button onClick={() => makeOffer(giveValue, choices)}>

diff --git a/ui/src/index.css b/ui/src/index.css
@@ -26,7 +26,6 @@ a:hover {
 body {
   margin: 0;
   display: flex;
-  place-items: center;
   min-width: 320px;
   min-height: 100vh;
 }
@@ -38,8 +37,8 @@ h1 {
 button {
   border-radius: 8px;
   border: 4px solid transparent;
-  padding: 16px;
-  margin: 4px 2px;
+  padding: 12px 16px;
+  margin: 8px 2px;
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
@@ -48,7 +47,7 @@ button {
   transition: border-color 0.25s;
 }
 button:hover {
-  border-color: #646cff;
+  background: #171717;
 }
 button:focus,
 button:focus-visible {
@@ -65,5 +64,9 @@ button:focus-visible {
   }
   button {
     background-color: #04aa6d; /* Green */
+    color: #fff;
+  }
+  button:hover {
+    background: #039962;
   }
 }