Changeset 79a0317 for imaps-frontend/src/pages/MyMaps/CreateMaps.module.css

Timestamp:

01/21/25 03:08:24 (3 days ago)

Author:

stefan toskovski <stefantoska84@…>

Branches:

main

Parents:

0c6b92a

Message:

F4 Finalna Verzija

File:

• imaps-frontend/src/pages/MyMaps/CreateMaps.module.css (modified) (3 diffs)

imaps-frontend/src/pages/MyMaps/CreateMaps.module.css

@@ -55 +55 @@
   margin-bottom: 30px;
   text-align: center;
+  margin-top: 5em;
+
 }
 
 .searchBar input {
-  width: 300px;
+  /*width: 300px;*/
+  width: 33vw;
   padding: 10px;
   font-size: 16px;
@@ -83 +86 @@
   display: flex;
   flex-direction: column;
-  align-items: center; /* Center items horizontally */
-  justify-content: flex-start; /* Ensure tiles stack from the top */
+  align-items: center;
+  justify-content: flex-start;
   padding: 10px;
+  /*padding-left: 2.5em;*/
   background-color: #f9f9f9;
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-}
+
+}
+
 
 .tile {
@@ -127 +133 @@
 }
 
+.plusButton {
+  width: 50px;
+  height: 50px;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.3s ease-in-out;
+  background: #4ebc3b;
+  margin-right: 20px;
+}
+
+.plusButton img {
+  width: 50px;
+  height: auto;
+  margin-left: 0;
+}
+
+.plusButton:hover {
+  transform: scale(1.1);
+  background: #46be2f;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #f8f9fa; /* Light grey background for a clean look */
+  border-bottom: 1px solid #ddd; /* Subtle separation from the rest of the page */
+  padding: 10px 20px; /* Add some space around the content */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Light shadow for subtle elevation */
+}
+
+.header .logo-wrapper,
+.header .profile-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.header h1 {
+  font-size: 1.5rem; /* Slightly larger font size */
+  color: #333; /* Dark grey for a professional tone */
+  margin: 0 auto; /* Center-align the title */
+  font-weight: 600; /* Semi-bold text for emphasis */
+  text-align: center;
+  flex-grow: 1; /* Allow it to take space in the middle */
+}
+
+.logo-wrapper {
+  margin-right: auto; /* Push logo to the far left */
+}
+
+.profile-wrapper {
+  margin-left: auto; /* Push profile to the far right */
+}
+
+
+
+
 @media (max-width: 768px) {
   .mapsContainer {