fix: 🐛 Calendar's label is mis-aligned

✅ Closes: #147
niner-games · May 6, 2024 · 62f71cb · 62f71cb
1 parent 6814ca9
commit 62f71cb
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 - Bug #178: Fix for player to be able to move in mobile version (MadejaMaciej)
 - Bug #177: Fix for menu and other parts not visible in mobile version (MadejaMaciej)
+- Bug #147: Fix for calendar's label is mis-aligned (MadejaMaciej)
 - Bug #99: Buttons and clock's dial mis-aligned (MadejaMaciej)
 - Bug #86: Fix status bar image (MadejaMaciej)
 

diff --git a/src/components/ui/DayBoard.tsx b/src/components/ui/DayBoard.tsx
@@ -2,19 +2,8 @@ import React from "react";
 
 function DayBoard() {
   return (
-    <div
-      style={{
-        background: "#503000",
-      }}
-    >
-      <h3
-        style={{
-          textAlign: "center",
-          margin: 0,
-        }}
-      >
-        MONDAY
-      </h3>
+    <div className="day-board">
+      <h3 className="day-board-text">MONDAY</h3>
     </div>
   );
 }

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -122,3 +122,30 @@ body:focus {
 .trademark {
   color: hsl(0deg 0% 5.49%);
 }
+
+.day-board {
+  background: #503000;
+  padding: 0px 10px;
+  min-width: 13vw;
+  box-shadow: #000 4px 4px;
+}
+
+.day-board-text {
+  text-align: center;
+  margin: 0;
+  font-size: 18px;
+  line-height: 28px;
+  color: #fff;
+}
+
+@media screen and (max-width: 900px) and (max-height: 600px) {
+  .day-board {
+    padding: 0px 5px;
+    box-shadow: #000 2px 2px;
+  }
+
+  .day-board-text {
+    font-size: 14px;
+    line-height: 22px;
+  }
+}