diff --git a/assets/images/graphql.svg b/assets/images/graphql.svg new file mode 100644 index 000000000..096b58f84 --- /dev/null +++ b/assets/images/graphql.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index 9e86d5f47..9e3bbca9d 100644 --- a/locale/defaultMessages.json +++ b/locale/defaultMessages.json @@ -244,9 +244,6 @@ "context": "collection name", "string": "Name" }, - "/X8Mjx": { - "string": "Play with GraphQL API" - }, "/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 DEMO STOREFRONT" - }, "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" }, diff --git a/src/components/DemoBanner/DemoBanner.tsx b/src/components/DemoBanner/DemoBanner.tsx index 32c28ccfe..b530963c3 100644 --- a/src/components/DemoBanner/DemoBanner.tsx +++ b/src/components/DemoBanner/DemoBanner.tsx @@ -1,71 +1,60 @@ import ExternalLink from "@dashboard/components/ExternalLink"; -import { useTheme } from "@material-ui/core/styles"; -import useMediaQuery from "@material-ui/core/useMediaQuery"; -import React from "react"; -import GitHubButton from "react-github-btn"; +import { OrdersIcon } from "@saleor/macaw-ui/next"; +import React, { useState } from "react"; +import SVG from "react-inlinesvg"; 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 ( -
-
-
-
- - {isMdUp ? ( - ( - {children} - ), - }} - /> - ) : ( -
- -
- )} - - {isMdUp &&
} - - {isMdUp ? ( - ( - {children} - ), - }} - /> - ) : ( -
- -
- )} - + const [isHidden, setIsHidden] = useState(false); -
- - Star us on GitHub - + return ( +
setIsHidden(false)} + onTouchEnd={() => setIsHidden(false)} + > +
+

Demo mode

+ setIsHidden(true)}> + Hide + +
+
+ +
+
-
+ + + + + + + + + + + +
); diff --git a/src/components/DemoBanner/styles.ts b/src/components/DemoBanner/styles.ts index dc5b02f52..c88dd7ea7 100644 --- a/src/components/DemoBanner/styles.ts +++ b/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: { - lineHeight: 0, - }, - linkList: { - display: "flex", - alignItems: "center", + close: { + cursor: "pointer", }, 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: { - color: emphasisedTextBlue, - textTransform: "uppercase", - fontWeight: 600, - fontStyle: "normal", - paddingLeft: "5px", - }, - divider: { - borderRight: `1px solid ${greyDark}`, - height: theme.spacing(2), - }, - githubStarButton: { - lineHeight: 0, - marginLeft: "15px", + icon: { + width: `20px`, + height: `20px`, + marginRight: theme.spacing(1), }, }), {