hotfix(frontend): Consistent buttons and their styles throughout the app (#6835)

Co-authored-by: Robert Brennan <accounts@rbren.io>
2025-12-26 05:48:36 +08:00 · 2025-02-26 23:43:58 +04:00 · 2025-02-26 23:43:58 +04:00 · d5f7dde7c9
commit d5f7dde7c9
parent 4f98bce6df
35 changed files with 137 additions and 123 deletions
--- a/frontend/tests/components/modals/settings/brand-button.test.tsx
+++ b/frontend/tests/components/modals/settings/brand-button.test.tsx
@ -36,4 +36,20 @@ describe("BrandButton", () => {

    expect(screen.getByText("Test Button")).toBeDisabled();
  });
+
+  it("should pass a start content", () => {
+    render(
+      <BrandButton
+        type="button"
+        variant="primary"
+        startContent={
+          <div data-testid="custom-start-content">Start Content</div>
+        }
+      >
+        Test Button
+      </BrandButton>,
+    );
+
+    screen.getByTestId("custom-start-content");
+  });
 });
--- a/frontend/src/assets/branding/github-logo.svg
+++ b/frontend/src/assets/branding/github-logo.svg
@ -1,5 +1,5 @@
 <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M15.359 21V17.319C15.3974 16.8654 15.3314 16.4095 15.1651 15.9814C14.9989 15.5534 14.7363 15.1631 14.3949 14.8364C17.6154 14.5035 21 13.3716 21 8.17826C20.9997 6.85027 20.4489 5.57321 19.4615 4.61139C19.9291 3.44954 19.896 2.16532 19.3692 1.02548C19.3692 1.02548 18.159 0.692576 15.359 2.43321C13.0082 1.84237 10.5302 1.84237 8.17949 2.43321C5.37949 0.692576 4.16923 1.02548 4.16923 1.02548C3.64244 2.16532 3.60938 3.44954 4.07692 4.61139C3.08218 5.58034 2.53079 6.86895 2.53846 8.2068C2.53846 13.3621 5.92308 14.494 9.14359 14.865C8.80615 15.1883 8.54591 15.574 8.3798 15.9968C8.2137 16.4196 8.14544 16.8701 8.17949 17.319V21M8.17949 18.1465C3.05128 19.5732 3.05128 15.7686 1 15.293L8.17949 18.1465Z"
-    stroke="white" stroke-linecap="round" stroke-linejoin="round" />
+    stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
 </svg>
--- a/frontend/src/components/features/analytics/analytics-consent-form-modal.tsx
+++ b/frontend/src/components/features/analytics/analytics-consent-form-modal.tsx
@ -1,4 +1,3 @@
-import { ModalButton } from "#/components/shared/buttons/modal-button";
 import {
  BaseModalTitle,
  BaseModalDescription,
@ -7,6 +6,7 @@ import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
 import { ModalBody } from "#/components/shared/modals/modal-body";
 import { useCurrentSettings } from "#/context/settings-context";
 import { handleCaptureConsent } from "#/utils/handle-capture-consent";
+import { BrandButton } from "../settings/brand-button";

 interface AnalyticsConsentFormModalProps {
  onClose: () => void;
@ -40,7 +40,7 @@ export function AnalyticsConsentFormModal({
        onSubmit={handleSubmit}
        className="flex flex-col gap-2"
      >
-        <ModalBody>
+        <ModalBody className="border border-tertiary">
          <BaseModalTitle title="Your Privacy Preferences" />
          <BaseModalDescription>
            We use tools to understand how our application is used to improve
@ -53,12 +53,14 @@ export function AnalyticsConsentFormModal({
            Send anonymous usage data
          </label>

-          <ModalButton
+          <BrandButton
            testId="confirm-preferences"
            type="submit"
-            text="Confirm Preferences"
-            className="bg-primary text-white w-full hover:opacity-80"
-          />
+            variant="primary"
+            className="w-full"
+          >
+            Confirm Preferences
+          </BrandButton>
        </ModalBody>
      </form>
    </ModalBackdrop>
--- a/frontend/src/components/features/chat/chat-message.tsx
+++ b/frontend/src/components/features/chat/chat-message.tsx
@ -47,7 +47,7 @@ export function ChatMessage({
      className={cn(
        "rounded-xl relative",
        "flex flex-col gap-2",
-        type === "user" && " max-w-[305px] p-4 bg-neutral-700 self-end",
+        type === "user" && " max-w-[305px] p-4 bg-tertiary self-end",
        type === "assistant" && "mt-6 max-w-full bg-tranparent",
      )}
    >
--- a/frontend/src/components/features/chat/chat-suggestions.tsx
+++ b/frontend/src/components/features/chat/chat-suggestions.tsx
@ -13,7 +13,7 @@ export function ChatSuggestions({ onSuggestionsClick }: ChatSuggestionsProps) {

  return (
    <div className="flex flex-col gap-6 h-full px-4 items-center justify-center">
-      <div className="flex flex-col items-center p-4 bg-neutral-700 rounded-xl w-full">
+      <div className="flex flex-col items-center p-4 bg-tertiary rounded-xl w-full">
        <BuildIt width={45} height={54} />
        <span className="font-semibold text-[20px] leading-6 -tracking-[0.01em] gap-1">
          {t(I18nKey.LANDING$TITLE)}
--- a/frontend/src/components/features/chat/interactive-chat-box.tsx
+++ b/frontend/src/components/features/chat/interactive-chat-box.tsx
@ -59,7 +59,7 @@ export function InteractiveChatBox({
      <div
        className={cn(
          "flex items-end gap-1",
-          "bg-neutral-700 border border-neutral-600 rounded-lg px-2",
+          "bg-tertiary border border-neutral-600 rounded-lg px-2",
          "transition-colors duration-200",
          "hover:border-neutral-500 focus-within:border-neutral-500",
        )}
--- a/frontend/src/components/features/chat/typing-indicator.tsx
+++ b/frontend/src/components/features/chat/typing-indicator.tsx
@ -1,6 +1,6 @@
 export function TypingIndicator() {
  return (
-    <div className="flex items-center space-x-1.5 bg-neutral-700 px-3 py-1.5 rounded-full">
+    <div className="flex items-center space-x-1.5 bg-tertiary px-3 py-1.5 rounded-full">
      <span
        className="w-1.5 h-1.5 bg-gray-400 rounded-full animate-[bounce_0.5s_infinite] translate-y-[-2px]"
        style={{ animationDelay: "0ms" }}
--- a/frontend/src/components/features/context-menu/context-menu.tsx
+++ b/frontend/src/components/features/context-menu/context-menu.tsx
@ -18,7 +18,7 @@ export function ContextMenu({
    <ul
      data-testid={testId}
      ref={ref}
-      className={cn("bg-[#404040] rounded-md w-[140px]", className)}
+      className={cn("bg-tertiary rounded-md w-[140px]", className)}
    >
      {children}
    </ul>
--- a/frontend/src/components/features/conversation-panel/confirm-delete-modal.tsx
+++ b/frontend/src/components/features/conversation-panel/confirm-delete-modal.tsx
@ -1,10 +1,10 @@
-import { ModalButton } from "#/components/shared/buttons/modal-button";
 import {
  BaseModalDescription,
  BaseModalTitle,
 } from "#/components/shared/modals/confirmation-modals/base-modal";
 import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
 import { ModalBody } from "#/components/shared/modals/modal-body";
+import { BrandButton } from "../settings/brand-button";

 interface ConfirmDeleteModalProps {
  onConfirm: () => void;
@ -17,7 +17,7 @@ export function ConfirmDeleteModal({
 }: ConfirmDeleteModalProps) {
  return (
    <ModalBackdrop>
-      <ModalBody className="items-start">
+      <ModalBody className="items-start border border-tertiary">
        <div className="flex flex-col gap-2">
          <BaseModalTitle title="Are you sure you want to delete this project?" />
          <BaseModalDescription description="All data associated with this project will be lost." />
@ -26,16 +26,22 @@ export function ConfirmDeleteModal({
          className="flex flex-col gap-2 w-full"
          onClick={(event) => event.stopPropagation()}
        >
-          <ModalButton
+          <BrandButton
+            type="button"
+            variant="primary"
            onClick={onConfirm}
-            className="bg-danger font-bold"
-            text="Confirm"
-          />
-          <ModalButton
+            className="w-full"
+          >
+            Confirm
+          </BrandButton>
+          <BrandButton
+            type="button"
+            variant="secondary"
            onClick={onCancel}
-            className="bg-neutral-500 font-bold"
-            text="Cancel"
-          />
+            className="w-full"
+          >
+            Cancel
+          </BrandButton>
        </div>
      </ModalBody>
    </ModalBackdrop>
--- a/frontend/src/components/features/conversation-panel/exit-conversation-modal.tsx
+++ b/frontend/src/components/features/conversation-panel/exit-conversation-modal.tsx
@ -25,7 +25,7 @@ export function ExitConversationModal({
          <ModalButton
            text="Cancel"
            onClick={onClose}
-            className="bg-neutral-700 flex-1"
+            className="bg-tertiary flex-1"
          />
        </div>
      </ModalBody>
--- a/frontend/src/components/features/feedback/feedback-form.tsx
+++ b/frontend/src/components/features/feedback/feedback-form.tsx
@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { I18nKey } from "#/i18n/declaration";
 import { Feedback } from "#/api/open-hands.types";
 import { useSubmitFeedback } from "#/hooks/mutation/use-submit-feedback";
-import { ModalButton } from "#/components/shared/buttons/modal-button";
+import { BrandButton } from "../settings/brand-button";

 const FEEDBACK_VERSION = "1.0";
 const VIEWER_PAGE = "https://www.all-hands.dev/share";
@ -121,18 +121,23 @@ export function FeedbackForm({ onClose, polarity }: FeedbackFormProps) {
      </div>

      <div className="flex gap-2">
-        <ModalButton
-          disabled={isPending}
+        <BrandButton
          type="submit"
-          text={t(I18nKey.FEEDBACK$SHARE_LABEL)}
-          className="bg-[#4465DB] grow"
-        />
-        <ModalButton
-          disabled={isPending}
-          text={t(I18nKey.FEEDBACK$CANCEL_LABEL)}
+          variant="primary"
+          className="grow"
+          isDisabled={isPending}
+        >
+          {t(I18nKey.FEEDBACK$SHARE_LABEL)}
+        </BrandButton>
+        <BrandButton
+          type="button"
+          variant="secondary"
+          className="grow"
          onClick={onClose}
-          className="bg-[#737373] grow"
-        />
+          isDisabled={isPending}
+        >
+          {t(I18nKey.FEEDBACK$CANCEL_LABEL)}
+        </BrandButton>
      </div>
    </form>
  );
--- a/frontend/src/components/features/feedback/feedback-modal.tsx
+++ b/frontend/src/components/features/feedback/feedback-modal.tsx
@ -21,7 +21,7 @@ export function FeedbackModal({

  return (
    <ModalBackdrop onClose={onClose}>
-      <ModalBody>
+      <ModalBody className="border border-tertiary">
        <BaseModalTitle title="Feedback" />
        <BaseModalDescription description="To help us improve, we collect feedback from your interactions to improve our prompts. By submitting this form, you consent to us collecting this data." />
        <FeedbackForm onClose={onClose} polarity={polarity} />
--- a/frontend/src/components/features/file-explorer/file-explorer.tsx
+++ b/frontend/src/components/features/file-explorer/file-explorer.tsx
@ -10,7 +10,8 @@ import { useListFiles } from "#/hooks/query/use-list-files";
 import { cn } from "#/utils/utils";
 import { FileExplorerHeader } from "./file-explorer-header";
 import { useVSCodeUrl } from "#/hooks/query/use-vscode-url";
-import { OpenVSCodeButton } from "#/components/shared/buttons/open-vscode-button";
+import { BrandButton } from "../settings/brand-button";
+import VSCodeIcon from "#/assets/vscode-alt.svg?react";

 interface FileExplorerProps {
  isOpen: boolean;
@ -77,10 +78,17 @@ export function FileExplorer({ isOpen, onToggle }: FileExplorerProps) {
            </div>
          )}
          {isOpen && (
-            <OpenVSCodeButton
-              onClick={handleOpenVSCode}
+            <BrandButton
+              testId="open-vscode-button"
+              type="button"
+              variant="secondary"
+              className="w-full text-content border-content"
              isDisabled={RUNTIME_INACTIVE_STATES.includes(curAgentState)}
-            />
+              onClick={handleOpenVSCode}
+              startContent={<VSCodeIcon width={20} height={20} />}
+            >
+              {t(I18nKey.VSCODE$OPEN)}
+            </BrandButton>
          )}
        </div>
      </div>
--- a/frontend/src/components/features/github/github-repositories-suggestion-box.tsx
+++ b/frontend/src/components/features/github/github-repositories-suggestion-box.tsx
@ -3,14 +3,14 @@ import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router";
 import { I18nKey } from "#/i18n/declaration";
 import { SuggestionBox } from "#/components/features/suggestions/suggestion-box";
-import GitHubLogo from "#/assets/branding/github-logo.svg?react";
 import { GitHubRepositorySelector } from "./github-repo-selector";
-import { ModalButton } from "#/components/shared/buttons/modal-button";
 import { useAppRepositories } from "#/hooks/query/use-app-repositories";
 import { useSearchRepositories } from "#/hooks/query/use-search-repositories";
 import { useUserRepositories } from "#/hooks/query/use-user-repositories";
 import { sanitizeQuery } from "#/utils/sanitize-query";
 import { useDebounce } from "#/hooks/use-debounce";
+import { BrandButton } from "../settings/brand-button";
+import GitHubLogo from "#/assets/branding/github-logo.svg?react";

 interface GitHubRepositoriesSuggestionBoxProps {
  handleSubmit: () => void;
@ -62,13 +62,16 @@ export function GitHubRepositoriesSuggestionBox({
            userRepositories={repositories}
          />
        ) : (
-          <ModalButton
+          <BrandButton
            testId="connect-to-github"
-            text={t(I18nKey.GITHUB$CONNECT)}
-            icon={<GitHubLogo width={20} height={20} />}
-            className="bg-[#791B80] w-full"
+            type="button"
+            variant="secondary"
+            className="w-full text-content border-content"
            onClick={handleConnectToGitHub}
-          />
+            startContent={<GitHubLogo width={20} height={20} />}
+          >
+            {t(I18nKey.GITHUB$CONNECT)}
+          </BrandButton>
        )
      }
    />
--- a/frontend/src/components/features/settings/brand-button.tsx
+++ b/frontend/src/components/features/settings/brand-button.tsx
@ -7,6 +7,7 @@ interface BrandButtonProps {
  isDisabled?: boolean;
  className?: string;
  onClick?: () => void;
+  startContent?: React.ReactNode;
 }

 export function BrandButton({
@ -17,6 +18,7 @@ export function BrandButton({
  isDisabled,
  className,
  onClick,
+  startContent,
 }: React.PropsWithChildren<BrandButtonProps>) {
  return (
    <button
@ -30,9 +32,11 @@ export function BrandButton({
        "w-fit p-2 rounded disabled:opacity-30 disabled:cursor-not-allowed",
        variant === "primary" && "bg-primary text-[#0D0F11]",
        variant === "secondary" && "border border-primary text-primary",
+        startContent && "flex items-center justify-center gap-2",
        className,
      )}
    >
+      {startContent}
      {children}
    </button>
  );
--- a/frontend/src/components/features/suggestions/suggestion-item.tsx
+++ b/frontend/src/components/features/suggestions/suggestion-item.tsx
@ -11,7 +11,7 @@ interface SuggestionItemProps {
 export function SuggestionItem({ suggestion, onClick }: SuggestionItemProps) {
  const { t } = useTranslation();
  return (
-    <li className="list-none border border-neutral-600 rounded-xl hover:bg-neutral-700 flex-1">
+    <li className="list-none border border-neutral-600 rounded-xl hover:bg-tertiary flex-1">
      <button
        type="button"
        data-testid="suggestion"
--- a/frontend/src/components/features/waitlist/waitlist-modal.tsx
+++ b/frontend/src/components/features/waitlist/waitlist-modal.tsx
@ -1,13 +1,13 @@
 import React from "react";
-import GitHubLogo from "#/assets/branding/github-logo.svg?react";
 import AllHandsLogo from "#/assets/branding/all-hands-logo.svg?react";
 import { JoinWaitlistAnchor } from "./join-waitlist-anchor";
 import { WaitlistMessage } from "./waitlist-message";
 import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
-import { ModalButton } from "#/components/shared/buttons/modal-button";
 import { ModalBody } from "#/components/shared/modals/modal-body";
 import { TOSCheckbox } from "./tos-checkbox";
 import { handleCaptureConsent } from "#/utils/handle-capture-consent";
+import { BrandButton } from "../settings/brand-button";
+import GitHubLogo from "#/assets/branding/github-logo.svg?react";

 interface WaitlistModalProps {
  ghTokenIsSet: boolean;
@ -29,20 +29,23 @@ export function WaitlistModal({

  return (
    <ModalBackdrop>
-      <ModalBody>
+      <ModalBody className="border border-tertiary">
        <AllHandsLogo width={68} height={46} />
        <WaitlistMessage content={ghTokenIsSet ? "waitlist" : "sign-in"} />

        <TOSCheckbox onChange={() => setIsTosAccepted((prev) => !prev)} />

        {!ghTokenIsSet && (
-          <ModalButton
-            disabled={!isTosAccepted}
-            text="Connect to GitHub"
-            icon={<GitHubLogo width={20} height={20} />}
-            className="bg-[#791B80] w-full"
+          <BrandButton
+            isDisabled={!isTosAccepted}
+            type="button"
+            variant="primary"
            onClick={handleGitHubAuth}
-          />
+            className="w-full"
+            startContent={<GitHubLogo width={20} height={20} />}
+          >
+            Connect to GitHub
+          </BrandButton>
        )}
        {ghTokenIsSet && <JoinWaitlistAnchor />}
      </ModalBody>
--- a/frontend/src/components/layout/nav-tab.tsx
+++ b/frontend/src/components/layout/nav-tab.tsx
@ -15,18 +15,19 @@ export function NavTab({ to, label, icon, isBeta }: NavTabProps) {
      end
      key={to}
      to={to}
-      className={({ isActive }) =>
-        cn(
-          "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-base-secondary",
-        )
-      }
+      className={cn(
+        "px-2 border-b border-r border-neutral-600 bg-base-secondary 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",
+      )}
    >
-      {icon}
-      {label}
-      {isBeta && <BetaBadge />}
+      {({ isActive }) => (
+        <>
+          <div className={cn(isActive && "text-primary")}>{icon}</div>
+          {label}
+          {isBeta && <BetaBadge />}
+        </>
+      )}
    </NavLink>
  );
 }
--- 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-base-secondary"
+        className="bg-tertiary rounded-full p-1 hover:bg-base-secondary"
        onClick={onClick}
      >
        {type === "confirm" ? <ConfirmIcon /> : <RejectIcon />}
--- a/frontend/src/components/shared/buttons/editor-action-button.tsx
+++ b/frontend/src/components/shared/buttons/editor-action-button.tsx
@ -19,7 +19,7 @@ export function EditorActionButton({
      disabled={disabled}
      className={cn(
        "text-sm py-0.5 rounded w-20",
-        "hover:bg-neutral-700 disabled:opacity-50 disabled:cursor-not-allowed",
+        "hover:bg-tertiary disabled:opacity-50 disabled:cursor-not-allowed",
        className,
      )}
    >
--- a/frontend/src/components/shared/buttons/open-vscode-button.tsx
+++ b/frontend/src/components/shared/buttons/open-vscode-button.tsx
@ -1,35 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { I18nKey } from "#/i18n/declaration";
-import { cn } from "#/utils/utils";
-import VSCodeIcon from "#/assets/vscode-alt.svg?react";
-
-interface OpenVSCodeButtonProps {
-  isDisabled: boolean;
-  onClick: () => void;
-}
-
-export function OpenVSCodeButton({
-  isDisabled,
-  onClick,
-}: OpenVSCodeButtonProps) {
-  const { t } = useTranslation();
-  const buttonText = t(I18nKey.VSCODE$OPEN);
-
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      disabled={isDisabled}
-      className={cn(
-        "mt-auto mb-2 w-full h-10 text-white rounded flex items-center justify-center gap-2 transition-colors",
-        isDisabled
-          ? "bg-neutral-600 cursor-not-allowed"
-          : "bg-[#4465DB] hover:bg-[#3451C7]",
-      )}
-      aria-label={buttonText}
-    >
-      <VSCodeIcon width={20} height={20} />
-      {buttonText}
-    </button>
-  );
-}
--- 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-base rounded-lg"
+      className="bg-base-secondary 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-base flex flex-col gap-6 items-center w-[384px] p-6 rounded-xl",
+        "bg-base-secondary 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
@ -127,7 +127,7 @@ function SecurityInvariant() {
      <>
        <div className="flex justify-between items-center border-b border-neutral-600 mb-4 p-4">
          <h2 className="text-2xl">{t(I18nKey.INVARIANT$LOG_LABEL)}</h2>
-          <Button onPress={() => exportTraces()} className="bg-neutral-700">
+          <Button onPress={() => exportTraces()} className="bg-tertiary">
            {t(I18nKey.INVARIANT$EXPORT_TRACE_LABEL)}
          </Button>
        </div>
@ -161,7 +161,7 @@ function SecurityInvariant() {
        <div className="flex justify-between items-center border-b border-neutral-600 mb-4 p-4">
          <h2 className="text-2xl">{t(I18nKey.INVARIANT$POLICY_LABEL)}</h2>
          <Button
-            className="bg-neutral-700"
+            className="bg-tertiary"
            onPress={() => updatePolicy({ policy })}
          >
            {t(I18nKey.INVARIANT$UPDATE_POLICY_LABEL)}
@ -183,7 +183,7 @@ function SecurityInvariant() {
        <div className="flex justify-between items-center border-b border-neutral-600 mb-4 p-4">
          <h2 className="text-2xl">{t(I18nKey.INVARIANT$SETTINGS_LABEL)}</h2>
          <Button
-            className="bg-neutral-700"
+            className="bg-tertiary"
            onPress={() => updateRiskSeverity({ riskSeverity: selectedRisk })}
          >
            {t(I18nKey.INVARIANT$UPDATE_SETTINGS_LABEL)}
--- 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-base min-w-[384px] p-6 rounded-xl flex flex-col gap-2"
+        className="bg-base-secondary min-w-[384px] p-6 rounded-xl flex flex-col gap-2 border border-tertiary"
      >
        {aiConfigOptions.error && (
          <p className="text-danger text-xs">{aiConfigOptions.error.message}</p>
--- a/frontend/src/components/shared/task-form.tsx
+++ b/frontend/src/components/shared/task-form.tsx
@ -70,7 +70,7 @@ export function TaskForm({ ref }: TaskFormProps) {
        <div
          className={cn(
            "border border-neutral-600 px-4 rounded-lg text-[17px] leading-5 w-full transition-colors duration-200",
-            inputIsFocused ? "bg-neutral-600" : "bg-neutral-700",
+            inputIsFocused ? "bg-neutral-600" : "bg-tertiary",
            "hover:border-neutral-500 focus-within:border-neutral-500",
          )}
        >
--- a/frontend/src/hooks/use-terminal.ts
+++ b/frontend/src/hooks/use-terminal.ts
@ -40,7 +40,7 @@ export const useTerminal = ({
      fontFamily: "Menlo, Monaco, 'Courier New', monospace",
      fontSize: 14,
      theme: {
-        background: "#262626",
+        background: "#24272E",
      },
    });

--- a/frontend/src/icons/code.svg
+++ b/frontend/src/icons/code.svg
@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.5058 6.44629L13.4943 7.55386L18.8901 12.4821L13.4923 17.4481L14.5078 18.552L21.11 12.4781L14.5058 6.44629Z" fill="white"/>
-<path d="M9.49427 18.5539L10.5058 17.4463L5.10998 12.5181L10.5078 7.55202L9.49226 6.44812L2.89014 12.5221L9.49427 18.5539Z" fill="white"/>
+<path d="M14.5058 6.44629L13.4943 7.55386L18.8901 12.4821L13.4923 17.4481L14.5078 18.552L21.11 12.4781L14.5058 6.44629Z" fill="currentColor"/>
+<path d="M9.49427 18.5539L10.5058 17.4463L5.10998 12.5181L10.5078 7.55202L9.49226 6.44812L2.89014 12.5221L9.49427 18.5539Z" fill="currentColor"/>
 </svg>
--- a/frontend/src/icons/globe.svg
+++ b/frontend/src/icons/globe.svg
@ -1,3 +1,3 @@
 <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.5835 12C3.5835 7.16751 7.501 3.25 12.3335 3.25C17.166 3.25 21.0835 7.16751 21.0835 12C21.0835 16.8325 17.166 20.75 12.3335 20.75C7.501 20.75 3.5835 16.8325 3.5835 12ZM5.85099 8.75C6.75105 6.95823 8.37212 5.5911 10.3334 5.02939C9.86889 5.56854 9.46926 6.20527 9.14301 6.90523C8.87786 7.47408 8.657 8.09299 8.48676 8.75H5.85099ZM5.29611 10.25C5.15721 10.8104 5.0835 11.3966 5.0835 12C5.0835 12.6034 5.15721 13.1896 5.29611 13.75H8.19667C8.12231 13.1834 8.0835 12.598 8.0835 12C8.0835 11.4019 8.12231 10.8165 8.19666 10.25H5.29611ZM9.71122 10.25C9.62798 10.8092 9.5835 11.3951 9.5835 12C9.5835 12.6049 9.62799 13.1908 9.71123 13.75H14.9558C15.039 13.1908 15.0835 12.6049 15.0835 12C15.0835 11.3952 15.039 10.8092 14.9558 10.25H9.71122ZM16.4703 10.25C16.5447 10.8165 16.5835 11.4019 16.5835 12C16.5835 12.5981 16.5447 13.1835 16.4703 13.75H19.3709C19.5098 13.1896 19.5835 12.6034 19.5835 12C19.5835 11.3966 19.5098 10.8104 19.3709 10.25H16.4703ZM18.816 8.75H16.1802C16.01 8.09302 15.7891 7.47413 15.524 6.90529C15.1977 6.2053 14.7981 5.56854 14.3335 5.02937C16.2948 5.59107 17.9159 6.95821 18.816 8.75ZM14.6229 8.75H10.0441C10.1736 8.31962 10.3276 7.91428 10.5026 7.53893C10.998 6.47611 11.6415 5.69218 12.3335 5.23257C13.0254 5.69217 13.669 6.47613 14.1644 7.53899C14.3394 7.91433 14.4934 8.31964 14.6229 8.75ZM5.85099 15.25H8.48677C8.66634 15.943 8.90223 16.5936 9.18703 17.1879C9.50463 17.8505 9.8893 18.455 10.3336 18.9706C8.37219 18.409 6.75107 17.0418 5.85099 15.25ZM14.6229 15.25H10.0441C10.1827 15.7106 10.3494 16.1424 10.5397 16.5396C11.0309 17.5645 11.6596 18.3198 12.3336 18.7674C13.0255 18.3078 13.6691 17.5239 14.1644 16.4611C14.3394 16.0857 14.4934 15.6804 14.6229 15.25ZM15.524 17.0948C15.7891 16.5259 16.01 15.907 16.1802 15.25H18.816C17.9159 17.0418 16.2949 18.4089 14.3336 18.9706C14.7981 18.4315 15.1977 17.7947 15.524 17.0948Z" fill="#E4E7EB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.5835 12C3.5835 7.16751 7.501 3.25 12.3335 3.25C17.166 3.25 21.0835 7.16751 21.0835 12C21.0835 16.8325 17.166 20.75 12.3335 20.75C7.501 20.75 3.5835 16.8325 3.5835 12ZM5.85099 8.75C6.75105 6.95823 8.37212 5.5911 10.3334 5.02939C9.86889 5.56854 9.46926 6.20527 9.14301 6.90523C8.87786 7.47408 8.657 8.09299 8.48676 8.75H5.85099ZM5.29611 10.25C5.15721 10.8104 5.0835 11.3966 5.0835 12C5.0835 12.6034 5.15721 13.1896 5.29611 13.75H8.19667C8.12231 13.1834 8.0835 12.598 8.0835 12C8.0835 11.4019 8.12231 10.8165 8.19666 10.25H5.29611ZM9.71122 10.25C9.62798 10.8092 9.5835 11.3951 9.5835 12C9.5835 12.6049 9.62799 13.1908 9.71123 13.75H14.9558C15.039 13.1908 15.0835 12.6049 15.0835 12C15.0835 11.3952 15.039 10.8092 14.9558 10.25H9.71122ZM16.4703 10.25C16.5447 10.8165 16.5835 11.4019 16.5835 12C16.5835 12.5981 16.5447 13.1835 16.4703 13.75H19.3709C19.5098 13.1896 19.5835 12.6034 19.5835 12C19.5835 11.3966 19.5098 10.8104 19.3709 10.25H16.4703ZM18.816 8.75H16.1802C16.01 8.09302 15.7891 7.47413 15.524 6.90529C15.1977 6.2053 14.7981 5.56854 14.3335 5.02937C16.2948 5.59107 17.9159 6.95821 18.816 8.75ZM14.6229 8.75H10.0441C10.1736 8.31962 10.3276 7.91428 10.5026 7.53893C10.998 6.47611 11.6415 5.69218 12.3335 5.23257C13.0254 5.69217 13.669 6.47613 14.1644 7.53899C14.3394 7.91433 14.4934 8.31964 14.6229 8.75ZM5.85099 15.25H8.48677C8.66634 15.943 8.90223 16.5936 9.18703 17.1879C9.50463 17.8505 9.8893 18.455 10.3336 18.9706C8.37219 18.409 6.75107 17.0418 5.85099 15.25ZM14.6229 15.25H10.0441C10.1827 15.7106 10.3494 16.1424 10.5397 16.5396C11.0309 17.5645 11.6596 18.3198 12.3336 18.7674C13.0255 18.3078 13.6691 17.5239 14.1644 16.4611C14.3394 16.0857 14.4934 15.6804 14.6229 15.25ZM15.524 17.0948C15.7891 16.5259 16.01 15.907 16.1802 15.25H18.816C17.9159 17.0418 16.2949 18.4089 14.3336 18.9706C14.7981 18.4315 15.1977 17.7947 15.524 17.0948Z" fill="currentColor"/>
 </svg>
--- a/frontend/src/icons/list-type-number.svg
+++ b/frontend/src/icons/list-type-number.svg
@ -1,3 +1,3 @@
 <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.6665 5.30664V6.00035V10.0004H5.6665V6.69407L4.82461 6.9747L4.50839 6.02601L6.00839 5.52601L6.6665 5.30664ZM20.6665 8.75035H11.7776V7.25035H20.6665V8.75035ZM20.6665 15.7504H11.7776V14.2504H20.6665V15.7504ZM5.23029 12.4381C5.71219 12.295 6.45934 12.1944 6.93213 12.8051C7.18578 13.1327 7.2182 13.5518 7.16656 13.8949C7.09092 14.3975 6.76355 15.0189 6.48884 15.5403C6.40144 15.7062 6.31938 15.862 6.25244 16.0006H7.16656V17.0006H4.48291C4.73561 16.5635 4.96935 16.163 5.19921 15.769C5.44194 15.3531 5.68033 14.9445 5.93213 14.5083C6.0589 14.2887 6.30178 13.7241 6.09229 13.4535C6.00257 13.3376 5.76468 13.2118 5.42432 13.3129C5.11672 13.4042 4.84136 13.6504 4.65037 13.8212L4.64324 13.8276L4.5128 12.7453C4.72415 12.6312 4.97299 12.5145 5.23029 12.4381Z" fill="#E4E7EB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.6665 5.30664V6.00035V10.0004H5.6665V6.69407L4.82461 6.9747L4.50839 6.02601L6.00839 5.52601L6.6665 5.30664ZM20.6665 8.75035H11.7776V7.25035H20.6665V8.75035ZM20.6665 15.7504H11.7776V14.2504H20.6665V15.7504ZM5.23029 12.4381C5.71219 12.295 6.45934 12.1944 6.93213 12.8051C7.18578 13.1327 7.2182 13.5518 7.16656 13.8949C7.09092 14.3975 6.76355 15.0189 6.48884 15.5403C6.40144 15.7062 6.31938 15.862 6.25244 16.0006H7.16656V17.0006H4.48291C4.73561 16.5635 4.96935 16.163 5.19921 15.769C5.44194 15.3531 5.68033 14.9445 5.93213 14.5083C6.0589 14.2887 6.30178 13.7241 6.09229 13.4535C6.00257 13.3376 5.76468 13.2118 5.42432 13.3129C5.11672 13.4042 4.84136 13.6504 4.65037 13.8212L4.64324 13.8276L4.5128 12.7453C4.72415 12.6312 4.97299 12.5145 5.23029 12.4381Z" fill="currentColor"/>
 </svg>
--- 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-base relative">
+    <div className="flex h-full bg-base-secondary relative">
      <FileExplorer isOpen={fileExplorerIsOpen} onToggle={toggleFileExplorer} />
      <div className="w-full h-full flex flex-col">
        {selectedPath && (
--- a/frontend/src/routes/account-settings.tsx
+++ b/frontend/src/routes/account-settings.tsx
@ -425,7 +425,7 @@ function AccountSettings() {
        <ModalBackdrop>
          <div
            data-testid="reset-modal"
-            className="bg-base p-4 rounded-xl flex flex-col gap-4"
+            className="bg-base-secondary p-4 rounded-xl flex flex-col gap-4 border border-tertiary"
          >
            <p>Are you sure you want to reset all settings?</p>
            <div className="w-full flex gap-2">
--- a/frontend/src/tailwind.css
+++ b/frontend/src/tailwind.css
@ -3,5 +3,5 @@
@tailwind utilities;

 .button-base {
-  @apply bg-neutral-700 border border-neutral-600 rounded;
+  @apply bg-tertiary border border-neutral-600 rounded;
 }
--- a/frontend/src/utils/toast.tsx
+++ b/frontend/src/utils/toast.tsx
@ -36,7 +36,7 @@ export default {
  settingsChanged: (msg: string) => {
    toast(msg, {
      position: "bottom-right",
-      className: "bg-neutral-700",
+      className: "bg-tertiary",

      icon: "⚙️",
      style: {
@ -49,7 +49,7 @@ export default {
  info: (msg: string) => {
    toast(msg, {
      position: "top-center",
-      className: "bg-neutral-700",
+      className: "bg-tertiary",

      style: {
        background: "#333",
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@ -10,12 +10,13 @@ export default {
    extend: {
      colors: {
        primary: "#C9B974", // nice yellow
-        base: "#171717", // dark background (neutral-900)
-        "base-secondary": "#262626", // lighter background (neutral-800); also used for tooltips
+        base: "#0D0F11", // dark background also used for tooltips
+        "base-secondary": "#24272E", // lighter background
        danger: "#E76A5E",
        success: "#A5E75E",
        tertiary: "#454545", // gray, used for inputs
        "tertiary-light": "#B7BDC2", // lighter gray, used for borders and placeholder text
+        content: "#ECEDEE", // light gray, used mostly for text
      },
    },
  },