Merge pull request #3 from automata-network/DEV-3652

fix styles
automata-network · Jan 8, 2025 · 83c4580 · 83c4580
2 parents a7c03de + 07b1363
commit 83c4580
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 46 deletions.
diff --git a/webui/src/components/VaultPage.tsx b/webui/src/components/VaultPage.tsx
@@ -59,7 +59,15 @@ const VaultPage = (): React.ReactElement => {
           </div>
           <div className="page-footer">
             <span>
-              Powered by{" "}
+              Brought to you by{" "}
+              <a
+                href="https://www.ata.network/"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Automata Netowork
+              </a>{" "}
+              | Powered by{" "}
               <a
                 href="https://github.com/ethpandaops/fundingvault"
                 target="_blank"

diff --git a/webui/src/components/vaultinfo/ClaimForm.tsx b/webui/src/components/vaultinfo/ClaimForm.tsx
@@ -80,7 +80,19 @@ const ClaimForm = (props: {
   }
 
   return (
-    <div>
+    <>
+      <div className="ata-more-info">
+        <a
+          href="#"
+          onClick={(e) => {
+            e.preventDefault();
+            props.onMoreInfoDisplay();
+          }}
+        >
+          More details
+          <img className="ata-export-icon" src={exportIcon} alt="export" />
+        </a>
+      </div>
       <div className="ata-claim-info">
         <div className="ata-claim-info-section">
           <span className="ata-claim-info-label">Claimable balance:</span>
@@ -109,27 +121,12 @@ const ClaimForm = (props: {
           </span>
         </div>
       </div>
-      <div className="ata-more-info">
-        <a
-          href="#"
-          onClick={(e) => {
-            e.preventDefault();
-            props.onMoreInfoDisplay();
-          }}
-        >
-          More details
-          <img className="ata-export-icon" src={exportIcon} alt="export" />
-        </a>
-      </div>
       <div className="ata-claim-form">
-        <div className="row mt-2">
-          <div className="col-4 ata-form-label">
-            Amount ({chainConfig.TokenName})
-          </div>
-          <div className="col-8 ata-form-label">Target Wallet</div>
-        </div>
-        <div className="row">
-          <div className="col-4">
+        <div className="ata-claim-form-fields">
+          <div className="ata-claim-form-field ata-claim-form-field-amount">
+            <div className="ata-form-label">
+              Amount ({chainConfig.TokenName})
+            </div>
             <div className="ata-input-container">
               <input
                 type="number"
@@ -149,7 +146,8 @@ const ClaimForm = (props: {
               </GlassButton>
             </div>
           </div>
-          <div className="col-8">
+          <div className="ata-claim-form-field">
+            <div className="ata-form-label">Target Wallet</div>
             <div className="ata-input-container">
               <input
                 type="text"
@@ -246,24 +244,20 @@ const ClaimForm = (props: {
           />
         ) : null}
 
-        <div className="row mt-3">
-          <div className="col-12">
-            <GlassButton
-              className="ata-claim-button"
-              onClick={(evt) => requestFunds(evt.target as HTMLButtonElement)}
-              disabled={claimRequest.isPending}
-            >
-              <img
-                className="ata-currency-dollar-icon"
-                alt="currency-dollar"
-                src={currencyDollarIcon}
-              />
-              Request Funds
-            </GlassButton>
-          </div>
-        </div>
+        <GlassButton
+          className="ata-claim-button"
+          onClick={(evt) => requestFunds(evt.target as HTMLButtonElement)}
+          disabled={claimRequest.isPending}
+        >
+          <img
+            className="ata-currency-dollar-icon"
+            alt="currency-dollar"
+            src={currencyDollarIcon}
+          />
+          Request Funds
+        </GlassButton>
       </div>
-    </div>
+    </>
   );
 
   function requestFunds(button: HTMLButtonElement) {

diff --git a/webui/src/components/vaultinfo/EligibilityCheck.tsx b/webui/src/components/vaultinfo/EligibilityCheck.tsx
@@ -28,7 +28,14 @@ const EligibilityCheck = (props: {
   });
 
   if (tokenBalance.isLoading || firstTokenId.isLoading) {
-    return <Loading text="Loading eligibility..."></Loading>;
+    return (
+      <Alert
+        className="ata-claim-eligibility-check-error"
+        type="loading"
+        title="Checking eligibility"
+        message="We are checking your eligibility to claim your grant."
+      />
+    );
   }
   if (tokenBalance.isError) {
     return (
@@ -64,8 +71,4 @@ const EligibilityCheck = (props: {
   return <ClaimForm grantId={firstTokenId.data as number} {...props} />;
 };
 
-const Loading = (props: { text: string }) => {
-  return <div className="p-4">{props.text}</div>;
-};
-
 export default EligibilityCheck;
diff --git a/webui/src/index.css b/webui/src/index.css
@@ -83,12 +83,15 @@ input[type=number] {
   min-height: 64px;
   justify-content: center;
   padding: 12px;
+  font-size: 14px;
 }
 
 .page-block {
   padding: 24px;
   text-align: left;
   max-width: 609px;
+  overflow: hidden;
+  width: 100%;
 }
 
 h1 {
@@ -345,7 +348,7 @@ button[data-testid="rk-account-button"] > div:nth-child(2) > div:nth-child(1) >
 }
 
 .ata-claim-button {
-  margin-top: 8px;
+  margin-top: 24px;
 }
 
 .ata-currency-dollar-icon {
@@ -421,6 +424,7 @@ button[data-testid="rk-account-button"] > div:nth-child(2) > div:nth-child(1) >
   display: flex;
   flex-direction: column;
   gap: 4px;
+  overflow: hidden;
 }
 
 .ata-notification-title {
@@ -434,6 +438,8 @@ button[data-testid="rk-account-button"] > div:nth-child(2) > div:nth-child(1) >
   font-size: 12px;
   font-weight: 400;
   line-height: 14px;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 .ata-claim-notification {
@@ -492,4 +498,36 @@ button[data-testid="rk-account-button"] > div:nth-child(2) > div:nth-child(1) >
 
 .ata-manage-btn .ata-glass-btn-content {
   font-size: 14px;
+}
+
+.ata-claim-form-fields {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+
+.ata-claim-form-field {
+  flex-grow: 1;
+}
+
+.ata-claim-form-field-amount {
+  flex-grow: 0;
+  width: 150px;
+}
+
+@media (max-width: 1024px) {
+  .ata-claim-info {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .ata-claim-form-fields {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .ata-claim-form-field-amount {
+    width: auto;
+  }
 }