Merge branch 'SDGP-83' of https://github.com/SinithH/SurfPal into SDG…

…P-83

client/entrypoints/sidepanel/components/MyAccount/MyAccount.tsx

@@ -26,6 +26,31 @@ const MyAccount: React.FC = () => {
 
   const initialSettingsRef = useRef(userSettings);
 
+  useEffect(() => {
+    async function getSettings() {
+      try {
+        if (user) {
+          const { data } = await supabase
+            .from('settings')
+            .select()
+            .eq('userid', currentUser?.id)
+            .single();
+
+          if (data) {
+            setTheme(data.theme);
+            setTTSSetting(data.texttospeech);
+            setFontSize(data.fontsize);
+            updateSettings(data);
+          }
+        }
+
+      } catch (error) {
+        console.error(error);
+      }
+    }
+
+    getSettings();
+  }, [])
 
   useEffect(() => {
     setUser(currentUser);

client/entrypoints/sidepanel/components/Summarization/Question.tsx

@@ -1,10 +1,29 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import useStore from '../../context/store';
 
 const Question: React.FC<{ question: string; answer: string }> = ({ question, answer }) => {
   const [showAnswer, setShowAnswer] = useState(false);
   const { userSettings } = useStore();
   const [mode, setMode] = useState(userSettings?.theme || 'dark');
+  const [fontSize, setFontSize] = useState('');
+
+  useEffect(() => {
+
+    if(userSettings) {
+      switch(userSettings.fontsize){
+        case 'small':
+          setFontSize('text-xs');
+          return;
+        case 'normal':
+          setFontSize('');
+          return;
+        case 'large':
+          setFontSize('text-xl');
+          return;
+      }
+
+    }
+  }, [userSettings])
 
 
   return (
@@ -13,11 +32,11 @@ const Question: React.FC<{ question: string; answer: string }> = ({ question, an
         className="cursor-pointer bg-gray-100 p-3 rounded-md border-primary border-2 hover:text-primary dark:bg-darkTileHover"
         onClick={() => setShowAnswer(!showAnswer)}
       >
-        <h2 className="text-base">{question}</h2>
+        <h2 className={`leading-6 ${fontSize}`}>{question}</h2>
       </div>
       {showAnswer && (
         <div className="mt-2 bg-gray-100 p-3 rounded-md dark:bg-darkTileHover">
-          <p className="text-sm">{answer}</p>
+          <p className={`${fontSize}`}>{answer}</p>
         </div>
       )}
     </div>

client/entrypoints/sidepanel/components/shared/Footer.tsx

@@ -12,7 +12,7 @@ import { supabase } from "../../lib/helper/supabaseClient";
 import { getTop10NavigationLinks } from "../../services/navigation-service/getNavigationTopList";
 import useNavigationStore from "../../context/navigation-store";
 import { Purpose } from "@/enum/purpose-enum";
-import SignOutIcon from '@/public/icon/sign-out.svg';
+import SignOutIcon from './assets/sign-out.svg';
 
 interface FooterProps {
   module: string;
@@ -81,9 +81,11 @@ const Footer: React.FC<FooterProps> = ({ module }) => {
           </button>
           {module == ModuleNames.SUMMARIZATION && (
             <div className="inline-flex gap-12">
-              <button className="w-7 h-7 rounded">
-                <img src={textToSpeechIcon} alt="User" />
-              </button>
+              {userSettings.texttospeech && (
+                <button className="w-7 h-7 rounded">
+                    <img src={textToSpeechIcon} alt="User" />
+                </button>
+              )}
               <button onClick={handleRegenerateClick} className="p-2 h-7 inline-flex gap-3 items-center rounded-lg bg-primary text-white">
                 <span>Regenerate</span>
                 <FontAwesomeIcon icon={faRotate} />
@@ -100,6 +102,12 @@ const Footer: React.FC<FooterProps> = ({ module }) => {
                 <FontAwesomeIcon icon={faRotate} />
               </button>
             </div>)}
+            {module == ModuleNames.MY_ACCOUNT && currentUser && (
+              <button onClick={handleLogOut} className="inline-flex bg-transparent self-end text-lg text-red-500 font-kanit gap-2 items-center">
+                <img src={SignOutIcon} alt="sign out" className="h-5" />
+                <p>Log out</p>
+              </button>
+            )}
         </div>
       </div>
     </>

surfpal-web/app/shared/components/hero.tsx

@@ -2,12 +2,10 @@
 
 import Link from "next/link"
 import React from "react"
-import Typewriter from 'typewriter-effect';
 import HeroBg from '@/public/assets/hero-bg.svg';
 import Image from "next/image";
 import { Kanit } from "next/font/google";
 import { Typography } from "@material-tailwind/react";
-import PuzzlePiece from '@/public/assets/puzzle-piece (1).svg'
 import SurfPalLogoGif from '@/public/assets/ezgif.com-animated-gif-maker (2).gif'
 import SurfPalLogo from '@/public/assets/varient-3.png'
 import useStore from "@/lib/store";
@@ -34,17 +32,6 @@ const Hero = () => {
                     </div>
                     <Typography className="text-5xl font-bold" placeholder={undefined}>Empowering Accessibility: See Beyond Sight</Typography>
                     <Typography className="text-3xl font-bold" placeholder={undefined}>Navigate, Summerize, Customize & Engage</Typography>
-                    {/* <h1 className="text-3xl font-bold text-white">
-                        <Typewriter
-                                options={{
-                                strings:[
-                                    "Extension for Your Hard Time",
-                                    "Just one Click"
-                                ],
-                                autoStart: true,
-                                loop: true
-                            }}/>
-                        </h1> */}
                 </div>
             </div>