gatsby-theme-q3 3.2.2 → 3.2.3

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.2.3](https://github.com/3merge/q/compare/v3.2.2...v3.2.3) (2022-02-10)
+
+**Note:** Version bump only for package gatsby-theme-q3
+
+
+
+
+
 ## [3.2.2](https://github.com/3merge/q/compare/v3.2.1...v3.2.2) (2022-02-10)
 
 **Note:** Version bump only for package gatsby-theme-q3

package/lib/components/FormBoxContent.js

@@ -23,7 +23,8 @@ const FormBoxContent = ({
     t
   } = (0, _q3UiLocale.useTranslation)();
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    variant: "h1",
+    component: "h1",
+    variant: "h2",
     gutterBottom: true
   }, t(`titles:${title}`)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
     gutterBottom: true

package/lib/components/PublicTemplate.js

@@ -15,6 +15,8 @@ var _gatsby = require("gatsby");
 
 var _q3UiLocale = require("q3-ui-locale");
 
+var _lodash = require("lodash");
+
 var _AdminPublicGateway = _interopRequireDefault(require("./AdminPublicGateway"));
 
 var _useSiteMetaData = _interopRequireDefault(require("./useSiteMetaData"));
@@ -46,12 +48,14 @@ const useStyle = (0, _core.makeStyles)(theme => ({
     photo
   }) => ({
     backgroundColor: theme.palette.secondary.light,
-    backgroundImage: `url(${photo})`,
+    backgroundImage: (0, _lodash.isString)(photo) ? `url("${String(photo).replace(/\s/gi, '%20')}")` : undefined,
     backgroundSize: 'contain',
     backgroundPosition: 'center',
     backgroundRepeat: 'no-repeat',
     width: '100%',
-    height: '100%'
+    height: '100%',
+    backgroundBlendMode: 'multiply',
+    minHeight: '55vh'
   })
 }));
 
@@ -79,7 +83,7 @@ const TextLink = ({
   }, /*#__PURE__*/_react.default.createElement(_core.Link, {
     href: href,
     target: "_blank"
-  }, t(text)), ' ') : null;
+  }, t(text))) : null;
 };
 
 const PublicTemplate = ({
@@ -118,6 +122,7 @@ const PublicTemplate = ({
   }))), /*#__PURE__*/_react.default.createElement(_core.Paper, {
     className: cls.container
   }, /*#__PURE__*/_react.default.createElement(_core.Grid, {
+    alignItems: "center",
     container: true,
     spacing: 1
   }, /*#__PURE__*/_react.default.createElement(_core.Hidden, {

package/lib/pages/login.js

@@ -66,7 +66,8 @@ const Login = (0, _withPublicTemplate.default)((0, _withAuthenticate.default)(({
       to: "/reverify"
     }, t('labels:reverifyLink')))),
     renderTop: /*#__PURE__*/_react.default.createElement(_Typography.default, {
-      variant: "h1",
+      component: "h1",
+      variant: "h2",
       gutterBottom: true
     }, t('titles:login'))
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-theme-q3",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "main": "index.js",
   "license": "MIT",
   "peerDependencies": {
@@ -28,7 +28,7 @@
     "gatsby-plugin-robots-txt": "^1.6.14",
     "gatsby-plugin-sharp": "^4.2.0",
     "gatsby-plugin-sitemap": "^5.2.0",
-    "gatsby-theme-q3-mui": "^3.2.2",
+    "gatsby-theme-q3-mui": "^3.2.3",
     "gatsby-transformer-sharp": "^4.2.0",
     "lodash": "^4.17.20",
     "process": "^0.11.10",
@@ -42,5 +42,5 @@
     "transform-loader": "^0.2.4",
     "yarn": "^1.22.17"
   },
-  "gitHead": "c250a6bd44f4475e85b15057c649c2b6cc584836"
+  "gitHead": "d430a77040909c76b680e920a3f2cc7fd3264215"
 }

package/src/components/FormBoxContent.jsx

@@ -8,7 +8,7 @@ const FormBoxContent = ({ title, description }) => {
 
   return (
     <>
-      <Typography variant="h1" gutterBottom>
+      <Typography component="h1" variant="h2" gutterBottom>
         {t(`titles:${title}`)}
       </Typography>
       <Typography gutterBottom>

package/src/components/PublicTemplate.jsx

@@ -10,6 +10,7 @@ import {
 } from '@material-ui/core';
 import { Link as ReachLink } from 'gatsby';
 import { useTranslation } from 'q3-ui-locale';
+import { isString } from 'lodash';
 import AdminPublicGateway from './AdminPublicGateway';
 import useSiteMetaData from './useSiteMetaData';
 
@@ -39,12 +40,16 @@ const useStyle = makeStyles((theme) => ({
   },
   photo: ({ photo }) => ({
     backgroundColor: theme.palette.secondary.light,
-    backgroundImage: `url(${photo})`,
+    backgroundImage: isString(photo)
+      ? `url("${String(photo).replace(/\s/gi, '%20')}")`
+      : undefined,
     backgroundSize: 'contain',
     backgroundPosition: 'center',
     backgroundRepeat: 'no-repeat',
     width: '100%',
     height: '100%',
+    backgroundBlendMode: 'multiply',
+    minHeight: '55vh',
   }),
 }));
 
@@ -66,7 +71,7 @@ const TextLink = ({ href, text }) => {
     <Box display="inline-block" mx={1}>
       <Link href={href} target="_blank">
         {t(text)}
-      </Link>{' '}
+      </Link>
     </Box>
   ) : null;
 };
@@ -105,7 +110,7 @@ const PublicTemplate = ({ children, ...rest }) => {
           </ReachLink>
         </Box>
         <Paper className={cls.container}>
-          <Grid container spacing={1}>
+          <Grid alignItems="center" container spacing={1}>
             <Hidden smDown>
               <Grid item xs={6}>
                 <Box className={cls.photo} />

package/src/pages/login.jsx

@@ -52,7 +52,11 @@ const Login = withPublicTemplate(
           </>
         }
         renderTop={
-          <Typography variant="h1" gutterBottom>
+          <Typography
+            component="h1"
+            variant="h2"
+            gutterBottom
+          >
             {t('titles:login')}
           </Typography>
         }

package/lib/components/PublicTemplateBackground.js

@@ -1,120 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _core = require("@material-ui/core");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const PublicTemplateBackground = () => {
-  const theme = (0, _core.useTheme)();
-  return /*#__PURE__*/_react.default.createElement(_core.Box, {
-    position: "fixed",
-    top: 0,
-    right: 0,
-    left: 0,
-    bottom: 0,
-    overflow: "hidden"
-  }, /*#__PURE__*/_react.default.createElement(_core.Box, {
-    position: "fixed",
-    top: 0,
-    right: 0,
-    left: 0,
-    bottom: 0,
-    style: {
-      backgroundImage: 'url(https://images.unsplash.com/photo-1523293836414-f04e712e1f3b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=703&q=80)',
-      opacity: 0.1
-    }
-  }), /*#__PURE__*/_react.default.createElement(_core.Box, {
-    position: "fixed",
-    top: 0,
-    right: 0,
-    left: 0,
-    bottom: 0,
-    style: {
-      background: `linear-gradient(90deg, ${theme.palette.secondary.dark} 0%, ${theme.palette.secondary.light} 35%, ${theme.palette.secondary.main} 100%)`,
-      opacity: 0.1
-    }
-  }), /*#__PURE__*/_react.default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    style: {
-      opacity: 0.15,
-      minHeight: '100vh',
-      minWidth: '100vw'
-    }
-  }, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
-    id: "a",
-    x1: "0",
-    x2: "0",
-    y1: "1",
-    y2: "0"
-  }, /*#__PURE__*/_react.default.createElement("stop", {
-    offset: "0",
-    stopColor: theme.palette.background.muted
-  }), /*#__PURE__*/_react.default.createElement("stop", {
-    offset: "1",
-    stopColor: theme.palette.secondary.dark
-  })), /*#__PURE__*/_react.default.createElement("linearGradient", {
-    id: "b",
-    x1: "0",
-    x2: "0",
-    y1: "0",
-    y2: "1"
-  }, /*#__PURE__*/_react.default.createElement("stop", {
-    offset: "0",
-    stopColor: theme.palette.secondary.light
-  }), /*#__PURE__*/_react.default.createElement("stop", {
-    offset: "1",
-    stopColor: theme.palette.secondary.main
-  }))), /*#__PURE__*/_react.default.createElement("g", {
-    fill: theme.palette.background.muted,
-    fillOpacity: "0",
-    strokeMiterlimit: "10"
-  }, /*#__PURE__*/_react.default.createElement("g", {
-    stroke: "url(#a)",
-    strokeWidth: "2"
-  }, /*#__PURE__*/_react.default.createElement("path", {
-    transform: "translate(0 0)",
-    d: "M1409 581 1450.35 511 1490 581z"
-  }), /*#__PURE__*/_react.default.createElement("circle", {
-    strokeWidth: "4",
-    transform: "rotate(0 800 450)",
-    cx: "500",
-    cy: "100",
-    r: "40"
-  }), /*#__PURE__*/_react.default.createElement("path", {
-    transform: "translate(0 0)",
-    d: "M400.86 735.5h-83.73c0-23.12 18.74-41.87 41.87-41.87S400.86 712.38 400.86 735.5z"
-  })), /*#__PURE__*/_react.default.createElement("g", {
-    stroke: "url(#b)",
-    strokeWidth: "4"
-  }, /*#__PURE__*/_react.default.createElement("path", {
-    transform: "translate(0 0)",
-    d: "M149.8 345.2 118.4 389.8 149.8 434.4 181.2 389.8z"
-  }), /*#__PURE__*/_react.default.createElement("rect", {
-    strokeWidth: "8",
-    transform: "rotate(0 1089 759)",
-    x: "1039",
-    y: "709",
-    width: "100",
-    height: "100"
-  }), /*#__PURE__*/_react.default.createElement("path", {
-    transform: "rotate(0 1400 132)",
-    d: "M1426.8 132.4 1405.7 168.8 1363.7 168.8 1342.7 132.4 1363.7 96 1405.7 96z"
-  })))), /*#__PURE__*/_react.default.createElement(_core.Box, {
-    position: "fixed",
-    bottom: "1rem",
-    right: "1rem",
-    zIndex: 10
-  }, /*#__PURE__*/_react.default.createElement("small", null, "Texture made with", ' ', /*#__PURE__*/_react.default.createElement(_core.Link, {
-    href: "https://www.design.svgbackgrounds.com/"
-  }, "SVGBackgrounds.com"))));
-};
-
-var _default = PublicTemplateBackground;
-exports.default = _default;

package/src/components/PublicTemplateBackground.jsx

@@ -1,140 +0,0 @@
-import React from 'react';
-import { Box, Link, useTheme } from '@material-ui/core';
-
-const PublicTemplateBackground = () => {
-  const theme = useTheme();
-
-  return (
-    <Box
-      position="fixed"
-      top={0}
-      right={0}
-      left={0}
-      bottom={0}
-      overflow="hidden"
-    >
-      <Box
-        position="fixed"
-        top={0}
-        right={0}
-        left={0}
-        bottom={0}
-        style={{
-          backgroundImage:
-            'url(https://images.unsplash.com/photo-1523293836414-f04e712e1f3b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=703&q=80)',
-          opacity: 0.1,
-        }}
-      />
-      <Box
-        position="fixed"
-        top={0}
-        right={0}
-        left={0}
-        bottom={0}
-        style={{
-          background: `linear-gradient(90deg, ${theme.palette.secondary.dark} 0%, ${theme.palette.secondary.light} 35%, ${theme.palette.secondary.main} 100%)`,
-          opacity: 0.1,
-        }}
-      />
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        style={{
-          opacity: 0.15,
-          minHeight: '100vh',
-          minWidth: '100vw',
-        }}
-      >
-        <defs>
-          <linearGradient
-            id="a"
-            x1="0"
-            x2="0"
-            y1="1"
-            y2="0"
-          >
-            <stop
-              offset="0"
-              stopColor={theme.palette.background.muted}
-            />
-            <stop
-              offset="1"
-              stopColor={theme.palette.secondary.dark}
-            />
-          </linearGradient>
-          <linearGradient
-            id="b"
-            x1="0"
-            x2="0"
-            y1="0"
-            y2="1"
-          >
-            <stop
-              offset="0"
-              stopColor={theme.palette.secondary.light}
-            />
-            <stop
-              offset="1"
-              stopColor={theme.palette.secondary.main}
-            />
-          </linearGradient>
-        </defs>
-        <g
-          fill={theme.palette.background.muted}
-          fillOpacity="0"
-          strokeMiterlimit="10"
-        >
-          <g stroke="url(#a)" strokeWidth="2">
-            <path
-              transform="translate(0 0)"
-              d="M1409 581 1450.35 511 1490 581z"
-            />
-            <circle
-              strokeWidth="4"
-              transform="rotate(0 800 450)"
-              cx="500"
-              cy="100"
-              r="40"
-            />
-            <path
-              transform="translate(0 0)"
-              d="M400.86 735.5h-83.73c0-23.12 18.74-41.87 41.87-41.87S400.86 712.38 400.86 735.5z"
-            />
-          </g>
-          <g stroke="url(#b)" strokeWidth="4">
-            <path
-              transform="translate(0 0)"
-              d="M149.8 345.2 118.4 389.8 149.8 434.4 181.2 389.8z"
-            />
-            <rect
-              strokeWidth="8"
-              transform="rotate(0 1089 759)"
-              x="1039"
-              y="709"
-              width="100"
-              height="100"
-            />
-            <path
-              transform="rotate(0 1400 132)"
-              d="M1426.8 132.4 1405.7 168.8 1363.7 168.8 1342.7 132.4 1363.7 96 1405.7 96z"
-            />
-          </g>
-        </g>
-      </svg>
-      <Box
-        position="fixed"
-        bottom="1rem"
-        right="1rem"
-        zIndex={10}
-      >
-        <small>
-          Texture made with{' '}
-          <Link href="https://www.design.svgbackgrounds.com/">
-            SVGBackgrounds.com
-          </Link>
-        </small>
-      </Box>
-    </Box>
-  );
-};
-
-export default PublicTemplateBackground;