Refactored component folder structure to be a little clearer

2020-04-23 10:09:12 +10:00
parent 65c3620732
commit f2a92f2ccd
19 changed files with 42 additions and 42 deletions
--- a/src/components/token/TokenLabel.js
+++ b/src/components/token/TokenLabel.js
@@ -0,0 +1,51 @@
+import React from "react";
+import { Image, Box, Text } from "theme-ui";
+
+import tokenLabel from "../../images/TokenLabel.png";
+
+function TokenLabel({ label }) {
+  return (
+    <Box
+      sx={{
+        position: "absolute",
+        transform: "scale(0.3) translate(0, 20%)",
+        transformOrigin: "bottom center",
+        pointerEvents: "none",
+        width: "100%",
+        display: "flex", // Set display to flex to fix height being calculated wrong
+        flexDirection: "column",
+      }}
+    >
+      <Image sx={{ width: "100%" }} src={tokenLabel} />
+      <svg
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+        }}
+        viewBox="0 0 100 100"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <foreignObject width="100%" height="100%">
+          <Text
+            as="p"
+            variant="heading"
+            sx={{
+              // This value is actually 66%
+              fontSize: "66px",
+              width: "100px",
+              height: "100px",
+              textAlign: "center",
+              verticalAlign: "middle",
+              lineHeight: 1.4,
+            }}
+          >
+            {label}
+          </Text>
+        </foreignObject>
+      </svg>
+    </Box>
+  );
+}
+
+export default TokenLabel;