From 7ccd74b02233669c60ffe3c227413eb4061e7c2e Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Tue, 15 Oct 2024 02:05:25 +0530
Subject: [PATCH 1/2] fix(help): ui

---
 frontend/src/Navigation.tsx      |  4 +--
 frontend/src/components/Help.tsx | 62 ++++++++++++--------------------
 2 files changed, 23 insertions(+), 43 deletions(-)

diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index 6e3b68189..4b49ddbc0 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -361,9 +361,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           <div className="flex flex-col justify-end text-eerie-black dark:text-white">
             <div className="flex justify-between items-center px-1 py-1">
               <div className="flex items-center gap-1">
-                <div className="rounded-full hover:bg-gray-100 dark:hover:bg-[#28292E]">
-                  <Help />
-                </div>
+                <Help />
               </div>
               <div className="flex items-center gap-1">
                 <NavLink
diff --git a/frontend/src/components/Help.tsx b/frontend/src/components/Help.tsx
index 38e4468ff..3021432c7 100644
--- a/frontend/src/components/Help.tsx
+++ b/frontend/src/components/Help.tsx
@@ -1,7 +1,7 @@
-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
+import { useState, useRef, useEffect } from 'react';
+import Info from '../assets/info.svg';
+import PageIcon from '../assets/documentation.svg';
+import EmailIcon from '../assets/envelope.svg';
 
 const Help = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -30,62 +30,44 @@ const Help = () => {
     };
   }, []);
 
-  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 (
-    <div className="relative inline-block" ref={dropdownRef}>
+    <div className="relative inline-block text-sm" ref={dropdownRef}>
       <button
         ref={buttonRef}
         onClick={toggleDropdown}
-        className="flex items-center rounded-full hover:bg-gray-100 dark:hover:bg-[#28292E] px-3 py-1"
+        className="my-auto mx-4 w-full flex items-center h-9 gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E]"
       >
-        <img
-          src={InfoDark}
-          alt="icon"
-          className="m-2 w-6 self-center text-sm filter dark:invert"
-        />
+        <img src={Info} alt="info" className="ml-1 w-5 filter dark:invert" />
         Help
       </button>
       {isOpen && (
         <div
-          className={`absolute mt-2 w-48 shadow-lg bg-white dark:bg-gray-800`}
-          style={{ ...dropdownPosition(), borderRadius: '0.5rem' }}
+          className={`absolute -translate-y-28 z-10 w-48 shadow-lg bg-white dark:bg-[#444654] rounded-xl`}
         >
           <a
             href="https://docs.docsgpt.cloud/"
             target="_blank"
             rel="noopener noreferrer"
-            className="flex items-center px-4 py-2 text-black dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
+            className="flex items-start gap-4 px-4 py-2 text-black dark:text-white hover:bg-bright-gray dark:hover:bg-[#545561] rounded-t-xl"
           >
-            <img src={PageIcon} alt="Documentation" className="mr-2 w-4 h-4" />
+            <img
+              src={PageIcon}
+              alt="Documentation"
+              className="filter dark:invert"
+              width={20}
+            />
             Documentation
           </a>
           <a
             href="mailto:contact@arc53.com"
-            className="flex items-center px-4 py-2 text-black dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
+            className="flex items-start gap-4 px-4 py-2 text-black dark:text-white hover:bg-bright-gray dark:hover:bg-[#545561] rounded-b-xl"
           >
-            <img src={EmailIcon} alt="Email Us" className="mr-2 w-4 h-4" />
+            <img
+              src={EmailIcon}
+              alt="Email Us"
+              className="filter dark:invert p-0.5"
+              width={20}
+            />
             Email Us
           </a>
         </div>

From 085542c861487fc3f01ad31b9247c72589b17780 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Tue, 15 Oct 2024 02:33:20 +0530
Subject: [PATCH 2/2] feat(help): sync locales

---
 frontend/src/Navigation.tsx      |  5 ++---
 frontend/src/components/Help.tsx | 11 ++++++-----
 frontend/src/locale/en.json      |  3 +++
 frontend/src/locale/es.json      |  3 +++
 frontend/src/locale/jp.json      |  3 +++
 frontend/src/locale/zh-TW.json   |  3 +++
 frontend/src/locale/zh.json      |  3 +++
 7 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index 4b49ddbc0..ced91fca5 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -360,9 +360,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           </div>
           <div className="flex flex-col justify-end text-eerie-black dark:text-white">
             <div className="flex justify-between items-center px-1 py-1">
-              <div className="flex items-center gap-1">
-                <Help />
-              </div>
+              <Help />
+
               <div className="flex items-center gap-1">
                 <NavLink
                   target="_blank"
diff --git a/frontend/src/components/Help.tsx b/frontend/src/components/Help.tsx
index 3021432c7..0112a8050 100644
--- a/frontend/src/components/Help.tsx
+++ b/frontend/src/components/Help.tsx
@@ -2,11 +2,12 @@ import { useState, useRef, useEffect } from 'react';
 import Info from '../assets/info.svg';
 import PageIcon from '../assets/documentation.svg';
 import EmailIcon from '../assets/envelope.svg';
-
+import { useTranslation } from 'react-i18next';
 const Help = () => {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement | null>(null);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const { t } = useTranslation();
 
   const toggleDropdown = () => {
     setIsOpen((prev) => !prev);
@@ -38,11 +39,11 @@ const Help = () => {
         className="my-auto mx-4 w-full flex items-center h-9 gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E]"
       >
         <img src={Info} alt="info" className="ml-1 w-5 filter dark:invert" />
-        Help
+        {t('help')}
       </button>
       {isOpen && (
         <div
-          className={`absolute -translate-y-28 z-10 w-48 shadow-lg bg-white dark:bg-[#444654] rounded-xl`}
+          className={`absolute translate-x-4 -translate-y-28 z-10 w-48 shadow-lg bg-white dark:bg-[#444654] rounded-xl`}
         >
           <a
             href="https://docs.docsgpt.cloud/"
@@ -56,7 +57,7 @@ const Help = () => {
               className="filter dark:invert"
               width={20}
             />
-            Documentation
+            {t('documentation')}
           </a>
           <a
             href="mailto:contact@arc53.com"
@@ -68,7 +69,7 @@ const Help = () => {
               className="filter dark:invert p-0.5"
               width={20}
             />
-            Email Us
+            {t('emailUs')}
           </a>
         </div>
       )}
diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
index 76bdea566..335d1e6c8 100644
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -10,6 +10,9 @@
   "sourceDocs": "Source",
   "none": "None",
   "cancel": "Cancel",
+  "help":"Help",
+  "emailUs":"Email us",
+  "documentation":"documentation",
   "demo": [
     {
       "header": "Learn about DocsGPT",
diff --git a/frontend/src/locale/es.json b/frontend/src/locale/es.json
index 793efcb97..9358aafa3 100644
--- a/frontend/src/locale/es.json
+++ b/frontend/src/locale/es.json
@@ -10,6 +10,9 @@
   "sourceDocs": "Fuente",
   "none": "Nada",
   "cancel": "Cancelar",
+  "help":"Asistencia",
+  "emailUs": "Envíanos un correo",
+  "documentation": "documentación",
   "demo": [
     {
       "header": "Aprende sobre DocsGPT",
diff --git a/frontend/src/locale/jp.json b/frontend/src/locale/jp.json
index 725bfeb48..2adc4947d 100644
--- a/frontend/src/locale/jp.json
+++ b/frontend/src/locale/jp.json
@@ -10,6 +10,9 @@
   "sourceDocs": "ソース",
   "none": "なし",
   "cancel": "キャンセル",
+  "help":"ヘルプ",
+  "emailUs": "メールを送る",
+  "documentation": "ドキュメント",
   "demo": [
     {
       "header": "DocsGPTについて学ぶ",
diff --git a/frontend/src/locale/zh-TW.json b/frontend/src/locale/zh-TW.json
index e91005b51..a826baed1 100644
--- a/frontend/src/locale/zh-TW.json
+++ b/frontend/src/locale/zh-TW.json
@@ -10,6 +10,9 @@
   "sourceDocs": "原始文件",
   "none": "無",
   "cancel": "取消",
+  "help":"聯繫支援",
+  "emailUs": "寄送電子郵件給我們",
+  "documentation": "文件",
   "demo": [
     {
       "header": "了解 DocsGPT",
diff --git a/frontend/src/locale/zh.json b/frontend/src/locale/zh.json
index 79cf63412..427bddc4c 100644
--- a/frontend/src/locale/zh.json
+++ b/frontend/src/locale/zh.json
@@ -10,6 +10,9 @@
   "sourceDocs": "源",
   "none": "无",
   "cancel": "取消",
+  "help":"联系支持",
+  "emailUs": "给我们发邮件",
+  "documentation": "文档",
   "demo": [
     {
       "header": "了解 DocsGPT",