Add details to UI and responsiveness

germartinez · Sep 7, 2024 · 045516b · 045516b
1 parent ba8a681
commit 045516b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/packages/know-your-cosigners-web/src/app/page.tsx b/packages/know-your-cosigners-web/src/app/page.tsx
@@ -20,13 +20,14 @@ export default function Home() {
  {safeAddress === '' ? <br/> : ' '}
  <span style={{ color: '#333333' }}>C</span>O-SIGNERS
  </h1>
+ <p className="instructions">Type a Safe address from Ethereum Mainnet:</p>
  <input
  type="text"
  value={safeAddress}
  onChange={updateSafeAddres}
  autoFocus
  />
- {safeOwners && (
+ {safeOwners && safeAddress?.length === 42 && (
  <>
  <div className="content">
  <div className="chart-box">

diff --git a/packages/know-your-cosigners-web/src/styles/styles.css b/packages/know-your-cosigners-web/src/styles/styles.css
@@ -77,10 +77,16 @@ h2 {
  width: 600px;
 }
 
+.instructions {
+ padding: 12px 0;
+ color: #888888;
+}
+
 input[type='text'] {
  border: 2px solid goldenrod;
  border-radius: 16px;
  font-family: monospace;
+ margin-bottom: 16px;
  padding: 28px 32px;
  text-align: center;
  width: 500px;
@@ -91,6 +97,7 @@ input[type='text'] {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
+ overflow: hidden;
 }
 
 .signer {