style: refine loading animation and light mode toaster

ubiquity · Mar 11, 2024 · 18d3bfc · 18d3bfc
1 parent 53c65e4
commit 18d3bfc
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 15 deletions.
diff --git a/static/index.html b/static/index.html
@@ -4,6 +4,7 @@
     <link rel="icon" href="favicon.svg" type="image/x-icon" />
     <link href="styles/rewards/pay.css" rel="stylesheet" />
     <link href="styles/rewards/background.css" rel="stylesheet" />
+    <link href="styles/toast.css" rel="stylesheet" />
     <link href="styles/rewards/claim-table.css" rel="stylesheet" />
     <link href="styles/rewards/media-queries.css" rel="stylesheet" />
     <link href="styles/rewards/light-mode.css" rel="stylesheet" />
@@ -122,7 +123,6 @@
                 <div id="controls" data-loader="false" data-make-claim="false" data-view-claim="false">
                   <button id="claim-loader">
                     <svg
-                      id="claim-loader"
                       version="1.1"
                       id="L9"
                       xmlns="http://www.w3.org/2000/svg"
@@ -133,17 +133,7 @@
                       enable-background="new 0 0 0 0"
                       xml:space="preserve"
                     >
-                      <path fill="#fff" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
-                        <animateTransform
-                          attributeName="transform"
-                          attributeType="XML"
-                          type="rotate"
-                          dur="1s"
-                          from="0 50 50"
-                          to="360 50 50"
-                          repeatCount="indefinite"
-                        />
-                      </path>
+                      <path fill="#fff" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"></path>
                     </svg>
                     <div id="claiming-message">Claiming</div>
                   </button>
@@ -194,6 +184,5 @@
     <ul class="notifications"></ul>
     <script src="out/init.js" type="application/javascript"></script>
     <link href="styles/proxima.css" rel="stylesheet" />
-    <link href="styles/toast.css" rel="stylesheet" />
   </body>
 </html>
diff --git a/static/styles/rewards/claim-table.css b/static/styles/rewards/claim-table.css
@@ -366,3 +366,14 @@ table th {
     content: "";
   }
 }
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+#claim-loader > svg {
+  animation: rotate 1s linear infinite;
+}
diff --git a/static/styles/toast.css b/static/styles/toast.css
@@ -36,15 +36,15 @@
   padding: 24px;
   margin: 12px;
   justify-content: space-between;
-  animation: show_toast 0.5s ease-in-out;
+  animation: show-toast 0.5s ease-in-out;
   /* border: 1px solid #80808020; */
   border: 1px solid var(--border-color);
   /* backdrop-filter: blur(24px); */
   /* -webkit-backdrop-filter: blur(24px); */
   background-color: var(--background-color-default);
 }
 
-@keyframes show_toast {
+@keyframes show-toast {
   0% {
     opacity: 0;
   }