unified css

src/components/EventPreview/index.module.scss

@@ -8,11 +8,9 @@
 .item {
     border: 1px solid black;
     border-radius: 15px;
-    width: 70vw;
-    max-width: 500px;
-    height: 10vh;
     margin: 3px auto;
     padding: 10px 25px;
+    height: 120px;
 }
 
 .location {

src/components/Map/MapControls.scss

@@ -3,6 +3,7 @@
 .ol-zoom-in,
 .ol-zoom-out {
     padding: 3px;
+    padding-top: 0;
     margin: 2px;
     background: $bggray;
     border: none;
@@ -10,6 +11,11 @@
     font-size: 1.2rem;
     width: 2rem;
     height: 2rem;
+    transition: background-color 0.3s ease;
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
+    &:hover {
+        background-color: $bghover;
+    }
 }
 
 .ol-rotate {

src/index.scss

@@ -1,10 +1,17 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
+
 $accent: #53d188;
 $bggray: #e8e8e8;
+$bghover: darken($bggray, 10);
 $bg: #ffffff;
-
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
+$defaultWidth: 70vw;
+$maxWidth: 700px;
 
 * {
     margin: 0;
     padding: 0;
 }
+
+body {
+    font-family: "Poppins", sans-serif;
+}

src/pages/CreateEvent/index.module.scss

@@ -6,7 +6,8 @@
 }
 
 .formContainer {
-    max-width: 70%;
+    width: $defaultWidth;
+    max-width: $maxWidth;
     margin: auto;
 }
 

src/pages/Home/index.module.scss

@@ -1,6 +1,8 @@
+@import "../../index.scss";
+
 .con {
-    width: 70vw;
-    max-width: 500px;
+    width: $defaultWidth;
+    max-width: $maxWidth;
     margin: 0 auto;
     font-family: "Poppins", sans-serif;
 }