UniqAI/bolt.new
1
0
Fork 0
mirror of https://github.com/stackblitz/bolt.new synced 2025-02-06 04:48:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Changed Colors

Browse Source
This commit is contained in:
Dustin Loring 2024-12-07 18:15:17 -05:00
parent 2d1c19ba9c
commit 19816d9b5e
2 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/components/ui/Settings.tsx
View File

@ -10,6 +10,7 @@ import { toast } from 'react-toastify';
import { useNavigate } from '@remix-run/react';
import commit from '~/commit.json';
import Cookies from 'js-cookie';
import { SettingsSlider } from './SettingsSlider';
interface SettingsProps {
open: boolean;
@ -217,7 +218,9 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
onClick={() => setActiveTab(tab.id)}
className={classNames(
'w-full flex items-center gap-2 px-4 py-3 rounded-lg text-left text-sm transition-all mb-2',
activeTab === tab.id ? 'bg-blue-600 text-white' : 'bg-gray-600 text-gray-200 hover:bg-blue-500',
activeTab === tab.id
? 'bg-gradient-to-r from-purple-500 to-blue-500 text-white'
: 'bg-gray-600 text-gray-200 hover:bg-gradient-to-r hover:from-purple-400 hover:to-blue-400',
)}
>
<div className={tab.icon} />
@ -299,10 +302,10 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
checked={provider.isEnabled}
onChange={() => handleToggleProvider(provider.name)}
/>
<div className="w-11 h-6 bg-gray-300 rounded-full shadow-inner"></div>
<div className={`w-11 h-6 rounded-full shadow-inner transition-colors duration-200 ${provider.isEnabled ? 'bg-[#b44aff]' : 'bg-gray-300'}`}></div>
<div
className={`absolute left-0 w-6 h-6 bg-white rounded-full shadow transition-transform duration-200 ease-in-out ${
provider.isEnabled ? 'transform translate-x-full bg-green-500' : ''
className={`absolute left-0 w-6 h-6 rounded-full shadow transition-transform duration-200 ease-in-out ${
provider.isEnabled ? 'transform translate-x-full bg-white' : 'bg-white'
}`}
></div>
</label>
@ -325,7 +328,8 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
</div>
)}
{activeTab === 'features' && (
<div className="p-4">
<div className="p-4 bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor rounded-lg">
<h3 className="text-lg font-medium text-white mb-4">Feature Settings</h3>
<div className="flex items-center justify-between mb-2">
<span className="text-white">Debug Info</span>
<label className="relative inline-flex items-center cursor-pointer">
@ -335,10 +339,10 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
checked={isDebugEnabled}
onChange={() => setIsDebugEnabled(!isDebugEnabled)}
/>
<div className="w-11 h-6 bg-gray-300 rounded-full shadow-inner"></div>
<div className={`w-11 h-6 rounded-full shadow-inner transition-colors duration-200 ${isDebugEnabled ? 'bg-[#b44aff]' : 'bg-gray-300'}`}></div>
<div
className={`absolute left-0 w-6 h-6 bg-white rounded-full shadow transition-transform duration-200 ease-in-out ${
isDebugEnabled ? 'transform translate-x-full bg-green-500' : ''
className={`absolute left-0 w-6 h-6 rounded-full shadow transition-transform duration-200 ease-in-out ${
isDebugEnabled ? 'transform translate-x-full bg-white' : 'bg-white'
}`}
></div>
</label>

4
app/components/ui/SettingsSlider.tsx
View File

@ -25,8 +25,8 @@ export const SettingsSlider = memo(<T,>({ selected, options, setSelected }: Sett
<div className="relative flex items-center bg-bolt-elements-prompt-background rounded-lg">
<motion.div
className={classNames(
'absolute h-full bg-green-500 transition-all duration-300 rounded-lg',
isLeftSelected ? 'left-0 w-1/2' : 'right-0 w-1/2',
'absolute h-full transition-all duration-300 rounded-lg',
isLeftSelected ? 'left-0 w-1/2 bg-[#b44aff]' : 'right-0 w-1/2 bg-[#b44aff]',
)}
initial={false}
animate={{