update colors

danswer-ai · Nov 1, 2024 · 436e1a6 · 436e1a6
1 parent 53a5c29
commit 436e1a6
Show file tree

Hide file tree

Showing 18 changed files with 67 additions and 35 deletions.
diff --git a/web/src/app/admin/add-connector/page.tsx b/web/src/app/admin/add-connector/page.tsx
@@ -100,7 +100,7 @@ export default function Page() {
         title="Add Connector"
         farRightElement={
           <Link href="/admin/indexing/status">
-            <Button variant="navigate">See Connectors</Button>
+            <Button variant="success-reverse">See Connectors</Button>
           </Link>
         }
       />

diff --git a/web/src/app/admin/configuration/llm/LLMConfiguration.tsx b/web/src/app/admin/configuration/llm/LLMConfiguration.tsx
@@ -120,7 +120,7 @@ function AddCustomLLMProvider({
   }
 
   return (
-    <Button variant="next" onClick={() => setFormIsVisible(true)}>
+    <Button variant="navigate" onClick={() => setFormIsVisible(true)}>
       Add Custom LLM Provider
     </Button>
   );

diff --git a/web/src/app/admin/configuration/search/page.tsx b/web/src/app/admin/configuration/search/page.tsx
@@ -160,7 +160,7 @@ function Main() {
           </CardSection>
 
           <Link href="/admin/embeddings">
-            <Button variant="update" className="mt-8">
+            <Button variant="navigate" className="mt-8">
               Update Search Settings
             </Button>
           </Link>

diff --git a/web/src/app/admin/connector/[ccPairId]/ModifyStatusButtonCluster.tsx b/web/src/app/admin/connector/[ccPairId]/ModifyStatusButtonCluster.tsx
@@ -19,7 +19,7 @@ export function ModifyStatusButtonCluster({
       {popup}
       {ccPair.status === ConnectorCredentialPairStatus.PAUSED ? (
         <Button
-          variant="submit"
+          variant="success-reverse"
           onClick={() =>
             setCCPairStatus(
               ccPair.id,
@@ -34,7 +34,7 @@ export function ModifyStatusButtonCluster({
         </Button>
       ) : (
         <Button
-          variant="destructive"
+          variant="default"
           onClick={() =>
             setCCPairStatus(
               ccPair.id,

diff --git a/web/src/app/admin/connector/[ccPairId]/ReIndexButton.tsx b/web/src/app/admin/connector/[ccPairId]/ReIndexButton.tsx
@@ -8,7 +8,7 @@ import { mutate } from "swr";
 import { buildCCPairInfoUrl } from "./lib";
 import { useState } from "react";
 import { Modal } from "@/components/Modal";
-import { Separator } from "@radix-ui/react-separator";
+import { Separator } from "@/components/ui/separator";
 
 function ReIndexPopup({
   connectorId,
@@ -120,7 +120,7 @@ export function ReIndexButton({
       )}
       {popup}
       <Button
-        variant="submit"
+        variant="success-reverse"
         className="ml-auto"
         onClick={() => {
           setReIndexPopupVisible(true);

diff --git a/web/src/app/admin/documents/sets/DocumentSetCreationForm.tsx b/web/src/app/admin/documents/sets/DocumentSetCreationForm.tsx
@@ -342,6 +342,7 @@ export const DocumentSetCreationForm = ({
               <div className="flex mt-6">
                 <Button
                   type="submit"
+                  variant="submit"
                   disabled={props.isSubmitting}
                   className="w-64 mx-auto"
                 >

diff --git a/web/src/app/admin/indexing/status/CCPairIndexingStatusTable.tsx b/web/src/app/admin/indexing/status/CCPairIndexingStatusTable.tsx
@@ -359,7 +359,7 @@ export function CCPairIndexingStatusTable({
   };
   const shouldExpand =
     Object.values(connectorsToggled).filter(Boolean).length <
-    sortedSources.length / 2;
+    sortedSources.length;
 
   return (
     <Table>

diff --git a/web/src/app/admin/indexing/status/page.tsx b/web/src/app/admin/indexing/status/page.tsx
@@ -92,7 +92,7 @@ export default function Status() {
         title="Existing Connectors"
         farRightElement={
           <Link href="/admin/add-connector">
-            <Button variant="navigate">Add Connector</Button>
+            <Button variant="success-reverse">Add Connector</Button>
           </Link>
         }
       />

diff --git a/web/src/app/admin/settings/SettingsForm.tsx b/web/src/app/admin/settings/SettingsForm.tsx
@@ -280,7 +280,7 @@ export function SettingsForm() {
           </Button>
           <Button
             onClick={handleClearChatRetention}
-            variant="secondary"
+            variant="default"
             size="sm"
           >
             Retain All

diff --git a/web/src/app/admin/token-rate-limits/CreateRateLimitModal.tsx b/web/src/app/admin/token-rate-limits/CreateRateLimitModal.tsx
@@ -116,7 +116,7 @@ export const CreateRateLimitModal = ({
         }}
       >
         {({ isSubmitting, values, setFieldValue }) => (
-          <Form>
+          <Form className="overflow-visible px-2">
             {!forSpecificScope && (
               <SelectorFormField
                 name="target_scope"

diff --git a/web/src/app/admin/token-rate-limits/page.tsx b/web/src/app/admin/token-rate-limits/page.tsx
@@ -139,9 +139,9 @@ function Main() {
       </ul>
 
       <Button
-        variant="submit"
+        variant="navigate"
         size="sm"
-        className="my-3"
+        className="my-4"
         onClick={() => setModalIsOpen(true)}
       >
         Create a Token Rate Limit

diff --git a/web/src/app/ee/admin/api-key/page.tsx b/web/src/app/ee/admin/api-key/page.tsx
@@ -117,7 +117,7 @@ function Main() {
 
   const newApiKeyButton = (
     <Button
-      variant="submit"
+      variant="navigate"
       size="sm"
       className="mt-3"
       onClick={() => setShowCreateUpdateForm(true)}

diff --git a/web/src/app/ee/admin/groups/page.tsx b/web/src/app/ee/admin/groups/page.tsx
@@ -61,14 +61,17 @@ const Main = () => {
       {popup}
       {isAdmin && (
         <div className="my-3">
-          <Button size="sm" variant="submit" onClick={() => setShowForm(true)}>
+          <Button
+            size="sm"
+            variant="navigate"
+            onClick={() => setShowForm(true)}
+          >
             Create New User Group
           </Button>
         </div>
       )}
       {data.length > 0 && (
         <div>
-          {isAdmin && <Separator />}
           <UserGroupsTable
             userGroups={data}
             setPopup={setPopup}

diff --git a/web/src/components/Status.tsx b/web/src/components/Status.tsx
@@ -110,7 +110,7 @@ export function CCPairStatus({
     );
   } else if (disabled) {
     badge = (
-      <Badge variant="secondary" icon={FiPauseCircle}>
+      <Badge variant="paused" icon={FiPauseCircle}>
         Paused
       </Badge>
     );

diff --git a/web/src/components/admin/connectors/Field.tsx b/web/src/components/admin/connectors/Field.tsx
@@ -1,4 +1,3 @@
-import { Button } from "@/components/ui/button";
 import {
   ArrayHelpers,
   ErrorMessage,
@@ -9,7 +8,14 @@ import {
 } from "formik";
 import * as Yup from "yup";
 import { FormBodyBuilder } from "./types";
-import { DefaultDropdown, StringOrNumberOption } from "@/components/Dropdown";
+import { StringOrNumberOption } from "@/components/Dropdown";
+import {
+  Select,
+  SelectItem,
+  SelectContent,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { FiInfo, FiPlus, FiX } from "react-icons/fi";
 import {
   TooltipProvider,
@@ -22,6 +28,7 @@ import { FaMarkdown } from "react-icons/fa";
 import { useState } from "react";
 import remarkGfm from "remark-gfm";
 import { EditIcon } from "@/components/icons/icons";
+import { Button } from "@/components/ui/button";
 
 export function SectionHeader({
   children,
@@ -607,15 +614,32 @@ export function SelectorFormField({
       )}
       {subtext && <SubLabel>{subtext}</SubLabel>}
       <div className="mt-2">
-        <DefaultDropdown
-          options={options}
-          selected={field.value}
-          onSelect={onSelect || ((selected) => setFieldValue(name, selected))}
-          includeDefault={includeDefault}
-          side={side}
-          maxHeight={maxHeight}
+        <Select
+          value={field.value}
+          onValueChange={
+            onSelect || ((selected) => setFieldValue(name, selected))
+          }
           defaultValue={defaultValue}
-        />
+        >
+          <SelectTrigger>
+            <SelectValue
+              placeholder={includeDefault ? "Select..." : undefined}
+            />
+          </SelectTrigger>
+          <SelectContent
+            side={side}
+            className={maxHeight ? `max-h-[${maxHeight}]` : undefined}
+          >
+            {includeDefault && (
+              <SelectItem value="default">Select...</SelectItem>
+            )}
+            {options.map((option) => (
+              <SelectItem key={option.value} value={String(option.value)}>
+                {option.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
       </div>
 
       <ErrorMessage

diff --git a/web/src/components/ui/badge.tsx b/web/src/components/ui/badge.tsx
@@ -11,9 +11,10 @@ const badgeVariants = cva(
         orange:
           "border-orange-200 bg-orange-50 text-orange-600 hover:bg-orange-75 dark:bg-orange-900 dark:text-neutral-50 dark:hover:bg-orange-850",
         paused:
-          "border-blue-200 bg-blue-50 text-blue-600 hover:bg-blue-75 dark:bg-blue-900 dark:text-neutral-50 dark:hover:bg-blue-850",
-        in_progress:
           "border-amber-200 bg-amber-50 text-amber-600 hover:bg-amber-75 dark:bg-amber-900 dark:text-neutral-50 dark:hover:bg-amber-850",
+        in_progress:
+          "border-blue-200 bg-blue-50 text-blue-600 hover:bg-blue-75 dark:bg-blue-900 dark:text-neutral-50 dark:hover:bg-blue-850",
+
         purple:
           "border-purple-400 bg-purple-50 text-purple-600 hover:bg-purple-75 dark:bg-purple-900 dark:text-neutral-50 dark:hover:bg-purple-850",
         success:

diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
@@ -12,7 +12,8 @@ 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-600 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-green-100 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",
         "default-reverse":
@@ -37,15 +38,17 @@ const buttonVariants = cva(
         "link-reverse":
           "text-neutral-50 underline-offset-4 hover:underline dark:text-neutral-900",
         submit:
-          "bg-blue-600 text-neutral-50 hover:bg-blue-600/80 dark:bg-blue-600 dark:text-neutral-50 dark:hover:bg-blue-600/90",
+          "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-blue-600 text-neutral-50 hover:bg-blue-600/80 dark:bg-blue-600 dark:text-neutral-50 dark:hover:bg-blue-600/90",
         "submit-reverse":
           "bg-neutral-50 text-blue-600 hover:bg-neutral-50/80 dark:bg-neutral-50 dark:text-blue-600 dark:hover:bg-neutral-50/90",
         navigate:
           "bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700",
         "navigate-reverse":
           "bg-white text-blue-500 hover:bg-blue-50 dark:bg-blue-100 dark:hover:bg-blue-200",
         update:
-          "bg-neutral-100 text-neutral-900 hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80",
+          "border border-neutral-300 bg-neutral-100 text-neutral-900 hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80",
         "update-reverse":
           "bg-neutral-900 text-neutral-100 hover:bg-neutral-900/80 dark:bg-neutral-50 dark:text-neutral-800 dark:hover:bg-neutral-50/80",
         next: "bg-neutral-700 text-neutral-50 hover:bg-neutral-700/90 dark:bg-neutral-600 dark:text-neutral-50 dark:hover:bg-neutral-600/90",

diff --git a/web/src/components/ui/callout.tsx b/web/src/components/ui/callout.tsx
@@ -21,9 +21,9 @@ export function Callout({
         "my-6 flex items-start rounded-md border border-l-4 p-4",
         className,
         {
-          "border-red-900 bg-red-50": type === "danger",
-          "border-yellow-900 bg-yellow-50": type === "warning",
-          "border-blue-900 bg-blue-50": type === "notice",
+          "border-rose-300 bg-rose-50": type === "danger",
+          "border-amber-300 bg-amber-50": type === "warning",
+          "border-sky-300 bg-sky-50": type === "notice",
         }
       )}
       {...props}