From 629fcfe062205078f2a049003762221d13243a86 Mon Sep 17 00:00:00 2001
From: Derrick Hammer <derrick@derrickhammer.com>
Date: Wed, 26 Jul 2023 14:47:16 -0400
Subject: [PATCH] refactor: fix css animations and restructure css classes

---
 ui/apps/dashboard/components/Art.scss   | 210 +++++++++++-------------
 ui/apps/dashboard/components/Art.svelte |   3 +-
 2 files changed, 98 insertions(+), 115 deletions(-)

diff --git a/ui/apps/dashboard/components/Art.scss b/ui/apps/dashboard/components/Art.scss
index 7c4e993..8d4fd31 100644
--- a/ui/apps/dashboard/components/Art.scss
+++ b/ui/apps/dashboard/components/Art.scss
@@ -1,6 +1,7 @@
 @import "../../../styles/mixins";
 @import "../../../styles/vars";
 @import "../../../styles/artwork";
+
 .art-wrapper {
     position: absolute;
     top: 50%;
@@ -8,83 +9,86 @@
     transform: translate(-50%, -125%);
     transition: left 500ms, transform 500ms;
     z-index: -1;
+    .art {
+        position: relative;
+        @include fluid-width-height(9.0625rem, 9.0625rem);
+        background-image: $lume-2-base64;
+        background-size: cover;
+        background-position: 50%;
+        transition: width 500ms, height 500ms;
 
-    &.done {
+        > div {
+            position: absolute;
+            inset: 0;
+            transition: opacity 500ms;
+        }
+
+        .gradient-1 {
+            background: linear-gradient(
+                    272.67deg,
+                    #ff005c -27.49%,
+                    #0c0c0d 26.91%,
+                    #ff005c 49.4%,
+                    #ed6a5e 99.62%
+            );
+            z-index: -1;
+        }
+
+        .gradient-2 {
+            background: conic-gradient(
+                    from 180deg at 50% 50%,
+                    #a67833 -15.8deg,
+                    #e91f1f 222.32deg,
+                    #a67833 344.2deg,
+                    #e91f1f 582.32deg
+            );
+            opacity: 0;
+            z-index: -2;
+        }
+
+        .gradient-3 {
+            background: conic-gradient(
+                    from -89.79deg at 50% 50%,
+                    #33a653 -15.8deg,
+                    #080808 222.32deg,
+                    #33a653 344.2deg,
+                    #080808 582.32deg
+            );
+            opacity: 0;
+            z-index: -3;
+        }
+
+        .gradient-4 {
+            background: conic-gradient(
+                    from 180deg at 50% 50%,
+                    #2f2f2f -15.8deg,
+                    #66d155 222.32deg,
+                    #2f2f2f 344.2deg,
+                    #66d155 582.32deg
+            );
+            opacity: 0;
+            z-index: -4;
+        }
+    }
+
+    &.connected {
         top: 50%;
         left: -35em;
         transform: translate(0, -50%);
-    }
-}
+        .art-rotate {
+            transform: rotate(-151.13deg);
+            animation: none;
+            .art {
+                @include fluid-width-height(72rem, 72rem);
+            }
+        }
+        .gradient-1 {
+            opacity: 0;
+        }
 
-.art-rotate {
-    transform: rotate(-180deg);
-    animation: 5000ms rotate;
-    transition: transform 500ms;
-
-    &.done {
-        transform: rotate(-151.13deg);
-    }
-}
-
-.art {
-    position: relative;
-    @include fluid-width-height(9.0625rem, 9.0625rem);
-    background-image: $lume-2-base64;
-    background-size: cover;
-    background-position: 50%;
-    transition: width 500ms, height 500ms;
-
-    > div {
-        position: absolute;
-        inset: 0;
-        transition: opacity 500ms;
-    }
-
-    .gradient-1 {
-        background: linear-gradient(
-                272.67deg,
-                #ff005c -27.49%,
-                #0c0c0d 26.91%,
-                #ff005c 49.4%,
-                #ed6a5e 99.62%
-        );
-        z-index: -1;
-    }
-
-    .gradient-2 {
-        background: conic-gradient(
-                from 180deg at 50% 50%,
-                #a67833 -15.8deg,
-                #e91f1f 222.32deg,
-                #a67833 344.2deg,
-                #e91f1f 582.32deg
-        );
-        opacity: 0;
-        z-index: -2;
-    }
-
-    .gradient-3 {
-        background: conic-gradient(
-                from -89.79deg at 50% 50%,
-                #33a653 -15.8deg,
-                #080808 222.32deg,
-                #33a653 344.2deg,
-                #080808 582.32deg
-        );
-        opacity: 0;
-        z-index: -3;
-    }
-
-    .gradient-4 {
-        background: conic-gradient(
-                from 180deg at 50% 50%,
-                #2f2f2f -15.8deg,
-                #66d155 222.32deg,
-                #2f2f2f 344.2deg,
-                #66d155 582.32deg
-        );
-        opacity: 0;
-        z-index: -4;
+        .gradient-4 {
+            opacity: 1;
+        }
     }
 
     &.pulse {
@@ -96,38 +100,16 @@
             opacity: 1;
         }
     }
+}
+
+.art-rotate {
+    //   transform: rotate(-180deg);
+    animation: 5000ms rotate linear infinite;
+    transition: transform 500ms;
 
     &.connected {
-        .gradient-1 {
-            opacity: 0;
-        }
-
-        .gradient-3 {
-            opacity: 1;
-        }
-    }
-
-    &.done {
-        @include fluid-width-height(72rem, 72rem);
-
-        .gradient-1 {
-            opacity: 0;
-        }
-
-        .gradient-4 {
-            opacity: 1;
-        }
-
-        .loading-text {
-            display: block;
-
-            .loading-text-connected {
-                top: 0;
-                left: -25%;
-                transform: translate(-125%, 0);
-                opacity: 0;
-            }
-        }
+        transform: rotate(-151.13deg);
+        animation: none;
     }
 }
 
@@ -145,28 +127,28 @@
     0% {
         transform: rotate(127.54deg);
     }
-
-    20% {
+    15.38% {
         transform: rotate(127.54deg);
     }
-
-    30% {
+    23.08% {
         transform: rotate(420deg);
     }
-
-    50% {
+    38.46% {
         transform: rotate(420deg);
     }
-
-    60% {
+    46.15% {
         transform: rotate(360deg);
     }
-
-    90% {
+    69.23% {
         transform: rotate(360deg);
     }
-
-    100% {
+    76.92% {
         transform: rotate(540deg);
     }
+    92.31% {
+        transform: rotate(540deg);
+    }
+    100% {
+        transform: rotate(127.54deg);
+    }
 }
diff --git a/ui/apps/dashboard/components/Art.svelte b/ui/apps/dashboard/components/Art.svelte
index 44fb34e..1734d34 100644
--- a/ui/apps/dashboard/components/Art.svelte
+++ b/ui/apps/dashboard/components/Art.svelte
@@ -2,13 +2,14 @@
   import { waitForConnected } from "../../../../shared/util.ts";
 
   let connected = false;
+  let pulse = false;
 
   waitForConnected(() => {
     connected = true;
   });
 </script>
 
-<div class="art-wrapper">
+<div class="art-wrapper" class:pulse class:connected>
   <div class="art-rotate">
     <div class="art">
       <div class="gradient-1" />