CSS tweaks follow to TTC UI (#8137)

* fmt

* CSS tweaks to home tabs

* CSS tweaks to prompt home cards

* CSS tweaks to bare MLEphant conversation pane

* CSS tweaks to prompt box

Author: franknoirot

src/components/MlEphantConversation.tsx

@@ -74,7 +74,7 @@ export const MlEphantConversationInput = (
   return (
     <div className="flex flex-col p-4 gap-2">
       <div className="text-sm text-chalkboard-60">Enter a prompt</div>
-      <div className="p-2 border flex flex-col gap-2">
+      <div className="p-2 border b-4 focus-within:b-default flex flex-col gap-2">
         {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
         <div
           contentEditable={true}
@@ -104,7 +104,7 @@ export const MlEphantConversationInput = (
             data-testid="ml-ephant-conversation-input-button"
             disabled={props.disabled}
             onClick={onClick}
-            className="w-10 m-0 bg-ml-green p-2 flex justify-center"
+            className="w-10 m-0 bg-ml-green text-chalkboard-100 hover:text-default p-2 flex justify-center"
           >
             <CustomIcon name="arrowUp" className="w-5 h-5 animate-bounce" />
           </button>
@@ -206,7 +206,7 @@ export const MlEphantConversation = (props: MlEphantConversationProps) => {
               {promptCards}
             </div>
           </div>
-          <div className="border-t">
+          <div className="border-t b-4">
             <MlEphantConversationInput
               disabled={props.disabled || props.isLoading}
               onProcess={onProcess}

src/components/PromptCard.tsx

@@ -13,7 +13,7 @@ export interface ConvoCardProps extends IResponseMlConversation {
 }
 
 export const ConvoCard = (props: ConvoCardProps) => {
-  const cssCard = `flex flex-col border rounded-md p-2 gap-2 justify-between`
+  const cssCard = `flex flex-col border b-4 rounded-md p-2 gap-2 justify-between`
   return (
     <div className={cssCard}>
       <div className="flex flex-row justify-between gap-2">
@@ -97,7 +97,7 @@ export const PromptCardActionButton = (props: {
 }) => {
   return (
     <button
-      className="rounded-full bg-gray-100"
+      className="rounded-full bg-2 hover:bg-6 text-default hover:text-5"
       onClick={props.onClick}
       disabled={
         props.disabled ||
@@ -194,8 +194,8 @@ export const PromptCard = (props: PromptCardProps) => {
 
   const cssPrompt =
     props.status !== 'failed'
-      ? 'break-all shadow-sm bg-chalkboard-20 text-chalkboard-100 border rounded-t-md rounded-bl-md pl-4 pr-4 pt-2 pb-2'
-      : 'break-all shadow-sm bg-chalkboard-20 text-chalkboard-60 border rounded-t-md rounded-bl-md pl-4 pr-4 pt-2 pb-2'
+      ? 'break-all shadow-sm bg-2 text-default border b-4 rounded-t-md rounded-bl-md pl-4 pr-4 pt-2 pb-2'
+      : 'break-all shadow-sm bg-2 text-2 border b-4 rounded-t-md rounded-bl-md pl-4 pr-4 pt-2 pb-2'
 
   return (
     <div className={cssCard}>

src/index.css

@@ -363,6 +363,58 @@ code,
 }
 
 @layer utilities {
+  /** "Foreground" utilities */
+  .text-default {
+    @apply text-chalkboard-100 dark:text-chalkboard-10;
+  }
+  .text-2 {
+    @apply text-chalkboard-70 dark:text-chalkboard-30;
+  }
+  .text-3 {
+    @apply text-chalkboard-50;
+  }
+  .text-4 {
+    @apply text-chalkboard-30 dark:text-chalkboard-70;
+  }
+  .text-5 {
+    @apply text-chalkboard-20 dark:text-chalkboard-90;
+  }
+
+  .b-default {
+    @apply border-chalkboard-100 dark:border-chalkboard-10;
+  }
+  .b-2 {
+    @apply border-chalkboard-70 dark:border-chalkboard-30;
+  }
+  .b-3 {
+    @apply border-chalkboard-50;
+  }
+  .b-4 {
+    @apply border-chalkboard-30 dark:border-chalkboard-80;
+  }
+  .b-5 {
+    @apply border-chalkboard-20 dark:border-chalkboard-90;
+  }
+
+  .bg-default {
+    @apply bg-chalkboard-10 dark:bg-chalkboard-100;
+  }
+  .bg-2 {
+    @apply bg-chalkboard-20 dark:bg-chalkboard-90;
+  }
+  .bg-3 {
+    @apply bg-chalkboard-30 dark:bg-chalkboard-70;
+  }
+  .bg-4 {
+    @apply bg-chalkboard-70 dark:bg-chalkboard-30;
+  }
+  .bg-5 {
+    @apply bg-chalkboard-90 dark:bg-chalkboard-20;
+  }
+  .bg-6 {
+    @apply bg-chalkboard-100 dark:bg-chalkboard-10;
+  }
+
   /*
     This is where your own custom Tailwind utility classes can go,
     which lets you use them with @apply in your CSS, and get

src/routes/Home.tsx

@@ -463,9 +463,9 @@ function HomeTab(props: HomeTabProps) {
     { name: 'Prompts', key: HomeTabKeys.Prompts },
   ]
 
-  const cssTab = 'cursor-pointer border rounded-t text-lg text-center'
-  const cssActive = `${cssTab} p-2 border-chalkboard-70 border-b-transparent`
-  const cssInactive = `${cssTab} pl-2 pr-2 pt-2 mt-1 border text-chalkboard-90 border-chalkboard-50 bg-chalkboard-20`
+  const cssTab = 'cursor-pointer py-2 px-5 border rounded-t text-lg text-center'
+  const cssActive = `${cssTab} border-chalkboard-50 border-b-transparent`
+  const cssInactive = `${cssTab} text-chalkboard-50 border border-transparent border-b-chalkboard-50 hover:text-default hover:bg-primary/10`
 
   const onClickTab = (key: HomeTabKeys) => () => {
     setSelected(key)
@@ -478,7 +478,6 @@ function HomeTab(props: HomeTabProps) {
         <div
           key={el.key}
           className={el.key === selected ? cssActive : cssInactive}
-          style={{ width: '130px' }}
           onClick={onClickTab(el.key)}
           role="tab"
           tabIndex={0}