chore(frontend): Standardize custom colors used throughout the app (#6833)

2025-12-26 05:48:36 +08:00 · 2025-02-20 20:13:50 +04:00 · 2025-02-20 20:13:50 +04:00 · 2f14e53746
commit 2f14e53746
parent 52723061b1
30 changed files with 63 additions and 61 deletions
--- a/frontend/src/components/features/controls/agent-status-bar.tsx
+++ b/frontend/src/components/features/controls/agent-status-bar.tsx
@ -55,7 +55,7 @@ export function AgentStatusBar() {

  return (
    <div className="flex flex-col items-center">
-      <div className="flex items-center bg-neutral-800 px-2 py-1 text-gray-400 rounded-[100px] text-sm gap-[6px]">
+      <div className="flex items-center bg-base-secondary px-2 py-1 text-gray-400 rounded-[100px] text-sm gap-[6px]">
        <div
          className={`w-2 h-2 rounded-full animate-pulse ${AGENT_STATUS_MAP[curAgentState].indicator}`}
        />
--- a/frontend/src/components/features/conversation-panel/conversation-panel.tsx
+++ b/frontend/src/components/features/conversation-panel/conversation-panel.tsx
@ -73,7 +73,7 @@ export function ConversationPanel({ onClose }: ConversationPanelProps) {
    <div
      ref={ref}
      data-testid="conversation-panel"
-      className="w-[350px] h-full border border-neutral-700 bg-neutral-800 rounded-xl overflow-y-auto"
+      className="w-[350px] h-full border border-neutral-700 bg-base-secondary rounded-xl overflow-y-auto"
    >
      <div className="pt-4 px-4 flex items-center justify-between">
        {isFetching && <LoadingSpinner size="small" />}
--- a/frontend/src/components/features/file-explorer/file-explorer-header.tsx
+++ b/frontend/src/components/features/file-explorer/file-explorer-header.tsx
@ -19,7 +19,7 @@ export function FileExplorerHeader({
  return (
    <div
      className={cn(
-        "sticky top-0 bg-neutral-800",
+        "sticky top-0 bg-base-secondary",
        "flex items-center",
        !isOpen ? "justify-center" : "justify-between",
      )}
--- a/frontend/src/components/features/file-explorer/file-explorer.tsx
+++ b/frontend/src/components/features/file-explorer/file-explorer.tsx
@ -54,7 +54,7 @@ export function FileExplorer({ isOpen, onToggle }: FileExplorerProps) {
    <div data-testid="file-explorer" className="relative h-full">
      <div
        className={cn(
-          "bg-neutral-800 h-full border-r-1 border-r-neutral-600 flex flex-col",
+          "bg-base-secondary h-full border-r-1 border-r-neutral-600 flex flex-col",
          !isOpen ? "w-12" : "w-60",
        )}
      >
--- a/frontend/src/components/features/settings/brand-button.tsx
+++ b/frontend/src/components/features/settings/brand-button.tsx
@ -28,8 +28,8 @@ export function BrandButton({
      onClick={onClick}
      className={cn(
        "w-fit p-2 rounded disabled:opacity-30 disabled:cursor-not-allowed",
-        variant === "primary" && "bg-[#C9B974] text-[#0D0F11]",
-        variant === "secondary" && "border border-[#C9B974] text-[#C9B974]",
+        variant === "primary" && "bg-primary text-[#0D0F11]",
+        variant === "secondary" && "border border-primary text-primary",
        className,
      )}
    >
--- a/frontend/src/components/features/settings/key-status-icon.tsx
+++ b/frontend/src/components/features/settings/key-status-icon.tsx
@ -8,9 +8,7 @@ interface KeyStatusIconProps {
 export function KeyStatusIcon({ isSet }: KeyStatusIconProps) {
  return (
    <span data-testid={isSet ? "set-indicator" : "unset-indicator"}>
-      <SuccessIcon
-        className={cn(isSet ? "text-[#A5E75E]" : "text-[#E76A5E]")}
-      />
+      <SuccessIcon className={cn(isSet ? "text-success" : "text-danger")} />
    </span>
  );
 }
--- a/frontend/src/components/features/settings/optional-tag.tsx
+++ b/frontend/src/components/features/settings/optional-tag.tsx
@ -1,3 +1,3 @@
 export function OptionalTag() {
-  return <span className="text-xs text-[#B7BDC2]">(Optional)</span>;
+  return <span className="text-xs text-tertiary-alt">(Optional)</span>;
 }
--- a/frontend/src/components/features/settings/settings-dropdown-input.tsx
+++ b/frontend/src/components/features/settings/settings-dropdown-input.tsx
@ -38,12 +38,12 @@ export function SettingsDropdownInput({
        isDisabled={isDisabled}
        className="w-full"
        classNames={{
-          popoverContent: "bg-[#454545] rounded-xl border border-[#717888]",
+          popoverContent: "bg-tertiary rounded-xl border border-[#717888]",
        }}
        inputProps={{
          classNames: {
            inputWrapper:
-              "bg-[#454545] border border-[#717888] h-10 w-full rounded p-2 placeholder:italic",
+              "bg-tertiary border border-[#717888] h-10 w-full rounded p-2 placeholder:italic",
          },
        }}
      >
--- a/frontend/src/components/features/settings/settings-input.tsx
+++ b/frontend/src/components/features/settings/settings-input.tsx
@ -44,7 +44,7 @@ export function SettingsInput({
        defaultValue={defaultValue}
        placeholder={placeholder}
        className={cn(
-          "bg-[#454545] border border-[#717888] h-10 w-full rounded p-2 placeholder:italic placeholder:text-[#B7BDC2]",
+          "bg-tertiary border border-[#717888] h-10 w-full rounded p-2 placeholder:italic placeholder:text-tertiary-alt",
          "disabled:bg-[#2D2F36] disabled:border-[#2D2F36] disabled:cursor-not-allowed",
        )}
      />
--- a/frontend/src/components/features/settings/settings-switch.tsx
+++ b/frontend/src/components/features/settings/settings-switch.tsx
@ -40,7 +40,7 @@ export function SettingsSwitch({
      <div className="flex items-center gap-1">
        <span className="text-sm">{children}</span>
        {isBeta && (
-          <span className="text-[11px] leading-4 text-[#0D0F11] font-[500] tracking-tighter bg-[#C9B974] px-1 rounded-full">
+          <span className="text-[11px] leading-4 text-[#0D0F11] font-[500] tracking-tighter bg-primary px-1 rounded-full">
            Beta
          </span>
        )}
--- a/frontend/src/components/features/settings/styled-switch-component.tsx
+++ b/frontend/src/components/features/settings/styled-switch-component.tsx
@ -11,14 +11,14 @@ export function StyledSwitchComponent({
    <div
      className={cn(
        "w-12 h-6 rounded-xl flex items-center p-1.5 cursor-pointer",
-        isToggled && "justify-end bg-[#C9B974]",
-        !isToggled && "justify-start bg-[#1F2228] border border-[#B7BDC2]",
+        isToggled && "justify-end bg-primary",
+        !isToggled && "justify-start bg-[#1F2228] border border-tertiary-alt",
      )}
    >
      <div
        className={cn(
          "bg-[#1F2228] w-3 h-3 rounded-xl",
-          isToggled ? "bg-[#1F2228]" : "bg-[#B7BDC2]",
+          isToggled ? "bg-[#1F2228]" : "bg-tertiary-alt",
        )}
      />
    </div>
--- a/frontend/src/components/layout/beta-badge.tsx
+++ b/frontend/src/components/layout/beta-badge.tsx
@ -4,7 +4,7 @@ import { I18nKey } from "#/i18n/declaration";
 export function BetaBadge() {
  const { t } = useTranslation();
  return (
-    <span className="text-[11px] leading-5 text-root-primary bg-neutral-400 px-1 rounded-xl">
+    <span className="text-[11px] leading-5 text-base bg-neutral-400 px-1 rounded-xl">
      {t(I18nKey.BADGE$BETA)}
    </span>
  );
--- a/frontend/src/components/layout/container.tsx
+++ b/frontend/src/components/layout/container.tsx
@ -23,7 +23,7 @@ export function Container({
  return (
    <div
      className={clsx(
-        "bg-neutral-800 border border-neutral-600 rounded-xl flex flex-col",
+        "bg-base-secondary border border-neutral-600 rounded-xl flex flex-col",
        className,
      )}
    >
--- a/frontend/src/components/layout/count-badge.tsx
+++ b/frontend/src/components/layout/count-badge.tsx
@ -1,6 +1,6 @@
 export function CountBadge({ count }: { count: number }) {
  return (
-    <span className="text-[11px] leading-5 text-root-primary bg-neutral-400 px-1 rounded-xl">
+    <span className="text-[11px] leading-5 text-base bg-neutral-400 px-1 rounded-xl">
      {count}
    </span>
  );
--- a/frontend/src/components/layout/nav-tab.tsx
+++ b/frontend/src/components/layout/nav-tab.tsx
@ -17,10 +17,10 @@ export function NavTab({ to, label, icon, isBeta }: NavTabProps) {
      to={to}
      className={({ isActive }) =>
        cn(
-          "px-2 border-b border-r border-neutral-600 bg-root-primary flex-1",
+          "px-2 border-b border-r border-neutral-600 bg-base flex-1",
          "first-of-type:rounded-tl-xl last-of-type:rounded-tr-xl last-of-type:border-r-0",
          "flex items-center gap-2",
-          isActive && "bg-root-secondary",
+          isActive && "bg-base-secondary",
        )
      }
    >
--- a/frontend/src/components/shared/action-tooltip.tsx
+++ b/frontend/src/components/shared/action-tooltip.tsx
@ -27,7 +27,7 @@ export function ActionTooltip({ type, onClick }: ActionTooltipProps) {
            ? t(I18nKey.ACTION$CONFIRM)
            : t(I18nKey.ACTION$REJECT)
        }
-        className="bg-neutral-700 rounded-full p-1 hover:bg-neutral-800"
+        className="bg-neutral-700 rounded-full p-1 hover:bg-base-secondary"
        onClick={onClick}
      >
        {type === "confirm" ? <ConfirmIcon /> : <RejectIcon />}
--- a/frontend/src/components/shared/hero-heading.tsx
+++ b/frontend/src/components/shared/hero-heading.tsx
@ -18,7 +18,7 @@ export function HeroHeading() {
            rel="noopener noreferrer"
            target="_blank"
            href="https://docs.all-hands.dev/modules/usage/getting-started"
-            className="text-hyperlink underline underline-offset-[3px]"
+            className="text-white underline underline-offset-[3px]"
          >
            {t(I18nKey.LANDING$START_HELP_LINK)}
          </a>
--- a/frontend/src/components/shared/modals/base-modal/base-modal.tsx
+++ b/frontend/src/components/shared/modals/base-modal/base-modal.tsx
@ -43,7 +43,7 @@ export function BaseModal({
      backdrop="blur"
      hideCloseButton
      size="sm"
-      className="bg-neutral-900 rounded-lg"
+      className="bg-base rounded-lg"
    >
      <ModalContent className={contentClassName}>
        {(closeModal) => (
--- a/frontend/src/components/shared/modals/modal-body.tsx
+++ b/frontend/src/components/shared/modals/modal-body.tsx
@ -12,7 +12,7 @@ export function ModalBody({ testID, children, className }: ModalBodyProps) {
    <div
      data-testid={testID}
      className={cn(
-        "bg-root-primary flex flex-col gap-6 items-center w-[384px] p-6 rounded-xl",
+        "bg-base flex flex-col gap-6 items-center w-[384px] p-6 rounded-xl",
        className,
      )}
    >
--- a/frontend/src/components/shared/modals/security/invariant/invariant.tsx
+++ b/frontend/src/components/shared/modals/security/invariant/invariant.tsx
@ -247,7 +247,7 @@ function SecurityInvariant() {

  return (
    <div className="flex flex-1 w-full h-full">
-      <div className="w-60 bg-neutral-800 border-r border-r-neutral-600 p-4 flex-shrink-0">
+      <div className="w-60 bg-base-secondary border-r border-r-neutral-600 p-4 flex-shrink-0">
        <div className="text-center mb-2">
          <InvariantLogoIcon className="mx-auto mb-1" />
          <b>{t(I18nKey.INVARIANT$INVARIANT_ANALYZER_LABEL)}</b>
@ -285,7 +285,7 @@ function SecurityInvariant() {
          </div>
        </ul>
      </div>
-      <div className="flex flex-col min-h-0 w-full overflow-y-auto bg-neutral-900">
+      <div className="flex flex-col min-h-0 w-full overflow-y-auto bg-base">
        {sections[activeSection as SectionType]}
      </div>
    </div>
--- a/frontend/src/components/shared/modals/settings/model-selector.tsx
+++ b/frontend/src/components/shared/modals/settings/model-selector.tsx
@ -84,12 +84,12 @@ export function ModelSelector({
          defaultSelectedKey={selectedProvider ?? undefined}
          selectedKey={selectedProvider}
          classNames={{
-            popoverContent: "bg-[#454545] rounded-xl border border-[#717888]",
+            popoverContent: "bg-tertiary rounded-xl border border-[#717888]",
          }}
          inputProps={{
            classNames: {
              inputWrapper:
-                "bg-[#454545] border border-[#717888] h-10 w-full rounded p-2 placeholder:italic",
+                "bg-tertiary border border-[#717888] h-10 w-full rounded p-2 placeholder:italic",
            },
          }}
        >
@ -135,12 +135,12 @@ export function ModelSelector({
          selectedKey={selectedModel}
          defaultSelectedKey={selectedModel ?? undefined}
          classNames={{
-            popoverContent: "bg-[#454545] rounded-xl border border-[#717888]",
+            popoverContent: "bg-tertiary rounded-xl border border-[#717888]",
          }}
          inputProps={{
            classNames: {
              inputWrapper:
-                "bg-[#454545] border border-[#717888] h-10 w-full rounded p-2 placeholder:italic",
+                "bg-tertiary border border-[#717888] h-10 w-full rounded p-2 placeholder:italic",
            },
          }}
        >
--- a/frontend/src/components/shared/modals/settings/settings-modal.tsx
+++ b/frontend/src/components/shared/modals/settings/settings-modal.tsx
@ -21,7 +21,7 @@ export function SettingsModal({ onClose, settings }: SettingsModalProps) {
    <ModalBackdrop>
      <div
        data-testid="ai-config-modal"
-        className="bg-root-primary min-w-[384px] p-6 rounded-xl flex flex-col gap-2"
+        className="bg-base min-w-[384px] p-6 rounded-xl flex flex-col gap-2"
      >
        {aiConfigOptions.error && (
          <p className="text-danger text-xs">{aiConfigOptions.error.message}</p>
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@ -4,18 +4,19 @@
  --bg-input: #393939;
  --bg-workspace: #1f2228;
  --border: #3c3c4a;
-  --text-editor-base: #9099AC;
-  --text-editor-active:#C4CBDA;
-  --bg-editor-sidebar: #24272E;
-  --bg-editor-active: #31343D;
-  --border-editor-sidebar: #3C3C4A;
-  background-color: var(--neutral-900) !important;
+  --text-editor-base: #9099ac;
+  --text-editor-active: #c4cbda;
+  --bg-editor-sidebar: #24272e;
+  --bg-editor-active: #31343d;
+  --border-editor-sidebar: #3c3c4a;
+  background-color: var(--base) !important;
  --bg-neutral-muted: #afb8c133;
 }

 body {
  margin: 0;
-  font-family: -apple-system, "SF Pro", BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+  font-family:
+    -apple-system, "SF Pro", BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
@ -23,8 +24,8 @@ body {
 }

 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-family:
+    source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 }

 .markdown-body code {
@ -52,6 +53,7 @@ code {
  text-align: left;
 }

-.markdown-body th, .markdown-body td {
+.markdown-body th,
+.markdown-body td {
  padding: 0.1rem 1rem;
 }
--- a/frontend/src/routes/_oh._index/route.tsx
+++ b/frontend/src/routes/_oh._index/route.tsx
@ -29,7 +29,7 @@ function Home() {
  const latestConversation = localStorage.getItem("latest_conversation_id");

  return (
-    <div className="bg-root-secondary h-full rounded-xl flex flex-col items-center justify-center relative overflow-y-auto px-2">
+    <div className="bg-base-secondary h-full rounded-xl flex flex-col items-center justify-center relative overflow-y-auto px-2">
      <HeroHeading />
      <div className="flex flex-col gap-8 w-full md:w-[600px] items-center">
        <div className="flex flex-col gap-2 w-full">
--- a/frontend/src/routes/_oh.app._index/route.tsx
+++ b/frontend/src/routes/_oh.app._index/route.tsx
@ -75,7 +75,7 @@ function FileViewer() {
  };

  return (
-    <div className="flex h-full bg-neutral-900 relative">
+    <div className="flex h-full bg-base relative">
      <FileExplorer isOpen={fileExplorerIsOpen} onToggle={toggleFileExplorer} />
      <div className="w-full h-full flex flex-col">
        {selectedPath && (
--- a/frontend/src/routes/_oh.app/route.tsx
+++ b/frontend/src/routes/_oh.app/route.tsx
@ -127,7 +127,7 @@ function AppContent() {
        orientation={Orientation.HORIZONTAL}
        className="grow h-full min-h-0 min-w-0"
        initialSize={500}
-        firstClassName="rounded-xl overflow-hidden border border-neutral-600 bg-neutral-800"
+        firstClassName="rounded-xl overflow-hidden border border-neutral-600 bg-base-secondary"
        secondClassName="flex flex-col overflow-hidden"
        firstChild={<ChatInterface />}
        secondChild={
--- a/frontend/src/routes/_oh/route.tsx
+++ b/frontend/src/routes/_oh/route.tsx
@ -91,7 +91,7 @@ export default function MainApp() {
  return (
    <div
      data-testid="root-layout"
-      className="bg-root-primary p-3 h-screen md:min-w-[1024px] overflow-x-hidden flex flex-col md:flex-row gap-3"
+      className="bg-base p-3 h-screen md:min-w-[1024px] overflow-x-hidden flex flex-col md:flex-row gap-3"
    >
      <Sidebar />

--- a/frontend/src/routes/account-settings.tsx
+++ b/frontend/src/routes/account-settings.tsx
@ -388,7 +388,7 @@ function AccountSettings() {
        </div>
      </form>

-      <footer className="flex gap-6 p-6 justify-end border-t border-t-[#454545]">
+      <footer className="flex gap-6 p-6 justify-end border-t border-t-tertiary">
        <BrandButton
          type="button"
          variant="secondary"
@ -411,7 +411,7 @@ function AccountSettings() {
        <ModalBackdrop>
          <div
            data-testid="reset-modal"
-            className="bg-root-primary p-4 rounded-xl flex flex-col gap-4"
+            className="bg-base p-4 rounded-xl flex flex-col gap-4"
          >
            <p>Are you sure you want to reset all settings?</p>
            <div className="w-full flex gap-2">
--- a/frontend/src/routes/settings.tsx
+++ b/frontend/src/routes/settings.tsx
@ -11,9 +11,9 @@ function SettingsScreen() {
  return (
    <main
      data-testid="settings-screen"
-      className="bg-[#24272E] border border-[#454545] h-full rounded-xl flex flex-col"
+      className="bg-base-secondary border border-tertiary h-full rounded-xl flex flex-col"
    >
-      <header className="px-3 py-1.5 border-b border-b-[#454545] flex items-center gap-2">
+      <header className="px-3 py-1.5 border-b border-b-tertiary flex items-center gap-2">
        <SettingsIcon width={16} height={16} />
        <h1 className="text-sm leading-6">Settings</h1>
      </header>
@ -21,7 +21,7 @@ function SettingsScreen() {
      {isSaas && BILLING_SETTINGS() && (
        <nav
          data-testid="settings-navbar"
-          className="flex items-end gap-12 px-11 border-b border-[#454545]"
+          className="flex items-end gap-12 px-11 border-b border-tertiary"
        >
          {[
            { to: "/settings", text: "Account" },
@ -34,7 +34,7 @@ function SettingsScreen() {
              className={({ isActive }) =>
                cn(
                  "border-b-2 border-transparent py-2.5",
-                  isActive && "border-[#C9B974]",
+                  isActive && "border-primary",
                )
              }
            >
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 import { heroui } from "@heroui/react";
-import typography from '@tailwindcss/typography';
+import typography from "@tailwindcss/typography";
 export default {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
@ -9,11 +9,13 @@ export default {
  theme: {
    extend: {
      colors: {
-        'root-primary': '#171717',
-        'root-secondary': '#262626',
-        'hyperlink': '#007AFF',
-        'danger': '#EF3744',
-        'success': '#4CAF50',
+        primary: "#C9B974", // nice yellow
+        base: "#171717", // dark background (neutral-900)
+        "base-secondary": "#262626", // lighter background (neutral-800); also used for tooltips
+        danger: "#E76A5E",
+        success: "#A5E75E",
+        tertiary: "#454545", // gray, used for inputs
+        "tertiary-light": "#B7BDC2", // lighter gray, used for borders and placeholder text
      },
    },
  },
@ -32,8 +34,8 @@ export default {
          colors: {
            primary: "#4465DB",
          },
-        }
-      }
+        },
+      },
    }),
    typography,
  ],