style(x-bot): 다이얼로그 색상을 X 브랜드(검정)로 변경

하늘색(sky, 구 트위터 색)을 X 현재 브랜드인 검정 계열로 교체
(토글/버튼/포커스/태그/로더). 헤더의 검정 X 아이콘과 통일.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
caadiq 2026-06-07 18:37:09 +09:00
parent 3d5f1d8a66
commit 8f79ea4ee4

View file

@ -102,7 +102,7 @@ function Dropdown({ value, options, onChange, placeholder = '선택', className
setIsOpen(false);
}}
className={`w-full px-4 py-2 text-left hover:bg-gray-50 transition-colors text-sm ${
value === opt.value ? 'bg-sky-50 text-sky-600' : ''
value === opt.value ? 'bg-gray-100 text-gray-900' : ''
}`}
>
{opt.label}
@ -269,7 +269,7 @@ function XBotDialog({ isOpen, onClose, botId = null, onSuccess }) {
{/* 본문 */}
{botLoading ? (
<div className="flex-1 flex items-center justify-center p-12">
<Loader2 size={32} className="animate-spin text-sky-500" />
<Loader2 size={32} className="animate-spin text-gray-900" />
</div>
) : (
<form onSubmit={handleSubmit} className="flex-1 overflow-y-auto p-6 space-y-5">
@ -287,7 +287,7 @@ function XBotDialog({ isOpen, onClose, botId = null, onSuccess }) {
onChange={(e) => setUsername(e.target.value)}
placeholder="realfromis_9"
disabled={isEdit}
className="w-full pl-8 pr-4 py-2.5 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-sky-500/20 focus:border-sky-500 disabled:bg-gray-50 disabled:text-gray-500"
className="w-full pl-8 pr-4 py-2.5 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-black/15 focus:border-black disabled:bg-gray-50 disabled:text-gray-500"
/>
</div>
{!isEdit && (
@ -370,7 +370,7 @@ function XBotDialog({ isOpen, onClose, botId = null, onSuccess }) {
type="button"
onClick={() => setIncludeRetweets(!includeRetweets)}
className={`relative w-11 h-6 rounded-full transition-colors ${
includeRetweets ? 'bg-sky-500' : 'bg-gray-300'
includeRetweets ? 'bg-black' : 'bg-gray-300'
}`}
>
<span
@ -391,7 +391,7 @@ function XBotDialog({ isOpen, onClose, botId = null, onSuccess }) {
type="button"
onClick={() => setExtractYoutube(!extractYoutube)}
className={`relative w-11 h-6 rounded-full transition-colors ${
extractYoutube ? 'bg-sky-500' : 'bg-gray-300'
extractYoutube ? 'bg-black' : 'bg-gray-300'
}`}
>
<span
@ -413,7 +413,7 @@ function XBotDialog({ isOpen, onClose, botId = null, onSuccess }) {
type="button"
onClick={() => setExcludeManagedChannels(!excludeManagedChannels)}
className={`relative w-11 h-6 rounded-full transition-colors ${
excludeManagedChannels ? 'bg-sky-500' : 'bg-gray-300'
excludeManagedChannels ? 'bg-black' : 'bg-gray-300'
}`}
>
<span
@ -432,13 +432,13 @@ function XBotDialog({ isOpen, onClose, botId = null, onSuccess }) {
{textFilters.map((filter, idx) => (
<span
key={idx}
className="inline-flex items-center gap-1 px-2 py-1 bg-sky-50 text-sky-600 rounded-md text-sm"
className="inline-flex items-center gap-1 px-2 py-1 bg-gray-100 text-gray-900 rounded-md text-sm"
>
{filter}
<button
type="button"
onClick={() => setTextFilters(textFilters.filter((_, i) => i !== idx))}
className="hover:text-sky-800"
className="hover:text-black"
>
<X size={14} />
</button>
@ -485,7 +485,7 @@ function XBotDialog({ isOpen, onClose, botId = null, onSuccess }) {
type="submit"
onClick={handleSubmit}
disabled={!profileInfo || submitting || botLoading}
className="px-4 py-2.5 bg-sky-500 text-white rounded-lg hover:bg-sky-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
className="px-4 py-2.5 bg-black text-white rounded-lg hover:bg-neutral-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
>
{submitting && <Loader2 size={16} className="animate-spin" />}
{isEdit ? '수정' : '추가'}