Demo banner (#3306)

* Redesign demo banner

* Update messages

* Added hover and active states

assets/images/graphql.svg

@@ -0,0 +1,17 @@
+<svg width="350" height="392" viewBox="0 0 350 392" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.092 290.36L32.4676 298.66L192.618 21.2802L178.242 12.9802L18.092 290.36Z" fill="white"/>
+<path d="M335.1 268.2H14.8V284.8H335.1V268.2Z" fill="white"/>
+<path d="M21.1379 277.526L181.348 370.026L189.648 355.65L29.4379 263.15L21.1379 277.526Z" fill="white"/>
+<path d="M160.312 36.4467L320.522 128.947L328.822 114.571L168.612 22.0711L160.312 36.4467Z" fill="white"/>
+<path d="M21.1823 114.508L29.4823 128.883L189.692 36.3835L181.392 22.0079L21.1823 114.508Z" fill="white"/>
+<path d="M157.418 21.2832L317.568 298.663L331.944 290.363L171.794 12.9832L157.418 21.2832Z" fill="white"/>
+<path d="M44.1 103.5H27.5V288.5H44.1V103.5Z" fill="white"/>
+<path d="M322.5 103.5H305.9V288.5H322.5V103.5Z" fill="white"/>
+<path d="M171.272 350.442L178.522 362.999L317.861 282.549L310.611 269.992L171.272 350.442Z" fill="white"/>
+<path d="M344.5 293.9C334.9 310.6 313.5 316.3 296.8 306.7C280.1 297.1 274.4 275.7 284 259C293.6 242.3 315 236.6 331.7 246.2C348.5 255.9 354.2 277.2 344.5 293.9Z" fill="white"/>
+<path d="M65.9 133C56.3 149.7 34.9 155.4 18.2 145.8C1.5 136.2 -4.2 114.8 5.4 98.1C15 81.4 36.4 75.7 53.1 85.3C69.8 95 75.5 116.3 65.9 133Z" fill="white"/>
+<path d="M5.5 293.9C-4.1 277.2 1.6 255.9 18.3 246.2C35 236.6 56.3 242.3 66 259C75.6 275.7 69.9 297 53.2 306.7C36.4 316.3 15.1 310.6 5.5 293.9Z" fill="white"/>
+<path d="M284.1 133C274.5 116.3 280.2 95 296.9 85.3C313.6 75.7 334.9 81.4 344.6 98.1C354.2 114.8 348.5 136.1 331.8 145.8C315.1 155.4 293.7 149.7 284.1 133Z" fill="white"/>
+<path d="M175 391.8C155.7 391.8 140.1 376.2 140.1 356.9C140.1 337.6 155.7 322 175 322C194.3 322 209.9 337.6 209.9 356.9C209.9 376.1 194.3 391.8 175 391.8Z" fill="white"/>
+<path d="M175 70C155.7 70 140.1 54.4 140.1 35.1C140.1 15.8 155.7 0.200012 175 0.200012C194.3 0.200012 209.9 15.8 209.9 35.1C209.9 54.4 194.3 70 175 70Z" fill="white"/>
+</svg>

locale/defaultMessages.json

@@ -244,9 +244,6 @@
     "context": "collection name",
     "string": "Name"
   },
-  "/X8Mjx": {
-    "string": "Play with <emphasis>GraphQL API</emphasis>"
-  },
   "/Xwjww": {
     "context": "button",
     "string": "Fulfill"
@@ -375,6 +372,9 @@
     "context": "checkbox label",
     "string": "Send shipment details to customer"
   },
+  "0VkxrS": {
+    "string": "GraphQL Playground"
+  },
   "0Vyr8h": {
     "context": "menu item name",
     "string": "Name"
@@ -939,9 +939,6 @@
     "context": "navigator section header",
     "string": "Search in Customers"
   },
-  "4gZl/n": {
-    "string": "See <emphasis>DEMO STOREFRONT</emphasis>"
-  },
   "4hl9rS": {
     "context": "variant price in channel",
     "string": "Price"
@@ -8025,6 +8022,9 @@
     "context": "gift card history message",
     "string": "Gift card expiry date was updated by {expiryUpdatedBy}"
   },
+  "vSy+II": {
+    "string": "Star on Github"
+  },
   "vTN5DZ": {
     "context": "button",
     "string": "Discard"
@@ -8337,9 +8337,6 @@
     "context": "export all items to csv file",
     "string": "All products ({number})"
   },
-  "xwEc8K": {
-    "string": "API"
-  },
   "xxQxLE": {
     "string": "Email Address"
   },

src/components/DemoBanner/DemoBanner.tsx

@@ -1,71 +1,60 @@
 import ExternalLink from "@dashboard/components/ExternalLink";
-import { useTheme } from "@material-ui/core/styles";
+import { OrdersIcon } from "@saleor/macaw-ui/next";
-import useMediaQuery from "@material-ui/core/useMediaQuery";
+import React, { useState } from "react";
-import React from "react";
+import SVG from "react-inlinesvg";
-import GitHubButton from "react-github-btn";
 import { FormattedMessage } from "react-intl";
 
+import githubLogo from "../../../assets/images/github-logo.svg";
+import graphQl from "../../../assets/images/graphql.svg";
 import { SALEOR_GRAPHQL_URL, SALEOR_STOREFRONT_URL } from "./constants";
 import styles from "./styles";
 
 export const DemoBanner: React.FC = () => {
-  const theme = useTheme();
-  const isMdUp = useMediaQuery(theme.breakpoints.up("md"));
   const classes = styles();
 
-  return (
+  const [isHidden, setIsHidden] = useState(false);
-    <div className={classes.wrapper}>
-      <div className={classes.borderedWrapper}>
-        <div />
-        <div className={classes.linkList}>
-          <ExternalLink className={classes.link} href={SALEOR_STOREFRONT_URL}>
-            {isMdUp ? (
-              <FormattedMessage
-                id="4gZl/n"
-                defaultMessage="See <emphasis>DEMO STOREFRONT</emphasis>"
-                values={{
-                  emphasis: (children: any) => (
-                    <em className={classes.textEmphasis}>{children}</em>
-                  ),
-                }}
-              />
-            ) : (
-              <div className={classes.textEmphasis}>
-                <FormattedMessage id="LmKz3g" defaultMessage="Storefront" />
-              </div>
-            )}
-          </ExternalLink>
-          {isMdUp && <div className={classes.divider} />}
-          <ExternalLink className={classes.link} href={SALEOR_GRAPHQL_URL}>
-            {isMdUp ? (
-              <FormattedMessage
-                id="/X8Mjx"
-                defaultMessage="Play with <emphasis>GraphQL API</emphasis>"
-                values={{
-                  emphasis: (children: any) => (
-                    <em className={classes.textEmphasis}>{children}</em>
-                  ),
-                }}
-              />
-            ) : (
-              <div className={classes.textEmphasis}>
-                <FormattedMessage id="xwEc8K" defaultMessage="API" />
-              </div>
-            )}
-          </ExternalLink>
 
-          <div className={classes.githubStarButton}>
+  return (
-            <GitHubButton
+    <div
-              href="https://github.com/saleor/saleor"
+      className={`${classes.wrapper} ${isHidden ? classes.hidden : ``}`}
-              data-icon="octicon-star"
+      onMouseEnter={() => setIsHidden(false)}
-              data-show-count="true"
+      onTouchEnd={() => setIsHidden(false)}
-              data-size="large"
+    >
-              aria-label="Star saleor/saleor on GitHub"
+      <div className={classes.header}>
-            >
+        <p>Demo mode</p>
-              Star us on GitHub
+        <span className={classes.close} onClick={() => setIsHidden(true)}>
-            </GitHubButton>
+          Hide
+        </span>
+      </div>
+      <div>
+        <ExternalLink
+          className={classes.link}
+          target={"_blank"}
+          href={SALEOR_STOREFRONT_URL}
+        >
+          <div className={classes.icon}>
+            <OrdersIcon />
           </div>
-        </div>
+          <FormattedMessage id="LmKz3g" defaultMessage="Storefront" />
+        </ExternalLink>
+
+        <ExternalLink
+          className={classes.link}
+          target={"_blank"}
+          href={SALEOR_GRAPHQL_URL}
+        >
+          <SVG src={graphQl} className={classes.icon} />
+          <FormattedMessage id="0VkxrS" defaultMessage="GraphQL Playground" />
+        </ExternalLink>
+
+        <ExternalLink
+          target={"_blank"}
+          className={classes.link}
+          href={"https://github.com/saleor/saleor"}
+        >
+          <SVG src={githubLogo} className={classes.icon} />
+          <FormattedMessage id="vSy+II" defaultMessage="Star on Github" />
+        </ExternalLink>
       </div>
     </div>
   );

src/components/DemoBanner/styles.ts

@@ -1,54 +1,52 @@
 import { makeStyles } from "@saleor/macaw-ui";
 
-import { emphasisedTextBlue, greyDark, textColor } from "./constants";
-
 const useStyles = makeStyles(
   theme => ({
     wrapper: {
-      width: "100%",
-      backgroundColor: "inherit",
       padding: `0 13px`,
       fontSize: theme.spacing(1.5),
+      position: "fixed",
+      zIndex: 100,
+      width: "240px",
+      bottom: theme.spacing(2),
+      backgroundColor: `#111111`,
+      color: `rgba(255,255,255,.8)`,
+      borderRadius: `9px`,
+      boxShadow: `0 2px 8px 1px rgba(0,0,0,.3)`,
+      right: theme.spacing(2),
+      transition: "right 0.3s cubic-bezier(.4,0,.2,1)",
     },
-    borderedWrapper: {
+    hidden: {
+      right: "-220px",
+    },
+    header: {
       display: "flex",
-      flexDirection: "row",
+      alignItems: "center",
       justifyContent: "space-between",
-      alignItems: "center",
-      maxHeight: theme.spacing(7.5),
-      flex: "0 0 auto",
-      padding: theme.spacing(3, 0),
-      backgroundImage: `linear-gradient(to right,  ${greyDark} 13%, rgba(255, 255, 255, 0) 0%)`,
-      backgroundPosition: "bottom",
-      backgroundSize: theme.spacing(1.5, 0.125),
-      backgroundRepeat: "repeat-x",
     },
-    logoWrapper: {
+    close: {
-      lineHeight: 0,
+      cursor: "pointer",
-    },
-    linkList: {
-      display: "flex",
-      alignItems: "center",
     },
     link: {
+      "&:hover": {
+        backgroundColor: `rgba(255,255,255,.1)`,
+      },
+      "&:active": {
+        backgroundColor: `rgba(255,255,255,.2)`,
+      },
+      backgroundColor: `rgba(255,255,255,.08)`,
+      borderRadius: `4px`,
       display: "flex",
       padding: theme.spacing(2),
-      color: textColor,
+      marginBottom: theme.spacing(2),
+      fontWeight: 700,
+      color: `white`,
+      boxShadow: `0 1px 1px 1px rgba(0,0,0, 100%), 0 1px 0px rgba(255,255,255,.1) inset`,
     },
-    textEmphasis: {
+    icon: {
-      color: emphasisedTextBlue,
+      width: `20px`,
-      textTransform: "uppercase",
+      height: `20px`,
-      fontWeight: 600,
+      marginRight: theme.spacing(1),
-      fontStyle: "normal",
-      paddingLeft: "5px",
-    },
-    divider: {
-      borderRight: `1px solid  ${greyDark}`,
-      height: theme.spacing(2),
-    },
-    githubStarButton: {
-      lineHeight: 0,
-      marginLeft: "15px",
     },
   }),
   {