Remove "circle reveal" animation on load of sign-in page (#3802)

* Remove "circle reveal" animation on load of sign-in page * Remove CSS selector that broke text rendering when OS was dark and app theme is light
KittyCAD · Sep 6, 2024 · 11ebe11 · 11ebe11
1 parent 9538ffb
commit 11ebe11
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 42 deletions.
diff --git a/src/index.css b/src/index.css
@@ -56,11 +56,6 @@ body.dark {
   .dark .body-bg {
     @apply bg-chalkboard-100;
   }
-
-  body {
-    scrollbar-color: var(--color-chalkboard-70) var(--color-chalkboard-90);
-    @apply text-chalkboard-10;
-  }
 }
 
 select {
@@ -300,32 +295,11 @@ code {
 }
 
 @layer utilities {
-  /* Modified from the very helpful https://www.transition.style/#in:circle:hesitate */
-  @keyframes circle-in-hesitate {
-    0% {
-      clip-path: circle(
-        var(--circle-size-start, 0%) at var(--circle-x, 50%)
-          var(--circle-y, 50%)
-      );
-    }
-    40% {
-      clip-path: circle(
-        var(--circle-size-mid, 40%) at var(--circle-x, 50%) var(--circle-y, 50%)
-      );
-    }
-    100% {
-      clip-path: circle(
-        var(--circle-size-end, 125%) at var(--circle-x, 50%)
-          var(--circle-y, 50%)
-      );
-    }
-  }
-
-  .in-circle-hesitate {
-    animation: var(--circle-duration, 2.5s)
-      var(--circle-timing, cubic-bezier(0.25, 1, 0.3, 1)) circle-in-hesitate
-      both;
-  }
+  /* 
+    This is where your own custom Tailwind utility classes can go,
+    which lets you use them with @apply in your CSS, and get 
+    autocomplete in classNames in your JSX.
+  */
 }
 
 #code-mirror-override .cm-scroller,

diff --git a/src/routes/SignIn.tsx b/src/routes/SignIn.tsx
@@ -70,17 +70,11 @@ const SignIn = () => {
     >
       <div
         style={
-          {
-            height: 'calc(100vh - 16px)',
-            '--circle-x': '14%',
-            '--circle-y': '12%',
-            '--circle-size-mid': '15%',
-            '--circle-size-end': '200%',
-            '--circle-timing': 'cubic-bezier(0.25, 1, 0.4, 0.9)',
-            ...(isDesktop() ? { '-webkit-app-region': 'no-drag' } : {}),
-          } as CSSProperties
+          isDesktop()
+            ? ({ '-webkit-app-region': 'no-drag' } as CSSProperties)
+            : {}
         }
-        className="in-circle-hesitate body-bg py-5 px-12 rounded-lg grid place-items-center overflow-y-auto"
+        className="body-bg py-5 px-12 rounded-lg grid place-items-center overflow-y-auto"
       >
         <div className="max-w-7xl grid gap-5 grid-cols-3 xl:grid-cols-4 xl:grid-rows-5">
           <div className="col-span-2 xl:col-span-3 xl:row-span-3 max-w-3xl mr-8 mb-8">
@@ -204,7 +198,7 @@ const SignIn = () => {
               <div className="flex gap-4 flex-wrap items-center">
                 <ActionButton
                   Element="externalLink"
-                  to="https://zoo.dev/docs/kcl-samples/ball-bearing"
+                  to="https://zoo.dev/docs/kcl-samples/a-parametric-bearing-pillow-block"
                   iconStart={{ icon: 'settings' }}
                   className="border-chalkboard-30 dark:border-chalkboard-80"
                 >