style: fix

rndquu · Oct 14, 2024 · affddbb · affddbb
1 parent 68f2a44
commit affddbb
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 50 deletions.
diff --git a/build/esbuild-build.ts b/build/esbuild-build.ts
@@ -5,15 +5,15 @@ import { appendFileSync, readFileSync, writeFileSync } from "fs";
 
 // CSS files in order
 const cssFiles: string[] = [
+  "static/styles/rewards/pay.css",
   "static/styles/rewards/background.css",
+  "static/styles/toast.css",
   "static/styles/rewards/claim-table.css",
   "static/styles/rewards/gift-cards.css",
-  "static/styles/rewards/light-mode.css",
-  "static/styles/rewards/media-queries.css",
-  "static/styles/rewards/pay.css",
   "static/styles/rewards/ubiquity-dollar.css",
+  "static/styles/rewards/media-queries.css",
+  "static/styles/rewards/light-mode.css",
   "static/styles/proxima.css",
-  "static/styles/toast.css",
 ];
 
 // Output bundles file

diff --git a/static/styles/rewards/pay.css b/static/styles/rewards/pay.css
@@ -20,46 +20,38 @@
   font-weight: 400;
   text-transform: uppercase;
   letter-spacing: 2px;
-  box-sizing: border-box;
-}
-html {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-body,
-main {
-  width: 100%;
-  height: 100%;
 }
+
 a {
   color: #808080;
 }
-body {
-  overflow: hidden;
-}
+
 body,
 main {
-  max-width: 100%;
+  max-width: 100vw;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   color: #808080;
 }
+
 main {
-  width: 100%;
+  width: 100vw;
   position: relative;
 }
+
 a {
   text-decoration: none;
 }
+
 #logo a {
   display: block;
   border: 1px solid transparent;
   border-radius: 3px;
   flex-direction: row;
 }
+
 #logo {
   letter-spacing: 2px;
   padding: 48px 0;
@@ -68,33 +60,41 @@ a {
   line-height: 1;
   text-align: center;
 }
+
 #logo > #logo-icon {
   display: inline-block;
   vertical-align: middle;
+  padding: 4px;
   text-rendering: geometricPrecision;
 }
+
 #logo-icon > svg {
-  height: 28px;
+  height: 36px;
   display: block;
   margin: 0;
-  width: 28px;
+  width: 36px;
   padding: 0;
-  margin-right: 6px;
-  color: #fff;
+  margin-right: 10px;
+  fill: #fff;
 }
+
 #logo > div#logo-text {
   display: inline-block;
   vertical-align: middle;
 }
+#logo > div#logo-text > span::after {
+  content: " ";
+  display: inline-block;
+  width: 8px;
+}
 #logo > div#logo-text > span {
-  line-height: 1;
-  font-size: 16px;
-  letter-spacing: 2px;
+  font-size: 20px;
+  letter-spacing: 5px;
   text-transform: uppercase;
   text-rendering: geometricPrecision;
   color: #fff;
-  font-weight: 400;
 }
+
 div.footer > div {
   padding: 48px 0;
   text-align: center;
@@ -105,11 +105,13 @@ div.footer > div {
   display: inline-block;
   vertical-align: middle;
 }
+
 footer a {
   opacity: 0.25;
   font-size: 12px;
   color: #fff;
 }
+
 footer a:hover {
   opacity: 1;
 }
@@ -119,6 +121,7 @@ header a #logo {
 header a:hover #logo {
   opacity: 1;
 }
+
 main {
   display: flex;
   flex-direction: column;
@@ -128,17 +131,16 @@ main div.receipt-container {
   height: 120px;
   margin-bottom: 32px;
 }
+
 footer {
   width: 100%;
   position: relative;
 }
+
 #carousel {
   flex-direction: row;
   align-items: center;
   align-self: center;
-  /* margin: 12px auto; */
-  /* opacity: 0.5; */
-  /* display: none; */
   opacity: 0;
   transition: opacity 1s;
   text-align: center;
@@ -155,17 +157,17 @@ footer {
 }
 #carousel > #rewardsCount {
   pointer-events: none;
-  display: inline-block;
+  display: inline-block; /* vertical-align: middle; */
 }
-#nextTx,
-#prevTx {
+#prevTx,
+#nextTx {
   padding: 3px;
   margin: 3px;
   border: 2px solid;
   cursor: pointer;
   transform: rotate(45deg);
   border-radius: 3px;
-  width: 0;
+  width: 0px;
   display: inline-block;
 }
 #prevTx {
@@ -177,31 +179,27 @@ footer {
   border-left-color: transparent;
 }
 
-#faq-icon > a {
-  /* position: fixed; */
-  /* right: 20px; */
-  /* cursor: pointer; */
-}
-
 #faq-icon > a > div {
   font-size: 12px;
   color: #fff;
 }
+
 #faq-icon > a > div:hover {
   opacity: 1;
 }
+
 .footer {
-  /* display: flex; */
-  /* align-items: center; */
   opacity: 0;
   transition: opacity 1s;
   text-align: center;
 }
+
 .footer.ready {
   opacity: 1;
 }
+
 #faq-icon {
   position: absolute;
   padding: 42px;
   right: 0;
-}
+}
diff --git a/static/styles/rewards/ubiquity-dollar.css b/static/styles/rewards/ubiquity-dollar.css
@@ -1,8 +1,8 @@
-#transaction-history {
+#ubiquity-dollar-page #transaction-history {
     margin-top: 50px;
 }
 
-.amount-input {
+#ubiquity-dollar-page .amount-input {
     height: 20px;
     width: 150px;
     appearance: none;
@@ -13,16 +13,16 @@
     border-radius: 5px;
 }
 
-tbody {
+#ubiquity-dollar-page tbody {
     position: inherit;
     transform: none;
 }
 
-table th {
+#ubiquity-dollar-page table th {
     padding-left: 0px;
     padding: 12px;
 }
 
-table td {
+#ubiquity-dollar-page table td {
     padding: 12px;
 }
diff --git a/static/ubiquity-dollar.html b/static/ubiquity-dollar.html
@@ -31,7 +31,7 @@
     <title>Ubiquity Rewards | Ubiquity DAO</title>
     <!-- icons from: https://fonts.google.com/icons weight: 300 optical-size: 24 -->
   </head>
-  <body>
+  <body id="ubiquity-dollar-page">
     <background>
       <div class="gradient"></div>
       <div class="gradient"></div>