Merge pull request #35 from sunnybraille/request

feat: updated UI
sunnybraille · Mar 7, 2024 · 6e9c1d1 · 6e9c1d1
2 parents f7ece07 + 0a8287b
commit 6e9c1d1
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 19 deletions.
diff --git a/my-app/src/components/ContrastToggleButton.tsx b/my-app/src/components/ContrastToggleButton.tsx
@@ -5,7 +5,7 @@ import { useMediaQuery } from "react-responsive";
 
 
 const ContrastToggleButton = () => {
-  const isMobile = useMediaQuery({ maxWidth: 768 });
+  const isMobile = useMediaQuery({ maxWidth: 790 });
   const { isHighContrast, toggleHighContrast } = useHighContrast();
   const { language } = useLanguage();
   const textClassName = language === "ko" ? "font-kor" : "font-eng";

diff --git a/my-app/src/components/NavBar.tsx b/my-app/src/components/NavBar.tsx
@@ -10,7 +10,7 @@ import { useHighContrast } from "./HighContrastMode";
 import { MdMenu } from "react-icons/md";
 
 const NavBar = () => {
-  const isMobile = useMediaQuery({ maxWidth: 768 });
+  const isMobile = useMediaQuery({ maxWidth: 800 });
   const { language } = useLanguage();
   const textClassName = language === "ko" ? "font-kor" : "font-eng";
   const { isHighContrast } = useHighContrast();
@@ -162,10 +162,6 @@ const NavBar = () => {
               </button>
             </Link>
           </div>
-          <div className="absolute right-10 top-0.3 transform -translate-y-1/2 flex flex-row items-center gap-4">
-            <ContrastToggleButton />
-            <LanguageToggleButton />
-          </div>
         </div>
       )}
 

diff --git a/my-app/src/components/UploadFileButton.tsx b/my-app/src/components/UploadFileButton.tsx
@@ -5,6 +5,7 @@ import { useLanguage } from "../LanguageContext";
 import messages from "./Messages";
 import { useHighContrast } from "../components/HighContrastMode";
 
+
 interface UploadFileButtonState {
   title: string;
   content: string;
@@ -20,6 +21,7 @@ const UploadFileButton: React.FC = () => {
   const textClassName = language === "ko" ? "font-kor" : "font-eng";
   const { isHighContrast } = useHighContrast();
 
+
   const { fileSelectAlert, uploadSuccess, uploadFail } = messages[language];
   const [state, setState] = useState<UploadFileButtonState>({
     title: "",
@@ -152,6 +154,7 @@ const UploadFileButton: React.FC = () => {
           </button>
         </form>
       </div>
+
       <div>
         {translationsId && (
           <TranslationProgress translationsId={translationsId} />

diff --git a/my-app/src/pages/ConvertPage.tsx b/my-app/src/pages/ConvertPage.tsx
@@ -6,6 +6,8 @@ import UploadFileButton from "../components/UploadFileButton";
 import "../tailwind.css";
 import { useLanguage } from "../LanguageContext";
 import { useHighContrast } from "../components/HighContrastMode";
+import ContrastToggleButton from "../components/ContrastToggleButton";
+import LanguageToggleButton from "../components/LanguageToggleButton";
 
 const ConvertPage = () => {
   const isMobile = useMediaQuery({ maxWidth: 768 });
@@ -101,6 +103,14 @@ const ConvertPage = () => {
           <div>
             <UploadFileButton />
           </div>
+          <br />
+          <br />
+            {isMobile && (
+              <div className="transform -translate-y-1/2 flex flex-row justify-center items-center gap-4">
+                <ContrastToggleButton />
+                <LanguageToggleButton />
+              </div>
+            )}
         </div>
       </div>
       <BrailleDeco />

diff --git a/my-app/src/pages/DownloadPage.tsx b/my-app/src/pages/DownloadPage.tsx
@@ -8,6 +8,8 @@ import { useLanguage } from "../LanguageContext";
 import { useHighContrast } from "../components/HighContrastMode";
 import { useLocation } from "react-router-dom";
 import FileNameDisplay from "../components/FileNameDisplay";
+import ContrastToggleButton from "../components/ContrastToggleButton";
+import LanguageToggleButton from "../components/LanguageToggleButton";
 
 function useQuery() {
   return new URLSearchParams(useLocation().search);
@@ -36,7 +38,9 @@ const DownloadPage = () => {
   }, [language]);
 
   return (
-    <div className={`w-full h-screen bg-stone-200`}>
+    <div className={`w-full h-screen ${
+      isHighContrast ? "bg-black" : "bg-stone-200"
+    }`}>
       <div aria-live="polite" className="sr-only">
         {announcement}
       </div>
@@ -95,12 +99,21 @@ const DownloadPage = () => {
             >
               <img src="/img/complete.png" alt="Conversion Complete" />
             </div>
-            <div className="w-auto h-auto m-auto flex flex-col items-center justify-center my-[10px]">
+            <div className="w-auto h-auto m-auto flex flex-col items-center justify-center">
               <FileNameDisplay fileId={fileId} />
               <DownloadButton />
               <NewFileUpload />
+
             </div>
+
           </div>
+          <br />
+            {isMobile && (
+              <div className="transform -translate-y-1/2 flex flex-row justify-center gap-4">
+                <ContrastToggleButton />
+                <LanguageToggleButton />
+              </div>
+            )}
         </div>
       </div>
       <BrailleDeco />

diff --git a/my-app/src/pages/MainPage.tsx b/my-app/src/pages/MainPage.tsx
@@ -6,9 +6,11 @@ import "../tailwind.css";
 import ConvertPageRoutingButton from "../components/ConvertPageRoutingButton";
 import { useLanguage } from "../LanguageContext";
 import { useHighContrast } from "../components/HighContrastMode";
+import ContrastToggleButton from "../components/ContrastToggleButton";
+import LanguageToggleButton from "../components/LanguageToggleButton";
 
 const MainPage = () => {
-  const isMobile = useMediaQuery({ maxWidth: 768 });
+  const isMobile = useMediaQuery({ maxWidth: 800 });
   const { language } = useLanguage();
   const textClassName = language === "ko" ? "font-kor" : "font-eng";
   const { isHighContrast } = useHighContrast();
@@ -45,9 +47,13 @@ const MainPage = () => {
           } flex items-center justify-center`}
         >
           {isMobile && (
-            <div className={`relative text-center flex justify-center items-center h-[300px] ${
-              isHighContrast ? "text-yellow-300" : "text-neutral-800 bg-[#FF6A3F]"
-            } `}>
+            <div
+              className={`relative text-center flex justify-center items-center h-[300px] ${
+                isHighContrast
+                  ? "text-yellow-300"
+                  : "text-neutral-800 bg-[#FF6A3F]"
+              } `}
+            >
               <div className="z-10 text-neutral-800">
                 <div
                   className={`${textClassName} ${
@@ -73,7 +79,9 @@ const MainPage = () => {
               />
               <div className="w-auto h-auto top-[350px] left-[150px] absolute">
                 <div
-                  className={`${textClassName} ${isHighContrast ? 'text-yellow-300': 'text-neutral-800'} w-[926px] text-xs font-normal leading-9`}
+                  className={`${textClassName} ${
+                    isHighContrast ? "text-yellow-300" : "text-neutral-800"
+                  } w-[926px] text-xs font-normal leading-9`}
                 >
                   {language === "ko" ? (
                     <>
@@ -105,14 +113,18 @@ const MainPage = () => {
             <div>
               <div className="w-auto h-[72px] top-[200px] left-[150px] absolute">
                 <div
-                  className={`SunnyBraille ${isHighContrast ? 'text-yellow-300': 'text-neutral-800'} font-eng text-6xl font-bold leading-[72px] tracking-wide`}
+                  className={`SunnyBraille ${
+                    isHighContrast ? "text-yellow-300" : "text-neutral-800"
+                  } font-eng text-6xl font-bold leading-[72px] tracking-wide`}
                 >
                   SUNNY BRAILLE
                 </div>
               </div>
               <div className="w-auto h-[72px] top-[290px] left-[150px] absolute">
                 <div
-                  className={`${textClassName} ${isHighContrast ? 'text-yellow-300': 'text-neutral-800'} w-[926px] text-2xl font-semibold leading-[18.90px]`}
+                  className={`${textClassName} ${
+                    isHighContrast ? "text-yellow-300" : "text-neutral-800"
+                  } w-[926px] text-2xl font-semibold leading-[18.90px]`}
                 >
                   {language === "ko"
                     ? "Sunny Braille은 해바라기팀이 개발한 교육용 웹 점역 소프트웨어 입니다."
@@ -121,7 +133,9 @@ const MainPage = () => {
               </div>
               <div className="w-auto h-auto top-[350px] left-[150px] absolute">
                 <div
-                  className={`${textClassName} ${isHighContrast ? 'text-yellow-300': 'text-neutral-800'} w-[926px] text-base font-normal leading-9`}
+                  className={`${textClassName} ${
+                    isHighContrast ? "text-yellow-300" : "text-neutral-800"
+                  } w-[926px] text-base font-normal leading-9`}
                 >
                   {language === "ko" ? (
                     <>
@@ -152,12 +166,20 @@ const MainPage = () => {
           )}
         </div>
 
-        <div className={`w-auto h-auto ${isMobile ? "top-[80px]" : "top-[100px]"} flex flex-col justify-center relative`}>
-          <ConvertPageRoutingButton />
+        <div
+          className={`w-auto h-auto ${
+            isMobile ? "top-[80px]" : "top-[100px]"
+          } flex flex-col justify-center relative`}
+        >
+          <div>
+            <ConvertPageRoutingButton />
+          </div>
           <div
             className={`${textClassName} text-center ${
               isHighContrast ? "text-yellow-300" : "text-neutral-800"
-            } text-base ${isMobile ? "text-xs" : "text-base"} font-normal my-[20px] leading-[37px]`}
+            } text-base ${
+              isMobile ? "text-xs" : "text-base"
+            } font-normal my-[20px] leading-[37px]`}
           >
             {language === "ko" ? (
               <>
@@ -175,6 +197,13 @@ const MainPage = () => {
               </>
             )}
           </div>
+          <br />
+            {isMobile && (
+              <div className="transform -translate-y-1/2 flex flex-row justify-center gap-4">
+                <ContrastToggleButton />
+                <LanguageToggleButton />
+              </div>
+            )}
         </div>
       </div>
       <BrailleDeco />