From d5f7dde7c95ecdbc782fd9acb4fc44e9881f46b0 Mon Sep 17 00:00:00 2001 From: "sp.wack" <83104063+amanape@users.noreply.github.com> Date: Wed, 26 Feb 2025 23:43:58 +0400 Subject: [PATCH] hotfix(frontend): Consistent buttons and their styles throughout the app (#6835) Co-authored-by: Robert Brennan --- .../settings => shared}/brand-button.test.tsx | 16 +++++++++ frontend/src/assets/branding/github-logo.svg | 2 +- .../analytics-consent-form-modal.tsx | 14 ++++---- .../components/features/chat/chat-message.tsx | 2 +- .../features/chat/chat-suggestions.tsx | 2 +- .../features/chat/interactive-chat-box.tsx | 2 +- .../features/chat/typing-indicator.tsx | 2 +- .../features/context-menu/context-menu.tsx | 2 +- .../confirm-delete-modal.tsx | 26 ++++++++------ .../exit-conversation-modal.tsx | 2 +- .../features/feedback/feedback-form.tsx | 27 ++++++++------ .../features/feedback/feedback-modal.tsx | 2 +- .../features/file-explorer/file-explorer.tsx | 16 ++++++--- .../github-repositories-suggestion-box.tsx | 17 +++++---- .../features/settings/brand-button.tsx | 4 +++ .../features/suggestions/suggestion-item.tsx | 2 +- .../features/waitlist/waitlist-modal.tsx | 21 ++++++----- frontend/src/components/layout/nav-tab.tsx | 23 ++++++------ .../src/components/shared/action-tooltip.tsx | 2 +- .../shared/buttons/editor-action-button.tsx | 2 +- .../shared/buttons/open-vscode-button.tsx | 35 ------------------- .../shared/modals/base-modal/base-modal.tsx | 2 +- .../components/shared/modals/modal-body.tsx | 2 +- .../modals/security/invariant/invariant.tsx | 6 ++-- .../shared/modals/settings/settings-modal.tsx | 2 +- frontend/src/components/shared/task-form.tsx | 2 +- frontend/src/hooks/use-terminal.ts | 2 +- frontend/src/icons/code.svg | 4 +-- frontend/src/icons/globe.svg | 2 +- frontend/src/icons/list-type-number.svg | 2 +- frontend/src/routes/_oh.app._index/route.tsx | 2 +- frontend/src/routes/account-settings.tsx | 2 +- frontend/src/tailwind.css | 2 +- frontend/src/utils/toast.tsx | 4 +-- frontend/tailwind.config.js | 5 +-- 35 files changed, 137 insertions(+), 123 deletions(-) rename frontend/__tests__/components/{modals/settings => shared}/brand-button.test.tsx (76%) delete mode 100644 frontend/src/components/shared/buttons/open-vscode-button.tsx diff --git a/frontend/__tests__/components/modals/settings/brand-button.test.tsx b/frontend/__tests__/components/shared/brand-button.test.tsx similarity index 76% rename from frontend/__tests__/components/modals/settings/brand-button.test.tsx rename to frontend/__tests__/components/shared/brand-button.test.tsx index 784cecc625..ee8eb5d456 100644 --- a/frontend/__tests__/components/modals/settings/brand-button.test.tsx +++ b/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( + Start Content + } + > + Test Button + , + ); + + screen.getByTestId("custom-start-content"); + }); }); diff --git a/frontend/src/assets/branding/github-logo.svg b/frontend/src/assets/branding/github-logo.svg index fcf918efac..8c1310031a 100644 --- a/frontend/src/assets/branding/github-logo.svg +++ b/frontend/src/assets/branding/github-logo.svg @@ -1,5 +1,5 @@ + stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" /> diff --git a/frontend/src/components/features/analytics/analytics-consent-form-modal.tsx b/frontend/src/components/features/analytics/analytics-consent-form-modal.tsx index ea22445db0..3d8693e09b 100644 --- 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" > - + We use tools to understand how our application is used to improve @@ -53,12 +53,14 @@ export function AnalyticsConsentFormModal({ Send anonymous usage data - + variant="primary" + className="w-full" + > + Confirm Preferences + diff --git a/frontend/src/components/features/chat/chat-message.tsx b/frontend/src/components/features/chat/chat-message.tsx index c6f233d27c..4598567a16 100644 --- 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", )} > diff --git a/frontend/src/components/features/chat/chat-suggestions.tsx b/frontend/src/components/features/chat/chat-suggestions.tsx index 90d2797f99..397f1b1486 100644 --- 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 (
-
+
{t(I18nKey.LANDING$TITLE)} diff --git a/frontend/src/components/features/chat/interactive-chat-box.tsx b/frontend/src/components/features/chat/interactive-chat-box.tsx index e17d9ba8e3..40b52498aa 100644 --- 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({
+
{children} diff --git a/frontend/src/components/features/conversation-panel/confirm-delete-modal.tsx b/frontend/src/components/features/conversation-panel/confirm-delete-modal.tsx index a649dc4ef8..0ebd715ab0 100644 --- 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 ( - +
@@ -26,16 +26,22 @@ export function ConfirmDeleteModal({ className="flex flex-col gap-2 w-full" onClick={(event) => event.stopPropagation()} > - - + Confirm + + + className="w-full" + > + Cancel +
diff --git a/frontend/src/components/features/conversation-panel/exit-conversation-modal.tsx b/frontend/src/components/features/conversation-panel/exit-conversation-modal.tsx index 6442598cbb..c5c37908e7 100644 --- 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({
diff --git a/frontend/src/components/features/feedback/feedback-form.tsx b/frontend/src/components/features/feedback/feedback-form.tsx index e15c0c7b82..fcf1e666dd 100644 --- 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) {
- - + {t(I18nKey.FEEDBACK$SHARE_LABEL)} + + + isDisabled={isPending} + > + {t(I18nKey.FEEDBACK$CANCEL_LABEL)} +
); diff --git a/frontend/src/components/features/feedback/feedback-modal.tsx b/frontend/src/components/features/feedback/feedback-modal.tsx index a3e9d6264f..f8de56587f 100644 --- 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 ( - + diff --git a/frontend/src/components/features/file-explorer/file-explorer.tsx b/frontend/src/components/features/file-explorer/file-explorer.tsx index c654ba35d9..845da816bb 100644 --- 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) {
)} {isOpen && ( - + onClick={handleOpenVSCode} + startContent={} + > + {t(I18nKey.VSCODE$OPEN)} + )}
diff --git a/frontend/src/components/features/github/github-repositories-suggestion-box.tsx b/frontend/src/components/features/github/github-repositories-suggestion-box.tsx index 2450dd7b59..d68767e5f4 100644 --- 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} /> ) : ( - } - className="bg-[#791B80] w-full" + type="button" + variant="secondary" + className="w-full text-content border-content" onClick={handleConnectToGitHub} - /> + startContent={} + > + {t(I18nKey.GITHUB$CONNECT)} + ) } /> diff --git a/frontend/src/components/features/settings/brand-button.tsx b/frontend/src/components/features/settings/brand-button.tsx index 4cbcbf5fc4..799f93a9ea 100644 --- 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) { return ( ); diff --git a/frontend/src/components/features/suggestions/suggestion-item.tsx b/frontend/src/components/features/suggestions/suggestion-item.tsx index 9b7705958b..f297661990 100644 --- 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 ( -
  • +
  • - ); -} diff --git a/frontend/src/components/shared/modals/base-modal/base-modal.tsx b/frontend/src/components/shared/modals/base-modal/base-modal.tsx index 6d16ce450d..cf8eb22c8c 100644 --- 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" > {(closeModal) => ( diff --git a/frontend/src/components/shared/modals/modal-body.tsx b/frontend/src/components/shared/modals/modal-body.tsx index 9ed510b093..5d7b059f72 100644 --- 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) {
    diff --git a/frontend/src/components/shared/modals/security/invariant/invariant.tsx b/frontend/src/components/shared/modals/security/invariant/invariant.tsx index ea03e8e159..545386e3bd 100644 --- 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() { <>

    {t(I18nKey.INVARIANT$LOG_LABEL)}

    -
    @@ -161,7 +161,7 @@ function SecurityInvariant() {

    {t(I18nKey.INVARIANT$POLICY_LABEL)}