github/OpenHands
1
0
Fork 0
mirror of https://github.com/OpenHands/OpenHands.git synced 2025-12-25 21:36:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(ui): update tailwind (#9049)

Browse Source 
Co-authored-by: sp.wack <83104063+amanape@users.noreply.github.com>
This commit is contained in:
Mislav Lukach 2025-06-10 20:20:04 +02:00 committed by GitHub
parent dca9c7bdc6
commit b7da65d373
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
30 changed files with 3049 additions and 2591 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/hero.ts Normal file
View File

@ -0,0 +1,18 @@
import { heroui } from "@heroui/react";
export default heroui({
defaultTheme: "dark",
layout: {
radius: {
small: "5px",
large: "20px",
},
},
themes: {
dark: {
colors: {
primary: "#4465DB",
},
},
},
});

5504
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
frontend/package.json
View File

@ -7,7 +7,7 @@
"node": ">=20.0.0"
},
"dependencies": {
"@heroui/react": "2.7.8",
"@heroui/react": "^2.8.0-beta.7",
"@microlink/react-json-view": "^1.26.2",
"@monaco-editor/react": "^4.7.0-rc.0",
"@react-router/node": "^7.6.1",
@ -16,6 +16,8 @@
"@reduxjs/toolkit": "^2.8.2",
"@stripe/react-stripe-js": "^3.7.0",
"@stripe/stripe-js": "^7.3.0",
"@tailwindcss/postcss": "^4.1.8",
"@tailwindcss/vite": "^4.1.8",
"@tanstack/react-query": "^5.77.2",
"@vitejs/plugin-react": "^4.4.0",
"@xterm/addon-fit": "^0.10.0",
@ -23,7 +25,7 @@
"axios": "^1.9.0",
"clsx": "^2.1.1",
"eslint-config-airbnb-typescript": "^18.0.0",
"framer-motion": "^12.14.0",
"framer-motion": "^12.16.0",
"i18next": "^25.2.1",
"i18next-browser-languagedetector": "^8.1.0",
"i18next-http-backend": "^3.0.2",
@ -115,10 +117,9 @@
"jsdom": "^26.1.0",
"lint-staged": "^16.0.0",
"msw": "^2.6.6",
"postcss": "^8.5.2",
"prettier": "^3.5.3",
"stripe": "^18.1.1",
"tailwindcss": "^3.4.17",
"tailwindcss": "^4.1.8",
"typescript": "^5.8.3",
"vite-plugin-svgr": "^4.2.0",
"vite-tsconfig-paths": "^5.1.4",

5
frontend/postcss.config.js
View File

@ -1,6 +1,5 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
"@tailwindcss/postcss": {},
},
}
};

2
frontend/src/components/features/chat/chat-input.tsx
View File

@ -132,7 +132,7 @@ export function ChatInput({
maxRows={maxRows}
data-dragging-over={isDraggingOver}
className={cn(
"grow text-sm self-center placeholder:text-neutral-400 text-white resize-none outline-none ring-0",
"grow text-sm self-center placeholder:text-neutral-400 text-white resize-none outline-hidden ring-0",
"transition-all duration-200 ease-in-out",
isDraggingOver
? "bg-neutral-600/50 rounded-lg px-2"

2
frontend/src/components/features/chat/expandable-message.tsx
View File

@ -114,7 +114,7 @@ export function ExpandableMessage({
{t(I18nKey.STATUS$ERROR_LLM_OUT_OF_CREDITS)}
</div>
<Link
className="mt-2 mb-2 w-full h-10 rounded flex items-center justify-center gap-2 bg-primary text-[#0D0F11]"
className="mt-2 mb-2 w-full h-10 rounded-sm flex items-center justify-center gap-2 bg-primary text-[#0D0F11]"
to="/settings/billing"
>
{t(I18nKey.BILLING$CLICK_TO_TOP_UP)}

2
frontend/src/components/features/feedback/feedback-form.tsx
View File

@ -101,7 +101,7 @@ export function FeedbackForm({ onClose, polarity }: FeedbackFormProps) {
name="email"
type="email"
placeholder={t(I18nKey.FEEDBACK$EMAIL_PLACEHOLDER)}
className="bg-[#27272A] px-3 py-[10px] rounded"
className="bg-[#27272A] px-3 py-[10px] rounded-sm"
/>
</label>

2
frontend/src/components/features/home/repository-selection/branch-error-state.tsx
View File

@ -6,7 +6,7 @@ export function BranchErrorState() {
return (
<div
data-testid="branch-dropdown-error"
className="flex items-center gap-2 max-w-[500px] h-10 px-3 bg-tertiary border border-[#717888] rounded text-red-500"
className="flex items-center gap-2 max-w-[500px] h-10 px-3 bg-tertiary border border-[#717888] rounded-sm text-red-500"
>
<span className="text-sm">{t("HOME$FAILED_TO_LOAD_BRANCHES")}</span>
</div>

2
frontend/src/components/features/home/repository-selection/branch-loading-state.tsx
View File

@ -7,7 +7,7 @@ export function BranchLoadingState() {
return (
<div
data-testid="branch-dropdown-loading"
className="flex items-center gap-2 max-w-[500px] h-10 px-3 bg-tertiary border border-[#717888] rounded"
className="flex items-center gap-2 max-w-[500px] h-10 px-3 bg-tertiary border border-[#717888] rounded-sm"
>
<Spinner size="sm" />
<span className="text-sm">{t("HOME$LOADING_BRANCHES")}</span>

2
frontend/src/components/features/home/repository-selection/repository-error-state.tsx
View File

@ -6,7 +6,7 @@ export function RepositoryErrorState() {
return (
<div
data-testid="repo-dropdown-error"
className="flex items-center gap-2 max-w-[500px] h-10 px-3 bg-tertiary border border-[#717888] rounded text-red-500"
className="flex items-center gap-2 max-w-[500px] h-10 px-3 bg-tertiary border border-[#717888] rounded-sm text-red-500"
>
<span className="text-sm">{t("HOME$FAILED_TO_LOAD_REPOSITORIES")}</span>
</div>

2
frontend/src/components/features/home/repository-selection/repository-loading-state.tsx
View File

@ -7,7 +7,7 @@ export function RepositoryLoadingState() {
return (
<div
data-testid="repo-dropdown-loading"
className="flex items-center gap-2 max-w-[500px] h-10 px-3 bg-tertiary border border-[#717888] rounded"
className="flex items-center gap-2 max-w-[500px] h-10 px-3 bg-tertiary border border-[#717888] rounded-sm"
>
<Spinner size="sm" />
<span className="text-sm">{t("HOME$LOADING_REPOSITORIES")}</span>

2
frontend/src/components/features/images/thumbnail.tsx
View File

@ -12,7 +12,7 @@ export function Thumbnail({ src, size = "small" }: ThumbnailProps) {
alt=""
src={src}
className={cn(
"rounded object-cover",
"rounded-sm object-cover",
size === "small" && "w-[62px] h-[62px]",
size === "large" && "w-[100px] h-[100px]",
)}

2
frontend/src/components/features/payment/payment-form.tsx
View File

@ -43,7 +43,7 @@ export function PaymentForm() {
>
<div
className={cn(
"flex items-center justify-between w-[680px] bg-[#7F7445] rounded px-3 py-2",
"flex items-center justify-between w-[680px] bg-[#7F7445] rounded-sm px-3 py-2",
"text-[28px] leading-8 -tracking-[0.02em] font-bold",
)}
>

2
frontend/src/components/features/settings/brand-button.tsx
View File

@ -32,7 +32,7 @@ export function BrandButton({
type={type}
onClick={onClick}
className={cn(
"w-fit p-2 text-sm rounded disabled:opacity-30 disabled:cursor-not-allowed hover:opacity-80",
"w-fit p-2 text-sm rounded-sm disabled:opacity-30 disabled:cursor-not-allowed hover:opacity-80",
variant === "primary" && "bg-primary text-[#0D0F11]",
variant === "secondary" && "border border-primary text-primary",
variant === "danger" && "bg-red-600 text-white hover:bg-red-700",

2
frontend/src/components/features/settings/mcp-settings/mcp-json-editor.tsx
View File

@ -69,7 +69,7 @@ export function MCPJsonEditor({ mcpConfig, onChange }: MCPJsonEditorProps) {
{t(I18nKey.SETTINGS$MCP_CONFIG_DESCRIPTION)}
</div>
<textarea
className="w-full h-64 p-2 text-sm font-mono bg-base-tertiary rounded-md focus:border-blue-500 focus:outline-none"
className="w-full h-64 p-2 text-sm font-mono bg-base-tertiary rounded-md focus:border-blue-500 focus:outline-hidden"
value={configText}
onChange={handleTextChange}
spellCheck="false"

4
frontend/src/components/features/settings/secrets-settings/secret-form.tsx
View File

@ -158,7 +158,7 @@ export function SecretForm({
required
className={cn(
"resize-none",
"bg-tertiary border border-[#717888] rounded p-2 placeholder:italic placeholder:text-tertiary-alt",
"bg-tertiary border border-[#717888] rounded-sm p-2 placeholder:italic placeholder:text-tertiary-alt",
"disabled:bg-[#2D2F36] disabled:border-[#2D2F36] disabled:cursor-not-allowed",
)}
rows={8}
@ -177,7 +177,7 @@ export function SecretForm({
defaultValue={secretDescription}
className={cn(
"resize-none",
"bg-tertiary border border-[#717888] rounded p-2 placeholder:italic placeholder:text-tertiary-alt",
"bg-tertiary border border-[#717888] rounded-sm p-2 placeholder:italic placeholder:text-tertiary-alt",
"disabled:bg-[#2D2F36] disabled:border-[#2D2F36] disabled:cursor-not-allowed",
)}
/>

2
frontend/src/components/features/settings/settings-dropdown-input.tsx
View File

@ -63,7 +63,7 @@ export function SettingsDropdownInput({
inputProps={{
classNames: {
inputWrapper:
"bg-tertiary border border-[#717888] h-10 w-full rounded p-2 placeholder:italic",
"bg-tertiary border border-[#717888] h-10 w-full rounded-sm p-2 placeholder:italic",
},
}}
defaultFilter={defaultFilter}

2
frontend/src/components/features/settings/settings-input.tsx
View File

@ -62,7 +62,7 @@ export function SettingsInput({
required={required}
pattern={pattern}
className={cn(
"bg-tertiary border border-[#717888] h-10 w-full rounded p-2 placeholder:italic placeholder:text-tertiary-alt",
"bg-tertiary border border-[#717888] h-10 w-full rounded-sm p-2 placeholder:italic placeholder:text-tertiary-alt",
"disabled:bg-[#2D2F36] disabled:border-[#2D2F36] disabled:cursor-not-allowed",
)}
/>

2
frontend/src/components/features/suggestions/replay-suggestion-box.tsx
View File

@ -16,7 +16,7 @@ export function ReplaySuggestionBox({ onChange }: ReplaySuggestionBoxProps) {
htmlFor="import-trajectory"
className="w-full flex justify-center"
>
<span className="border-2 border-dashed border-neutral-600 rounded px-2 py-1 cursor-pointer">
<span className="border-2 border-dashed border-neutral-600 rounded-sm px-2 py-1 cursor-pointer">
{t(I18nKey.LANDING$UPLOAD_TRAJECTORY)}
</span>
<input

2
frontend/src/components/shared/buttons/editor-action-button.tsx
View File

@ -18,7 +18,7 @@ export function EditorActionButton({
onClick={onClick}
disabled={disabled}
className={cn(
"text-sm py-0.5 rounded w-20",
"text-sm py-0.5 rounded-sm w-20",
"hover:bg-tertiary disabled:opacity-50 disabled:cursor-not-allowed",
className,
)}

2
frontend/src/components/shared/buttons/modal-button.tsx
View File

@ -31,7 +31,7 @@ export function ModalButton({
disabled={disabled}
onClick={onClick}
className={clsx(
variant === "default" && "text-sm font-[500] py-[10px] rounded",
variant === "default" && "text-sm font-[500] py-[10px] rounded-sm",
variant === "text-like" && "text-xs leading-4 font-normal",
icon && "flex items-center justify-center gap-2",
disabled && "opacity-50 cursor-not-allowed",

2
frontend/src/components/shared/custom-input.tsx
View File

@ -36,7 +36,7 @@ export function CustomInput({
required={required}
defaultValue={defaultValue}
type={type}
className="bg-[#27272A] text-xs py-[10px] px-3 rounded"
className="bg-[#27272A] text-xs py-[10px] px-3 rounded-sm"
/>
</label>
);

2
frontend/src/components/shared/error-toast.tsx
View File

@ -16,7 +16,7 @@ export function ErrorToast({ id, error }: ErrorToastProps) {
<button
type="button"
onClick={() => toast.dismiss(id)}
className="bg-neutral-500 px-1 rounded h-full"
className="bg-neutral-500 px-1 rounded-sm h-full"
>
{t(I18nKey.ERROR_TOAST$CLOSE_BUTTON_LABEL)}
</button>

6
frontend/src/components/shared/modals/security/invariant/invariant.tsx
View File

@ -269,19 +269,19 @@ function SecurityInvariant() {
<hr className="border-t border-neutral-600 my-2" />
<ul className="space-y-2">
<div
className={`cursor-pointer p-2 rounded ${activeSection === "logs" && "bg-neutral-600"}`}
className={`cursor-pointer p-2 rounded-sm ${activeSection === "logs" && "bg-neutral-600"}`}
onClick={() => setActiveSection("logs")}
>
{t(I18nKey.INVARIANT$LOG_LABEL)}
</div>
<div
className={`cursor-pointer p-2 rounded ${activeSection === "policy" && "bg-neutral-600"}`}
className={`cursor-pointer p-2 rounded-sm ${activeSection === "policy" && "bg-neutral-600"}`}
onClick={() => setActiveSection("policy")}
>
{t(I18nKey.INVARIANT$POLICY_LABEL)}
</div>
<div
className={`cursor-pointer p-2 rounded ${activeSection === "settings" && "bg-neutral-600"}`}
className={`cursor-pointer p-2 rounded-sm ${activeSection === "settings" && "bg-neutral-600"}`}
onClick={() => setActiveSection("settings")}
>
{t(I18nKey.INVARIANT$SETTINGS_LABEL)}

4
frontend/src/components/shared/modals/settings/model-selector.tsx
View File

@ -92,7 +92,7 @@ export function ModelSelector({
inputProps={{
classNames: {
inputWrapper:
"bg-tertiary border border-[#717888] h-10 w-full rounded p-2 placeholder:italic",
"bg-tertiary border border-[#717888] h-10 w-full rounded-sm p-2 placeholder:italic",
},
}}
>
@ -142,7 +142,7 @@ export function ModelSelector({
inputProps={{
classNames: {
inputWrapper:
"bg-tertiary border border-[#717888] h-10 w-full rounded p-2 placeholder:italic",
"bg-tertiary border border-[#717888] h-10 w-full rounded-sm p-2 placeholder:italic",
},
}}
>

12
frontend/src/routes/user-settings.tsx
View File

@ -41,11 +41,11 @@ function EmailInputSection({
type="email"
value={email}
onChange={onEmailChange}
className={`text-base text-white p-2 bg-base-tertiary rounded border ${
className={`text-base text-white p-2 bg-base-tertiary rounded-sm border ${
isEmailChanged && !isEmailValid
? "border-red-500"
: "border-tertiary"
} flex-grow focus:outline-none focus:border-transparent focus:ring-0`}
} flex-grow focus:outline-hidden focus:border-transparent focus:ring-0`}
placeholder={t("SETTINGS$USER_EMAIL_LOADING")}
data-testid="email-input"
/>
@ -65,7 +65,7 @@ function EmailInputSection({
type="button"
onClick={onSaveEmail}
disabled={!isEmailChanged || isSaving || !isEmailValid}
className="px-4 py-2 rounded bg-primary text-white hover:opacity-80 disabled:opacity-30 disabled:cursor-not-allowed disabled:text-[#0D0F11]"
className="px-4 py-2 rounded-sm bg-primary text-white hover:opacity-80 disabled:opacity-30 disabled:cursor-not-allowed disabled:text-[#0D0F11]"
data-testid="save-email-button"
>
{isSaving ? t("SETTINGS$SAVING") : t("SETTINGS$SAVE")}
@ -76,7 +76,7 @@ function EmailInputSection({
type="button"
onClick={onResendVerification}
disabled={isResendingVerification}
className="px-4 py-2 rounded bg-primary text-white hover:opacity-80 disabled:opacity-30 disabled:cursor-not-allowed disabled:text-[#0D0F11]"
className="px-4 py-2 rounded-sm bg-primary text-white hover:opacity-80 disabled:opacity-30 disabled:cursor-not-allowed disabled:text-[#0D0F11]"
data-testid="resend-verification-button"
>
{isResendingVerification
@ -96,7 +96,7 @@ function VerificationAlert() {
const { t } = useTranslation();
return (
<div
className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mt-4"
className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-sm mt-4"
role="alert"
>
<p className="font-bold">{t("SETTINGS$EMAIL_VERIFICATION_REQUIRED")}</p>
@ -205,7 +205,7 @@ function UserSettingsScreen() {
<div data-testid="user-settings-screen" className="flex flex-col h-full">
<div className="p-9 flex flex-col gap-6">
{isLoading ? (
<div className="animate-pulse h-8 w-64 bg-tertiary rounded" />
<div className="animate-pulse h-8 w-64 bg-tertiary rounded-sm" />
) : (
<EmailInputSection
email={email}

2
frontend/src/routes/vscode-tab.tsx
View File

@ -76,7 +76,7 @@ function VSCodeTab() {
<button
type="button"
onClick={handleOpenInNewTab}
className="px-4 py-2 bg-primary text-white rounded hover:bg-primary-dark transition-colors"
className="px-4 py-2 bg-primary text-white rounded-sm hover:bg-primary-dark transition-colors"
>
{t("VSCODE$OPEN_IN_NEW_TAB")}
</button>

11
frontend/src/tailwind.css
View File

@ -1,9 +1,12 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "tailwindcss";
@plugin '../hero.ts';
@config "../tailwind.config.js";
@source '../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
.button-base {
@apply bg-tertiary border border-neutral-600 rounded;
@apply bg-tertiary border border-neutral-600 rounded-xs;
}
.skeleton {

25
frontend/tailwind.config.js
View File

@ -2,10 +2,6 @@
import { heroui } from "@heroui/react";
import typography from "@tailwindcss/typography";
export default {
content: [
"./src/**/*.{js,ts,jsx,tsx}",
"./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
@ -24,24 +20,5 @@ export default {
},
},
darkMode: "class",
plugins: [
heroui({
defaultTheme: "dark",
layout: {
radius: {
small: "5px",
large: "20px",
},
},
themes: {
dark: {
colors: {
primary: "#4465DB",
logo: "#CFB755",
},
},
},
}),
typography,
],
plugins: [typography],
};

4
frontend/vite.config.ts
View File

@ -5,6 +5,7 @@ import viteTsconfigPaths from "vite-tsconfig-paths";
import svgr from "vite-plugin-svgr";
import { reactRouter } from "@react-router/dev/vite";
import { configDefaults } from "vitest/config";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig(({ mode }) => {
const {
@ -28,6 +29,7 @@ export default defineConfig(({ mode }) => {
!process.env.VITEST && reactRouter(),
viteTsconfigPaths(),
svgr(),
tailwindcss(),
],
server: {
port: FE_PORT,
@ -54,7 +56,7 @@ export default defineConfig(({ mode }) => {
},
},
watch: {
ignored: ['**/node_modules/**', '**/.git/**'],
ignored: ["**/node_modules/**", "**/.git/**"],
},
},
ssr: {