Misc color clean up (#3026)

* misc color clean up * additional nits * nit * nit * additional minor nits * ensure tailwind config evaluates properly + update textarea -> input * ensure tool call renders * formatting
onyx-dot-app · Nov 3, 2024 · bafb95d · bafb95d
1 parent c6e8bf2
commit bafb95d
Show file tree

Hide file tree

Showing 17 changed files with 56 additions and 58 deletions.
diff --git a/web/components.json b/web/components.json
@@ -17,4 +17,4 @@
     "lib": "@/lib",
     "hooks": "@/hooks"
   }
-}
+}
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/src/app/admin/bot/SlackBotConfigCreationForm.tsx b/web/src/app/admin/bot/SlackBotConfigCreationForm.tsx
@@ -370,6 +370,7 @@ export const SlackBotCreationForm = ({
                 <div className="flex">
                   <Button
                     type="submit"
+                    variant="submit"
                     disabled={isSubmitting}
                     className="mx-auto w-64"
                   >

diff --git a/web/src/app/admin/configuration/llm/ConfiguredLLMProviderDisplay.tsx b/web/src/app/admin/configuration/llm/ConfiguredLLMProviderDisplay.tsx
@@ -122,7 +122,7 @@ function LLMProviderDisplay({
 
         <div className="ml-auto">
           <Button
-            variant={existingLlmProvider ? "outline" : "next"}
+            variant={existingLlmProvider ? "success-reverse" : "navigate"}
             onClick={() => setFormIsVisible(true)}
           >
             {existingLlmProvider ? "Edit" : "Set up"}

diff --git a/web/src/app/admin/connector/[ccPairId]/IndexingAttemptsTable.tsx b/web/src/app/admin/connector/[ccPairId]/IndexingAttemptsTable.tsx
@@ -206,7 +206,6 @@ export function IndexingAttemptsTable({ ccPair }: { ccPair: CCPairFullInfo }) {
       <Callout
         className="mt-4"
         title="No indexing attempts scheduled yet"
-        icon={"info"}
         type="notice"
       >
         Index attempts are scheduled in the background, and may take some time

diff --git a/web/src/app/admin/connectors/[connector]/pages/DynamicConnectorCreationForm.tsx b/web/src/app/admin/connectors/[connector]/pages/DynamicConnectorCreationForm.tsx
@@ -104,7 +104,6 @@ const RenderField: FC<RenderFieldProps> = ({
           type={field.type}
           label={label}
           name={field.name}
-          isTextArea={true}
         />
       )}
     </>

diff --git a/web/src/app/admin/documents/sets/page.tsx b/web/src/app/admin/documents/sets/page.tsx
@@ -207,13 +207,17 @@ const DocumentSetTable = ({
                   </TableCell>
                   <TableCell>
                     {documentSet.is_public ? (
-                      <Badge size="md" variant="success" icon={FiUnlock}>
+                      <Badge
+                        size="md"
+                        variant={isEditable ? "success" : "default"}
+                        icon={FiUnlock}
+                      >
                         Public
                       </Badge>
                     ) : (
                       <Badge
                         size="md"
-                        variant={isEditable ? "purple" : "outline"}
+                        variant={isEditable ? "in_progress" : "outline"}
                         icon={FiLock}
                       >
                         Private

diff --git a/web/src/app/admin/indexing/status/CCPairIndexingStatusTable.tsx b/web/src/app/admin/indexing/status/CCPairIndexingStatusTable.tsx
@@ -168,7 +168,7 @@ function ConnectorRow({
         );
       case "not_started":
         return (
-          <Badge circle variant="secondary">
+          <Badge circle variant="purple">
             Scheduled
           </Badge>
         );
@@ -183,7 +183,7 @@ function ConnectorRow({
 
   return (
     <TableRow
-      className={`border hover:bg-hover-light ${
+      className={`hover:bg-hover-light ${
         invisible ? "invisible !h-0 !-mb-10" : "!border !border-border"
       }  w-full cursor-pointer relative `}
       onClick={() => {
@@ -202,21 +202,19 @@ function ConnectorRow({
       {isPaidEnterpriseFeaturesEnabled && (
         <TableCell>
           {ccPairsIndexingStatus.access_type === "public" ? (
-            <Badge variant="success" icon={FiUnlock}>
+            <Badge variant={isEditable ? "success" : "default"} icon={FiUnlock}>
               Public
             </Badge>
           ) : ccPairsIndexingStatus.access_type === "sync" ? (
             <Badge
-              variant="outline"
-              color={isEditable ? "orange" : "gray"}
+              variant={isEditable ? "orange" : "default"}
               icon={FiRefreshCw}
             >
               Sync
             </Badge>
           ) : (
             <Badge
-              size="md"
-              variant={isEditable ? "outline" : "default"}
+              variant={isEditable ? "in_progress" : "default"}
               icon={FiLock}
             >
               Private
@@ -419,7 +417,7 @@ export function CCPairIndexingStatusTable({
           placeholder="Search connectors..."
           value={searchTerm}
           onChange={(e) => setSearchTerm(e.target.value)}
-          className="ml-1 w-96 h-9 flex-none rounded-md border border-border bg-background-50 px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          className="ml-1 w-96 h-9 flex-none rounded-md bg-background-50 px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
         />
 
         <Button className="h-9" onClick={() => toggleSources()}>

diff --git a/web/src/app/assistants/gallery/AssistantsGallery.tsx b/web/src/app/assistants/gallery/AssistantsGallery.tsx
@@ -179,15 +179,17 @@ export function AssistantsGallery() {
         <div className="grid grid-cols-2 gap-4 mt-4 mb-6">
           <Button
             onClick={() => router.push("/assistants/new")}
-            className="w-full py-3 text-lg rounded-full bg-background-800 text-white hover:bg-background-800 transition duration-300 ease-in-out"
+            variant="default"
+            className="p-6 text-base"
             icon={FiPlus}
           >
             Create New Assistant
           </Button>
 
           <Button
             onClick={() => router.push("/assistants/mine")}
-            className="w-full hover:border-border-strong py-3 text-lg rounded-full bg-white border border-border shadow text-text-700 hover:bg-background-50 transition duration-300 ease-in-out"
+            variant="outline"
+            className="text-base py-6"
             icon={FiList}
           >
             Your Assistants

diff --git a/web/src/app/assistants/mine/AssistantsList.tsx b/web/src/app/assistants/mine/AssistantsList.tsx
@@ -394,16 +394,18 @@ export function AssistantsList() {
 
         <div className="grid grid-cols-2 gap-4 mt-4 mb-8">
           <Button
+            variant="default"
+            className="p-6 text-base"
             onClick={() => router.push("/assistants/new")}
-            className="w-full py-3 text-lg rounded-full bg-background-800 text-white hover:bg-background-800 transition duration-300 ease-in-out"
             icon={FiPlus}
           >
             Create New Assistant
           </Button>
 
           <Button
             onClick={() => router.push("/assistants/gallery")}
-            className="w-full hover:border-border-strong py-3 text-lg rounded-full bg-white border !border-border shadow text-text-700 hover:bg-background-50 transition duration-300 ease-in-out"
+            variant="outline"
+            className="text-base py-6"
             icon={FiList}
           >
             Assistant Gallery

diff --git a/web/src/app/chat/ChatPage.tsx b/web/src/app/chat/ChatPage.tsx
@@ -1355,7 +1355,7 @@ export function ChatPage({
                   finalMessage?.context_docs?.top_documents || documents,
                 citations: finalMessage?.citations || {},
                 files: finalMessage?.files || aiMessageImages || [],
-                toolCall: finalMessage?.tool_call || null,
+                toolCall: finalMessage?.tool_call || toolCall,
                 parentMessageId: regenerationRequest
                   ? regenerationRequest?.parentMessage?.messageId!
                   : initialFetchDetails.user_message_id,

diff --git a/web/src/app/chat/RegenerateOption.tsx b/web/src/app/chat/RegenerateOption.tsx
@@ -97,7 +97,7 @@ export function RegenerateDropdown({
           ) : (
             <Hoverable
               size={16}
-              icon={StarFeedback as IconType}
+              icon={FiRefreshCw as IconType}
               hoverText={getDisplayNameForModel(alternate)}
             />
           )}

diff --git a/web/src/components/admin/connectors/Field.tsx b/web/src/components/admin/connectors/Field.tsx
@@ -594,7 +594,6 @@ export function SelectorFormField({
   label,
   options,
   subtext,
-  includeDefault = false,
   side = "bottom",
   maxHeight,
   onSelect,
@@ -615,26 +614,34 @@ export function SelectorFormField({
       {subtext && <SubLabel>{subtext}</SubLabel>}
       <div className="mt-2">
         <Select
-          value={field.value}
+          value={field.value || defaultValue}
           onValueChange={
             onSelect || ((selected) => setFieldValue(name, selected))
           }
           defaultValue={defaultValue}
         >
           <SelectTrigger>
-            <SelectValue
-              placeholder={includeDefault ? "Select..." : undefined}
-            />
+            <SelectValue placeholder="Select...">
+              {field.value || defaultValue || ""}
+            </SelectValue>
           </SelectTrigger>
           <SelectContent
             side={side}
             className={maxHeight ? `max-h-[${maxHeight}]` : undefined}
           >
-            {includeDefault && (
+            {options.length == 0 && (
               <SelectItem value="default">Select...</SelectItem>
             )}
+            {defaultValue && (
+              <SelectItem value={defaultValue}>{defaultValue}</SelectItem>
+            )}
             {options.map((option) => (
-              <SelectItem key={option.value} value={String(option.value)}>
+              <SelectItem
+                icon={option.icon}
+                key={option.value}
+                value={String(option.value)}
+                selected={field.value === option.value}
+              >
                 {option.name}
               </SelectItem>
             ))}

diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
@@ -12,7 +12,7 @@ const buttonVariants = cva(
         success:
           "bg-green-100 text-green-600 hover:bg-green-500/90 dark:bg-blue-500 dark:text-neutral-50 dark:hover:bg-green-900/90",
         "success-reverse":
-          "bg-green-500 text-green-100 hover:bg-green-600/90 dark:bg-neutral-50 dark:text-blue-500 dark:hover:bg-green-100/90",
+          "bg-green-500 text-white hover:bg-green-600/90 dark:bg-neutral-50 dark:text-blue-500 dark:hover:bg-green-100/90",
 
         default:
           "bg-neutral-900 border-border text-neutral-50 hover:bg-neutral-900/90 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50/90",

diff --git a/web/src/components/ui/select.tsx b/web/src/components/ui/select.tsx
@@ -115,8 +115,9 @@ const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
     icon?: React.ElementType;
+    selected?: boolean;
   }
->(({ className, children, icon: Icon, ...props }, ref) => (
+>(({ className, children, icon: Icon, selected, ...props }, ref) => (
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
@@ -127,9 +128,14 @@ const SelectItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        {Icon ? <Icon className="h-4 w-4" /> : <Check className="h-4 w-4" />}
+        <Check className="h-4 w-4" />
       </SelectPrimitive.ItemIndicator>
     </span>
+    {!selected && Icon && (
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <Icon className="h-4 w-4" />
+      </span>
+    )}
 
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>

diff --git a/web/src/lib/connectors/connectors.tsx b/web/src/lib/connectors/connectors.tsx
@@ -950,7 +950,6 @@ For example, specifying .*-support.* as a "channel" will cause the connector to
     values: [],
     advanced_values: [],
   },
-
 };
 export function createConnectorInitialValues(
   connector: ConfigurableSources
@@ -1210,7 +1209,6 @@ export interface AsanaConfig {
 
 export interface FreshdeskConfig {}
 
-
 export interface MediaWikiConfig extends MediaWikiBaseConfig {
   hostname: string;
 }

diff --git a/web/tailwind.config.js b/web/tailwind.config.js
@@ -3,16 +3,13 @@ var merge = require("lodash/merge");
 // Use relative paths for imports
 const baseThemes = require("./tailwind-themes/tailwind.config.js");
 
-let customThemes = null;
-try {
-  if (process.env.NEXT_PUBLIC_THEME) {
-    customThemes = require(
-      `./tailwind-themes/custom/${process.env.NEXT_PUBLIC_THEME}/tailwind.config.js`
-    );
-  }
-} catch (error) {
-  console.warn(`Custom theme not found for: ${process.env.NEXT_PUBLIC_THEME}`);
-}
+const customThemes = process.env.NEXT_PUBLIC_THEME
+  ? require(
+      process.env.NEXT_PUBLIC_THEME
+        ? `./tailwind-themes/custom/${process.env.NEXT_PUBLIC_THEME}/tailwind.config.js`
+        : "./tailwind-themes/custom/default/tailwind.config.js"
+    )
+  : null;
 
 /** @type {import('tailwindcss').Config} */
 module.exports = customThemes ? merge(baseThemes, customThemes) : baseThemes;
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,4 +17,4 @@ @@
         "lib": "@/lib",
         "hooks": "@/hooks"
       }
-    }
+    }