Merge pull request #226 from nepalcodes/bk-polish

Bk polish

nepalingo-web/src/App.tsx

@@ -5,39 +5,33 @@ import FlashcardPage from "@/pages/FlashcardPage";
 import DictionaryPage from "@/pages/DictionaryPage";
 import ResetPassword from "@/pages/ResetPassword";
 import PasswordEmail from "@/pages/PasswordEmail";
-import About from "@/components/header/About";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import ReactGA from "react-ga4";
 import { PrivateRoutes } from "@/components/PrivateRoutes";
-import FeedbackForm from "@/components/FeedbackForm";
-import TestYourself from "@/pages/TestYourself";
+import About from "@/pages/About";
+import Credits from "@/pages/Credits";
+import Quiz from "@/pages/Quiz";
 import SignUp from "./pages/SignUp";
 
 const App: React.FC = () => {
   const TrackingID = import.meta.env.VITE_GOOGLE_ANALYTICS_TRACKING_ID;
   ReactGA.initialize(TrackingID);
 
-  const handleFeedbackFormClose = () => {
-    console.log("Feedback form closed");
-  };
   return (
     <div className="mx-5 min-[1200px]:mx-auto max-w-[1200px] ">
       <Router>
         <Routes>
           <Route path="/about" element={<About />} />
           <Route path="/login" element={<Login />} />
-          <Route
-            path="/feedback"
-            element={<FeedbackForm onClose={handleFeedbackFormClose} />}
-          />
+          <Route path="/credits" element={<Credits />} />
           <Route path="/signup" element={<SignUp />} />
           <Route path="/reset-password" element={<ResetPassword />} />
           <Route path="/reset-password-email" element={<PasswordEmail />} />
           <Route element={<PrivateRoutes />}>
             <Route path="/" element={<Home />} />
             <Route path="/flashcard" element={<FlashcardPage />} />
             <Route path="/dictionary" element={<DictionaryPage />} />
-            <Route path="/test-yourself" element={<TestYourself />} />
+            <Route path="/quiz" element={<Quiz />} />
           </Route>
         </Routes>
       </Router>

nepalingo-web/src/components/header/Header.tsx

@@ -1,28 +1,46 @@
-import React from "react";
+import React, { useState } from "react";
 import logo from "@/assets/NewLogo.png";
 import UserProfile from "@/components/header/UserProfile";
 import ChangeLanguage from "@/components/header/ChangeLanguage";
+import FeedbackForm from "@/components/FeedbackForm";
 import { Link } from "react-router-dom";
 
 const Header: React.FC = () => {
+  const [isFeedbackFormOpen, setIsFeedbackFormOpen] = useState(false);
+
+  const handleOpenFeedbackForm = () => {
+    setIsFeedbackFormOpen(true);
+  };
+
+  const handleCloseFeedbackForm = () => {
+    setIsFeedbackFormOpen(false);
+  };
+
   return (
-    <nav className=" border-gray-200  py-1 bg-black text-white flex justify-between items-center w-full h-16">
-      <div className="flex-1">
+    <nav className=" border-gray-200  py-1 bg-black text-white flex gap-4 justify-between items-center w-full h-16">
+      <div>
         <Link to={"/"}>
           <img src={logo} alt="Nepalingo Logo" className="h-12" />
         </Link>
       </div>
-      <div className="flex flex-row justify-between items-center gap-4">
-        {/* TODO: Move TO THE LEFT */}
-        <a href="/feedback" className="text-white hover:underline">
-          FeedbackForm
-        </a>
-        <a href="/about" className="text-white hover:underline">
-          About
-        </a>
-        <ChangeLanguage />
-        <UserProfile />
-      </div>
+      <button onClick={handleOpenFeedbackForm} className="hover:underline">
+        Give us Feedback!
+      </button>
+
+      {isFeedbackFormOpen && (
+        <div className="z-20 fixed inset-0 bg-white-800 bg-opacity-50 flex justify-center items-center">
+          <FeedbackForm onClose={handleCloseFeedbackForm} />
+        </div>
+      )}
+      <a href="/about" className="text-white hover:underline">
+        About
+      </a>
+      <a href="/credits" className="text-white hover:underline">
+        Credits
+      </a>
+      <div className="flex-1"></div>
+      <ChangeLanguage />
+      <UserProfile />
     </nav>
   );
 };

nepalingo-web/src/hooks/useQuotes.tsx

@@ -46,7 +46,9 @@ const useQuotes = (): QuotesResponse => {
       };
     });
 
-    const randomIndex = Math.floor(Math.random() * quotesArray.length);
+    // We do quotesArray.length - 1 because the last element of the array is always empty
+    // due to the way the csv is being parsed above.
+    const randomIndex = Math.floor(Math.random() * (quotesArray.length - 1));
     const randomQuote = quotesArray[randomIndex];
 
     setQuotes(quotesArray);

nepalingo-web/src/pages/Credits.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import Header from "@/components/header/Header";
+
+const Credits: React.FC = () => {
+  return (
+    <>
+      <Header />
+      <div className="p-6 md:p-12 max-w-7xl mx-auto text-white">
+        <h1 className="text-4xl font-bold">Data Sources:</h1>
+        <h1 className="text-4xl font-bold mb-6 text-center text-primary ">
+          NepalBhasa.org
+        </h1>
+        <p className="mb-8 text-lg leading-relaxed text-center">
+          <a
+            href="https://www.nepalbhasa.org/"
+            className="text-blue-600 hover:underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            NepalBhasa.org
+          </a>
+          &#32; is an online Newari Dictionary which managed by Daibuli, a
+          US-based nonprofit organization who have kindly provided us with their
+          backend API allowing us to retrieve more detailed data like images,
+          audio, parts of speech and more.
+        </p>
+
+        <h1 className="text-4xl font-bold mb-6 text-center text-primary">
+          Google Translate
+        </h1>
+        <p className="mb-8 text-lg leading-relaxed text-center">
+          Google Translate API is used to power some of the more popular
+          languages in Nepal including but not limited to Sanskrit, Nepali, and
+          Maithli.
+        </p>
+
+        <h1 className="text-4xl font-bold mb-6 text-center text-primary">
+          Individual Contributers
+        </h1>
+        <p className="mb-8 text-lg leading-relaxed text-center">
+          Puja Tajpuriya has been a major contributer to all the Tajpuriya
+          translations. <br />
+          We are looking for linguists! If you&apos;d like to contribute to this
+          project, please reach us via email: support at nepalingo dot com
+        </p>
+      </div>
+    </>
+  );
+};
+
+export default Credits;

nepalingo-web/src/pages/Home.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { useNavigate } from "react-router-dom";
 import ReactGA from "react-ga4";
 import { useAuth } from "@/hooks/Auth";
@@ -7,7 +7,6 @@ import GreetingCard from "@/components/GreetingCard";
 import ActivityCard from "@/components/ActivityCard";
 import { useLanguage } from "@/hooks/Langauge";
 import StreakDisplay from "@/components/header/StreakDisplay";
-import FeedbackForm from "@/components/FeedbackForm";
 import RandomQuoteComponent from "@/components/randomQuotes";
 
 const Home: React.FC = () => {
@@ -19,16 +18,6 @@ const Home: React.FC = () => {
   const navigate = useNavigate();
   const { user } = useAuth();
   const { selectedLanguage } = useLanguage();
-  const [isFeedbackFormOpen, setIsFeedbackFormOpen] = useState(false);
-
-  const handleOpenFeedbackForm = () => {
-    setIsFeedbackFormOpen(true);
-  };
-
-  const handleCloseFeedbackForm = () => {
-    setIsFeedbackFormOpen(false);
-  };
-
   return (
     <>
       <div className="flex flex-col w-full min-h-screen bg-black text-white font-primary">
@@ -38,13 +27,33 @@ const Home: React.FC = () => {
             <GreetingCard name={user?.user_metadata?.username} />
             <StreakDisplay />
           </div>
+
+          <div className="mb-5 py-5">
+            <div className="flex flex-col items-center">
+              <div className="text-xl pb-1">Random Quote</div>
+              <RandomQuoteComponent />
+            </div>
+          </div>
+
+          <div className="mb-5 ">
+            <ActivityCard
+              backgroundImageUrl="/Quiz.png"
+              quizYourselfText="Take a quiz!"
+              descriptionText={`Try some multiple choice questions to test your ${selectedLanguage} vocabulary`}
+              buttonText="Test Yourself"
+              onClick={() => {
+                navigate("/quiz");
+              }}
+            />
+          </div>
+
           <div className="flex flex-row gap-4 w-full mb-4 ">
             <div className="flex-1">
               <ActivityCard
-                backgroundImageUrl="/CardOverlay.jpg"
-                quizYourselfText="View Flash Cards"
+                backgroundImageUrl="/Learning.webp"
+                quizYourselfText="Learn Words"
                 descriptionText="Test yourself using our flashcards."
-                buttonText="Start Quiz"
+                buttonText="Start Flashcards"
                 onClick={() => {
                   navigate("/flashcard");
                 }}
@@ -53,7 +62,7 @@ const Home: React.FC = () => {
 
             <div className="flex-1">
               <ActivityCard
-                backgroundImageUrl="/CardOverlay.jpg"
+                backgroundImageUrl="/Dictionary.png"
                 quizYourselfText="View Dictionary"
                 descriptionText={`Search for word meanings in our english to ${selectedLanguage} dicitonary!`}
                 buttonText="Go to Dictionary"
@@ -63,51 +72,7 @@ const Home: React.FC = () => {
               />
             </div>
           </div>
-          <div className="mb-5 ">
-            <ActivityCard
-              backgroundImageUrl="/CardOverlay.jpg"
-              quizYourselfText="Test yourself"
-              descriptionText={`Try some multiple choice questions to test your ${selectedLanguage} vocabulary`}
-              buttonText="Test Yourself"
-              onClick={() => {
-                navigate("/test-yourself");
-              }}
-            />
-          </div>
-
-          <div className="mb-5">
-            <ActivityCard
-              backgroundImageUrl="/CardOverlayBlur.png"
-              quizYourselfText="Random Quote!"
-              descriptionText={`Here's a random quote!`}
-            >
-              <div className="flex justify-center">
-                <RandomQuoteComponent />
-              </div>
-            </ActivityCard>
-          </div>
-
-          <div className="mb-5 pt-5">
-            <div className="flex justify-center">
-              <RandomQuoteComponent />
-            </div>
-          </div>
         </div>
-
-        <div className="flex h-16 max-h-12 items-center justify-between py-4 px-5 bg-white-sidebar border-black">
-          <button
-            onClick={handleOpenFeedbackForm}
-            className="bg-white-500 text-black px-2 py-1 rounded-md hover:bg-red-600"
-          >
-            Give Feedback
-          </button>
-        </div>
-
-        {isFeedbackFormOpen && (
-          <div className="fixed inset-0 bg-white-800 bg-opacity-50 flex justify-center items-center">
-            <FeedbackForm onClose={handleCloseFeedbackForm} />
-          </div>
-        )}
       </div>
     </>
   );

nepalingo-web/src/pages/TestYourself.tsx → nepalingo-web/src/pages/Quiz.tsx

@@ -7,7 +7,7 @@ import { useStreak } from "@/hooks/StreakContext";
 import { useLanguage } from "@/hooks/Langauge";
 import { getNextWord } from "@/lib/getNextWord";
 
-const TestYourself: React.FC = () => {
+const Quiz: React.FC = () => {
   const { updateStreak } = useStreak();
   const { selectedLanguage } = useLanguage();
   const [word, setWord] = useState("hello");
@@ -160,4 +160,4 @@ const TestYourself: React.FC = () => {
   );
 };
 
-export default TestYourself;
+export default Quiz;