Merge pull request #22 from RickV85/fix_forecast_centering

Fix forecast centering
RickV85 · Apr 18, 2024 · 6619e70 · 6619e70
2 parents 0ef03e6 + 2adee35
commit 6619e70
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 25 deletions.
diff --git a/src/app/Components/DetailedDayForecast/DetailedDayForecast.tsx b/src/app/Components/DetailedDayForecast/DetailedDayForecast.tsx
@@ -33,25 +33,29 @@ const DetailedDayForecast: React.FC<Props> = ({ period }) => {
       >
         <div className="day-forecast-header">
           {/* Using img here, had issues with loading using Image component */}
-          <div className="day-forecast-icon-div">
-            {/* eslint-disable-next-line */}
-            <img
-              src={period.icon}
-              height={60}
-              width={60}
-              alt="weather icon"
-              loading="lazy"
-              className="day-forecast-icon"
-            />
-          </div>
-          <h2 className="day-header-text">{period.name}</h2>
-          <div className="day-send-score-div">
-            {sendScoreData?.sendScore && (
-              <>
-                <p>SendScore:</p>
-                <p id="sendScore">{sendScoreData.sendScore}</p>
-              </>
-            )}
+          <div className="day-forecast-header layer1">
+            <div className="day-forecast-icon-div">
+              {/* eslint-disable-next-line */}
+              <img
+                src={period.icon}
+                height={60}
+                width={60}
+                alt="weather icon"
+                loading="lazy"
+                className="day-forecast-icon"
+              />
+            </div>
+            <div className="day-forecast-header layer2">
+              <h2 className="day-header-text">{period.name}</h2>
+            </div>
+            <div className="day-send-score-div">
+              {sendScoreData?.sendScore && (
+                <>
+                  <p>SendScore:</p>
+                  <p id="sendScore">{sendScoreData.sendScore}</p>
+                </>
+              )}
+            </div>
           </div>
         </div>
         <p className="day-forecast-text">{`${

diff --git a/src/app/home.css b/src/app/home.css
@@ -284,10 +284,25 @@ select {
 }
 
 .day-forecast-header {
+  text-align: center;
+  margin-bottom: 0.5rem;
+}
+
+.day-forecast-header.layer1 {
+  width: 100%;
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  margin-bottom: 0.5rem;
+  align-items: center;
+  position: relative;
+  z-index: 0;
+}
+
+.day-forecast-header.layer2 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
 }
 
 .day-forecast-icon-div {
@@ -313,14 +328,14 @@ select {
   min-width: 67px;
   font-family: var(--font-fugazOne);
   font-weight: 400;
-  font-size: 1rem;
+  font-size: 0.8rem;
   position: relative;
   text-align: right;
 }
 
 #sendScore {
   color: #ef8354;
-  font-size: 1.25rem;
+  font-size: 1.125rem;
   font-weight: 500;
 }
 
@@ -516,11 +531,11 @@ select {
 
   .day-send-score-div {
     min-width: 5.542rem;
-    font-size: 1.2rem;
+    font-size: 1rem;
   }
 
   #sendScore {
-    font-size: 1.45rem;
+    font-size: 1.25rem;
   }
 
   .hourly-forecast-container {