From 0b437d0e8db13f16101ee04db457bef047e06a03 Mon Sep 17 00:00:00 2001 From: ManishMadan2882 Date: Thu, 27 Feb 2025 03:04:55 +0530 Subject: [PATCH 1/7] (feat:ui) updating hero, code snippets --- frontend/src/Hero.tsx | 6 ++- frontend/src/conversation/Conversation.tsx | 8 ++-- .../src/conversation/ConversationBubble.tsx | 37 ++++++++++------ frontend/tailwind.config.cjs | 42 ++++++++++++------- 4 files changed, 59 insertions(+), 34 deletions(-) diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx index a000ab2e4..33710b846 100644 --- a/frontend/src/Hero.tsx +++ b/frontend/src/Hero.tsx @@ -37,12 +37,14 @@ export default function Hero({ diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx index 29438f931..a88e1415c 100644 --- a/frontend/src/conversation/Conversation.tsx +++ b/frontend/src/conversation/Conversation.tsx @@ -382,10 +382,10 @@ export default function Conversation() { )} -
+
-

+

{t('tagline')}

diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx index d39cf4855..813739f23 100644 --- a/frontend/src/conversation/ConversationBubble.tsx +++ b/frontend/src/conversation/ConversationBubble.tsx @@ -5,10 +5,14 @@ import { useTranslation } from 'react-i18next'; import ReactMarkdown from 'react-markdown'; import { useSelector } from 'react-redux'; import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; -import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism'; +import { + vscDarkPlus, + oneLight, +} from 'react-syntax-highlighter/dist/cjs/styles/prism'; import rehypeKatex from 'rehype-katex'; import remarkGfm from 'remark-gfm'; import remarkMath from 'remark-math'; +import { useDarkTheme } from '../hooks'; import DocsGPT3 from '../assets/cute_docsgpt3.svg'; import ChevronDown from '../assets/chevron-down.svg'; @@ -69,6 +73,7 @@ const ConversationBubble = forwardRef< ref, ) { const { t } = useTranslation(); + const [isDarkTheme] = useDarkTheme(); // const bubbleRef = useRef(null); const chunks = useSelector(selectChunks); const selectedDocs = useSelector(selectSelectedDocs); @@ -333,7 +338,7 @@ const ConversationBubble = forwardRef<

+
+
+ + {language} + + +
{String(children).replace(/\n$/, '')} -
- -
) : ( diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs index 938eaceee..d85463735 100644 --- a/frontend/tailwind.config.cjs +++ b/frontend/tailwind.config.cjs @@ -11,7 +11,7 @@ module.exports = { colors: { 'eerie-black': '#212121', 'black-1000': '#343541', - jet: '#343541', + 'jet': '#343541', 'gray-alpha': 'rgba(0,0,0, .64)', 'gray-1000': '#F6F6F6', 'gray-2000': 'rgba(0, 0, 0, 0.5)', @@ -32,23 +32,35 @@ module.exports = { 'green-2000': '#0FFF50', 'light-gray': '#edeef0', 'white-3000': '#ffffff', - 'just-black':"#00000", - 'purple-taupe':'#464152', + 'just-black': '#00000', + 'purple-taupe': '#464152', 'dove-gray': '#6c6c6c', 'silver': '#c4c4c4', 'rainy-gray': '#a4a4a4', - 'raisin-black':'#222327', - 'chinese-black':'#161616', - 'chinese-silver':'#CDCDCD', - 'dark-charcoal':'#2F3036', - 'bright-gray':'#ECECF1', - 'outer-space':'#444654', - 'gun-metal':'#2E303E', - 'sonic-silver':'#747474', - 'soap':'#D8CCF1', - 'independence':'#54546D', - 'philippine-yellow':'#FFC700', - 'bright-gray':'#EBEBEB' + 'raisin-black': '#222327', + 'chinese-black': '#161616', + 'chinese-silver': '#CDCDCD', + 'dark-charcoal': '#2F3036', + 'bright-gray': '#ECECF1', + 'outer-space': '#444654', + 'gun-metal': '#2E303E', + 'sonic-silver': '#747474', + 'soap': '#D8CCF1', + 'independence': '#54546D', + 'philippine-yellow': '#FFC700', + 'bright-gray': '#EBEBEB', + + // New semantically named colors for UI elements + 'chinese-white': '#e0e0e0', + 'dark-gray': '#aaaaaa', + 'dim-gray': '#6A6A6A', + 'cultured': '#f4f4f4', + 'charleston-green': '#2b2c31', + 'grey':'#7e7e7e', + 'lotion':'#fbfbfb', + 'platinum':'#e6e6e6', + 'eerie-black-2': '#191919', + 'light-silver': '#D9D9D9', }, }, }, From 3e65885e1fdd09d53afe674aaf202a5bfb811b78 Mon Sep 17 00:00:00 2001 From: ManishMadan2882 Date: Fri, 28 Feb 2025 03:40:42 +0530 Subject: [PATCH 2/7] (feat:toggle) greener colors, flexible --- frontend/src/components/ToggleSwitch.tsx | 55 +++++++++++++++++------- frontend/tailwind.config.cjs | 19 ++++++-- 2 files changed, 55 insertions(+), 19 deletions(-) diff --git a/frontend/src/components/ToggleSwitch.tsx b/frontend/src/components/ToggleSwitch.tsx index 061d25632..8293ece28 100644 --- a/frontend/src/components/ToggleSwitch.tsx +++ b/frontend/src/components/ToggleSwitch.tsx @@ -6,9 +6,8 @@ type ToggleSwitchProps = { className?: string; label?: string; disabled?: boolean; - activeColor?: string; - inactiveColor?: string; - id?: string; + size?: 'small' | 'medium' | 'large'; + labelPosition?: 'left' | 'right'; }; const ToggleSwitch: React.FC = ({ @@ -17,17 +16,44 @@ const ToggleSwitch: React.FC = ({ className = '', label, disabled = false, - activeColor = 'bg-purple-30', - inactiveColor = 'bg-transparent', - id, + size = 'medium', + labelPosition = 'left', }) => { + // Size configurations + const sizeConfig = { + small: { + box: 'h-6 w-10', + toggle: 'h-4 w-4 left-1 top-1', + translate: 'translate-x-4', + }, + medium: { + box: 'h-8 w-14', + toggle: 'h-6 w-6 left-1 top-1', + translate: 'translate-x-full', + }, + large: { + box: 'h-10 w-16', + toggle: 'h-8 w-8 left-1 top-1', + translate: 'translate-x-full', + }, + }; + + const { box, toggle, translate } = sizeConfig[size]; + return (