From d7ce19600d8d6520c7c1b0fe1d82694f8c3051eb Mon Sep 17 00:00:00 2001
From: Irina Sorokina <irasoro402@yandex.ru>
Date: Thu, 11 Jul 2024 00:11:45 +0400
Subject: [PATCH 1/4] Changed text alignment

---
 src/modals/InfoModal.tsx | 88 ++++++++++++++++++++++------------------
 1 file changed, 48 insertions(+), 40 deletions(-)

diff --git a/src/modals/InfoModal.tsx b/src/modals/InfoModal.tsx
index 830f3ce..7fed995 100644
--- a/src/modals/InfoModal.tsx
+++ b/src/modals/InfoModal.tsx
@@ -11,6 +11,8 @@ import {
   getPregnancyChance,
 } from "../state/CalculationLogics";
 
+import "./InfoModal.css";
+
 interface PropsInfoModal {
   isOpen: boolean;
   setIsOpen: (newIsOpen: boolean) => void;
@@ -38,27 +40,34 @@ const InfoModal = (props: PropsInfoModal) => {
         className="ion-padding"
         color={`transparent-${theme}`}
       >
-        <p
+        <div
           style={{
-            fontWeight: "bold",
-            fontSize: "25px",
-            color: `var(--ion-color-dark-${theme})`,
-            marginBottom: "24px",
+            maxWidth: "400px",
+            marginLeft: "auto",
+            marginRight: "auto",
           }}
         >
-          {`${t("Days", {
-            postProcess: "interval",
-            count: 1, // NOTE: to indicate which day is in the account, you need to write the day as if in the singular
-          })} `}
-          {cycles.length === 1 ? (
-            currentDay
-          ) : (
-            <>
-              {currentDay}/{lengthOfCycle}
-            </>
-          )}
-        </p>
-        <ul>
+          <p
+            className="info-title"
+            style={{
+              fontWeight: "bold",
+              fontSize: "25px",
+              color: `var(--ion-color-dark-${theme})`,
+              marginBottom: "24px",
+            }}
+          >
+            {`${t("Days", {
+              postProcess: "interval",
+              count: 1, // NOTE: to indicate which day is in the account, you need to write the day as if in the singular
+            })} `}
+            {cycles.length === 1 ? (
+              currentDay
+            ) : (
+              <>
+                {currentDay}/{lengthOfCycle}
+              </>
+            )}
+          </p>
           <li
             style={{
               fontSize: "16px",
@@ -110,18 +119,17 @@ const InfoModal = (props: PropsInfoModal) => {
             </span>
             <span> {t("chance of getting pregnant")}</span>
           </li>
-        </ul>
-        <p
-          style={{
-            fontWeight: "bold",
-            fontSize: "25px",
-            color: `var(--ion-color-dark-${theme})`,
-            marginBottom: "24px",
-          }}
-        >
-          {t("Frequent symptoms")}
-        </p>
-        <ul>
+          <p
+            className="info-title"
+            style={{
+              fontWeight: "bold",
+              fontSize: "25px",
+              color: `var(--ion-color-dark-${theme})`,
+              marginBottom: "24px",
+            }}
+          >
+            {t("Frequent symptoms")}
+          </p>
           {phase.symptoms.map((item, idx) => (
             <li
               style={{
@@ -134,16 +142,16 @@ const InfoModal = (props: PropsInfoModal) => {
               {item}
             </li>
           ))}
-        </ul>
-        <IonCol>
-          <IonButton
-            className="main"
-            color={`dark-${theme}`}
-            onClick={() => props.setIsOpen(false)}
-          >
-            OK
-          </IonButton>
-        </IonCol>
+          <IonCol>
+            <IonButton
+              className="main"
+              color={`dark-${theme}`}
+              onClick={() => props.setIsOpen(false)}
+            >
+              OK
+            </IonButton>
+          </IonCol>
+        </div>
       </IonContent>
     </IonModal>
   );

From 4a4cf3e9254e7e6fca674911fdf44be516566d46 Mon Sep 17 00:00:00 2001
From: Irina Sorokina <irasoro402@yandex.ru>
Date: Thu, 11 Jul 2024 00:14:02 +0400
Subject: [PATCH 2/4] Removed dots in the list items

---
 src/modals/InfoModal.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/modals/InfoModal.tsx b/src/modals/InfoModal.tsx
index 7fed995..b0e352d 100644
--- a/src/modals/InfoModal.tsx
+++ b/src/modals/InfoModal.tsx
@@ -68,7 +68,7 @@ const InfoModal = (props: PropsInfoModal) => {
               </>
             )}
           </p>
-          <li
+          <p
             style={{
               fontSize: "16px",
               color: `var(--ion-color-text-${theme})`,
@@ -84,8 +84,8 @@ const InfoModal = (props: PropsInfoModal) => {
               {phase.title}
             </span>
             <span> {t("is current phase of cycle")}</span>
-          </li>
-          <li
+          </p>
+          <p
             style={{
               fontSize: "16px",
               color: `var(--ion-color-text-${theme})`,
@@ -101,8 +101,8 @@ const InfoModal = (props: PropsInfoModal) => {
             >
               {` ${ovulationStatus}`}
             </span>
-          </li>
-          <li
+          </p>
+          <p
             style={{
               fontSize: "16px",
               color: `var(--ion-color-text-${theme})`,
@@ -118,7 +118,7 @@ const InfoModal = (props: PropsInfoModal) => {
               {pregnancyChance}
             </span>
             <span> {t("chance of getting pregnant")}</span>
-          </li>
+          </p>
           <p
             className="info-title"
             style={{
@@ -131,7 +131,7 @@ const InfoModal = (props: PropsInfoModal) => {
             {t("Frequent symptoms")}
           </p>
           {phase.symptoms.map((item, idx) => (
-            <li
+            <p
               style={{
                 fontSize: "16px",
                 color: `var(--ion-color-text-${theme})`,
@@ -140,7 +140,7 @@ const InfoModal = (props: PropsInfoModal) => {
               key={idx}
             >
               {item}
-            </li>
+            </p>
           ))}
           <IonCol>
             <IonButton

From c06d598f2f881c61a6b94d1d0a913c3f40fce036 Mon Sep 17 00:00:00 2001
From: Irina Sorokina <irasoro402@yandex.ru>
Date: Thu, 11 Jul 2024 14:36:44 +0400
Subject: [PATCH 3/4] Added css file, move styles to css

---
 src/modals/InfoModal.css | 47 ++++++++++++++++++++++
 src/modals/InfoModal.tsx | 85 +++++-----------------------------------
 2 files changed, 57 insertions(+), 75 deletions(-)
 create mode 100644 src/modals/InfoModal.css

diff --git a/src/modals/InfoModal.css b/src/modals/InfoModal.css
new file mode 100644
index 0000000..534fceb
--- /dev/null
+++ b/src/modals/InfoModal.css
@@ -0,0 +1,47 @@
+div.info-screen {
+  max-width: 400px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* basic */
+p.info-title-basic {
+  font-weight: bold;
+  font-size: 25px;
+  margin-bottom: 24px;
+  color: var(--ion-color-dark-basic);
+
+  text-align: center;
+}
+
+p.info-item-basic {
+  font-size: 16px;
+  margin-bottom: 20px;
+  color: var(--ion-color-text-basic);
+}
+
+span.info-item-basic {
+  color: var(--ion-color-less-dark-basic);
+  font-weight: bold;
+}
+
+/* dark */
+p.info-title-dark {
+  font-weight: bold;
+  font-size: 25px;
+  margin-bottom: 24px;
+  color: var(--ion-color-dark-dark);
+
+  text-align: center;
+}
+
+p.info-item-dark {
+  font-size: 16px;
+  margin-bottom: 20px;
+  color: var(--ion-color-text-dark);
+}
+
+span.info-item-dark {
+  color: var(--ion-color-less-dark-dark);
+  font-weight: bold;
+}
diff --git a/src/modals/InfoModal.tsx b/src/modals/InfoModal.tsx
index b0e352d..e3acb65 100644
--- a/src/modals/InfoModal.tsx
+++ b/src/modals/InfoModal.tsx
@@ -40,22 +40,8 @@ const InfoModal = (props: PropsInfoModal) => {
         className="ion-padding"
         color={`transparent-${theme}`}
       >
-        <div
-          style={{
-            maxWidth: "400px",
-            marginLeft: "auto",
-            marginRight: "auto",
-          }}
-        >
-          <p
-            className="info-title"
-            style={{
-              fontWeight: "bold",
-              fontSize: "25px",
-              color: `var(--ion-color-dark-${theme})`,
-              marginBottom: "24px",
-            }}
-          >
+        <div className="info-screen">
+          <p className={`info-title-${theme}`}>
             {`${t("Days", {
               postProcess: "interval",
               count: 1, // NOTE: to indicate which day is in the account, you need to write the day as if in the singular
@@ -68,75 +54,24 @@ const InfoModal = (props: PropsInfoModal) => {
               </>
             )}
           </p>
-          <p
-            style={{
-              fontSize: "16px",
-              color: `var(--ion-color-text-${theme})`,
-              marginBottom: "20px",
-            }}
-          >
-            <span
-              style={{
-                color: `var(--ion-color-less-dark-${theme})`,
-                fontWeight: "bold",
-              }}
-            >
-              {phase.title}
-            </span>
+          <p className={`info-item-${theme}`}>
+            <span className={`info-item-${theme}`}>{phase.title}</span>
             <span> {t("is current phase of cycle")}</span>
           </p>
-          <p
-            style={{
-              fontSize: "16px",
-              color: `var(--ion-color-text-${theme})`,
-              marginBottom: "20px",
-            }}
-          >
+          <p className={`info-item-${theme}`}>
             <span>{t("Ovulation")}</span>
-            <span
-              style={{
-                color: `var(--ion-color-less-dark-${theme})`,
-                fontWeight: "bold",
-              }}
-            >
+            <span className={`info-item-${theme}`}>
               {` ${ovulationStatus}`}
             </span>
           </p>
-          <p
-            style={{
-              fontSize: "16px",
-              color: `var(--ion-color-text-${theme})`,
-              marginBottom: "20px",
-            }}
-          >
-            <span
-              style={{
-                color: `var(--ion-color-less-dark-${theme})`,
-                fontWeight: "bold",
-              }}
-            >
-              {pregnancyChance}
-            </span>
+          <p className={`info-item-${theme}`}>
+            <span className={`info-item-${theme}`}>{pregnancyChance}</span>
             <span> {t("chance of getting pregnant")}</span>
           </p>
-          <p
-            className="info-title"
-            style={{
-              fontWeight: "bold",
-              fontSize: "25px",
-              color: `var(--ion-color-dark-${theme})`,
-              marginBottom: "24px",
-            }}
-          >
-            {t("Frequent symptoms")}
-          </p>
+          <p className={`info-title-${theme}`}>{t("Frequent symptoms")}</p>
           {phase.symptoms.map((item, idx) => (
             <p
-              style={{
-                fontSize: "16px",
-                color: `var(--ion-color-text-${theme})`,
-                marginBottom: "20px",
-              }}
+              className={`info-item-${theme}`}
               key={idx}
             >
               {item}

From 79b057ba811eb0f1c57b40291e5c0290dd8ae9e7 Mon Sep 17 00:00:00 2001
From: Irina Sorokina <irasoro402@yandex.ru>
Date: Fri, 12 Jul 2024 14:36:38 +0400
Subject: [PATCH 4/4] Returned the dots and changed their color

---
 src/modals/InfoModal.css | 16 +++++++++-----
 src/modals/InfoModal.tsx | 48 ++++++++++++++++++++++------------------
 2 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/src/modals/InfoModal.css b/src/modals/InfoModal.css
index 534fceb..cd06de1 100644
--- a/src/modals/InfoModal.css
+++ b/src/modals/InfoModal.css
@@ -10,16 +10,18 @@ p.info-title-basic {
   font-size: 25px;
   margin-bottom: 24px;
   color: var(--ion-color-dark-basic);
-
-  text-align: center;
 }
 
-p.info-item-basic {
+li.info-item-basic {
   font-size: 16px;
   margin-bottom: 20px;
   color: var(--ion-color-text-basic);
 }
 
+li.info-item-basic::marker {
+  color: var(--ion-color-dark-basic);
+}
+
 span.info-item-basic {
   color: var(--ion-color-less-dark-basic);
   font-weight: bold;
@@ -31,16 +33,18 @@ p.info-title-dark {
   font-size: 25px;
   margin-bottom: 24px;
   color: var(--ion-color-dark-dark);
-
-  text-align: center;
 }
 
-p.info-item-dark {
+li.info-item-dark {
   font-size: 16px;
   margin-bottom: 20px;
   color: var(--ion-color-text-dark);
 }
 
+li.info-item-dark::marker {
+  color: var(--ion-color-dark-dark);
+}
+
 span.info-item-dark {
   color: var(--ion-color-less-dark-dark);
   font-weight: bold;
diff --git a/src/modals/InfoModal.tsx b/src/modals/InfoModal.tsx
index e3acb65..d0b4184 100644
--- a/src/modals/InfoModal.tsx
+++ b/src/modals/InfoModal.tsx
@@ -54,29 +54,33 @@ const InfoModal = (props: PropsInfoModal) => {
               </>
             )}
           </p>
-          <p className={`info-item-${theme}`}>
-            <span className={`info-item-${theme}`}>{phase.title}</span>
-            <span> {t("is current phase of cycle")}</span>
-          </p>
-          <p className={`info-item-${theme}`}>
-            <span>{t("Ovulation")}</span>
-            <span className={`info-item-${theme}`}>
-              {` ${ovulationStatus}`}
-            </span>
-          </p>
-          <p className={`info-item-${theme}`}>
-            <span className={`info-item-${theme}`}>{pregnancyChance}</span>
-            <span> {t("chance of getting pregnant")}</span>
-          </p>
+          <ul>
+            <li className={`info-item-${theme}`}>
+              <span className={`info-item-${theme}`}>{phase.title}</span>
+              <span> {t("is current phase of cycle")}</span>
+            </li>
+            <li className={`info-item-${theme}`}>
+              <span>{t("Ovulation")}</span>
+              <span className={`info-item-${theme}`}>
+                {` ${ovulationStatus}`}
+              </span>
+            </li>
+            <li className={`info-item-${theme}`}>
+              <span className={`info-item-${theme}`}>{pregnancyChance}</span>
+              <span> {t("chance of getting pregnant")}</span>
+            </li>
+          </ul>
           <p className={`info-title-${theme}`}>{t("Frequent symptoms")}</p>
-          {phase.symptoms.map((item, idx) => (
-            <p
-              className={`info-item-${theme}`}
-              key={idx}
-            >
-              {item}
-            </p>
-          ))}
+          <ul>
+            {phase.symptoms.map((item, idx) => (
+              <li
+                className={`info-item-${theme}`}
+                key={idx}
+              >
+                {item}
+              </li>
+            ))}
+          </ul>
           <IonCol>
             <IonButton
               className="main"