From 9f111f6465f27bff51cbd28fcbddb1005fafb25c Mon Sep 17 00:00:00 2001 From: "abhishek.rdx" Date: Mon, 28 Apr 2025 19:40:05 +0530 Subject: [PATCH] design update --- app/components/chat/BaseChat.tsx | 53 +++++++++++---------- app/components/chat/ExamplePrompts.tsx | 4 +- app/components/sidebar/AccountSelector.tsx | 55 ++++++++++++++++++++++ app/components/sidebar/Menu.client.tsx | 13 +++-- app/styles/index.scss | 6 +-- app/styles/variables.scss | 9 +++- public/icons/ai-icon.svg | 5 ++ public/icons/user-icon.svg | 9 ++++ public/icons/user-photo.svg | 9 ++++ uno.config.ts | 4 +- 10 files changed, 128 insertions(+), 39 deletions(-) create mode 100644 app/components/sidebar/AccountSelector.tsx create mode 100644 public/icons/ai-icon.svg create mode 100644 public/icons/user-icon.svg create mode 100644 public/icons/user-photo.svg diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx index e5ab4036..8f2102bc 100644 --- a/app/components/chat/BaseChat.tsx +++ b/app/components/chat/BaseChat.tsx @@ -393,7 +393,7 @@ export const BaseChat = React.forwardRef( {progressAnnotations && }
( )} > - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
diff --git a/app/components/chat/ExamplePrompts.tsx b/app/components/chat/ExamplePrompts.tsx index cf22d998..da2acb20 100644 --- a/app/components/chat/ExamplePrompts.tsx +++ b/app/components/chat/ExamplePrompts.tsx @@ -29,7 +29,7 @@ const EXAMPLE_PROMPTS = [ export function ExamplePrompts(sendMessage?: { (event: React.UIEvent, messageInput?: string): void | undefined }) { return ( -
+
{ 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"> {examplePrompt.text} {examplePrompt.text} diff --git a/app/components/sidebar/AccountSelector.tsx b/app/components/sidebar/AccountSelector.tsx new file mode 100644 index 00000000..f46a4c7a --- /dev/null +++ b/app/components/sidebar/AccountSelector.tsx @@ -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 ( +
+
+ {avatar ? ( + {name} + ) : ( + + )} +
+
+
+ {name} + {badge} +
+ {subtext} +
+ +
+ ); +} + +export const AccountSelector = () => { + return ( +
+ {accounts.map((acc, idx) => ( + + ))} + +
+ ); +}; \ No newline at end of file diff --git a/app/components/sidebar/Menu.client.tsx b/app/components/sidebar/Menu.client.tsx index 30d2e5a0..59f9f9bf 100644 --- a/app/components/sidebar/Menu.client.tsx +++ b/app/components/sidebar/Menu.client.tsx @@ -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 = () => {
))}
+ +
diff --git a/app/styles/index.scss b/app/styles/index.scss index 91a4cf84..3aafde5e 100644 --- a/app/styles/index.scss +++ b/app/styles/index.scss @@ -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)); diff --git a/app/styles/variables.scss b/app/styles/variables.scss index d67aeeee..867e0dfb 100644 --- a/app/styles/variables.scss +++ b/app/styles/variables.scss @@ -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); diff --git a/public/icons/ai-icon.svg b/public/icons/ai-icon.svg new file mode 100644 index 00000000..d2f344d8 --- /dev/null +++ b/public/icons/ai-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/icons/user-icon.svg b/public/icons/user-icon.svg new file mode 100644 index 00000000..1cf629d4 --- /dev/null +++ b/public/icons/user-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/icons/user-photo.svg b/public/icons/user-photo.svg new file mode 100644 index 00000000..e17f0e5e --- /dev/null +++ b/public/icons/user-photo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/uno.config.ts b/uno.config.ts index 29c3ce56..4ea6dc36 100644 --- a/uno.config.ts +++ b/uno.config.ts @@ -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: [ /**