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

frontend/__tests__/components/modals/settings/brand-button.test.tsx → frontend/__tests__/components/shared/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");
+  });
 });

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>

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",
       )}
     >

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)}

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",
         )}

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" }}

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>

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>

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>

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>
   );

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} />

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"
               isDisabled={RUNTIME_INACTIVE_STATES.includes(curAgentState)}
-            />
+              onClick={handleOpenVSCode}
+              startContent={<VSCodeIcon width={20} height={20} />}
+            >
+              {t(I18nKey.VSCODE$OPEN)}
+            </BrandButton>
           )}
         </div>
       </div>

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"
             onClick={handleConnectToGitHub}
-          />
+            startContent={<GitHubLogo width={20} height={20} />}
+          >
+            {t(I18nKey.GITHUB$CONNECT)}
+          </BrandButton>
         )
       }
     />

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>
   );

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"

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>

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-base flex-1",
+          "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",
-          isActive && "bg-base-secondary",
+          isActive && "text-primary",
         )
       }
     >