Mejoras de diseño

Author: sergio-jr-dev

src/App.css

@@ -84,9 +84,18 @@ button {
   padding: 1rem 2rem;
   color: var(--text-color);
   cursor: pointer;
+  transition: filter 0.3s, scale 0.3s;
 
   &.disabled {
     opacity: 0.5;
     filter: grayscale(0.8);
   }
+
+  &:hover {
+    filter: brightness(1.15);
+  }
+
+  &:active {
+    scale: 0.9;
+  }
 }

src/components/finalView/FinalView.jsx

@@ -11,9 +11,9 @@ export const FinalView = () => {
 
   return (
     <>
-      <article className="quiz final-view">
+      <section className="quiz final-view">
         <Score />
-      </article>
+      </section>
       {showResults && (
         <>
           <Results />

src/components/finalView/score/Score.jsx

@@ -20,20 +20,33 @@ export const Score = () => {
       ? '¡Buen intento!'
       : '¡Sigue practicando!';
   return (
-    <section className="score">
+    <article className="score">
       <h2 className="message">{message}</h2>
+      <div className="score-circles">
+        <div>
+          <span>
+            {score} / {shuffleQuestions.length}
+          </span>
+        </div>
+        <div>
+          <span>{percentage.toFixed()}%</span>
+        </div>
+      </div>
       <p>
-        Has contestado {score} preguntas correctamente de un total de{' '}
+        Has contestado correctamente {score} preguntas de un total de{' '}
         {shuffleQuestions.length}, consiguiendo un porcentaje de acierto de (
         {percentage.toFixed()}%).
       </p>
-      <button
-        onClick={() => setShowResults(true)}
-        hidden={showResults === true}
-      >
-        Ver resultados
-      </button>
-      <button onClick={handleRestart}>Jugar de nuevo</button>
-    </section>
+
+      <div className="buttons">
+        <button
+          onClick={() => setShowResults(true)}
+          hidden={showResults === true}
+        >
+          Ver resultados
+        </button>
+        <button onClick={handleRestart}>Jugar de nuevo</button>
+      </div>
+    </article>
   );
 };

src/components/finalView/score/score.css

@@ -8,4 +8,20 @@
   h2 {
     font-size: 2.2rem;
   }
+
+  .score-circles {
+    display: flex;
+    column-gap: 1rem;
+
+    div {
+      background-color: var(--info-color);
+      border-radius: 50%;
+      width: 5rem;
+      aspect-ratio: 1;
+      display: grid;
+      place-items: center;
+      font-size: 1.25rem;
+      font-weight: bold;
+    }
+  }
 }

src/components/quiz/Quiz.jsx

@@ -16,7 +16,9 @@ export const Quiz = () => {
         {currentQuestion + 1} / {shuffleQuestions.length}
       </span>
 
-      <h2>{shuffleQuestions[currentQuestion].question}</h2>
+      <h2 className="question-title">
+        {shuffleQuestions[currentQuestion].question}
+      </h2>
 
       <Answers />
 

src/components/quiz/quiz.css

@@ -16,4 +16,8 @@
     padding: 0.3rem 0.6rem;
     border-radius: 16px;
   }
+
+  .question-title {
+    padding-inline-end: 70px;
+  }
 }