From 622f20d5b12ab4ffcf2e733f054c6cfe71d0300f Mon Sep 17 00:00:00 2001
From: Irina Sorokina <irasoro402@yandex.ru>
Date: Mon, 8 Jul 2024 00:36:31 +0400
Subject: [PATCH] Fixed the design when there is no history of period

---
 src/pages/TabDetails.css | 5 +++++
 src/pages/TabDetails.tsx | 8 +++-----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/pages/TabDetails.css b/src/pages/TabDetails.css
index 81752c7..14b8a79 100644
--- a/src/pages/TabDetails.css
+++ b/src/pages/TabDetails.css
@@ -38,6 +38,11 @@ p.p_style {
   margin-top: 5px;
 }
 
+p.no-periods {
+  font-size: 13px;
+  text-align: center;
+}
+
 #vertical-line-basic {
   width: 2px;
   height: 70px;
diff --git a/src/pages/TabDetails.tsx b/src/pages/TabDetails.tsx
index 8bf0788..bd6519a 100644
--- a/src/pages/TabDetails.tsx
+++ b/src/pages/TabDetails.tsx
@@ -254,11 +254,9 @@ const TabDetails = () => {
                   {cycles.length > 1 && <ListProgress />}
                 </IonList>
               ) : (
-                <div id="progress-block">
-                  <p style={{ fontSize: "13px" }}>
-                    {t("You haven't marked any periods yet")}
-                  </p>
-                </div>
+                <p className="no-periods">
+                  {t("You haven't marked any periods yet")}
+                </p>
               )}
             </div>
           </div>