Merge branch 'main' of https://github.com/zimmj/certifever-front-end

src/App.tsx

@@ -38,27 +38,25 @@ const App: React.FunctionComponent = () => {
       <header className="bg-neutral flex justify-between w-full h-32 p-2">
 
       <div className=''>
-        <img src={certifever} alt="Logo Certifever" className='h-full' />
-        </div>
+        <a className="link link-hover" href="./">
+           <img src={certifever} alt="Logo Certifever" className='h-full' />
+        </a>
+      </div>
 
         <div className='uppercase font-bolid text-white align-middle text-3xl place-self-center w-full'>
            Certifever  for ever
         </div>
         <div className=''>
-          <img src={baselhack} alt="HackBasel" className="h-full float-right " />
+          <a className="link link-hover" href="https://www.baselhack.ch/" target="_blank" rel="noreferrer">
+            <img src={baselhack} alt="HackBasel" className="h-full float-right " />
+          </a>
         </div>  
 
       </header>
       <div className="bg-slate-200 w-full flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
 
 
         <main className=" md:w-2/3 lg:w-3/4 px-5 py-40">
-          <h1 className="text-2xl md:text-4xl">Welcome to Certifever</h1>
-          <p>
-            Certifever help you to learn very quick any content. You can upload
-            a PDF with a topic or you can choice a topic and you will get some
-            questions for learning the topic
-          </p> <br/>
           <p>
 
           {!selectedLanguage ? (
@@ -92,12 +90,12 @@ const App: React.FunctionComponent = () => {
         </nav>
         <nav>
           <header className="footer-title">Created 2023</header>
-          <a className="link link-hover" href="https://www.baselhack.ch/">
+          <a className="link link-hover" href="https://www.baselhack.ch/" target="_blank" rel="noreferrer">
             BaselHack
           </a>
           <a className="link link-hover" href="./">Project Idea of Roland Brand</a>
           <a
-            className="link link-hover"
+            className="link link-hover" target="_blank" rel="noreferrer"
             href="https://github.com/zimmj/certifever-front-end"
           >
             GitHub Reposotory

src/components/Difficulty.tsx

@@ -10,11 +10,11 @@ const Difficulty: React.FC<DifficultyProps> = ({ onSelectDifficulty }) => {
 
   return (
     <div>
-      <h2>Choose a difficulty level please:</h2>
-      <ul>
+      <h2 className='text-xl font-bold'>Choose a difficulty level please:</h2>
+      <ul className='space-y-2.5'>
         {difficulties.map((difficulty, index) => (
           <li key={index}>
-            <button onClick={() => onSelectDifficulty(difficulty)}>
+            <button className='btn btn-lg btn-neutral' onClick={() => onSelectDifficulty(difficulty)}>
               {difficulty}
             </button>
           </li>

src/components/Language.tsx

@@ -18,11 +18,12 @@ const Language: React.FC<LanguageProps> = ({ onSelectLanguage }) => {
 
   return (
     <div>
-      <h2>Choose a programming language to test yourself please:</h2>
-      <ul>
+      <h2 className='text-xl font-bold'>Choose a programming language to test yourself please:</h2>
+      <br />
+      <ul className="space-x-2.5" >
         {languages.map((language, index) => (
-          <li key={index}>
-            <button onClick={() => onSelectLanguage(language)}>
+          <li className='inline' key={index}>
+            <button className="btn btn-lg btn-neutral" onClick={() => onSelectLanguage(language)}>
               {language}
             </button>
           </li>

src/components/Questions.tsx

@@ -71,16 +71,25 @@ const Questions: React.FC<QuestionsProps> = ({ apiUrl }) => {
 
   return (
     <div>
-      {timer > 0 && !isTimeUp && <p>Timer: {timer} second</p>}
+      {timer > 0 && !isTimeUp && <p className='text-2xl font-bold text-right'>Timer: {timer} second</p>}
 
       {questions.length > 0 && currentQuestionIndex < questions.length ? (
+
         <div>
-          <h1>Question {currentQuestionIndex + 1}</h1>
-          <p>{questions[currentQuestionIndex].question}</p>
-          <ul>
+          <br />
+          <h1 className='text-xl font-bold'>Question {currentQuestionIndex + 1}</h1>
+          <br />
+          <div className="flex flex-col w-full border-opacity-50">
+            <div className="grid h-20 card bg-base-300 rounded-box place-items-center">{questions[currentQuestionIndex].question}</div>
+
+        </div>
+        <br />
+          <div className='space-y-2.5'>
+
+          <ul className="space-x-2.5">
             {questions[currentQuestionIndex].options.map((option, index) => (
-              <li key={index}>
-                <button
+              <li  className='inline ' key={index}>
+                <button className='btn btn-primary'
                   onClick={() => handleAnswerQuestion(index)}
                   disabled={isAnswered}
                 >
@@ -89,17 +98,24 @@ const Questions: React.FC<QuestionsProps> = ({ apiUrl }) => {
               </li>
             ))}
           </ul>
+          </div>
+          <br />
           {isAnswered && (
             <div>
-              <p>
-                Correct Response is:{' '}
+              <div className="flex flex-col w-full border-opacity-50">
+            <div className="grid h-20 card bg-base-300 rounded-box place-items-center">
+
+            Correct Response is:{' '}
                 {
                   questions[currentQuestionIndex].options[
                     questions[currentQuestionIndex].correct_answer
                   ]
                 }
-              </p>
-              <button onClick={goToNextQuestion}>Next Question</button>
+            </div>
+
+        </div>
+        <br />
+              <button className='btn btn-neutral' onClick={goToNextQuestion}>Next Question</button>
             </div>
           )}
         </div>