fix: faq button

ubiquity · Jul 19, 2024 · 720eb64 · 720eb64
1 parent bd90e41
commit 720eb64
Show file tree

Hide file tree

Showing 7 changed files with 5,837 additions and 8,640 deletions.
diff --git a/static/index.html b/static/index.html
@@ -183,15 +183,15 @@
           <div id="build">
             <a target="_blank" rel="noopener noreferrer"></a>
           </div>
-          <a class="faq-icon" href="https://github.com/ubiquity/work.ubq.fi/discussions/53" target="_blank">
-            <div>
-              <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#808080">
+          <div id="faq-icon">
+            <a href="https://github.com/ubiquity/work.ubq.fi/discussions/53" target="_blank">
+              <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
                 <path
                   d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
                 />
               </svg>
-            </div>
-          </a>
+            </a>
+          </div>
         </div>
       </footer>
     </main>

diff --git a/static/scripts/rewards/init.ts b/static/scripts/rewards/init.ts
@@ -8,7 +8,7 @@ grid(document.getElementById("grid") as HTMLElement, gridLoadedCallback); // @DE
 readClaimDataFromUrl(app).catch(console.error); // @DEV: read claim data from URL
 
 const footer = document.querySelector(".footer") as Element;
-footer.classList.add("animate");
+footer.classList.add("ready");
 
 // cSpell:ignore llback
 function gridLoadedCallback() {

diff --git a/static/scripts/rewards/render-transaction/render-transaction.ts b/static/scripts/rewards/render-transaction/render-transaction.ts
@@ -15,7 +15,7 @@ type Success = boolean;
 
 export async function renderTransaction(): Promise<Success> {
   if (app.claims && app.claims.length > 1) {
-    carousel.className = "flex";
+    carousel.className = "ready";
     const rewardsCount = document.getElementById("rewardsCount") as Element;
     rewardsCount.innerHTML = `${app.rewardIndex + 1}/${app.claims.length} reward`;
   }

diff --git a/static/styles/rewards/claim-table.css b/static/styles/rewards/claim-table.css
@@ -64,7 +64,7 @@ table hr {
   height: 1px;
   border: none;
 }
-table svg path {
+svg path {
   fill: currentColor;
 }
 table td div {

diff --git a/static/styles/rewards/light-mode.css b/static/styles/rewards/light-mode.css
@@ -16,7 +16,7 @@
   #rewardAmount > a {
     color: #000;
   }
-  table svg path {
+  svg path {
     fill: #000;
   }
   #logo-icon > svg {

diff --git a/static/styles/rewards/pay.css b/static/styles/rewards/pay.css
@@ -102,7 +102,7 @@ a {
   /* font-weight: 400; */
 }
 
-div#build {
+div.footer > div {
   /* bottom: 48px; */
   padding: 48px 0;
   text-align: center;
@@ -112,15 +112,17 @@ div#build {
   /* font-weight: 100; */
   /* width: 48px; */
   margin: auto;
+  display: inline-block;
+  vertical-align: middle;
 }
 
-div#build > a {
+footer a {
   opacity: 0.25;
   font-size: 12px;
   color: #fff;
 }
 
-div#build > a:hover {
+footer a:hover {
   opacity: 1;
 }
 header a #logo {
@@ -145,17 +147,20 @@ footer {
   /* height: 108px; */
   /* width: 100%; */
   /* padding-bottom: env(safe-area-inset-bottom); */
+  width: 100%;
+  position: relative;
 }
 
 #carousel {
   flex-direction: row;
   align-items: center;
   align-self: center;
-  margin: 12px auto;
+  /* margin: 12px auto; */
   /* opacity: 0.5; */
   /* display: none; */
   opacity: 0;
   transition: opacity 1s;
+  text-align: center;
 }
 #carousel > div {
   color: #808080;
@@ -164,8 +169,7 @@ footer {
 #carousel > div:hover {
   color: #fff;
 }
-#carousel.flex {
-  /* display: flex; */
+#carousel.ready {
   opacity: 1;
 }
 #carousel > #rewardsCount {
@@ -194,28 +198,38 @@ footer {
   border-left-color: transparent;
 }
 
-.faq-icon {
-  position: fixed;
-  right: 20px;
-  cursor: pointer;
+#faq-icon > a {
+  /* position: fixed; */
+  /* right: 20px; */
+  /* cursor: pointer; */
 }
 
-a.faq-icon > div {
+#faq-icon > a > div {
   font-size: 12px;
   color: #fff;
 }
 
-a.faq-icon > div:hover {
+#faq-icon > a > div:hover {
   opacity: 1;
 }
 
 .footer {
-  display: flex;
-  align-items: center;
+  /* display: flex; */
+  /* align-items: center; */
   opacity: 0;
   transition: opacity 1s;
+  text-align: center;
 }
 
-.footer.animate {
+.footer.ready {
   opacity: 1;
 }
+
+#faq-icon{
+  position: absolute;
+  /* right: 0; */
+  /* height: 24px; */
+  /* display: inline-block; */
+  padding: 42px;
+  right: 0;
+}