Demo banner (#3306)
* Redesign demo banner * Update messages * Added hover and active states
This commit is contained in:
Timur Carpeev
GitHub
parent
cdd733423b
commit
b31e4522a1
4 changed files with 102 additions and 101 deletions
17
assets/images/graphql.svg
Normal file
17
assets/images/graphql.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
||||
const [isHidden, setIsHidden] = useState(false);
|
||||
|
||||
return (
|
||||
<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}>
|
||||
<div
|
||||
className={`${classes.wrapper} ${isHidden ? classes.hidden : ``}`}
|
||||
onMouseEnter={() => setIsHidden(false)}
|
||||
onTouchEnd={() => setIsHidden(false)}
|
||||
>
|
||||
<div className={classes.header}>
|
||||
<p>Demo mode</p>
|
||||
<span className={classes.close} onClick={() => setIsHidden(true)}>
|
||||
Hide
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<ExternalLink
|
||||
className={classes.link}
|
||||
target={"_blank"}
|
||||
href={SALEOR_STOREFRONT_URL}
|
||||
>
|
||||
<div className={classes.icon}>
|
||||
<OrdersIcon />
|
||||
</div>
|
||||
<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}>
|
||||
<GitHubButton
|
||||
href="https://github.com/saleor/saleor"
|
||||
data-icon="octicon-star"
|
||||
data-show-count="true"
|
||||
data-size="large"
|
||||
aria-label="Star saleor/saleor on GitHub"
|
||||
<ExternalLink
|
||||
className={classes.link}
|
||||
target={"_blank"}
|
||||
href={SALEOR_GRAPHQL_URL}
|
||||
>
|
||||
Star us on GitHub
|
||||
</GitHubButton>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
},
|
||||
}),
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in a new issue