Skip to content

Commit 5bb639f

Browse files
dartpaindartpain
authored
Merge pull request #1670 from ManishMadan2882/main
Figma consolidation
2 parents 5e39be6 + 5bc758a commit 5bb639f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+1067
-613
lines changed

‎frontend/src/Hero.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,14 @@ export default function Hero({
3737
<Fragment key={key}>
3838
<button
3939
onClick={() => handleQuestion({ question: demo.query })}
40-
className="w-full rounded-full border border-silver px-6 py-4 text-left hover:border-gray-4000 dark:hover:border-gray-3000 xl:min-w-[24vw] bg-white dark:bg-raisin-black focus:outline-none"
40+
className={`w-full rounded-full border bg-transparent px-6 py-4 text-left min-w-11/12 sm:min-w-[362px] focus:outline-none
41+
border-dark-gray text-just-black hover:bg-cultured
42+
dark:border-dim-gray dark:text-chinese-white dark:hover:bg-charleston-green`}
4143
>
4244
<p className="mb-1 font-semibold text-black-1000 dark:text-bright-gray">
4345
{demo.header}
4446
</p>
45-
<span className="text-gray-700 dark:text-gray-300">
47+
<span className="text-gray-700 dark:text-gray-300 opacity-60">
4648
{demo.query}
4749
</span>
4850
</button>

‎frontend/src/Navigation.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
240240
ref={navRef}
241241
className={`${
242242
!navOpen && '-ml-96 md:-ml-[18rem]'
243-
} duration-20 fixed top-0 z-20 flex h-full w-72 flex-col border-r-[1px] border-b-0 bg-white transition-all dark:border-r-purple-taupe dark:bg-chinese-black dark:text-white`}
243+
} duration-20 fixed top-0 z-20 flex h-full w-72 flex-col border-r-[1px] border-b-0 bg-lotion dark:bg-chinese-black transition-all dark:border-r-purple-taupe dark:text-white`}
244244
>
245245
<div
246246
className={'visible mt-2 flex h-[6vh] w-full justify-between md:h-12'}
@@ -283,8 +283,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
283283
}}
284284
className={({ isActive }) =>
285285
`${
286-
isActive ? 'bg-gray-3000 dark:bg-transparent' : ''
287-
} group sticky mx-4 mt-4 flex cursor-pointer gap-2.5 rounded-3xl border border-silver p-3 hover:border-rainy-gray hover:bg-gray-3000 dark:border-purple-taupe dark:text-white dark:hover:bg-transparent`
286+
isActive ? 'bg-transparent' : ''
287+
} group sticky mx-4 mt-4 flex cursor-pointer gap-2.5 rounded-3xl border border-silver p-3 hover:border-rainy-gray dark:border-purple-taupe dark:text-white hover:bg-transparent`
288288
}
289289
>
290290
<img
@@ -339,7 +339,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
339339
</div>
340340
<div className="flex h-auto flex-col justify-end text-eerie-black dark:text-white">
341341
<div className="flex flex-col-reverse border-b-[1px] dark:border-b-purple-taupe">
342-
<div className="relative my-4 mx-4 flex gap-2">
342+
<div className="relative my-4 mx-4 flex gap-4 items-center">
343343
<SourceDropdown
344344
options={docs}
345345
selectedDocs={selectedDocs}
@@ -354,8 +354,10 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
354354
}}
355355
/>
356356
<img
357-
className="mt-2 h-9 w-9 hover:cursor-pointer"
357+
className="hover:cursor-pointer"
358358
src={UploadIcon}
359+
width={28}
360+
height={25}
359361
alt="Upload document"
360362
onClick={() => {
361363
setUploadModalState('ACTIVE');
@@ -385,7 +387,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
385387
<img
386388
src={SettingGear}
387389
alt="Settings"
388-
className="ml-2 w-5 filter dark:invert"
390+
className="ml-2 w- filter dark:invert"
389391
/>
390392
<p className="my-auto text-sm text-eerie-black dark:text-white">
391393
{t('settings.label')}

‎frontend/src/assets/eye-view.svg‎

Lines changed: 11 additions & 0 deletions
Loading

‎frontend/src/assets/sync.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎frontend/src/assets/user.png‎

-735 Bytes
Binary file not shown.

‎frontend/src/assets/user.svg‎

Lines changed: 27 additions & 0 deletions
Loading

‎frontend/src/components/ContextMenu.tsx‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
import { SyntheticEvent, useRef, useEffect, CSSProperties } from 'react';
2+
3+
export interface MenuOption {
4+
icon?: string;
5+
label: string;
6+
onClick: (event: SyntheticEvent) => void;
7+
variant?: 'primary' | 'danger';
8+
iconClassName?: string;
9+
iconWidth?: number;
10+
iconHeight?: number;
11+
}
12+
13+
interface ContextMenuProps {
14+
isOpen: boolean;
15+
setIsOpen: (isOpen: boolean) => void;
16+
options: MenuOption[];
17+
anchorRef: React.RefObject<HTMLElement>;
18+
className?: string;
19+
position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
20+
offset?: { x: number; y: number };
21+
}
22+
23+
export default function ContextMenu({
24+
isOpen,
25+
setIsOpen,
26+
options,
27+
anchorRef,
28+
className = '',
29+
position = 'bottom-right',
30+
offset = { x: 0, y: 8 },
31+
}: ContextMenuProps) {
32+
const menuRef = useRef<HTMLDivElement>(null);
33+
34+
useEffect(() => {
35+
const handleClickOutside = (event: MouseEvent) => {
36+
if (
37+
menuRef.current &&
38+
!menuRef.current.contains(event.target as Node) &&
39+
!anchorRef.current?.contains(event.target as Node)
40+
) {
41+
setIsOpen(false);
42+
}
43+
};
44+
45+
if (isOpen) {
46+
document.addEventListener('mousedown', handleClickOutside);
47+
return () =>
48+
document.removeEventListener('mousedown', handleClickOutside);
49+
}
50+
}, [isOpen, setIsOpen]);
51+
52+
if (!isOpen) return null;
53+
54+
const getMenuPosition = (): CSSProperties => {
55+
if (!anchorRef.current) return {};
56+
57+
const rect = anchorRef.current.getBoundingClientRect();
58+
const scrollY = window.scrollY || document.documentElement.scrollTop;
59+
const scrollX = window.scrollX || document.documentElement.scrollLeft;
60+
61+
let top = rect.bottom + scrollY + offset.y;
62+
let left = rect.right + scrollX + offset.x;
63+
64+
switch (position) {
65+
case 'bottom-left':
66+
left = rect.left + scrollX - offset.x;
67+
break;
68+
case 'top-right':
69+
top = rect.top + scrollY - offset.y;
70+
break;
71+
case 'top-left':
72+
top = rect.top + scrollY - offset.y;
73+
left = rect.left + scrollX - offset.x;
74+
break;
75+
// bottom-right is default
76+
}
77+
78+
return {
79+
position: 'fixed',
80+
top: `${top}px`,
81+
left: `${left}px`,
82+
};
83+
};
84+
85+
return (
86+
<div
87+
ref={menuRef}
88+
className={`fixed z-50 ${className}`}
89+
style={{ ...getMenuPosition() }}
90+
onClick={(e) => e.stopPropagation()}
91+
>
92+
<div
93+
className="flex w-32 flex-col rounded-xl text-sm shadow-xl md:w-36 dark:bg-charleston-green-2 bg-lotion"
94+
style={{ minWidth: '144px' }}
95+
>
96+
{options.map((option, index) => (
97+
<button
98+
key={index}
99+
onClick={(event) => {
100+
event.preventDefault();
101+
event.stopPropagation();
102+
option.onClick(event);
103+
setIsOpen(false);
104+
}}
105+
className={`
106+
flex justify-start items-center gap-4 p-3
107+
transition-colors duration-200 ease-in-out
108+
${index === 0 ? 'rounded-t-xl' : ''}
109+
${index === options.length - 1 ? 'rounded-b-xl' : ''}
110+
${
111+
option.variant === 'danger'
112+
? 'dark:text-red-2000 dark:hover:bg-charcoal-grey text-rosso-corsa hover:bg-bright-gray'
113+
: 'dark:text-bright-gray dark:hover:bg-charcoal-grey text-eerie-black hover:bg-bright-gray'
114+
}
115+
`}
116+
>
117+
{option.icon && (
118+
<img
119+
width={option.iconWidth || 16}
120+
height={option.iconHeight || 16}
121+
src={option.icon}
122+
alt={option.label}
123+
className={`cursor-pointer hover:opacity-75 ${option.iconClassName || ''}`}
124+
/>
125+
)}
126+
<span>{option.label}</span>
127+
</button>
128+
))}
129+
</div>
130+
</div>
131+
);
132+
}

‎frontend/src/components/CopyButton.tsx‎

Lines changed: 28 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
11
import copy from 'copy-to-clipboard';
22
import { useState } from 'react';
3+
import { useTranslation } from 'react-i18next';
34

45
import CheckMark from '../assets/checkmark.svg?react';
56
import Copy from '../assets/copy.svg?react';
67

7-
export default function CoppyButton({
8+
export default function CopyButton({
89
text,
910
colorLight,
1011
colorDark,
12+
showText = false,
1113
}: {
1214
text: string;
1315
colorLight?: string;
1416
colorDark?: string;
17+
showText?: boolean;
1518
}) {
19+
const { t } = useTranslation();
1620
const [copied, setCopied] = useState(false);
1721
const [isCopyHovered, setIsCopyHovered] = useState(false);
1822

@@ -25,29 +29,30 @@ export default function CoppyButton({
2529
};
2630

2731
return (
28-
<div
29-
className={`flex items-center justify-center rounded-full p-2 ${
30-
isCopyHovered
31-
? `bg-[#EEEEEE] dark:bg-purple-taupe`
32-
: `bg-[${colorLight ? colorLight : '#FFFFFF'}] dark:bg-[${colorDark ? colorDark : 'transparent'}]`
33-
}`}
32+
<button
33+
onClick={() => handleCopyClick(text)}
34+
onMouseEnter={() => setIsCopyHovered(true)}
35+
onMouseLeave={() => setIsCopyHovered(false)}
36+
className="flex items-center gap-2"
3437
>
35-
{copied ? (
36-
<CheckMark
37-
className="cursor-pointer stroke-green-2000"
38-
onMouseEnter={() => setIsCopyHovered(true)}
39-
onMouseLeave={() => setIsCopyHovered(false)}
40-
/>
41-
) : (
42-
<Copy
43-
className="w-4 cursor-pointer fill-none"
44-
onClick={() => {
45-
handleCopyClick(text);
46-
}}
47-
onMouseEnter={() => setIsCopyHovered(true)}
48-
onMouseLeave={() => setIsCopyHovered(false)}
49-
/>
38+
<div
39+
className={`flex items-center justify-center rounded-full p-2 ${
40+
isCopyHovered
41+
? `bg-[#EEEEEE] dark:bg-purple-taupe`
42+
: `bg-[${colorLight ? colorLight : '#FFFFFF'}] dark:bg-[${colorDark ? colorDark : 'transparent'}]`
43+
}`}
44+
>
45+
{copied ? (
46+
<CheckMark className="cursor-pointer stroke-green-2000" />
47+
) : (
48+
<Copy className="w-4 cursor-pointer fill-none" />
49+
)}
50+
</div>
51+
{showText && (
52+
<span className="text-xs text-gray-600 dark:text-gray-400">
53+
{copied ? t('conversation.copied') : t('conversation.copy')}
54+
</span>
5055
)}
51-
</div>
56+
</button>
5257
);
5358
}

‎frontend/src/components/Dropdown.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ function Dropdown({
1111
rounded = 'xl',
1212
border = 'border-2',
1313
borderColor = 'silver',
14+
darkBorderColor = 'dim-gray',
1415
showEdit,
1516
onEdit,
1617
showDelete,
@@ -38,6 +39,7 @@ function Dropdown({
3839
rounded?: 'xl' | '3xl';
3940
border?: 'border' | 'border-2';
4041
borderColor?: string;
42+
darkBorderColor?: string;
4143
showEdit?: boolean;
4244
onEdit?: (value: { name: string; id: string; type: string }) => void;
4345
showDelete?: boolean;
@@ -77,7 +79,7 @@ function Dropdown({
7779
>
7880
<button
7981
onClick={() => setIsOpen(!isOpen)}
80-
className={`flex w-full cursor-pointer items-center justify-between ${border} border-${borderColor} bg-white px-5 py-3 dark:border-${borderColor}/40 dark:bg-transparent ${
82+
className={`flex w-full cursor-pointer items-center justify-between ${border} border-${borderColor} bg-white px-5 py-3 dark:border-${darkBorderColor} dark:bg-transparent ${
8183
isOpen ? `${borderTopRadius}` : `${borderRadius}`
8284
}`}
8385
>
@@ -114,7 +116,7 @@ function Dropdown({
114116
</button>
115117
{isOpen && (
116118
<div
117-
className={`absolute left-0 right-0 z-20 -mt-1 max-h-40 overflow-y-auto rounded-b-xl ${border} border-${borderColor} bg-white shadow-lg dark:border-${borderColor}/40 dark:bg-dark-charcoal`}
119+
className={`absolute left-0 right-0 z-20 -mt-1 max-h-40 overflow-y-auto rounded-b-xl ${border} border-${borderColor} bg-white shadow-lg dark:border-${darkBorderColor} dark:bg-dark-charcoal`}
118120
>
119121
{options.map((option: any, index) => (
120122
<div

0 commit comments

Comments
 (0)