[FIX] Issue #122 - Responsive UI

src/App.js

@@ -9,10 +9,10 @@ import { GlobalStyles } from "./components/globalStyles";
 
 import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
 
-import Home from "./components/Home/Home";
 import Header from "./components/Header/Header";
 import About from "./components/About/About";
 import Intro from "./components/Intro/Intro";
+import { HomePage } from "./pages";
 
 const App = () => {
   const [theme, toggleTheme] = useDarkMode();
@@ -36,7 +36,7 @@ const App = () => {
                   <Intro />
                 </Route>
                 <Route path="/vaccines" exact={true}>
-                  <Home />
+                  <HomePage />
                 </Route>
                 <Route path="/about" exact={true}>
                   <About />

src/components/Badge/index.js

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { makeStyles } from "@material-ui/core";
+
+const useClasses = makeStyles({
+  root: {
+    textTransform: "uppercase",
+    margin: 0,
+    fontWeight: "bold",
+    color: "white",
+    boxShadow: `inset 0 0 35px 5px rgba(0, 0, 0, 0.25),
+    inset 0 2px 1px 1px rgba(255, 255, 255, 0.9),
+    inset 0 -2px 1px 0 rgba(0, 0, 0, 0.25)`,
+    fontFamily: "monospace",
+    backgroundColor: "#fff",
+    border: "1px solid",
+    padding: "10px",
+    borderRadius: "7px",
+    textAlign: "center",
+  },
+  rootMinimal: {
+    height: "100%",
+    width: "100%",
+    padding: "10px",
+    borderRadius: "7px",
+    fontWeight: "bold",
+    backgroundColor: "white",
+    color: "black",
+    border: "1px solid",
+    boxShadow: "inset 2px 0px 10px 2px white, inset 0px 0px 4px 0px black",
+    fontFamily: '"Raleway", sans-serif',
+    cursor: "pointer",
+    "&:hover": {
+      color: "#002060",
+    },
+  },
+});
+
+export const Badge = ({ children, background, variant, ...rest }) => {
+  const classes = useClasses();
+
+  return (
+    <span
+      className={
+        variant && variant === "minimal" ? classes.rootMinimal : classes.root
+      }
+      style={{ backgroundColor: background || "white" }}
+      {...rest}
+    >
+      {children}
+    </span>
+  );
+};