diff --git a/frontend/signal-desktop-keyring.gpg b/frontend/signal-desktop-keyring.gpg new file mode 100644 index 000000000..b5e68a040 Binary files /dev/null and b/frontend/signal-desktop-keyring.gpg differ diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 1455f4953..176ae518b 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -32,9 +32,9 @@ function MainLayout() { } export default function App() { - const [,,componentMounted] = useDarkTheme(); - if(!componentMounted) { - return
+ const [, , componentMounted] = useDarkTheme(); + if (!componentMounted) { + return
; } return (
diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx index 052a96432..6e3b68189 100644 --- a/frontend/src/Navigation.tsx +++ b/frontend/src/Navigation.tsx @@ -11,7 +11,6 @@ import Discord from './assets/discord.svg'; import Expand from './assets/expand.svg'; import Github from './assets/github.svg'; import Hamburger from './assets/hamburger.svg'; -import Info from './assets/info.svg'; import SettingGear from './assets/settingGear.svg'; import Twitter from './assets/TwitterX.svg'; import UploadIcon from './assets/upload.svg'; @@ -41,6 +40,7 @@ import { setSourceDocs, } from './preferences/preferenceSlice'; import Upload from './upload/Upload'; +import Help from './components/Help'; interface NavigationProps { navOpen: boolean; @@ -304,7 +304,6 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { <> )}
-
@@ -359,68 +358,54 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {

-
- { - if (isMobile) { - setNavOpen(!navOpen); - } - resetConversation(); - }} - to="/about" - className={({ isActive }) => - `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${ - isActive ? 'bg-gray-3000 dark:bg-[#28292E]' : '' - }` - } - > - icon -

{t('about')}

- -
- - discord - - - x - - - github - +
+
+
+
+ +
+
+
+ + discord + + + x + + + github + +
diff --git a/frontend/src/assets/documentation-dark.svg b/frontend/src/assets/documentation-dark.svg index 784402066..5cbde1b11 100644 --- a/frontend/src/assets/documentation-dark.svg +++ b/frontend/src/assets/documentation-dark.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/frontend/src/assets/documentation.svg b/frontend/src/assets/documentation.svg index f9f7c5967..955d392f1 100644 --- a/frontend/src/assets/documentation.svg +++ b/frontend/src/assets/documentation.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/frontend/src/assets/envelope-dark.svg b/frontend/src/assets/envelope-dark.svg new file mode 100644 index 000000000..a61bec4f4 --- /dev/null +++ b/frontend/src/assets/envelope-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/envelope.svg b/frontend/src/assets/envelope.svg new file mode 100644 index 000000000..a4c250325 --- /dev/null +++ b/frontend/src/assets/envelope.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/components/Help.tsx b/frontend/src/components/Help.tsx new file mode 100644 index 000000000..38e4468ff --- /dev/null +++ b/frontend/src/components/Help.tsx @@ -0,0 +1,97 @@ +import React, { useState, useRef, useEffect } from 'react'; +import InfoDark from '../assets/info-dark.svg'; +import PageIcon from '../assets/documentation.svg'; // Ensure this path is correct +import EmailIcon from '../assets/envelope.svg'; // Replace with your actual email icon path + +const Help = () => { + const [isOpen, setIsOpen] = useState(false); + const dropdownRef = useRef(null); + const buttonRef = useRef(null); + + const toggleDropdown = () => { + setIsOpen((prev) => !prev); + }; + + const handleClickOutside = (event: MouseEvent) => { + if ( + dropdownRef.current && + !dropdownRef.current.contains(event.target as Node) && + buttonRef.current && + !buttonRef.current.contains(event.target as Node) + ) { + setIsOpen(false); + } + }; + + useEffect(() => { + document.addEventListener('mousedown', handleClickOutside); + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, []); + + const dropdownPosition = () => { + if (!buttonRef.current) return { top: '100%', left: '0' }; + + const rect = buttonRef.current.getBoundingClientRect(); + const dropdownHeight = 80; // Adjust based on the content height + const spaceBelow = window.innerHeight - rect.bottom; + + const dropdownWidth = 192; // Adjust to fit your design + const spaceRight = window.innerWidth - rect.right; + + let leftPosition = 0; // Default to align with the button + + if (spaceRight < dropdownWidth) { + leftPosition = dropdownWidth - rect.width; + } + + if (spaceBelow >= dropdownHeight) { + return { top: '100%', left: `${leftPosition}px` }; // Open downward + } else { + return { top: `${-dropdownHeight}px`, left: `${leftPosition}px` }; // Open upward + } + }; + + return ( +
+ + {isOpen && ( + + )} +
+ ); +}; + +export default Help; diff --git a/frontend/src/components/SourceDropdown.tsx b/frontend/src/components/SourceDropdown.tsx index 6a3481618..f92173a08 100644 --- a/frontend/src/components/SourceDropdown.tsx +++ b/frontend/src/components/SourceDropdown.tsx @@ -121,9 +121,12 @@ function SourceDropdown({ className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:text-bright-gray dark:hover:bg-purple-taupe" onClick={handleEmptyDocumentSelect} > - { - handlePostDocumentSelect(null); - }}> + { + handlePostDocumentSelect(null); + }} + > {t('none')}
diff --git a/frontend/src/locale/i18n.ts b/frontend/src/locale/i18n.ts index 674a34679..72f9ec289 100644 --- a/frontend/src/locale/i18n.ts +++ b/frontend/src/locale/i18n.ts @@ -25,7 +25,7 @@ i18n zh: { translation: zh, }, - "zh-TW": { + 'zh-TW': { translation: zhTW, }, },