MAPG-119 'add new map' button and some desing improvements on maps page

public/static/css/mapguesser.css

@@ -146,6 +146,16 @@ button.fullWidth, a.button.fullWidth {
     width: 100%;
 }
 
+button.noLeftRadius, a.button.noLeftRadius {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+button.noRightRadius, a.button.noRightRadius {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
 button.gray, a.button.gray {
     background-color: #808080;
 }
@@ -170,6 +180,14 @@ button.yellow:hover, button.yellow:focus, a.button.yellow:hover, a.button.yellow
     background-color: #c37713;
 }
 
+button.green, a.button.green {
+    background-color: #28a745;
+}
+
+button.green:hover, button.green:focus, a.button.green:hover, a.button.green:focus {
+    background-color: #1b7d31;
+}
+
 input, select, textarea {
     background-color: #f9fafb;
     border: solid #c8d2e1 1px;
@@ -291,7 +309,7 @@ div.box {
     div.header.small h1 span {
         display: none;
     }
-    button {
+    button, a.button {
         padding: 0;
         width: 100%;
     }

public/static/css/maps.css

@@ -4,11 +4,15 @@
 
 div.mapItem {
     width: 350px;
-    background-color: #eeeeee;
-    border-radius: 3px;
     margin: 10px auto;
 }
 
+div.mapItem.new {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 div.mapItem>div.title {
     background-color: #28a745;
     color: white;
@@ -27,6 +31,7 @@ div.mapItem>img {
 }
 
 div.mapItem>div.inner {
+    background-color: #eeeeee;
     padding: 10px 8px;
 }
 
@@ -43,6 +48,12 @@ div.mapItem>div.inner>div.info>p:nth-child(2) {
     text-align: right;
 }
 
+div.mapItem>div.buttonContainer {
+    display: grid;
+    grid-auto-columns: 1fr;
+    grid-auto-flow: column;
+}
+
 @media screen and (min-width: 1504px) {
     #mapContainer {
         grid-template-columns: auto auto auto auto;
@@ -69,6 +80,6 @@ div.mapItem>div.inner>div.info>p:nth-child(2) {
 
 @media screen and (max-width: 374px) {
     div.mapItem {
-        width: initial;
+        width: 100%;
     }
 }