mirror of
https://github.com/stackblitz/bolt.new
synced 2025-02-05 20:46:43 +00:00
update to styles
This commit is contained in:
Dustin Loring
parent
96020a5a6c
commit
0bf6b6fd47
@ -207,14 +207,14 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
|
||||
</RadixDialog.Overlay>
|
||||
<RadixDialog.Content asChild>
|
||||
<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"
|
||||
animate="open"
|
||||
exit="closed"
|
||||
variants={dialogVariants}
|
||||
>
|
||||
<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) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
@ -249,12 +249,12 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex flex-col p-8">
|
||||
<DialogTitle className="flex-shrink-0 text-lg font-semibold text-white">Settings</DialogTitle>
|
||||
<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-bolt-elements-textPrimary">Settings</DialogTitle>
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{activeTab === 'chat-history' && (
|
||||
<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
|
||||
onClick={handleExportAllChats}
|
||||
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
|
||||
</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>
|
||||
<p className="mb-2">This action cannot be undone!</p>
|
||||
<button
|
||||
@ -281,7 +281,7 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
|
||||
{activeTab === 'providers' && (
|
||||
<div className="p-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
|
||||
type="text"
|
||||
placeholder="Search providers..."
|
||||
@ -293,10 +293,10 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
|
||||
{filteredProviders.map((provider) => (
|
||||
<div
|
||||
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">
|
||||
<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">
|
||||
<input
|
||||
type="checkbox"
|
||||
@ -317,13 +317,13 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
|
||||
{/* Base URL input for configurable providers */}
|
||||
{URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && provider.isEnabled && (
|
||||
<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
|
||||
type="text"
|
||||
value={baseUrls[provider.name]}
|
||||
onChange={(e) => handleBaseUrlChange(provider.name, e.target.value)}
|
||||
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>
|
||||
)}
|
||||
@ -332,10 +332,10 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
|
||||
</div>
|
||||
)}
|
||||
{activeTab === 'features' && (
|
||||
<div className="p-4 bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor rounded-lg mb-4">
|
||||
<h3 className="text-lg font-medium text-white mb-4">Feature Settings</h3>
|
||||
<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-bolt-elements-textPrimary mb-4">Feature Settings</h3>
|
||||
<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">
|
||||
<input
|
||||
type="checkbox"
|
||||
@ -356,10 +356,10 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
|
||||
</div>
|
||||
)}
|
||||
{activeTab === 'features' && (
|
||||
<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">Experimental Area</h3>
|
||||
<div className="p-4 bg-bolt-elements-bg-depth-2 border border-bolt-elements-borderColor rounded-lg">
|
||||
<h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Experimental Area</h3>
|
||||
<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">
|
||||
<input
|
||||
type="checkbox"
|
||||
@ -381,7 +381,7 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
|
||||
)}
|
||||
{activeTab === 'debug' && isDebugEnabled && (
|
||||
<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
|
||||
onClick={handleCopyToClipboard}
|
||||
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
|
||||
</button>
|
||||
|
||||
<h4 className="text-md font-medium text-white">System Information</h4>
|
||||
<p className="text-white">OS: {navigator.platform}</p>
|
||||
<p className="text-white">Browser: {navigator.userAgent}</p>
|
||||
<h4 className="text-md font-medium text-bolt-elements-textPrimary">System Information</h4>
|
||||
<p className="text-bolt-elements-textSecondary">OS: {navigator.platform}</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>
|
||||
{providers
|
||||
.filter((provider) => provider.isEnabled)
|
||||
.map((provider) => (
|
||||
<li key={provider.name} className="text-white">
|
||||
<li key={provider.name} className="text-bolt-elements-textSecondary">
|
||||
{provider.name}
|
||||
</li>
|
||||
))}
|
||||
</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>
|
||||
<li className="text-white">Ollama: {process.env.REACT_APP_OLLAMA_URL}</li>
|
||||
<li className="text-white">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">Ollama: {process.env.REACT_APP_OLLAMA_URL}</li>
|
||||
<li className="text-bolt-elements-textSecondary">OpenAI: {process.env.REACT_APP_OPENAI_URL}</li>
|
||||
<li className="text-bolt-elements-textSecondary">LM Studio: {process.env.REACT_APP_LM_STUDIO_URL}</li>
|
||||
</ul>
|
||||
|
||||
<h4 className="text-md font-medium text-white mt-4">Version Information</h4>
|
||||
<p className="text-white">Version Hash: {versionHash}</p>
|
||||
<h4 className="text-md font-medium text-bolt-elements-textPrimary mt-4">Version Information</h4>
|
||||
<p className="text-bolt-elements-textSecondary">Version Hash: {versionHash}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -12,49 +12,49 @@
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
&.active {
|
||||
background: #b44aff;
|
||||
color: white;
|
||||
background: var(--bolt-elements-button-primary-background);
|
||||
color: var(--bolt-elements-textPrimary);
|
||||
}
|
||||
|
||||
&:not(.active) {
|
||||
background: #4b5563;
|
||||
color: #e5e7eb;
|
||||
background: var(--bolt-elements-bg-depth-3);
|
||||
color: var(--bolt-elements-textPrimary);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(to right, #6b5bff, #3b82f6);
|
||||
background: var(--bolt-elements-button-primary-backgroundHover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings-button {
|
||||
background-color: #b44aff;
|
||||
color: white;
|
||||
background-color: var(--bolt-elements-button-primary-background);
|
||||
color: var(--bolt-elements-textPrimary);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: #2563eb;
|
||||
background-color: var(--bolt-elements-button-primary-backgroundHover);
|
||||
}
|
||||
}
|
||||
|
||||
.settings-danger-area {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
color: var(--bolt-elements-textPrimary);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
button {
|
||||
background-color: #dc2626;
|
||||
color: white;
|
||||
background-color: var(--bolt-elements-button-danger-background);
|
||||
color: var(--bolt-elements-button-danger-text);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: #b91c1c;
|
||||
background-color: var(--bolt-elements-button-danger-backgroundHover);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
&__thumb {
|
||||
@apply absolute h-full transition-all duration-300 rounded-lg;
|
||||
background-color: #b44aff;
|
||||
background-color: var(--bolt-elements-button-primary-background);
|
||||
|
||||
&--left {
|
||||
@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;
|
||||
|
||||
&--selected {
|
||||
@apply text-white;
|
||||
@apply text-bolt-elements-textPrimary;
|
||||
}
|
||||
|
||||
&--unselected {
|
||||
@ -32,16 +32,17 @@
|
||||
@apply w-11 h-6 rounded-full shadow-inner transition-colors duration-200;
|
||||
|
||||
&--enabled {
|
||||
background-color: #b44aff;
|
||||
background-color: var(--bolt-elements-item-contentAccent);
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
@apply bg-gray-300;
|
||||
background-color: var(--bolt-elements-bg-depth-3);
|
||||
}
|
||||
}
|
||||
|
||||
&__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 {
|
||||
@apply transform translate-x-full;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user