New ux dark (#3944)

2025-05-22 01:30:08 +02:00 · 2025-02-09 21:14:32 -08:00 · 2025-02-09 21:14:32 -08:00 · 1454e7e07d
commit 1454e7e07d
parent 6848337445
9 changed files with 70 additions and 46 deletions
--- a/web/public/discord.png
+++ b/web/public/discord.png
--- a/web/public/discord.webp
+++ b/web/public/discord.webp
--- a/web/src/app/admin/connectors/[connector]/AddConnectorPage.tsx
+++ b/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
-                          className="mt-6 text-sm bg-background-900 px-2 py-1.5 flex text-text-200 flex-none rounded mr-4"
+                        <Button
+                          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 ||
--- a/web/src/app/chat/modal/UserSettingsModal.tsx
+++ b/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 value="light">Light</SelectItem>
-                <SelectItem value="dark">Dark</SelectItem>
+                <SelectItem
+                  icon={<Monitor className="h-4 w-4" />}
+                  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>
--- a/web/src/components/credentials/actions/CreateCredential.tsx
+++ b/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 size={16} className="text-indigo-100" />
-        Create
-      </div>
+      <PlusCircleIcon className="h-4 w-4" />
+      Create
    </Button>
  </div>
 );
--- a/web/src/components/credentials/actions/ModifyCredential.tsx
+++ b/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">
-            <th className="p-2 text-left font-medium text-text-600"></th>
-            <th className="p-2 text-left font-medium text-text-600">ID</th>
-            <th className="p-2 text-left font-medium text-text-600">Name</th>
-            <th className="p-2 text-left font-medium text-text-600">Created</th>
-            <th className="p-2 text-left font-medium text-text-600">
+          <tr className="bg-neutral-100 dark:bg-neutral-900">
+            <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-neutral-600 dark:text-neutral-400">
+              ID
+            </th>
+            <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 />
--- a/web/src/components/extension/Shortcuts.tsx
+++ b/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" />
-      <h1 className="text-white text-xs font-medium">New Bookmark</h1>
+      <PlusIcon className="w-8 h-8 text-[#fff] mb-2" />
+      <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=${
-        new URL(url).hostname
-      }&sz=64`;
+      const faviconUrl = isValidUrl
+        ? `https://www.google.com/s2/favicons?domain=${new URL(
+            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"}
--- a/web/src/components/icons/icons.tsx
+++ b/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";
--- a/web/src/components/ui/select.tsx
+++ b/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 && selected && (
-      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-        <SelectPrimitive.ItemIndicator>
-          <Check className="h-4 w-4" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
+    ) : (
+      !hideCheck &&
+      selected && (
+        <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+          <SelectPrimitive.ItemIndicator>
+            <Check className="h-4 w-4" />
+          </SelectPrimitive.ItemIndicator>
+        </span>
+      )
    )}

    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>