From 30e4a4c73fee292b1be0a3bd06f4eb72ca368901 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Sun, 26 Apr 2020 12:39:56 +1000
Subject: [PATCH] Added name display to tile

---
 src/components/map/MapTile.js | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/map/MapTile.js b/src/components/map/MapTile.js
index 4ef6b41..ca243a6 100644
--- a/src/components/map/MapTile.js
+++ b/src/components/map/MapTile.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Flex, Image as UIImage, IconButton, Box } from "theme-ui";
+import { Flex, Image as UIImage, IconButton, Box, Text } from "theme-ui";
 
 import db from "../../database";
 
@@ -126,6 +126,24 @@ function MapTile({
         sx={{ width: "100%", height: "100%", objectFit: "contain" }}
         src={mapSource}
       />
+      <Flex
+        sx={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          background:
+            "linear-gradient(to bottom, rgba(0,0,0,0) 70%,rgba(0,0,0,0.65) 100%);",
+          alignItems: "flex-end",
+          justifyContent: "center",
+        }}
+        p={2}
+      >
+        <Text as="p" variant="heading">
+          {map.name}
+        </Text>
+      </Flex>
       {/* Show expand button only if both reset and remove is available */}
       {isSelected && (
         <Box sx={{ position: "absolute", top: 0, right: 0 }}>