feat: basic styiling and form

zugdev · Nov 21, 2024 · 4571b5e · 4571b5e
1 parent f6a4e17
commit 4571b5e
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 10 deletions.
diff --git a/static/index.html b/static/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Ubiquity Allowance</title>
+    <title>Ubiquity Funding</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
@@ -14,11 +14,10 @@
             d="m54.5 97.23.51.29L95.45 121l-27.54 16a5.44 5.44 0 0 1-5.11.16l-.29-.16-49.1-28.35a5.42 5.42 0 0 1-2.69-4.36v-8.7a48.08 48.08 0 0 1 43.78 1.7zm-30.45-60.7 42.73 24.8.55.32a59 59 0 0 0 52.38 2.77v39.48a5.4 5.4 0 0 1-2.44 4.51l-.26.18-10.67 6.14-45.85-26.61a58.92 58.92 0 0 0-49.78-4.38v-36.4a5.42 5.42 0 0 1 2.44-4.51l.26-.16zm41.16-22.87a5.43 5.43 0 0 1 2.38.55l.32.17L117 42.67a5.4 5.4 0 0 1 2.7 4.35v5.33a48 48 0 0 1-46.8 0l-.64-.35-37.34-21.73 27.59-15.89a5.25 5.25 0 0 1 2.35-.72zm66.45 27.11a6.54 6.54 0 0 0-3.27-5.66L69.1.87a6.58 6.58 0 0 0-6.54 0L3.27 35.11A6.54 6.54 0 0 0 0 40.77v68.46a6.57 6.57 0 0 0 3.27 5.67l59.29 34.23a6.58 6.58 0 0 0 6.54 0l59.29-34.23a6.57 6.57 0 0 0 3.27-5.67z"
           ></path>
         </svg>
-        <span id="logo-text">Ubiquity Allowance</span>
+        <span id="logo-text">Ubiquity Funding</span>
       </div>
 
       <w3m-button></w3m-button>
-      <w3m-network-button></w3m-network-button>
     </header>
 
     <div id="modal" class="error-modal">
@@ -38,7 +37,20 @@ <h1 class="error-title">Error</h1>
     </div>
 
     <div id="content-area">
-      <div class="loading"></div>
+      <div class="approve">
+        <div class="approve-header">
+          <h1>Approve Funding</h1>
+          <p>The selected amount in the selected chain will be approved as budget to honor issue rewards.</p>
+        </div>
+        <div class="approve-selectors">
+          <w3m-network-button></w3m-network-button>
+          <input class="amount-selector" type="text" name="amount" min="0" inputmode="numeric" placeholder="enter amount" />
+          <span class="uusd-amount">UUSD</span>
+        </div>
+        <div class="approve-footer">
+          <button class="approve-button">Approve</button>
+          <button disabled class="revoke-button">Revoke Approval</button>
+        </div>
     </div>
 
     <script type="module" src="dist/main.js"></script>

diff --git a/static/style.css b/static/style.css
@@ -61,11 +61,6 @@ header {
   font-size: 1rem;
 }
 
-w3m-button,
-w3m-network-button {
-  margin-left: 10px;
-}
-
 /* Error Modal */
 
 .error-modal {
@@ -151,7 +146,6 @@ w3m-network-button {
     spin 1.5s cubic-bezier(1, 0, 1, 1) infinite alternate,
     fadeOut 1.5s ease-out 5s forwards;
   top: calc(50vh - (24px + 2px));
-  position: fixed;
   opacity: 1;
   transition: 0.5s all ease-in-out;
   right: calc(50% - (24px + 2px));
@@ -180,3 +174,77 @@ w3m-network-button {
     border-color: transparent;
   }
 }
+
+.approve {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 200px;
+  border-radius: 15px;
+  border: 1px solid #fff;
+  padding: 50px;
+}
+
+.approve-header{
+  width: 100%;
+}
+
+.approve-selectors{
+  width: 100%;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  gap: 10px;
+  padding: 40px 0px;
+}
+
+.amount-selector {
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: white;
+  border-radius: 80px;
+  min-width: 100px;
+  max-width: 300px;
+  width: 100%;
+  height: 10px;
+  padding: 15px;
+  font-size: 1.1rem;
+}
+
+.approve-footer {
+  display: flex;
+  position: relative;
+  bottom: 0;
+  width: 100%;
+  gap: 10px
+}
+
+.approve-footer button {
+  background-color: rgba(255, 255, 255, 0.8);
+  color: #111;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.approve-footer button:hover {
+  background-color: rgba(255, 255, 255, 1);
+}
+
+.approve-footer :disabled {
+  background-color: rgba(255, 255, 255, 0.4);
+  color: #333;
+  cursor: not-allowed;
+}
+
+h1 {
+  margin: 0px 0px 10px 0px;
+  font-size: 2rem;
+}
+
+p {
+  margin: 0;
+  font-size: 1rem;
+}