feat: add colors

appcypher · Sep 19, 2024 · 804de92 · 804de92
1 parent ceb76c8
commit 804de92
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 20 deletions.
diff --git a/asterisk-client/src/AgentDesigner/AgentDesigner.tsx b/asterisk-client/src/AgentDesigner/AgentDesigner.tsx
@@ -5,7 +5,7 @@ import type { Component } from "solid-js";
 //--------------------------------------------------------------------------------------------------
 
 const AgentDesigner: Component = () => {
-  return <div class="size-full bg-yellow-300" />;
+  return <div class="size-full bg-bg-passive" />;
 };
 
 //--------------------------------------------------------------------------------------------------

diff --git a/asterisk-client/src/SidePanel/Header.tsx b/asterisk-client/src/SidePanel/Header.tsx
@@ -6,12 +6,12 @@ import type { Component } from "solid-js";
 
 const Header: Component = () => {
   return (
-    <div class="flex items-center cursor-pointer bg-cyan-100 h-16 rounded-2xl p-2 gap-1 border-2 border-red-400">
-      <div class="size-10 bg-gray-400 rounded-lg flex-none" />
-      <div class="bg-white h-full flex items-center flex-auto overflow-hidden">
-        <p class="text-lg bg-white truncate">My Personal Workspace Here we </p>
+    <div class="flex items-center cursor-pointer h-16 rounded-2xl p-2 gap-1 border-2 ">
+      <div class="size-10 bg-gray-100 rounded-lg flex-none" />
+      <div class="h-full flex items-center flex-auto overflow-hidden">
+        <p class="text-lg font-bold truncate">My Personal Workspace</p>
       </div>
-      <span class="i-carbon-chevron-sort h-5 bg-blue-200 hover:bg-blue-400" />
+      <span class="i-carbon-chevron-sort h-5" />
     </div>
   );
 };

diff --git a/asterisk-client/src/SidePanel/Main.tsx b/asterisk-client/src/SidePanel/Main.tsx
@@ -8,7 +8,7 @@ import ProjectGroup from "./ProjectGroup";
 
 const Main: Component = () => {
   return (
-    <li class="flex flex-col gap-6">
+    <li class="flex flex-col gap-6 overflow-hidden">
       <For each={Array.from({ length: 2 })} fallback={<div>Loading...</div>}>
         {() => <ProjectGroup />}
       </For>

diff --git a/asterisk-client/src/SidePanel/Project.tsx b/asterisk-client/src/SidePanel/Project.tsx
@@ -6,13 +6,13 @@ import type { Component } from "solid-js";
 
 const Project: Component = () => {
   return (
-    <div class="flex flex-row gap-1 cursor-pointer bg-orange-700 rounded-lg p-1 hover:bg-orange-500">
-      <div class="size-8 bg-gray-400 rounded-lg" />
-      <div class="bg-white h-full flex items-center flex-auto overflow-hidden">
-        <p class="text-sm bg-white truncate">Project Name</p>
+    <div class="flex flex-row gap-2 cursor-pointer rounded-lg p-1 h-10 hover:bg-bg-selected active:bg-bg-active active:border-border-highlight">
+      <div class="size-6 bg-gray-100 rounded-lg" />
+      <div class=" flex items-center flex-auto overflow-hidden">
+        <p class="text-sm truncate">Project Name</p>
       </div>
-      <div class="flex items-center justify-center bg-orange-200">
-        <span class="i-carbon-chevron-down h-4 bg-blue-200 hover:bg-blue-400" />
+      <div class="flex items-center justify-center">
+        <span class="i-carbon-chevron-down h-4" />
       </div>
     </div>
   );

diff --git a/asterisk-client/src/SidePanel/SidePanel.tsx b/asterisk-client/src/SidePanel/SidePanel.tsx
@@ -10,12 +10,9 @@ const SidePanel: Component = () => {
   return (
     <section
       class="
-        absolute flex flex-col gap-1 bg-gray-500 h-[calc(100%-0.5rem)]
-        m-1 w-80 rounded-2xl p-0.5 left-[-100%]
-        peer-hover/hover-zone:flex
-        peer-hover/hover-zone:left-[0]
-        hover:flex hover:left-[0]
-        transition-all ease-in-out duration-300"
+        absolute flex flex-col gap-1 h-[calc(100%-0.5rem)] bg-bg-passive
+        border border-border-passive
+        m-1 w-80 rounded-2xl p-0.5"
     >
       <Header />
       <Main />

diff --git a/asterisk-client/tailwind.config.js b/asterisk-client/tailwind.config.js
@@ -5,7 +5,25 @@ import { iconsPlugin, getIconCollections } from "@egoist/tailwindcss-icons";
 export default {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        "primary-passive": "#B0A0FF",
+        "primary-highlight": "#7B61FF",
+        "primary-selected": "#4A3A99",
+        "primary-active": "#7B61FF",
+        "text-passive": "#5C586B",
+        "text-highlight": "#3C384A",
+        "text-selected": "#000000",
+        "border-passive": "#E3DFF0",
+        "border-highlight": "#C0BCD2",
+        "border-selected": "#A8A3C1",
+        "border-active": "#7B61FF",
+        "bg-passive": "#FFFFFF",
+        "bg-highlight": "#FBFAFF",
+        "bg-selected": "#F3F1FF",
+        "bg-active": "#F3F1FF",
+      },
+    },
   },
   plugins: [
     iconsPlugin({