Props fix & UI updates

src/articles/ArticlePreview.sc.js

@@ -5,6 +5,7 @@ const ArticlePreview = styled.div`
   margin-bottom: 1em;
   margin-top: 2em;
   padding-left: 0.8em;
+  padding-right: 0.8em;
   padding-bottom: 1em;
 `;
 /*

src/components/CollapsablePanel.sc.js

@@ -2,14 +2,11 @@ import styled from "styled-components";
 
 let CollapsableContainer = styled.div`
   display: flex;
-  border-bottom: solid 1px;
-  border-color: #757575;
   align-items: center;
   justify-content: space-between;
   padding: 0px 1em 0.5em;
-  margin-bottom: 4px;
-  margin-top: 4em;
-  width: 100%;
+  margin-bottom: 0.3em;
+  margin-top: 1em;
 
   .arrow {
     font-size: xx-large;

src/components/TopMessage.sc.js

@@ -1,15 +1,13 @@
 import styled from "styled-components";
-import { zeeguuVeryLightOrange } from "./colors";
 
 let YellowMessageBox = styled.div`
   display: flex;
   flex-direction: column;
   text-align: center;
-  margin: auto;
-  background-color: ${zeeguuVeryLightOrange};
+  margin: 2em auto;
+  background-color: var(--infobox-bg);
   border-radius: 1em;
   max-width: 80%;
-  margin: 2em;
   padding: 0.5em 0.5em;
   font-size: large;
   @media (max-width: 720px) {

src/components/allButtons.sc.js

@@ -132,7 +132,7 @@ const StyledButton = styled.button`
 
   // Navigation used together with <NavigateNextIcon /> or <NavigateBeforeIcon />
   ${(props) =>
-    (props.$navigation || props.navigation) &&
+    props.$navigation &&
     css`
       background-color: var(--action-btn-secondary-color-bg);
       color: var(--action-btn-secondary-color-text);
@@ -143,7 +143,7 @@ const StyledButton = styled.button`
 
     // Disabled
     ${(props) =>
-    (props.$disabled || props.disabled) &&
+    props.$disabled &&
     css`
       background-color: var(--action-btn-secondary-color-bg);
       color: var(--action-btn-secondary-color-text);

src/components/progress_tracking/ProgressItems.sc.js

@@ -1,14 +1,16 @@
 import styled from "styled-components";
-import { zeeguuWarmYellow, veryLightGrey} from "../colors";
+import { zeeguuWarmYellow, veryLightGrey, zeeguuOrange} from "../colors";
+
 
 const ProgressOverviewItem = styled.div`
-  width: 285px;    
+  min-width: 285px;
+  max-width: 400px;    
   display: flex;
-  background-color: white;
-  border:2px solid ${zeeguuWarmYellow};
-  border-radius: 4px;
-  padding: 1.5em;
-  height: 60px;
+  align-items: center;
+  background-color: var(--infobox-bg); 
+  border-radius: 8px;
+  padding: 1.1em 1.25em;
+  min-height: 52px;
   cursor: pointer;
   &:hover {
     background-color: ${veryLightGrey};
@@ -17,7 +19,7 @@ const ProgressOverviewItem = styled.div`
   @media (max-width: 768px) {
     width: 100%;
     max-width: 20em;
-    height: 3.5em; 
+    min-height: 3em; 
   }
 `;
 
@@ -26,7 +28,6 @@ const IconWithValueAndLabel = styled.div`
   flex-direction: column;
   align-items: center;
   text-align: center;
-  margin-top: -0.5em;
 `;
 
 const IconAndValue = styled.div`
@@ -37,7 +38,7 @@ const IconAndValue = styled.div`
 
 const Icon = styled.div`
   font-size: 2em;
-  color: ${zeeguuWarmYellow};
+  color: ${zeeguuOrange};
 `;
 
 const Value = styled.div`
@@ -46,33 +47,32 @@ const Value = styled.div`
 `;
 
 const Label = styled.div`
-  font-size: 0.7em;
-  margin-top: -0.3em;
+  font-size: 0.9em;
   letter-spacing: 0.04em;
 
   @media (max-width: 768px) {
-    font-size: 0.55em;
+    font-size: 0.8em;
   }
 `;
 
 const ProgressDescription = styled.div`
   display: flex;
   width: 60%;
-  font-size: 0.75rem;
+  font-size: 0.9rem;
   align-items: center;
   text-align: left;
   margin-left: 2.9em;
   letter-spacing: 0.03em;
 
   @media (max-width: 768px) {
-    font-size: 0.6em;
+    font-size: 0.8rem;
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
 
   }
 
   @media (max-width: 375px) {
-    font-size: 0.56em;
+    font-size: 0.7rem;
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
@@ -82,8 +82,12 @@ const ProgressItemsContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: 2rem;
-  justify-content: center;
+  justify-content: start;
   padding: 1em;
+  @media (max-width: 768px) {
+    justify-content: center;
+  }
+
   `;
 
   const ProgressOverviewContainer = styled.div`

src/exercises/Congratulations.js

@@ -4,11 +4,18 @@ import { YellowMessageBox } from "../components/TopMessage.sc";
 import strings from "../i18n/definitions";
 import { useState, useEffect, useContext } from "react";
 import { useLocation, useHistory } from "react-router-dom";
-import { CenteredColumn } from "./Congratulations.sc";
+import {
+  CenteredColumn,
+  SummaryTextWrapper,
+  WordList,
+  ExercisesFrom,
+  CongratulationsContainer,
+  GoodJobTitle,
+  ProgressionButtonsRow,
+} from "./Congratulations.sc";
 import { removeArrayDuplicates } from "../utils/basic/arrays";
 import { LoadingAnimation } from "../components/LoadingAnimation.sc";
 import { timeToHumanReadable, formatFutureDueTime } from "../utils/misc/readableTime";
-import CollapsablePanel from "../components/CollapsablePanel";
 import Pluralize from "../utils/text/pluralize";
 import { StyledButton } from "../components/allButtons.sc";
 import { APIContext } from "../contexts/APIContext";
@@ -100,105 +107,71 @@ export default function Congratulations({
     if (articleID)
       return (
         <>
-          <StyledButton secondary onClick={keepExercisingAction} disabled={isKeepExercisingDisabled}>
+          <StyledButton $navigation onClick={keepExercisingAction} $disabled={isKeepExercisingDisabled} disabled={isKeepExercisingDisabled}>
             {strings.keepExercising}
           </StyledButton>
-          <StyledButton primary onClick={toScheduledExercises}>
-            {strings.goToExercises}
-          </StyledButton>
         </>
       );
     else if (!isOutOfWordsToday)
       return (
-        <StyledButton primary onClick={keepExercisingAction} disabled={isKeepExercisingDisabled}>
-          {strings.keepExercising}
-        </StyledButton>
-      );
-    else
-      return (
-        <StyledButton primary onClick={backButtonAction}>
-          {strings.goToReading}
-        </StyledButton>
+        <>
+          <StyledButton $navigation onClick={keepExercisingAction} $disabled={isKeepExercisingDisabled} disabled={isKeepExercisingDisabled}>
+            {strings.keepExercising}
+          </StyledButton>
+        </>
       );
   }
 
   return (
     <>
-      <s.NarrowColumn className="narrowColumn">
+      <CongratulationsContainer>
         <CenteredColumn className="centeredColumn">
-          <h1>
+          {articleID && (
+            <ExercisesFrom>
+              From: <a href={articleURL}>{articleTitle}</a>
+            </ExercisesFrom>
+          )}
+          <GoodJobTitle>
             {strings.goodJob}{isAnonymous ? "" : ` ${username}`}!
-          </h1>
-        </CenteredColumn>
-         <CenteredColumn className="centeredColumn">
-        <div style={{ marginLeft: "1em", display: "flex", flexDirection: "column", justifyContent:"center" }}>
-          <p style={{ textAlign: "center" }}>
-            You have just done <b>{totalPracticedBookmarksInSession}</b>{" "}
-
-            {Pluralize.exercise(totalPracticedBookmarksInSession)} in <b>{timeToHumanReadable(checkpointTime)}</b>. Here are some highlights of your current progress you have made.
-            {articleID && (
-              <p>
-                These words are now part of your vocabulary exercises, using spaced repetition and smart learning
-                techniques to help you remember them better.
-              </p>
-            )}
-          </p>
-        </div>
-        {articleID && (
+          </GoodJobTitle>
+          </CenteredColumn> 
+
+        <SummaryTextWrapper>
           <p>
-            You practiced words from: <a href={articleURL}>{articleTitle}</a>
+            You have done <b>{totalPracticedBookmarksInSession}</b>{" "}
+
+            {Pluralize.exercise(totalPracticedBookmarksInSession)} in <b>{timeToHumanReadable(checkpointTime)}</b>.
           </p>
-          
-        )}
-        </CenteredColumn>
-        <ExerciseProgressSummary/>
-        {incorrectBookmarksToDisplay.length > 0 && (
-          <CollapsablePanel
-            children={incorrectBookmarksToDisplay.map((each) => (
+        </SummaryTextWrapper>
+
+        <ExerciseProgressSummary /> 
+          {incorrectBookmarksToDisplay.length > 0 && (
+            <WordList>
+              <b>{strings.wordsIncorrect}</b>
+              {incorrectBookmarksToDisplay.map((each) => (
               <s.ContentOnRow className="contentOnRow" key={"row_" + each.id}>
-                <Word key={each.id} bookmark={each} notifyDelete={deleteBookmark} source={source} isOnCongratulationsPage={true}  />
+              <Word key={each.id} bookmark={each} notifyDelete={deleteBookmark} source={source} isOnCongratulationsPage={true} />
               </s.ContentOnRow>
-            ))}
-            topMessage={strings.wordsIncorrect}
-            defaultOpen={true}
-          ></CollapsablePanel>
-        )}
-        <br />
+              ))}
+            </WordList>
+          )}
+
         {correctBookmarksToDisplay.length > 0 && (
-          <CollapsablePanel
-            children={correctBookmarksToDisplay.map((each) => (
+          <WordList>
+            <b>{strings.wordsCorrect}</b>
+            {correctBookmarksToDisplay.map((each) => (
               <s.ContentOnRow className="contentOnRow" key={"row_" + each.id}>
                 <Word key={each.id} bookmark={each} notifyDelete={deleteBookmark} source={source} isOnCongratulationsPage={true} />
               </s.ContentOnRow>
             ))}
-            topMessage={strings.wordsCorrect}
-            defaultOpen={true}
-          ></CollapsablePanel>
-        )}
-
-        <br />
-        {isOutOfWordsToday && (
-          <YellowMessageBox>
-            <p>
-              There are no more words for you to practice at the moment.
-              {nextWordDueText
-                ? ` New words will be ready to practice ${nextWordDueText}.`
-                : " Come back later to practice more words."}
-            </p>
-          </YellowMessageBox>
-        )}
-        {!isOutOfWordsToday && (
-          <>
-            <YellowMessageBox>
-              <p>There are words that we recommend you still practice today. Do you want do to it now?</p>
-
-              <CenteredColumn className="contentOnRow" style={{ marginTop: "-1em", justifyContent: "space-around" }}>
-                {progressionButtonRender()}
-              </CenteredColumn>
-            </YellowMessageBox>
-          </>
+          </WordList>
         )}
-      </s.NarrowColumn>
+        <>
+          <ProgressionButtonsRow>
+            {progressionButtonRender()}
+          </ProgressionButtonsRow>
+        </>
+      </CongratulationsContainer>
     </>
   );
 }