From 1a21f0c69dc11efa490e70feb7ff18b6008e553e Mon Sep 17 00:00:00 2001 From: Canorus Date: Wed, 25 Feb 2026 10:47:58 +0900 Subject: [PATCH 1/2] increase font size for composing status to 15px --- src/ui/styles/components.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/ui/styles/components.css b/src/ui/styles/components.css index 37360b3..c7e484a 100644 --- a/src/ui/styles/components.css +++ b/src/ui/styles/components.css @@ -775,6 +775,7 @@ border: none !important; border-radius: 0 !important; font-family: inherit; + font-size: 15px; resize: vertical !important; background: transparent !important; min-height: 80px; @@ -856,6 +857,7 @@ background: var(--color-input-bg); color: var(--color-input-text); font-family: inherit; + font-size: 15px; } .compose-actions { From ba4435f9f96bcbdb9fb9b56c3da96144feb9b595 Mon Sep 17 00:00:00 2001 From: Canorus Date: Wed, 25 Feb 2026 11:09:58 +0900 Subject: [PATCH 2/2] add custom css section to config panel --- src/App.tsx | 22 ++++++++- src/ui/components/SettingsModal.tsx | 31 ++++++++++++- src/ui/styles/components.css | 69 +++++++++++++++++++++++++++++ 3 files changed, 120 insertions(+), 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 3427198..f5bcded 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -77,6 +77,9 @@ export const App = () => { }); const [pomodoroSessionType, setPomodoroSessionType] = useState<"focus" | "break" | "longBreak">("focus"); const [pomodoroIsRunning, setPomodoroIsRunning] = useState(false); + const [customCss, setCustomCss] = useState(() => { + return localStorage.getItem("textodon.customCss") || ""; + }); const [settingsOpen, setSettingsOpen] = useState(false); const [settingsAccountId, setSettingsAccountId] = useState(null); const [reauthLoading, setReauthLoading] = useState(false); @@ -425,7 +428,19 @@ export const App = () => { localStorage.setItem("textodon.pomodoro.longBreak", String(pomodoroLongBreak)); }, [pomodoroLongBreak]); - + useEffect(() => { + let styleTag = document.getElementById("textodon-custom-css"); + if (customCss.trim()) { + if (!styleTag) { + styleTag = document.createElement("style"); + styleTag.id = "textodon-custom-css"; + document.head.appendChild(styleTag); + } + styleTag.textContent = customCss; + } else if (styleTag) { + styleTag.remove(); + } + }, [customCss]); const closeMobileMenu = useCallback(() => { setMobileMenuOpen(false); @@ -1347,6 +1362,11 @@ export const App = () => { onPomodoroFocusChange={setPomodoroFocus} onPomodoroBreakChange={setPomodoroBreak} onPomodoroLongBreakChange={setPomodoroLongBreak} + customCss={customCss} + onCustomCssApply={(value) => { + localStorage.setItem("textodon.customCss", value); + window.location.reload(); + }} /> {profileTargets.map((target, index) => ( diff --git a/src/ui/components/SettingsModal.tsx b/src/ui/components/SettingsModal.tsx index 37f6395..97df677 100644 --- a/src/ui/components/SettingsModal.tsx +++ b/src/ui/components/SettingsModal.tsx @@ -1,3 +1,4 @@ +import React, { useState } from "react"; import type { AccountsState } from "../state/AppContext"; import type { ColorScheme, ThemeMode } from "../utils/theme"; import { AccountSelector } from "./AccountSelector"; @@ -32,6 +33,8 @@ type SettingsModalProps = { onPomodoroFocusChange: (value: number) => void; onPomodoroBreakChange: (value: number) => void; onPomodoroLongBreakChange: (value: number) => void; + customCss: string; + onCustomCssApply: (value: string) => void; }; export const SettingsModal = ({ @@ -63,8 +66,12 @@ export const SettingsModal = ({ pomodoroLongBreak, onPomodoroFocusChange, onPomodoroBreakChange, - onPomodoroLongBreakChange + onPomodoroLongBreakChange, + customCss, + onCustomCssApply }: SettingsModalProps) => { + const [localCustomCss, setLocalCustomCss] = useState(customCss); + if (!open) { return null; } @@ -281,6 +288,28 @@ export const SettingsModal = ({ 모두 삭제 +
+
+ + Custom CSS +

직접 CSS를 작성하여 스타일을 커스텀합니다.

+ +
+