From 305cb84be3c0241f2e85ccf1cec2cb48049b1091 Mon Sep 17 00:00:00 2001
From: 0xPatrick <patrick@0xpatrick.dev>
Date: Fri, 29 Dec 2023 16:53:35 -0500
Subject: [PATCH] feat: adjust styles

---
 ui/src/App.css              |  57 +++++++++++--
 ui/src/assets/IST.png       | Bin 0 -> 1378 bytes
 ui/src/components/Trade.tsx | 157 ++++++++++++++++++------------------
 ui/src/index.css            |  11 ++-
 4 files changed, 138 insertions(+), 87 deletions(-)
 create mode 100644 ui/src/assets/IST.png

diff --git a/ui/src/App.css b/ui/src/App.css
index 4bebad4..b4d6ec7 100644
--- 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
new file mode 100644
index 0000000000000000000000000000000000000000..cb79edfb690e430461b61b228a7af3caf45d2bb5
GIT binary patch
literal 1378
zcmV-o1)chdP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1oufqK~#7Ft(Sj@
zR8<tm&pG$r_vXj`7@b{()pT3RlC(ckDr^-+4cZ{|j}-*L{DElJP)bTg?rcgLl`B~3
zwrU1Zgi2bNNDxFuqDGpeM78W{w(Bapv*Z4n_v4=KO#Ts@&6{ER!sT&?d(Zvc^UgVQ
z9zv07S;R4_fR&Esg|3DNU4}}Jq0jN*vJ3iS?TVwjj$*1%dk977zzT1L!}OLpc&s@X
zvcu7TKi%6;1JmJZOul;rKP<#%!2qAE_M04I`1Zknx{P~<8NOo|dK?K=#sl+=SC$)~
zTF=0Ez{$ObMf3jx@Yx#wS#!hP9wTIccXkSTHTgacjb8UcBZm=nlLxrjV+O5x&E6xj
ztt5cstA;0Qsm>VJjx)D@ZAqJG3flAhQvYpV!-i~Z*bdd@iwO!cX4$k%p&n-uv^Ta<
z5(-etrdK3kyCfLnh4uP;YXbpn)(dRZV4=GW0T~L=!GkzL#H~sqNTS(L3V=o4Br_oD
zyWc|*3Ww>7ure30_`ZDWBm@DVJ5FPkv+@cQp-32RY6rk)m<Xi-IB7;I6Oo&hW;z4~
zs@#IOYeL-j;X0HCF#HD~)ga30X4-Xb%{f&TpZdfIs>L3Nhck#F5Aj9@;8)LwV-4H!
zaCTor_%l4?Ia3pUD+z#ja1RM_RinCmWn=ps-zsnOQBMgA2A3EFAvnNw1o%is@v<+Q
zy@rM+d7>gj>rG)Y0CXvz{emlD&xSJzEy{PXEJIe&ltZBdp0du4Xwl<>U*QRS%6MY@
zNG7wMZENv}=AEV(@u26`Elq|yN&-kF4$TJ<`-)WsvW$I1dVC_bBi47PwdY!#)sD}t
zrWBLIymi5g;Vt=W2Lf<o(i*NF`wLrRYeB{LMZC(yaJ+h*R%0$i!|_v?z)bg>-BB-G
z`Dg}dQ%38@T~jyA?LU3!x#-fM+7SrgtX%svtJnu@Rd;0MT{EJUHFJ#@j(}YazKXIh
z#GpeEaY&PE&hk*F9oDTq{oPxu;^mDjoUf;@xVz)O><1Piayyrk*9p>V-(K0Wq*qkX
z3BrMwCH9|{nD!;zDzoK)Yl*@0N@bd52<oP+jcuAZF}g5hyZa*+@6KmGFbmMTR)sVG
z<fVVe%{R;%HjnMuVPXu$dp}2^>w%$2()j%!QaE&plxH^Z{UrhT-t`(uLva4u)!+XG
zhq?DVaHoA2yT9$3IcXX&@&w4Ez*pe9eFXjuIF>57%gX8WPp7n$X;3nqH_ie*0H)<Z
z&U&{Dic<=NNCjRoI0j6$W5k@nVwDBpQUP)XL_ux9D5Zczukk?sOb_k{Ebz0K^CuM7
zLD$cmBuMlDQK~cmVL>lQhWg2N9E#AKd&NCSrdo@>PACNc6kIaHNIwZhNZ6@aNc|>N
z`@5kO0G9Ag)&m^kRXn$VtjX^Ad`1KzoyY=^7&r!{0FZ+Hpt#FGOxN{t8x$a2?l&{t
zss&1SW&Hlb`PLQ`So{(+FyV2q1h9f_^rM%=Lnb&!uRA$Ds+IjZl9d3VO!`{uME!-m
zB?DyTZ-LEd(+;pP+bVak&F^R%PWvHo!wylEmSP@S>KTx-#td_~Y8JDvB!lc0m0J7;
zEMf~=3`DJgfE-K?==M<NHzj&eiH-PJ>R=%@ivq|&v_iyub}gY0E<+2a8K4+grs`OD
k5iM~ND7+8n75>NZ7f8MgnE7f*Z~y=R07*qoM6N<$f_^Q4s{jB1

literal 0
HcmV?d00001

diff --git a/ui/src/components/Trade.tsx b/ui/src/components/Trade.tsx
index a4801cb..a13d9c2 100644
--- 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
index 00bfa74..d3f626a 100644
--- 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;
   }
 }