UniqAI/bolt.diy
1
0
Fork 0
mirror of https://github.com/stackblitz-labs/bolt.diy synced 2025-06-26 18:26:38 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

design update

Browse Source
This commit is contained in:
abhishek.rdx 2025-04-28 19:40:05 +05:30
parent b186c01367
commit 9f111f6465
10 changed files with 128 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
app/components/chat/BaseChat.tsx
View File

@ -393,7 +393,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
{progressAnnotations && <ProgressCompilation data={progressAnnotations} />}
<div
className={classNames(
'bg-bolt-elements-background-depth-2 p-3 rounded-lg border border-bolt-elements-borderColor relative w-full max-w-chat mx-auto z-prompt',
'bg-[#151724] rounded-lg border border-bolt-elements-borderColor relative w-full max-w-chat mx-auto z-prompt',
/*
* {
@ -403,31 +403,32 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
)}
>
<svg className={classNames(styles.PromptEffectContainer)}>
<defs>
<linearGradient
id="line-gradient"
x1="20%"
y1="0%"
x2="-14%"
y2="10%"
gradientUnits="userSpaceOnUse"
gradientTransform="rotate(-45)"
>
<stop offset="0%" stopColor="#b44aff" stopOpacity="0%"></stop>
<stop offset="40%" stopColor="#b44aff" stopOpacity="80%"></stop>
<stop offset="50%" stopColor="#b44aff" stopOpacity="80%"></stop>
<stop offset="100%" stopColor="#b44aff" stopOpacity="0%"></stop>
</linearGradient>
<linearGradient id="shine-gradient">
<stop offset="0%" stopColor="white" stopOpacity="0%"></stop>
<stop offset="40%" stopColor="#ffffff" stopOpacity="80%"></stop>
<stop offset="50%" stopColor="#ffffff" stopOpacity="80%"></stop>
<stop offset="100%" stopColor="white" stopOpacity="0%"></stop>
</linearGradient>
</defs>
<rect className={classNames(styles.PromptEffectLine)} pathLength="100" strokeLinecap="round"></rect>
<rect className={classNames(styles.PromptShine)} x="48" y="24" width="70" height="1"></rect>
</svg>
<defs>
<linearGradient
id="line-gradient"
x1="20%"
y1="0%"
x2="-14%"
y2="10%"
gradientUnits="userSpaceOnUse"
gradientTransform="rotate(-45)"
>
<stop offset="0%" stopColor="#377EFF" stopOpacity="0%"></stop>
<stop offset="40%" stopColor="#377EFF" stopOpacity="80%"></stop>
<stop offset="50%" stopColor="#377EFF" stopOpacity="80%"></stop>
<stop offset="100%" stopColor="#377EFF" stopOpacity="0%"></stop>
</linearGradient>
<linearGradient id="shine-gradient">
<stop offset="0%" stopColor="white" stopOpacity="0%"></stop>
<stop offset="40%" stopColor="white" stopOpacity="80%"></stop>
<stop offset="50%" stopColor="white" stopOpacity="80%"></stop>
<stop offset="100%" stopColor="white" stopOpacity="0%"></stop>
</linearGradient>
</defs>
<rect className={classNames(styles.PromptEffectLine)} pathLength="100" strokeLinecap="round"></rect>
<rect className={classNames(styles.PromptShine)} x="48" y="24" width="70" height="1"></rect>
</svg>
<div>
</div>

4
app/components/chat/ExamplePrompts.tsx
View File

@ -29,7 +29,7 @@ const EXAMPLE_PROMPTS = [
export function ExamplePrompts(sendMessage?: { (event: React.UIEvent, messageInput?: string): void | undefined }) {
return (
<div id="examples" className="relative flex flex-col gap-9 w-full max-w-3xl mx-auto flex justify-center mt-6">
<div id="examples" className="relative flex flex-col gap-9 w-full max-w-[788px] mx-auto flex justify-center mt-6">
<div
className="flex flex-wrap justify-center gap-2"
style={{
@ -43,7 +43,7 @@ export function ExamplePrompts(sendMessage?: { (event: React.UIEvent, messageInp
onClick={(event) => {
sendMessage?.(event, examplePrompt.text);
}}
className="border border-bolt-elements-borderColor rounded-full bg-gray-50 hover:bg-gray-100 dark:bg-gray-950 dark:hover:bg-gray-900 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary px-3 py-1 text-xs transition-theme flex items-center gap-2">
className="border border-bolt-elements-borderColor rounded-full bg-[#0A0A0A] hover:bg-gray-100 dark:bg-gray-950 dark:hover:bg-gray-900 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary px-3 py-1 text-xs transition-theme flex items-center gap-2">
<img src={examplePrompt.icon} alt={examplePrompt.text} className="w-4 h-4" />
{examplePrompt.text}
</button>

55
app/components/sidebar/AccountSelector.tsx Normal file
View File

@ -0,0 +1,55 @@
import React from 'react';
const accounts = [
{
name: 'John Smith',
badge: 'Hobby',
subtext: 'Free Apps 1/3 created',
avatar: null, // No avatar, use placeholder
},
{
name: 'John Smith',
badge: 'Hobby',
subtext: 'Free Apps 1/3 created',
avatar: '/icons/user-photo.svg', // Example avatar
},
];
function AccountItem({ name, badge, subtext, avatar }: typeof accounts[0]) {
return (
<div className="flex items-center gap-3 px-2 py-2 hover:bg-white/10 rounded-lg cursor-pointer">
<div className="w-9 h-9 rounded-full bg-[#23263A] flex items-center justify-center overflow-hidden">
{avatar ? (
<img src={avatar} alt={name} className="w-full h-full object-cover" />
) : (
<span className="i-ph:user-fill text-2xl text-[#A1A1AA]" />
)}
</div>
<div className="flex flex-col flex-1 min-w-0">
<div className="flex items-center gap-2">
<span className="font-medium text-white text-sm truncate">{name}</span>
<span className="bg-[rgba(189,255,97,0.20)] text-[10px] text-[#BDFF61] px-2 py-0.5 rounded-[37px] font-medium flex items-center justify-center gap-2.5">{badge}</span>
</div>
<span className="text-xs text-[#A1A1AA] mt-0.5">{subtext}</span>
</div>
<button className='flex items-center justify-center gap-0 bg-transparent flex-col'>
<span className="i-ph:caret-up text-lg text-[#A1A1AA]" />
<span className="i-ph:caret-down text-lg text-[#A1A1AA]" />
</button>
</div>
);
}
export const AccountSelector = () => {
return (
<div className="bg-transparent p-4 px-0 rounded-xl w-[300px] flex flex-col gap-2">
{accounts.map((acc, idx) => (
<AccountItem key={idx} {...acc} />
))}
<button className="mt-2 w-full bg-transparent flex p-2.5 justify-center items-center gap-2 self-stretch rounded-lg border-2 border-blue-500 text-blue-500 text-center font-inter text-sm font-semibold hover:bg-blue-500/10 transition-colors duration-200">
<img src="/icons/ai-icon.svg" alt="Bolt Logo" />
Upgrade to PRO
</button>
</div>
);
};

13
app/components/sidebar/Menu.client.tsx
View File

@ -15,6 +15,7 @@ import { classNames } from '~/utils/classNames';
import { useStore } from '@nanostores/react';
import { profileStore } from '~/lib/stores/profile';
import { themeStore } from '~/lib/stores/theme';
import { AccountSelector } from './AccountSelector';
const menuVariants = {
closed: {
@ -326,27 +327,27 @@ export const Menu = () => {
{
name: "Settings",
icon: "/icons/setting-icon.svg",
path: "/settings",
path: "controlPanel",
},
{
name: "Help Center",
icon: "/icons/help-center.svg",
path: "/help-center",
path: "helpCenter",
},
{
name: "My subscription",
icon: "/icons/my-subscription.svg",
path: "/usage",
path: "usage",
},
{
name: "Select Account",
icon: "/icons/select-account.svg",
path: "/profile",
path: "profile",
},
{
name: "Sign Out",
icon: "/icons/sign-out.svg",
path: "#",
path: "signOut",
},
];
return (
@ -572,6 +573,8 @@ export const Menu = () => {
</div>
))}
</div>
<AccountSelector />
<div className="flex items-center justify-between border-t border-gray-200 dark:border-gray-800 px-4 py-3">
<SettingsButton onClick={handleSettingsClick} />
<ThemeSwitch />

6
app/styles/index.scss
View File

@ -15,9 +15,9 @@ body {
:root {
--gradient-opacity: 0.8;
--primary-color: rgba(158, 117, 240, var(--gradient-opacity));
--secondary-color: rgba(138, 43, 226, var(--gradient-opacity));
--accent-color: rgba(128, 59, 239, var(--gradient-opacity));
--primary-color: rgba(59, 130, 246, var(--gradient-opacity));
--secondary-color: rgba(59, 130, 246, var(--gradient-opacity));
--accent-color: rgba(59, 130, 246, var(--gradient-opacity));
// --primary-color: rgba(147, 112, 219, var(--gradient-opacity));
// --secondary-color: rgba(138, 43, 226, var(--gradient-opacity));
// --accent-color: rgba(180, 170, 220, var(--gradient-opacity));

9
app/styles/variables.scss
View File

@ -218,11 +218,18 @@
:root {
--header-height: 54px;
--chat-max-width: 37rem;
--chat-min-width: 640px;
--chat-min-width: 772px;
--workbench-width: min(calc(100% - var(--chat-min-width)), 2536px);
--workbench-inner-width: var(--workbench-width);
--workbench-left: calc(100% - var(--workbench-width));
/* Custom Background and Font */
--custom-bg-color: #0A0A0A;
--custom-font-family: "Inter", sans-serif;
--custom-font-weight: 400;
--custom-font-size: 15px;
--custom-line-height: 26px;
/* Toasts */
--toastify-color-progress-success: var(--bolt-elements-icon-success);
--toastify-color-progress-error: var(--bolt-elements-icon-error);

5
public/icons/ai-icon.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Frame">
<path id="Vector" d="M13.5 9V8.99994C13.5025 9.41744 13.2412 9.79119 12.8487 9.93369L9.62499 11.1249L8.43749 14.3512C8.24749 14.8668 7.67561 15.1306 7.15999 14.9412C6.88624 14.8399 6.67061 14.6243 6.56936 14.3506L5.37436 11.1243L2.14811 9.93681H2.14805C1.6318 9.74681 1.36805 9.17494 1.55742 8.65931C1.65805 8.38556 1.87367 8.16994 2.14742 8.06869L5.37367 6.87369L6.56117 3.64744C6.75055 3.13119 7.32242 2.86738 7.83805 3.05675C8.11117 3.15738 8.3268 3.373 8.42805 3.64675L9.62305 6.873L12.8493 8.0605C13.2424 8.20363 13.5024 8.57925 13.498 8.998L13.5 9ZM9.99999 3H11V4C11 4.27562 11.2237 4.5 11.5 4.5C11.7756 4.5 12 4.27562 12 4V3H13C13.2756 3 13.5 2.77562 13.5 2.5C13.5 2.22375 13.2756 2 13 2H12V1C12 0.72375 11.7756 0.5 11.5 0.5C11.2237 0.5 11 0.72375 11 1V2H9.99999C9.72374 2 9.49999 2.22375 9.49999 2.5C9.49999 2.77562 9.72374 3 9.99999 3ZM15.5 5H15V4.5C15 4.22375 14.7756 4 14.5 4C14.2237 4 14 4.22375 14 4.5V5H13.5C13.2237 5 13 5.22375 13 5.5C13 5.77563 13.2237 6 13.5 6H14V6.5C14 6.77563 14.2237 7 14.5 7C14.7756 7 15 6.77563 15 6.5V6H15.5C15.7756 6 16 5.77563 16 5.5C16 5.22375 15.7756 5 15.5 5Z" fill="#3B82F6"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

9
public/icons/user-icon.svg Normal file
View File

@ -0,0 +1,9 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Frame">
<g id="Group">
<path id="Vector" d="M13.5531 5.71977V10.2731C13.5531 10.8398 13.2464 11.3664 12.7531 11.6598L8.79309 13.9398C8.29975 14.2198 7.68642 14.2198 7.18642 13.9331L3.22642 11.6464C2.73309 11.3598 2.42642 10.8331 2.42642 10.2531V5.6931C2.42642 5.11977 2.72642 4.5931 3.21975 4.29977L7.17309 2.0131C7.65975 1.72644 8.27309 1.72644 8.77309 2.0131L12.7264 4.2931C13.2198 4.57977 13.5198 5.10644 13.5198 5.67977L13.5531 5.71977ZM14.5531 5.71977C14.5531 4.78644 14.0598 3.9331 13.2531 3.46644L9.28642 1.1731C8.47309 0.706437 7.48642 0.706437 6.67975 1.16644L2.71309 3.4531C1.90642 3.91977 1.41309 4.77977 1.41309 5.69977V10.2531C1.41309 11.1798 1.90642 12.0398 2.70642 12.4998L6.65975 14.7798C7.46642 15.2398 8.45309 15.2398 9.25975 14.7798L13.2198 12.4864C14.0198 12.0131 14.5131 11.1531 14.5131 10.2331V5.6731L14.5531 5.71977Z" fill="white"/>
<path id="Vector_2" d="M7.99962 7.83306C9.13296 7.83306 10.053 6.91306 10.053 5.77306C10.053 4.63306 9.13296 3.71973 7.99962 3.71973C6.85962 3.71973 5.94629 4.63306 5.94629 5.76639C5.94629 6.89973 6.85962 7.81973 7.99296 7.81973L7.99962 7.83306ZM7.99962 6.83306C7.41296 6.83306 6.94629 6.35973 6.94629 5.77306C6.94629 5.18639 7.41296 4.71973 7.99296 4.71973C8.57296 4.71973 9.04629 5.18639 9.04629 5.76639C9.04629 6.34639 8.57296 6.81973 7.99296 6.81973L7.99962 6.83306Z" fill="white"/>
<path id="Vector_3" d="M11.1663 11.106C11.1663 9.59928 9.72634 8.43262 7.99967 8.43262C6.26634 8.43262 4.83301 9.59928 4.83301 11.106C4.83301 11.3793 5.05301 11.606 5.33301 11.606C5.60634 11.606 5.83301 11.3793 5.83301 11.106C5.83301 10.206 6.77967 9.43262 7.99967 9.43262C9.21301 9.43262 10.1663 10.206 10.1663 11.106C10.1663 11.3793 10.3863 11.606 10.6663 11.606C10.9397 11.606 11.1663 11.3793 11.1663 11.106Z" fill="white"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

9
public/icons/user-photo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 135 KiB

4
uno.config.ts
View File

@ -40,7 +40,7 @@ const BASE_COLORS = {
200: '#E1D6FF',
300: '#CEBEFF',
400: '#B69EFF',
500: '#9C7DFF',
500: '#0072FF',
600: '#8A5FFF',
700: '#7645E8',
800: '#6234BB',
@ -103,7 +103,7 @@ export default defineConfig({
'bolt-ease-cubic-bezier': 'ease-[cubic-bezier(0.4,0,0.2,1)]',
'transition-theme': 'transition-[background-color,border-color,color] duration-150 bolt-ease-cubic-bezier',
kdb: 'bg-bolt-elements-code-background text-bolt-elements-code-text py-1 px-1.5 rounded-md',
'max-w-chat': 'max-w-[var(--chat-max-width)]',
'max-w-chat': 'max-w-[772px]',
},
rules: [
/**