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;
  }
 }