feat: unlock full version button && prettier add

Author: michaeldaineka

package.json

@@ -41,5 +41,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier": "^1.19.1"
   }
 }

src/components/Header/Header.js

@@ -7,6 +7,7 @@ import {
   Menu,
   MenuItem,
   Fab,
+  Link
 } from "@material-ui/core";
 import {
   Menu as MenuIcon,
@@ -23,7 +24,7 @@ import classNames from "classnames";
 import useStyles from "./styles";
 
 // components
-import { Badge, Typography } from "../Wrappers/Wrappers";
+import { Badge, Typography, Button } from "../Wrappers/Wrappers";
 import Notification from "../Notification/Notification";
 import UserAvatar from "../UserAvatar/UserAvatar";
 
@@ -139,6 +140,7 @@ export default function Header(props) {
           React Material Admin
         </Typography>
         <div className={classes.grow} />
+        <Button component={Link} href="https://flatlogic.com/templates/react-material-admin-full" variant={"outlined"} color={"secondary"} style={{marginRight: 24}}>Unlock full version</Button>
         <div
           className={classNames(classes.search, {
             [classes.searchFocused]: isSearchOpen,

src/components/Wrappers/Wrappers.js

@@ -66,25 +66,52 @@ function Typography({
   );
 }
 
-function Button({ children, color, ...props }) {
+function Button({ children, color, className, ...props }) {
   var theme = useTheme();
 
   var Styled = createStyled({
-    button: {
+    root: {
+      color: getColor(color, theme),
+    },
+    contained: {
       backgroundColor: getColor(color, theme),
       boxShadow: theme.customShadows.widget,
-      color: "white",
+      color: `${color ? "white" : theme.palette.text.primary} !important`,
       "&:hover": {
         backgroundColor: getColor(color, theme, "light"),
         boxShadow: theme.customShadows.widgetWide,
       },
+      "&:active": {
+        boxShadow: theme.customShadows.widgetWide,
+      },
+    },
+    outlined: {
+      color: getColor(color, theme),
+      borderColor: getColor(color, theme),
+    },
+    select: {
+      backgroundColor: theme.palette.primary.main,
+      color: "#fff",
     },
   });
 
   return (
     <Styled>
       {({ classes }) => (
-        <ButtonBase classes={{ root: classes.button }} {...props}>
+        <ButtonBase
+          classes={{
+            contained: classes.contained,
+            root: classes.root,
+            outlined: classes.outlined,
+          }}
+          {...props}
+          className={classnames(
+            {
+              [classes.select]: props.select,
+            },
+            className,
+          )}
+        >
           {children}
         </ButtonBase>
       )}

yarn.lock

@@ -7181,6 +7181,11 @@ prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
 
+prettier@^1.19.1:
+  version "1.19.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
+  integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
+
 pretty-bytes@^5.1.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.3.0.tgz#f2849e27db79fb4d6cfe24764fc4134f165989f2"