iBoss/bolt-diy
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

ui dark mode enhancements

Browse Source
This commit is contained in:
Stijnus
2025-01-22 14:34:30 +01:00
parent 723c6a4f02
commit 2b585c24fe
6 changed files with 201 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
app/components/settings/debug/DebugTab.tsx
View File

@@ -502,9 +502,10 @@ export default function DebugTab() {
disabled={loading.systemInfo}
className={classNames(
'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
'bg-[#F5F5F5] dark:bg-[#1A1A1A] hover:bg-[#E5E5E5] dark:hover:bg-[#2A2A2A]',
'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
'focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2',
'bg-[#F5F5F5] hover:bg-purple-500/10 hover:text-purple-500',
'dark:bg-[#1A1A1A] dark:hover:bg-purple-500/20',
'text-bolt-elements-textPrimary dark:hover:text-purple-500',
'focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-[#0A0A0A]',
{ 'opacity-50 cursor-not-allowed': loading.systemInfo },
)}
>
@@ -521,9 +522,10 @@ export default function DebugTab() {
disabled={loading.performance}
className={classNames(
'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
'bg-[#F5F5F5] dark:bg-[#1A1A1A] hover:bg-[#E5E5E5] dark:hover:bg-[#2A2A2A]',
'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
'focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2',
'bg-[#F5F5F5] hover:bg-purple-500/10 hover:text-purple-500',
'dark:bg-[#1A1A1A] dark:hover:bg-purple-500/20',
'text-bolt-elements-textPrimary dark:hover:text-purple-500',
'focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-[#0A0A0A]',
{ 'opacity-50 cursor-not-allowed': loading.performance },
)}
>
@@ -540,9 +542,10 @@ export default function DebugTab() {
disabled={loading.errors}
className={classNames(
'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
'bg-[#F5F5F5] dark:bg-[#1A1A1A] hover:bg-[#E5E5E5] dark:hover:bg-[#2A2A2A]',
'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
'focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2',
'bg-[#F5F5F5] hover:bg-purple-500/10 hover:text-purple-500',
'dark:bg-[#1A1A1A] dark:hover:bg-purple-500/20',
'text-bolt-elements-textPrimary dark:hover:text-purple-500',
'focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-[#0A0A0A]',
{ 'opacity-50 cursor-not-allowed': loading.errors },
)}
>
@@ -558,9 +561,10 @@ export default function DebugTab() {
onClick={exportDebugInfo}
className={classNames(
'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
'bg-[#F5F5F5] dark:bg-[#1A1A1A] hover:bg-[#E5E5E5] dark:hover:bg-[#2A2A2A]',
'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
'bg-[#F5F5F5] hover:bg-purple-500/10 hover:text-purple-500',
'dark:bg-[#1A1A1A] dark:hover:bg-purple-500/20',
'text-bolt-elements-textPrimary dark:hover:text-purple-500',
'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-[#0A0A0A]',
)}
>
<div className="i-ph:download w-4 h-4" />
@@ -604,8 +608,9 @@ export default function DebugTab() {
onClick={handleLogSystemInfo}
className={classNames(
'flex items-center gap-2 px-3 py-2 rounded-lg text-sm',
'bg-[#F5F5F5] dark:bg-[#1A1A1A] hover:bg-[#E5E5E5] dark:hover:bg-[#2A2A2A]',
'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
'bg-[#F5F5F5] hover:bg-purple-500/10 hover:text-purple-500',
'dark:bg-[#1A1A1A] dark:hover:bg-purple-500/20',
'text-bolt-elements-textPrimary dark:hover:text-purple-500',
'transition-colors duration-200',
)}
>
@@ -616,8 +621,9 @@ export default function DebugTab() {
onClick={getSystemInfo}
className={classNames(
'flex items-center gap-2 px-3 py-2 rounded-lg text-sm',
'bg-[#F5F5F5] dark:bg-[#1A1A1A] hover:bg-[#E5E5E5] dark:hover:bg-[#2A2A2A]',
'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
'bg-[#F5F5F5] hover:bg-purple-500/10 hover:text-purple-500',
'dark:bg-[#1A1A1A] dark:hover:bg-purple-500/20',
'text-bolt-elements-textPrimary dark:hover:text-purple-500',
'transition-colors duration-200',
{ 'opacity-50 cursor-not-allowed': loading.systemInfo },
)}
@@ -761,9 +767,10 @@ export default function DebugTab() {
onClick={handleLogPerformance}
className={classNames(
'flex items-center gap-2 px-3 py-2 rounded-lg text-sm',
'bg-[#F5F5F5] dark:bg-[#1A1A1A] hover:bg-[#E5E5E5] dark:hover:bg-[#2A2A2A]',
'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
'transition-colors duration-200',
'bg-[#F5F5F5] hover:bg-purple-500/10 hover:text-purple-500',
'dark:bg-[#1A1A1A] dark:hover:bg-purple-500/20',
'text-bolt-elements-textPrimary dark:hover:text-purple-500',
'focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-[#0A0A0A]',
{ 'opacity-50 cursor-not-allowed': loading.performance },
)}
disabled={loading.performance}
@@ -848,9 +855,10 @@ export default function DebugTab() {
onClick={getWebAppInfo}
className={classNames(
'flex items-center gap-2 px-3 py-2 rounded-lg text-sm',
'bg-[#F5F5F5] dark:bg-[#1A1A1A] hover:bg-[#E5E5E5] dark:hover:bg-[#2A2A2A]',
'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
'transition-colors duration-200',
'bg-[#F5F5F5] hover:bg-purple-500/10 hover:text-purple-500',
'dark:bg-[#1A1A1A] dark:hover:bg-purple-500/20',
'text-bolt-elements-textPrimary dark:hover:text-purple-500',
'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-[#0A0A0A]',
{ 'opacity-50 cursor-not-allowed': loading.webAppInfo },
)}
disabled={loading.webAppInfo}
@@ -924,9 +932,10 @@ export default function DebugTab() {
onClick={checkErrors}
className={classNames(
'flex items-center gap-2 px-3 py-2 rounded-lg text-sm',
'bg-[#F5F5F5] dark:bg-[#1A1A1A] hover:bg-[#E5E5E5] dark:hover:bg-[#2A2A2A]',
'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
'transition-colors duration-200',
'bg-[#F5F5F5] hover:bg-purple-500/10 hover:text-purple-500',
'dark:bg-[#1A1A1A] dark:hover:bg-purple-500/20',
'text-bolt-elements-textPrimary dark:hover:text-purple-500',
'focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-[#0A0A0A]',
{ 'opacity-50 cursor-not-allowed': loading.errors },
)}
disabled={loading.errors}

20
app/components/settings/event-logs/EventLogsTab.tsx
View File

@@ -307,7 +307,7 @@ export function EventLogsTab() {
setShowLevelFilter(!showLevelFilter);
setShowCategoryFilter(false);
}}
className="flex items-center gap-2 px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
className="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-purple-500/10 dark:hover:bg-purple-500/20 hover:text-purple-500 dark:hover:text-purple-500 transition-colors"
>
<div
className={classNames('text-sm', selectedLevelOption?.icon || 'i-ph:funnel')}
@@ -324,7 +324,7 @@ export function EventLogsTab() {
{showLevelFilter && (
<div className="absolute left-0 top-full mt-1 z-20">
<div className="p-1 rounded-lg shadow-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
<div className="p-1 rounded-lg shadow-lg bg-white dark:bg-[#1A1A1A] border border-[#E5E5E5] dark:border-[#333333]">
{logLevelOptions.map((option) => (
<button
key={option.value}
@@ -335,11 +335,11 @@ export function EventLogsTab() {
className={classNames(
'flex items-center gap-2 w-full px-3 py-1.5 rounded-md text-sm transition-colors',
option.value === selectedLevel
? 'bg-purple-100 dark:bg-purple-800/40 text-purple-900 dark:text-purple-200'
: 'hover:bg-gray-100 dark:hover:bg-gray-700/50',
? 'bg-purple-500/10 dark:bg-purple-500/20 text-purple-500 dark:text-purple-500'
: 'hover:bg-purple-500/10 dark:hover:bg-purple-500/20 hover:text-purple-500 dark:hover:text-purple-500',
)}
>
<div className={classNames(option.icon, 'text-base', option.color)} />
<div className={classNames(option.icon, 'text-base')} style={{ color: option.color }} />
<span>{option.label}</span>
</button>
))}
@@ -357,7 +357,7 @@ export function EventLogsTab() {
setShowCategoryFilter(!showCategoryFilter);
setShowLevelFilter(false);
}}
className="flex items-center gap-2 px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
className="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-purple-500/10 dark:hover:bg-purple-500/20 hover:text-purple-500 dark:hover:text-purple-500 transition-colors"
>
<div
className={classNames('text-sm', selectedCategoryOption?.icon || 'i-ph:squares-four')}
@@ -376,7 +376,7 @@ export function EventLogsTab() {
{showCategoryFilter && (
<div className="absolute left-0 top-full mt-1 z-20">
<div className="p-1 rounded-lg shadow-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
<div className="p-1 rounded-lg shadow-lg bg-white dark:bg-[#1A1A1A] border border-[#E5E5E5] dark:border-[#333333]">
{logCategoryOptions.map((option) => (
<button
key={option.value}
@@ -387,11 +387,11 @@ export function EventLogsTab() {
className={classNames(
'flex items-center gap-2 w-full px-3 py-1.5 rounded-md text-sm transition-colors',
option.value === selectedCategory
? 'bg-purple-100 dark:bg-purple-800/40 text-purple-900 dark:text-purple-200'
: 'hover:bg-gray-100 dark:hover:bg-gray-700/50',
? 'bg-purple-500/10 dark:bg-purple-500/20 text-purple-500 dark:text-purple-500'
: 'hover:bg-purple-500/10 dark:hover:bg-purple-500/20 hover:text-purple-500 dark:hover:text-purple-500',
)}
>
<div className={classNames(option.icon, 'text-base', option.color)} />
<div className={classNames(option.icon, 'text-base')} style={{ color: option.color }} />
<span>{option.label}</span>
</button>
))}

8
app/components/settings/providers/LocalProvidersTab.tsx
View File

@@ -280,7 +280,13 @@ const LocalProvidersTab = () => {
{provider.name === 'Ollama' && provider.settings.enabled && (
<motion.button
onClick={() => setShowOllamaUpdater(true)}
className={classNames(settingsStyles.button.base, settingsStyles.button.secondary, 'ml-2')}
className={classNames(
settingsStyles.button.base,
settingsStyles.button.secondary,
'ml-2',
'hover:bg-purple-500/10 hover:text-purple-500',
'dark:bg-[#1A1A1A] dark:hover:bg-purple-500/20 dark:text-bolt-elements-textPrimary dark:hover:text-purple-500',
)}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
>

14
app/components/settings/providers/OllamaModelUpdater.tsx
View File

@@ -218,7 +218,12 @@ export default function OllamaModelUpdater() {
<motion.button
onClick={handleBulkUpdate}
disabled={isBulkUpdating}
className={classNames(settingsStyles.button.base, settingsStyles.button.primary)}
className={classNames(
settingsStyles.button.base,
settingsStyles.button.primary,
'hover:bg-purple-500/10 hover:text-purple-500',
'dark:hover:bg-purple-500/20 dark:hover:text-purple-500',
)}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
>
@@ -280,7 +285,12 @@ export default function OllamaModelUpdater() {
<motion.button
onClick={() => handleSingleUpdate(model.name)}
disabled={model.status === 'updating'}
className={classNames(settingsStyles.button.base, settingsStyles.button.secondary)}
className={classNames(
settingsStyles.button.base,
settingsStyles.button.secondary,
'hover:bg-purple-500/10 hover:text-purple-500',
'dark:bg-[#1A1A1A] dark:hover:bg-purple-500/20 dark:text-bolt-elements-textPrimary dark:hover:text-purple-500',
)}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
>

6
app/components/settings/task-manager/TaskManagerTab.tsx
View File

@@ -570,8 +570,10 @@ export default function TaskManagerTab() {
onClick={updateProcesses}
className={classNames(
'flex items-center gap-2 px-3 py-2 rounded-lg text-sm',
'bg-[#F5F5F5] dark:bg-[#1A1A1A] hover:bg-[#E5E5E5] dark:hover:bg-[#2A2A2A]',
'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
'hover:bg-purple-500/10 hover:text-purple-500',
'dark:hover:bg-purple-500/20 dark:hover:text-purple-500',
'text-bolt-elements-textPrimary',
'transition-colors duration-200',
{ 'opacity-50 cursor-not-allowed': loading.processes },
)}