New ux dark (#3944)

web/src/app/admin/connectors/[connector]/AddConnectorPage.tsx

@@ -62,6 +62,7 @@ import {
 } from "@/lib/connectors/oauth";
 import { CreateStdOAuthCredential } from "@/components/credentials/actions/CreateStdOAuthCredential";
 import { Spinner } from "@/components/Spinner";
+import { Button } from "@/components/ui/button";
 export interface AdvancedConfig {
   refreshFreq: number;
   pruneFreq: number;
@@ -464,8 +465,9 @@ export default function AddConnector({
                     {!createCredentialFormToggle && (
                       <div className="mt-6 flex space-x-4">
                         {/* Button to pop up a form to manually enter credentials */}
-                        <button
+                        <Button
-                          className="mt-6 text-sm bg-background-900 px-2 py-1.5 flex text-text-200 flex-none rounded mr-4"
+                          variant="secondary"
+                          className="mt-6 text-sm mr-4"
                           onClick={async () => {
                             if (oauthDetails && oauthDetails.oauth_enabled) {
                               if (oauthDetails.additional_kwargs.length > 0) {
@@ -495,7 +497,7 @@ export default function AddConnector({
                           }}
                         >
                           Create New
-                        </button>
+                        </Button>
                         {/* Button to sign in via OAuth */}
                         {oauthSupportedSources.includes(connector) &&
                           (NEXT_PUBLIC_CLOUD_ENABLED ||

web/src/app/chat/modal/UserSettingsModal.tsx

@@ -23,7 +23,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Monitor } from "lucide-react";
+import { Monitor, Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
 
 export function UserSettingsModal({
@@ -239,14 +239,29 @@ export function UserSettingsModal({
             >
               <SelectTrigger className="w-full">
                 <div className="flex items-center gap-2">
-                  <Monitor className="h-4 w-4" />
+                  {theme === "system" ? (
+                    <Monitor className="h-4 w-4" />
+                  ) : theme === "light" ? (
+                    <Sun className="h-4 w-4" />
+                  ) : (
+                    <Moon className="h-4 w-4" />
+                  )}
                   <SelectValue placeholder="Select theme" />
                 </div>
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="system">System</SelectItem>
+                <SelectItem
-                <SelectItem value="light">Light</SelectItem>
+                  icon={<Monitor className="h-4 w-4" />}
-                <SelectItem value="dark">Dark</SelectItem>
+                  value="system"
+                >
+                  System
+                </SelectItem>
+                <SelectItem icon={<Sun className="h-4 w-4" />} value="light">
+                  Light
+                </SelectItem>
+                <SelectItem icon={<Moon className="h-4 w-4" />} value="dark">
+                  Dark
+                </SelectItem>
               </SelectContent>
             </Select>
           </div>

web/src/components/credentials/actions/CreateCredential.tsx

@@ -40,15 +40,12 @@ const CreateButton = ({
 }) => (
   <div className="flex justify-end w-full">
     <Button
-      className="enabled:cursor-pointer disabled:cursor-not-allowed disabled:bg-blue-200 bg-blue-400 flex gap-x-1 items-center text-white py-2.5 px-3.5 text-sm font-regular rounded-sm"
       onClick={onClick}
       type="button"
       disabled={isSubmitting || (!isAdmin && groups.length === 0)}
     >
-      <div className="flex items-center gap-x-1">
+      <PlusCircleIcon className="h-4 w-4" />
-        <PlusCircleIcon size={16} className="text-indigo-100" />
+      Create
-        Create
-      </div>
     </Button>
   </div>
 );

web/src/components/credentials/actions/ModifyCredential.tsx

@@ -62,12 +62,18 @@ const CredentialSelectionTable = ({
     <div className="w-full max-h-[50vh] overflow-auto">
       <table className="w-full text-sm border-collapse">
         <thead className="sticky top-0 w-full">
-          <tr className="bg-background-100">
+          <tr className="bg-neutral-100 dark:bg-neutral-900">
-            <th className="p-2 text-left font-medium text-text-600"></th>
+            <th className="p-2 text-left font-medium text-neutral-600 dark:text-neutral-400"></th>
-            <th className="p-2 text-left font-medium text-text-600">ID</th>
+            <th className="p-2 text-left font-medium text-neutral-600 dark:text-neutral-400">
-            <th className="p-2 text-left font-medium text-text-600">Name</th>
+              ID
-            <th className="p-2 text-left font-medium text-text-600">Created</th>
+            </th>
-            <th className="p-2 text-left font-medium text-text-600">
+            <th className="p-2 text-left font-medium text-neutral-600 dark:text-neutral-400">
+              Name
+            </th>
+            <th className="p-2 text-left font-medium text-neutral-600 dark:text-neutral-400">
+              Created
+            </th>
+            <th className="p-2 text-left font-medium text-neutral-600 dark:text-neutral-400">
               Last Updated
             </th>
             <th />

web/src/components/extension/Shortcuts.tsx

@@ -36,15 +36,15 @@ export const ShortCut = ({
   const [faviconError, setFaviconError] = useState(false);
 
   return (
-    <div className="w-24 h-24 flex-none rounded-xl shadow-lg relative group transition-all duration-300 ease-in-out hover:scale-105 bg-white/10 backdrop-blur-sm">
+    <div className="w-24 h-24 flex-none rounded-xl shadow-lg relative group transition-all duration-300 ease-in-out hover:scale-105 bg-[#fff]/10 backdrop-blur-sm">
       <button
         onClick={(e) => {
           e.stopPropagation();
           onEdit(shortCut);
         }}
-        className="absolute top-1 right-1 p-1 bg-white/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+        className="absolute top-1 right-1 p-1 bg-[#fff]/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-200"
       >
-        <PencilIcon className="w-3 h-3 text-white" />
+        <PencilIcon className="w-3 h-3 text-[#fff]" />
       </button>
       <div
         onClick={() => window.open(shortCut.url, "_blank")}
@@ -61,10 +61,10 @@ export const ShortCut = ({
               onError={() => setFaviconError(true)}
             />
           ) : (
-            <QuestionMarkIcon size={32} className="text-white w-full h-full" />
+            <QuestionMarkIcon size={32} className="text-[#fff] w-full h-full" />
           )}
         </div>
-        <h1 className="text-white w-full text-center font-semibold text-sm truncate px-2">
+        <h1 className="text-[#fff] w-full text-center font-semibold text-sm truncate px-2">
           {shortCut.name}
         </h1>
       </div>
@@ -80,10 +80,10 @@ export const AddShortCut = ({
   return (
     <button
       onClick={openShortCutModal}
-      className="w-24 h-24 flex-none rounded-xl bg-white/10 hover:bg-white/20 backdrop-blur-sm transition-all duration-300 ease-in-out flex flex-col items-center justify-center"
+      className="w-24 h-24 flex-none rounded-xl bg-[#fff]/10 hover:bg-[#fff]/20 backdrop-blur-sm transition-all duration-300 ease-in-out flex flex-col items-center justify-center"
     >
-      <PlusIcon className="w-8 h-8 text-white mb-2" />
+      <PlusIcon className="w-8 h-8 text-[#fff] mb-2" />
-      <h1 className="text-white text-xs font-medium">New Bookmark</h1>
+      <h1 className="text-[#fff] text-xs font-medium">New Bookmark</h1>
     </button>
   );
 };
@@ -111,9 +111,11 @@ export const NewShortCutModal = ({
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     if (isValidUrl) {
-      const faviconUrl = `https://www.google.com/s2/favicons?domain=${
+      const faviconUrl = isValidUrl
-        new URL(url).hostname
+        ? `https://www.google.com/s2/favicons?domain=${new URL(
-      }&sz=64`;
+            url
+          ).hostname.replace(/^(cloud\.)?onyx\.app$/, "onyx.app")}&sz=64`
+        : "";
       onAdd({ name, url, favicon: faviconUrl });
       onClose();
     } else {
@@ -135,14 +137,15 @@ export const NewShortCutModal = ({
   useEffect(() => {
     setIsValidUrl(validateUrl(url));
   }, [url]);
-
   const faviconUrl = isValidUrl
-    ? `https://www.google.com/s2/favicons?domain=${new URL(url).hostname}&sz=64`
+    ? `https://www.google.com/s2/favicons?domain=${new URL(
+        url
+      ).hostname.replace(/^(cloud\.)?onyx\.app$/, "onyx.app")}&sz=64`
     : "";
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="max-w-[95%] sm:max-w-[425px] bg-background-900 border-none text-white">
+      <DialogContent className="max-w-[95%] sm:max-w-[425px] bg-background-900 border-none text-[#fff]">
         <DialogHeader>
           <DialogTitle>
             {editingShortcut ? "Edit Shortcut" : "Add New Shortcut"}
@@ -166,7 +169,7 @@ export const NewShortCutModal = ({
                 id="name"
                 value={name}
                 onChange={(e) => setName(e.target.value)}
-                className="w-full bg-background-800 border-background-700 text-white"
+                className="w-full bg-background-800 border-background-700 text-[#fff]"
                 placeholder="Enter shortcut name"
               />
             </div>
@@ -181,7 +184,7 @@ export const NewShortCutModal = ({
                 id="url"
                 value={url}
                 onChange={handleUrlChange}
-                className={`bg-background-800 border-background-700 text-white ${
+                className={`bg-background-800 border-background-700 text-[#fff] ${
                   !isValidUrl && url ? "border-red-500" : ""
                 }`}
                 placeholder="https://example.com"
@@ -213,7 +216,7 @@ export const NewShortCutModal = ({
           <DialogFooter>
             <Button
               type="submit"
-              className="bg-blue-600 hover:bg-blue-700 text-white"
+              className="bg-blue-600 hover:bg-blue-700 text-[#fff]"
               disabled={!isValidUrl || !name}
             >
               {editingShortcut ? "Save Changes" : "Add Shortcut"}

web/src/components/icons/icons.tsx

@@ -68,7 +68,7 @@ import zendeskIcon from "../../../public/Zendesk.svg";
 import dropboxIcon from "../../../public/Dropbox.png";
 import egnyteIcon from "../../../public/Egnyte.png";
 import slackIcon from "../../../public/Slack.png";
-import discordIcon from "../../../public/discord.png";
+import discordIcon from "../../../public/discord.webp";
 import airtableIcon from "../../../public/Airtable.svg";
 
 import s3Icon from "../../../public/S3.png";

web/src/components/ui/select.tsx

@@ -133,18 +133,19 @@ const SelectItem = React.forwardRef<
     )}
     {...props}
   >
-    {icon && (
+    {icon ? (
       <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
         {typeof icon === "function" ? icon({ size: 16, className: "" }) : icon}
       </span>
-    )}
+    ) : (
-
+      !hideCheck &&
-    {!hideCheck && selected && (
+      selected && (
-      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-        <SelectPrimitive.ItemIndicator>
+          <SelectPrimitive.ItemIndicator>
-          <Check className="h-4 w-4" />
+            <Check className="h-4 w-4" />
-        </SelectPrimitive.ItemIndicator>
+          </SelectPrimitive.ItemIndicator>
-      </span>
+        </span>
+      )
     )}
 
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>