update style

fastrepl · Jul 12, 2024 · cf5f71a · cf5f71a
1 parent c6dd322
commit cf5f71a
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 110 deletions.
diff --git a/js/packages/web/index.html b/js/packages/web/index.html
@@ -43,7 +43,7 @@
         --canary-color-gray-7: #f4f7f3;
         --canary-color-black: #ffffff;
 
-        background-color: white;
+        background-color: black;
         border: 1px solid black;
         color: black;
 
@@ -67,8 +67,8 @@
         --canary-color-gray-6: #1f2a1c;
         --canary-color-black: #151a13;
 
-        background-color: black;
-        border: 1px solid white;
+        background-color: white;
+        border: 1px solid black;
         color: white;
 
         display: flex;

diff --git a/js/packages/web/mock.ts b/js/packages/web/mock.ts
@@ -10,10 +10,13 @@ const mocks: MockHandler[] = [
         excerpt: "123",
       });
 
-      setTimeout(() => {
-        res.setHeader("Content-Type", "application/json");
-        res.end(JSON.stringify(items));
-      }, Math.random() * 500);
+      setTimeout(
+        () => {
+          res.setHeader("Content-Type", "application/json");
+          res.end(JSON.stringify(items));
+        },
+        Math.random() * 200 + 400,
+      );
     },
   },
   {

diff --git a/js/packages/web/package.json b/js/packages/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@getcanary/web",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "type": "module",
   "files": [
     "components"

diff --git a/js/packages/web/src/canary-input.ts b/js/packages/web/src/canary-input.ts
@@ -20,7 +20,7 @@ const STYLE = css`
   }
 
   input {
-    flex-grow: 1;
+    width: 400px;
     height: 30px;
     outline: none;
     border: none;

diff --git a/js/packages/web/src/canary-panel.ts b/js/packages/web/src/canary-panel.ts
@@ -7,11 +7,6 @@ import { Task } from "@lit/task";
 import { highlighter } from "@nlux/highlighter";
 import { createMarkdownStreamParser } from "@nlux/markdown";
 
-import "./icons/magnifying-glass";
-import "./icons/question-mark-circle";
-import "./icons/light-bulb";
-import "./icons/user";
-
 import "./canary-toggle";
 import "./canary-input";
 
@@ -129,9 +124,12 @@ export class CanaryPanel extends LitElement {
 
         <div class="results">${this.render_results()}</div>
 
-        <div class="logo">
-          Powered by <a href=${GITHUB_REPO_URL} target="_blank">🐤 Canary</a>
-        </div>
+        ${this.query == ""
+          ? nothing
+          : html` <div class="logo">
+              Powered by
+              <a href=${GITHUB_REPO_URL} target="_blank">🐤 Canary</a>
+            </div>`}
       </div>
     `;
   }
@@ -142,32 +140,15 @@ export class CanaryPanel extends LitElement {
         initial: () => nothing,
         pending: () =>
           this.mode === "Search"
-            ? html`
-                ${Array(Math.round(Math.random() * 3) + 2).fill(
-                  html`<div class="row skeleton"></div>`,
-                )}
-              `
-            : html`
-                <div class="messages"></div>
-                  <div class="user-message">
-                    <hero-user class="icon"></hero-user>
-                    <span>${this.query}</span>  
-                  </div>
-                  <div class="ai-message">
-                    <hero-light-bulb class="icon"></hero-light-bulb>
-                    ${this.responseContainer}
-                  </div>
-                </div>
-              `,
+            ? html` <div class="skeleton-container">
+                ${Array(4).fill(html`<div class="row skeleton"></div>`)}
+              </div>`
+            : html` <div class="ai-message">${this.responseContainer}</div> `,
         complete:
           this.mode === "Search"
             ? (items: SearchResultItem[]) =>
                 items.length === 0
-                  ? html`
-                      <div class="row error">
-                        <span class="title">No results found</span>
-                      </div>
-                    `
+                  ? nothing
                   : items.map(
                       ({ title, url, excerpt }, index) => html`
                         <a
@@ -185,18 +166,9 @@ export class CanaryPanel extends LitElement {
             : () =>
                 this.query !== ""
                   ? html`
-                <div class="messages"></div>
-                  <div class="user-message">
-                    <hero-user class="icon"></hero-user>
-                    <span>${this.query}</span>  
-                  </div>
-                  <div class="ai-message">
-                    <hero-light-bulb class="icon"></hero-light-bulb>
-                    ${this.responseContainer}
-                  </div>
-                </div>
-                `
-                  : html` <div>Nothing found</div> `,
+                      <div class="ai-message">${this.responseContainer}</div>
+                    `
+                  : nothing,
         error: (error) => {
           console.error(error);
           return html` <div class="row error">
@@ -236,14 +208,18 @@ export class CanaryPanel extends LitElement {
   }
 
   private _handleToggle(e: CustomEvent) {
+    if (this.mode === "Ask") {
+      this.query = "";
+    }
+
     this.mode = e.detail;
   }
 
   static styles = [
     content,
     css`
       div.container {
-        padding: 8px 12px;
+        padding: 8px 8px;
         border: none;
         border-radius: 8px;
         outline: none;
@@ -285,31 +261,10 @@ export class CanaryPanel extends LitElement {
       }
     `,
     css`
-      .messages {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-      }
-
-      .user-message {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 6px;
-        border: 1px solid var(--canary-color-gray-6);
-        border-radius: 8px;
-        padding: 4px;
-        width: fit-content;
-      }
-
       .ai-message {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 6px;
         border: 1px solid var(--canary-color-gray-6);
         border-radius: 8px;
-        padding: 4px;
+        padding: 0px 12px;
       }
     `,
     css`
@@ -340,6 +295,13 @@ export class CanaryPanel extends LitElement {
       }
     `,
     css`
+      .skeleton-container {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        height: 500px;
+      }
+
       .skeleton {
         border: none;
         background-color: var(--canary-color-gray-5);

diff --git a/js/packages/web/src/icons/light-bulb.ts b/js/packages/web/src/icons/light-bulb.ts
diff --git a/js/packages/web/src/icons/user.ts b/js/packages/web/src/icons/user.ts