Docs: work on homepage

Author: jlukic

docs/src/components/AILoader/AILoader.css

@@ -9,4 +9,19 @@
 
 canvas {
   display: block;
+
+  &.idle {
+    animation: jiggle 1500ms ease;
+    animation-iteration-count: infinite;
+  }
+}
+
+@keyframes jiggle {
+  0% { transform: scale3d(1, 1, 1); }
+  30% { transform: scale3d(1.05, 0.96, 1); }
+  40% { transform: scale3d(0.95, 1.05, 1); }
+  50% { transform: scale3d(1.05, 0.95, 1); }
+  65% { transform: scale3d(.98, 1.03, 1); }
+  75% { transform: scale3d(1.03, .98, 1); }
+  100% { transform: scale3d(1, 1, 1); }
 }

docs/src/components/AILoader/AILoader.html

@@ -1 +1 @@
-<canvas class="{activeIf active}"></canvas>
+<canvas class="{classMap getClasses}"></canvas>

docs/src/components/AILoader/AILoader.js

@@ -29,6 +29,13 @@ const createComponent = ({ self, el, $, settings }) => ({
     self.createKeyframes();
   },
 
+  getClasses() {
+    return {
+      active: settings.active,
+      idle: !settings.active,
+    };
+  },
+
   createTendrils() {
     self.tendrilAngles = Array.from({ length: NUM }, (_, i) => (i / NUM) * Math.PI * 2 - Math.PI / 2);
     self.tendrilWidths = Array.from({ length: NUM }, (_, i) => 0.6 + 0.8 * (0.5 + 0.5 * Math.sin(i * 2.3 + 0.7)));
@@ -146,6 +153,7 @@ const createComponent = ({ self, el, $, settings }) => ({
         ctx.restore();
       }
     }
+
     self.rafId = requestAnimationFrame((t) => self.render(t));
   },
 

docs/src/components/AIPrompt/AIPrompt.css

@@ -242,8 +242,7 @@
 
     .bar {
       transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-      /*
-        width: 80%
+      /* Too much
       font-size: 12px;
       padding: 7px 10px;
       */
@@ -254,6 +253,13 @@
       transform: translateY(0);
     }
   }
+  ui-button {
+    --button-styled-background: var(--standard-solid-20);
+    --button-styled-hover-background: var(--standard-solid-25);
+
+    --button-styled-pressed-background: var(--standard-solid-30);
+    --button-styled-active-background: var(--standard-solid-30);
+  }
 }
 
 /*******************************

docs/src/components/AIPrompt/AIPrompt.html

@@ -2,7 +2,7 @@
   <div class="hint">{getHint}</div>
   <div class="bar {classMap barClass}">
     <input class="input" type="text" placeholder="{placeholder}" maxlength="{maxLength}" />
-    <ui-button grey subtle class="submit" icon-only icon="send" disabled={!hasPrompt}></ui-button>
+    <ui-button subtle class="submit" icon-only icon="send" disabled={!hasPrompt}></ui-button>
   </div>
   {#if cotVisible}
     <div class="cot {classMap cotClass}">