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

update to styles

Browse Source
This commit is contained in:
Dustin Loring 2024-12-08 09:18:18 -05:00
parent 96020a5a6c
commit 0bf6b6fd47
3 changed files with 47 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -207,14 +207,14 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
</RadixDialog.Overlay> </RadixDialog.Overlay>
<RadixDialog.Content asChild> <RadixDialog.Content asChild>
<motion.div <motion.div
className="fixed top-[50%] left-[50%] z-max h-[85vh] w-[90vw] max-w-[900px] translate-x-[-50%] translate-y-[-50%] border border-bolt-elements-borderColor rounded-lg bg-gray-800 shadow-lg focus:outline-none overflow-hidden" className="fixed top-[50%] left-[50%] z-max h-[85vh] w-[90vw] max-w-[900px] translate-x-[-50%] translate-y-[-50%] border border-bolt-elements-borderColor rounded-lg shadow-lg focus:outline-none overflow-hidden"
initial="closed" initial="closed"
animate="open" animate="open"
exit="closed" exit="closed"
variants={dialogVariants} variants={dialogVariants}
> >
<div className="flex h-full"> <div className="flex h-full">
<div className="w-48 border-r border-bolt-elements-borderColor bg-gray-700 p-4 flex flex-col justify-between settings-tabs"> <div className="w-48 border-r border-bolt-elements-borderColor bg-white dark:bg-gray-900 p-4 flex flex-col justify-between settings-tabs">
{tabs.map((tab) => ( {tabs.map((tab) => (
<button <button
key={tab.id} key={tab.id}
@ -249,12 +249,12 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
</div> </div>
</div> </div>
<div className="flex-1 flex flex-col p-8"> <div className="flex-1 flex flex-col p-8 bg-gray-50 dark:bg-gray-800">
<DialogTitle className="flex-shrink-0 text-lg font-semibold text-white">Settings</DialogTitle> <DialogTitle className="flex-shrink-0 text-lg font-semibold text-bolt-elements-textPrimary">Settings</DialogTitle>
<div className="flex-1 overflow-y-auto"> <div className="flex-1 overflow-y-auto">
{activeTab === 'chat-history' && ( {activeTab === 'chat-history' && (
<div className="p-4"> <div className="p-4">
<h3 className="text-lg font-medium text-white mb-4">Chat History</h3> <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Chat History</h3>
<button <button
onClick={handleExportAllChats} onClick={handleExportAllChats}
className="bg-blue-500 text-white rounded-lg px-4 py-2 hover:bg-blue-600 mb-4 transition-colors duration-200" className="bg-blue-500 text-white rounded-lg px-4 py-2 hover:bg-blue-600 mb-4 transition-colors duration-200"
@ -262,7 +262,7 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
Export All Chats Export All Chats
</button> </button>
<div className="text-white rounded-lg p-4 mb-4 settings-danger-area"> <div className="text-bolt-elements-textPrimary rounded-lg p-4 mb-4 settings-danger-area">
<h4 className="font-semibold">Danger Area</h4> <h4 className="font-semibold">Danger Area</h4>
<p className="mb-2">This action cannot be undone!</p> <p className="mb-2">This action cannot be undone!</p>
<button <button
@ -281,7 +281,7 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
{activeTab === 'providers' && ( {activeTab === 'providers' && (
<div className="p-4"> <div className="p-4">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<h3 className="text-lg font-medium text-white">Providers</h3> <h3 className="text-lg font-medium text-bolt-elements-textPrimary">Providers</h3>
<input <input
type="text" type="text"
placeholder="Search providers..." placeholder="Search providers..."
@ -293,10 +293,10 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
{filteredProviders.map((provider) => ( {filteredProviders.map((provider) => (
<div <div
key={provider.name} key={provider.name}
className="flex flex-col mb-6 provider-item hover:bg-gray-600 p-4 rounded-lg" className="flex flex-col mb-6 provider-item hover:bg-bolt-elements-bg-depth-3 p-4 rounded-lg"
> >
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<span className="text-white">{provider.name}</span> <span className="text-bolt-elements-textPrimary">{provider.name}</span>
<label className="relative inline-flex items-center cursor-pointer"> <label className="relative inline-flex items-center cursor-pointer">
<input <input
type="checkbox" type="checkbox"
@ -317,13 +317,13 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
{/* Base URL input for configurable providers */} {/* Base URL input for configurable providers */}
{URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && provider.isEnabled && ( {URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && provider.isEnabled && (
<div className="mt-2"> <div className="mt-2">
<label className="block text-sm text-gray-300 mb-1">Base URL:</label> <label className="block text-sm text-bolt-elements-textSecondary mb-1">Base URL:</label>
<input <input
type="text" type="text"
value={baseUrls[provider.name]} value={baseUrls[provider.name]}
onChange={(e) => handleBaseUrlChange(provider.name, e.target.value)} onChange={(e) => handleBaseUrlChange(provider.name, e.target.value)}
placeholder={`Enter ${provider.name} base URL`} placeholder={`Enter ${provider.name} base URL`}
className="w-full p-2 rounded border border-gray-600 bg-gray-700 text-white text-sm" className="w-full p-2 rounded border border-bolt-elements-borderColor bg-bolt-elements-bg-depth-2 text-bolt-elements-textPrimary text-sm"
/> />
</div> </div>
)} )}
@ -332,10 +332,10 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
</div> </div>
)} )}
{activeTab === 'features' && ( {activeTab === 'features' && (
<div className="p-4 bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor rounded-lg mb-4"> <div className="p-4 bg-bolt-elements-bg-depth-2 border border-bolt-elements-borderColor rounded-lg mb-4">
<h3 className="text-lg font-medium text-white mb-4">Feature Settings</h3> <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Feature Settings</h3>
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<span className="text-white">Debug Info</span> <span className="text-bolt-elements-textPrimary">Debug Info</span>
<label className="relative inline-flex items-center cursor-pointer"> <label className="relative inline-flex items-center cursor-pointer">
<input <input
type="checkbox" type="checkbox"
@ -356,10 +356,10 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
</div> </div>
)} )}
{activeTab === 'features' && ( {activeTab === 'features' && (
<div className="p-4 bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor rounded-lg"> <div className="p-4 bg-bolt-elements-bg-depth-2 border border-bolt-elements-borderColor rounded-lg">
<h3 className="text-lg font-medium text-white mb-4">Experimental Area</h3> <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Experimental Area</h3>
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<span className="text-white">Replace with local models</span> <span className="text-bolt-elements-textPrimary">Replace with local models</span>
<label className="relative inline-flex items-center cursor-pointer"> <label className="relative inline-flex items-center cursor-pointer">
<input <input
type="checkbox" type="checkbox"
@ -381,7 +381,7 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
)} )}
{activeTab === 'debug' && isDebugEnabled && ( {activeTab === 'debug' && isDebugEnabled && (
<div className="p-4"> <div className="p-4">
<h3 className="text-lg font-medium text-white mb-4">Debug Tab</h3> <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Debug Tab</h3>
<button <button
onClick={handleCopyToClipboard} onClick={handleCopyToClipboard}
className="bg-blue-500 text-white rounded-lg px-4 py-2 hover:bg-blue-600 mb-4 transition-colors duration-200" className="bg-blue-500 text-white rounded-lg px-4 py-2 hover:bg-blue-600 mb-4 transition-colors duration-200"
@ -389,30 +389,30 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
Copy to Clipboard Copy to Clipboard
</button> </button>
<h4 className="text-md font-medium text-white">System Information</h4> <h4 className="text-md font-medium text-bolt-elements-textPrimary">System Information</h4>
<p className="text-white">OS: {navigator.platform}</p> <p className="text-bolt-elements-textSecondary">OS: {navigator.platform}</p>
<p className="text-white">Browser: {navigator.userAgent}</p> <p className="text-bolt-elements-textSecondary">Browser: {navigator.userAgent}</p>
<h4 className="text-md font-medium text-white mt-4">Active Features</h4> <h4 className="text-md font-medium text-bolt-elements-textPrimary mt-4">Active Features</h4>
<ul> <ul>
{providers {providers
.filter((provider) => provider.isEnabled) .filter((provider) => provider.isEnabled)
.map((provider) => ( .map((provider) => (
<li key={provider.name} className="text-white"> <li key={provider.name} className="text-bolt-elements-textSecondary">
{provider.name} {provider.name}
</li> </li>
))} ))}
</ul> </ul>
<h4 className="text-md font-medium text-white mt-4">Base URLs</h4> <h4 className="text-md font-medium text-bolt-elements-textPrimary mt-4">Base URLs</h4>
<ul> <ul>
<li className="text-white">Ollama: {process.env.REACT_APP_OLLAMA_URL}</li> <li className="text-bolt-elements-textSecondary">Ollama: {process.env.REACT_APP_OLLAMA_URL}</li>
<li className="text-white">OpenAI: {process.env.REACT_APP_OPENAI_URL}</li> <li className="text-bolt-elements-textSecondary">OpenAI: {process.env.REACT_APP_OPENAI_URL}</li>
<li className="text-white">LM Studio: {process.env.REACT_APP_LM_STUDIO_URL}</li> <li className="text-bolt-elements-textSecondary">LM Studio: {process.env.REACT_APP_LM_STUDIO_URL}</li>
</ul> </ul>
<h4 className="text-md font-medium text-white mt-4">Version Information</h4> <h4 className="text-md font-medium text-bolt-elements-textPrimary mt-4">Version Information</h4>
<p className="text-white">Version Hash: {versionHash}</p> <p className="text-bolt-elements-textSecondary">Version Hash: {versionHash}</p>
</div> </div>
)} )}
</div> </div>

24
app/styles/components/Settings.scss
View File

@ -12,49 +12,49 @@
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
&.active { &.active {
background: #b44aff; background: var(--bolt-elements-button-primary-background);
color: white; color: var(--bolt-elements-textPrimary);
} }
&:not(.active) { &:not(.active) {
background: #4b5563; background: var(--bolt-elements-bg-depth-3);
color: #e5e7eb; color: var(--bolt-elements-textPrimary);
&:hover { &:hover {
background: linear-gradient(to right, #6b5bff, #3b82f6); background: var(--bolt-elements-button-primary-backgroundHover);
} }
} }
} }
} }
.settings-button { .settings-button {
background-color: #b44aff; background-color: var(--bolt-elements-button-primary-background);
color: white; color: var(--bolt-elements-textPrimary);
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
transition: background-color 0.2s; transition: background-color 0.2s;
&:hover { &:hover {
background-color: #2563eb; background-color: var(--bolt-elements-button-primary-backgroundHover);
} }
} }
.settings-danger-area { .settings-danger-area {
background-color: transparent; background-color: transparent;
color: white; color: var(--bolt-elements-textPrimary);
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 1rem; padding: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
button { button {
background-color: #dc2626; background-color: var(--bolt-elements-button-danger-background);
color: white; color: var(--bolt-elements-button-danger-text);
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
transition: background-color 0.2s; transition: background-color 0.2s;
&:hover { &:hover {
background-color: #b91c1c; background-color: var(--bolt-elements-button-danger-backgroundHover);
} }
} }
} }

11
app/styles/components/SettingsSlider.scss
View File

@ -3,7 +3,7 @@
&__thumb { &__thumb {
@apply absolute h-full transition-all duration-300 rounded-lg; @apply absolute h-full transition-all duration-300 rounded-lg;
background-color: #b44aff; background-color: var(--bolt-elements-button-primary-background);
&--left { &--left {
@apply left-0 w-1/2; @apply left-0 w-1/2;
@ -18,7 +18,7 @@
@apply relative z-10 flex-1 p-2 rounded-lg text-sm transition-colors duration-200; @apply relative z-10 flex-1 p-2 rounded-lg text-sm transition-colors duration-200;
&--selected { &--selected {
@apply text-white; @apply text-bolt-elements-textPrimary;
} }
&--unselected { &--unselected {
@ -32,16 +32,17 @@
@apply w-11 h-6 rounded-full shadow-inner transition-colors duration-200; @apply w-11 h-6 rounded-full shadow-inner transition-colors duration-200;
&--enabled { &--enabled {
background-color: #b44aff; background-color: var(--bolt-elements-item-contentAccent);
} }
&--disabled { &--disabled {
@apply bg-gray-300; background-color: var(--bolt-elements-bg-depth-3);
} }
} }
&__thumb { &__thumb {
@apply absolute left-0 w-6 h-6 rounded-full shadow transition-transform duration-200 ease-in-out bg-white; @apply absolute left-0 w-6 h-6 rounded-full shadow transition-transform duration-200 ease-in-out;
background-color: var(--bolt-elements-textPrimary);
&--enabled { &--enabled {
@apply transform translate-x-full; @apply transform translate-x-full;