@blocklet/launcher-workflow 1.5.68 → 1.5.71

package/lib/components/confirm.js

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _lodash = _interopRequireDefault(require("lodash.get"));
+
 var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 
 var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
@@ -33,6 +35,17 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const translations = {
+  en: {
+    confirm: 'Confirm',
+    cancel: 'Cancel'
+  },
+  zh: {
+    confirm: '同意',
+    cancel: '取消'
+  }
+};
+
 function ConfirmDialog(_ref) {
   let {
     title,
@@ -42,11 +55,14 @@ function ConfirmDialog(_ref) {
     color,
     params: initialParams,
     onCancel,
-    onConfirm
+    onConfirm,
+    locale
   } = _ref;
   const {
-    t
-  } = (0, _react.useContext)(_locale.LocaleContext);
+    locale: innerLocale
+  } = (0, _react.useContext)(_locale.LocaleContext) || {
+    locale
+  };
   const [params, setParams] = (0, _react.useState)(initialParams);
   const theme = (0, _useTheme.default)();
   const isBreakpointsDownSm = (0, _useMediaQuery.default)(theme.breakpoints.down('sm'));
@@ -68,13 +84,13 @@ function ConfirmDialog(_ref) {
     onClick: () => onCallback(onCancel),
     color: "default",
     rounded: true
-  }, cancel || t('common.cancel')), /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, cancel || (0, _lodash.default)(translations, "".concat(innerLocale, ".cancel"))), /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: () => onCallback(onConfirm),
     color: color,
     variant: "outlined",
     autoFocus: true,
     rounded: true
-  }, confirm || t('common.confirm'))));
+  }, confirm || (0, _lodash.default)(translations, "".concat(innerLocale, ".confirm")))));
 }
 
 ConfirmDialog.propTypes = {
@@ -87,12 +103,14 @@ ConfirmDialog.propTypes = {
   params: _propTypes.default.object,
   // This object holds states managed in the dialog
   onCancel: _propTypes.default.func,
-  onConfirm: _propTypes.default.func.isRequired
+  onConfirm: _propTypes.default.func.isRequired,
+  locale: _propTypes.default.oneOf(['en', 'zh'])
 };
 ConfirmDialog.defaultProps = {
   onCancel: () => {},
   cancel: '',
   confirm: '',
   color: 'danger',
-  params: {}
+  params: {},
+  locale: 'en'
 };

package/lib/components/instance-operation.js

@@ -25,6 +25,10 @@ var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
 
 var _launcherConstant = require("@blocklet/launcher-constant");
 
+var _pageHeader = _interopRequireDefault(require("@blocklet/launcher-layout/lib/page-header"));
+
+var _launchResultMessage = _interopRequireDefault(require("@blocklet/launcher-layout/lib/launch-result-message"));
+
 var _util = require("../util");
 
 var _query = _interopRequireDefault(require("../hooks/query"));
@@ -35,10 +39,6 @@ var _router = _interopRequireDefault(require("../contexts/router"));
 
 var _locale = require("../contexts/locale");
 
-var _pageHeader = _interopRequireDefault(require("./page-header"));
-
-var _launchResultMessage = _interopRequireDefault(require("./launch-result-message"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

package/lib/components/launch-result-message.js

@@ -15,6 +15,10 @@ var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
 
 var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
 
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
+
+var _PriorityHigh = _interopRequireDefault(require("@material-ui/icons/PriorityHigh"));
+
 const _excluded = ["variant", "title", "subTitle", "footer"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -32,25 +36,45 @@ function LaunchResultMessage(_ref) {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  const Icon = variant === 'error' ? _Close.default : _Check.default;
+  let Icon;
+
+  switch (variant) {
+    case 'error':
+      Icon = _Close.default;
+      break;
+
+    case 'info':
+      Icon = _PriorityHigh.default;
+      break;
+
+    case 'loading':
+      Icon = _Spinner.default;
+      break;
+
+    default:
+      Icon = _Check.default;
+  }
+
   return /*#__PURE__*/_react.default.createElement(Container, Object.assign({
     variant: variant
-  }, props), /*#__PURE__*/_react.default.createElement("span", {
-    className: "icon"
-  }, /*#__PURE__*/_react.default.createElement(Icon, null)), title && /*#__PURE__*/_react.default.createElement("div", {
-    className: "result-message-title"
-  }, title), subTitle && /*#__PURE__*/_react.default.createElement("div", {
-    className: "sub-title"
-  }, subTitle), footer && /*#__PURE__*/_react.default.createElement("div", {
-    className: "result-message-footer"
-  }, footer));
+  }, props), /*#__PURE__*/_react.default.createElement("div", {
+    className: "result-body"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "result-icon color-".concat(variant)
+  }, /*#__PURE__*/_react.default.createElement(Icon, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "result-title color-".concat(variant, " ").concat(title ? '' : 'ele-hide')
+  }, title), /*#__PURE__*/_react.default.createElement("div", {
+    className: "result-sub-title ".concat(subTitle ? '' : 'ele-hide')
+  }, subTitle), /*#__PURE__*/_react.default.createElement("div", {
+    className: "result-footer ".concat(footer ? '' : 'ele-hide')
+  }, footer)));
 }
 
 LaunchResultMessage.propTypes = {
-  variant: _propTypes.default.oneOf(['success', 'error']),
+  variant: _propTypes.default.oneOf(['success', 'error', 'info', 'loading']),
   title: _propTypes.default.string,
   subTitle: _propTypes.default.string,
-  footer: _propTypes.default.object
+  footer: _propTypes.default.any
 };
 LaunchResultMessage.defaultProps = {
   variant: 'success',
@@ -62,4 +86,4 @@ LaunchResultMessage.defaultProps = {
 const Container = _styledComponents.default.div.withConfig({
   displayName: "launch-result-message__Container",
   componentId: "sc-17nd2le-0"
-})(["display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;height:100%;.icon{display:inline-flex;justify-content:center;align-items:center;width:48px;height:48px;border-radius:100%;background-color:", ";color:", ";}.result-message-title{margin-top:24px;color:", ";font-size:24px;font-weight:bolder;}.sub-title{margin-top:8px;color:", ";font-size:14px;}.result-message-footer{margin-top:24px;}"], props => props.variant === 'error' ? props.theme.palette.error.main : props.theme.palette.success.main, props => props.theme.palette.common.white, props => props.variant === 'error' ? props.theme.palette.error.main : props.theme.palette.success.main, props => props.theme.palette.grey[700]);
+})(["display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;height:100%;.result-body{max-width:500px;text-align:center;margin-top:-64px;}.result-icon{display:inline-flex;justify-content:center;align-items:center;margin-bottom:24px;width:48px;height:48px;border-radius:100%;color:", ";transition:all ease 0.3s;&.color-success{background-color:", ";}&.color-error{background-color:", ";}&.color-info{background-color:", ";}}.result-title{height:34px;font-size:24px;margin-bottom:8px;font-weight:bolder;transition:all ease 0.3s;&.ele-hide{height:0;opacity:0;margin-bottom:0;}&.color-success{color:", ";}&.color-error{color:", ";}&.color-info{color:", ";}&.ele-hide{line-height:0;opacity:0;}}.result-sub-title{margin:0 auto;max-width:90%;color:", ";font-size:14px;line-height:1.21em;transition:all ease 0.3s;&.ele-hide{line-height:0;opacity:0;}}.result-footer{margin-top:38px;height:70px;overflow:hidden;transition:all ease 0.3s;&.ele-hide{margin-top:0;height:0;opacity:0;}}"], props => props.theme.palette.common.white, props => props.theme.palette.success.main, props => props.theme.palette.error.main, props => props.theme.palette.primary.main, props => props.theme.palette.success.main, props => props.theme.palette.error.main, props => props.theme.palette.primary.main, props => props.theme.palette.grey[700]);

package/lib/locales/en.js

@@ -1,8 +1,6 @@
 "use strict";
 
-const {
-  ORDER_STATUS
-} = require('@blocklet/launcher-constant');
+var _launcherConstant = require("@blocklet/launcher-constant");
 
 module.exports = {
   common: {
@@ -28,10 +26,10 @@ module.exports = {
     loadListFailed: 'Plan list load error',
     paymentCredit: {
       status: {
-        [ORDER_STATUS.unpaid]: 'Waiting for payment',
-        [ORDER_STATUS.paid]: 'Payment completed, waiting for order completion',
-        [ORDER_STATUS.nftSent]: 'Completed',
-        [ORDER_STATUS.expired]: 'Order has expired'
+        [_launcherConstant.ORDER_STATUS.unpaid]: 'Waiting for payment',
+        [_launcherConstant.ORDER_STATUS.paid]: 'Payment completed, waiting for order completion',
+        [_launcherConstant.ORDER_STATUS.nftSent]: 'Completed',
+        [_launcherConstant.ORDER_STATUS.expired]: 'Order has expired'
       }
     },
     useCrypto: 'Crypto',
@@ -40,7 +38,7 @@ module.exports = {
   },
   license: {
     title: 'End User License Agreement',
-    footer: 'I agree to the Blocklet Server EULA'
+    footer: 'Agree to the EULA and continue'
   },
   prepare: {
     title: 'Naming Blocklet Server',

package/lib/locales/zh.js

@@ -38,7 +38,7 @@ module.exports = {
   },
   license: {
     title: '节点用户协议',
-    footer: '我已经阅读并同意节点的用户协议'
+    footer: '同意协议并继续'
   },
   prepare: {
     title: '命名节点',

package/lib/prepare.js

@@ -25,9 +25,11 @@ var _FormHelperText = _interopRequireDefault(require("@material-ui/core/FormHelp
 
 var _launcherConstant = require("@blocklet/launcher-constant");
 
-var _pageHeader = _interopRequireDefault(require("./components/page-header"));
+var _server = _interopRequireDefault(require("@arcblock/license/lib/server"));
 
-var _serverEula = _interopRequireDefault(require("./components/server-eula"));
+var _serverEula = _interopRequireDefault(require("@blocklet/launcher-layout/lib/wizard/server-eula"));
+
+var _pageHeader = _interopRequireDefault(require("@blocklet/launcher-layout/lib/page-header"));
 
 var _request = _interopRequireDefault(require("./contexts/request"));
 
@@ -242,7 +244,15 @@ function PreparePage() {
   }, /*#__PURE__*/_react.default.createElement(_serverEula.default, {
     onContinue: handleLaunch,
     nextDisabled: !name.trim() || !description.trim() || launching,
-    launching: launching
+    launching: launching,
+    description: /*#__PURE__*/_react.default.createElement(_server.default, {
+      className: "eula-content"
+    }),
+    texts: {
+      listenName: t('license.title'),
+      launchingText: t('common.launching'),
+      buttonNext: t('license.footer')
+    }
   }))), /*#__PURE__*/_react.default.createElement(_Connect.default, {
     open: showLaunchInstanceDialog,
     popup: true,
@@ -275,4 +285,4 @@ function PreparePage() {
 const Container = _styledComponents.default.div.withConfig({
   displayName: "prepare__Container",
   componentId: "sc-1ddofcz-0"
-})(["display:flex;flex-direction:column;width:100%;height:100%;.page-logo{display:flex;justify-content:center;margin-top:62px;", "{margin-top:48px;}}.inputs{display:flex;align-items:center;flex-direction:column;text-align:center;}.input-item{margin-top:24px;width:90%;max-width:450px;font-size:14px;input,textarea{font-size:14px;}}.botton-container{margin-top:24px;text-align:center;}"], props => props.theme.breakpoints.down('sm'));
+})(["display:flex;flex-direction:column;width:100%;height:100%;.page-logo{display:flex;justify-content:center;margin-top:62px;", "{margin-top:48px;}}.inputs{display:flex;align-items:center;flex-direction:column;text-align:center;}.input-item{margin-top:24px;width:90%;max-width:460px;font-size:14px;input,textarea{font-size:14px;}}.botton-container{width:100%;margin:24px auto;max-width:460px;text-align:center;}"], props => props.theme.breakpoints.down('sm'));

package/lib/purchase.js

@@ -43,9 +43,9 @@ var _Alert = _interopRequireDefault(require("@material-ui/lab/Alert"));
 
 var _CreditCard = _interopRequireDefault(require("@material-ui/icons/CreditCard"));
 
-var _plan = _interopRequireDefault(require("./components/plan"));
+var _pageHeader = _interopRequireDefault(require("@blocklet/launcher-layout/lib/page-header"));
 
-var _pageHeader = _interopRequireDefault(require("./components/page-header"));
+var _plan = _interopRequireDefault(require("./components/plan"));
 
 var _checkout = _interopRequireDefault(require("./components/stripe/checkout"));
 

package/lib/util.js

@@ -22,7 +22,7 @@ const getLaunchBlockletUrl = (serverUrl, blockletMetaUrl, locale) => {
     return serverUrl;
   }
 
-  let result = (0, _urlJoin.default)(serverUrl, "/launch-blocklet?blocklet_meta_url=".concat(encodeURIComponent(blockletMetaUrl)));
+  let result = (0, _urlJoin.default)(serverUrl, "/launch-blocklet/install?blocklet_meta_url=".concat(encodeURIComponent(blockletMetaUrl), "&from=launcher"));
 
   if (locale) {
     result += "&locale=".concat(locale);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/launcher-workflow",
-  "version": "1.5.68",
+  "version": "1.5.71",
   "description": "Purchase components for Launcher UI",
   "publishConfig": {
     "access": "public"
@@ -37,16 +37,16 @@
     "react": ">=16.12.0"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^1.16.49",
-    "@arcblock/icons": "^1.16.49",
-    "@arcblock/license": "^1.16.49",
-    "@arcblock/ux": "^1.16.49",
-    "@blocklet/launcher-constant": "1.5.68",
-    "@blocklet/launcher-layout": "1.5.68",
+    "@arcblock/did-connect": "^1.16.56",
+    "@arcblock/icons": "^1.16.56",
+    "@arcblock/license": "^1.16.56",
+    "@arcblock/ux": "^1.16.56",
+    "@blocklet/launcher-constant": "1.5.71",
+    "@blocklet/launcher-layout": "1.5.71",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@ocap/util": "^1.15.2",
+    "@ocap/util": "^1.15.3",
     "@stripe/react-stripe-js": "^1.7.0",
     "@stripe/stripe-js": "^1.22.0",
     "@styled-icons/remix-fill": "^10.18.0",
@@ -69,5 +69,5 @@
     "babel-plugin-inline-react-svg": "^2.0.1",
     "babel-plugin-styled-components": "^1.10.7"
   },
-  "gitHead": "70a65ca42b47efb86e93b8495ce6db35d4360cff"
+  "gitHead": "13be06599d8749b5bd40e7ba10ee36fbc4838f0e"
 }

package/lib/components/page-header.js

@@ -1,42 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function PageHeader(_ref) {
-  let {
-    title,
-    subTitle
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(Content, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "title"
-  }, title), /*#__PURE__*/_react.default.createElement("div", {
-    className: "sub-title"
-  }, subTitle));
-}
-
-const Content = _styledComponents.default.div.withConfig({
-  displayName: "page-header__Content",
-  componentId: "sc-2cz88s-0"
-})(["width:100%;text-align:center;.title{font-size:24px;font-weight:700;color:", ";}.sub-title{font-size:14px;color:", ";padding:0 14px;font-weight:400;}"], props => props.theme.palette.common.black, props => props.theme.palette.grey[600]);
-
-var _default = PageHeader;
-exports.default = _default;
-PageHeader.propTypes = {
-  title: _propTypes.default.string,
-  subTitle: _propTypes.default.string
-};
-PageHeader.defaultProps = {
-  title: '',
-  subTitle: ''
-};

package/lib/components/server-eula.js

@@ -1,107 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = ServerEula;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _useLocalStorage = _interopRequireDefault(require("react-use/lib/useLocalStorage"));
-
-var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
-
-var _CheckCircleRounded = _interopRequireDefault(require("@material-ui/icons/CheckCircleRounded"));
-
-var _CheckCircleOutlineRounded = _interopRequireDefault(require("@material-ui/icons/CheckCircleOutlineRounded"));
-
-var _FormLabel = _interopRequireDefault(require("@material-ui/core/FormLabel"));
-
-var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
-
-var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
-
-var _server = _interopRequireDefault(require("@arcblock/license/lib/server"));
-
-var _locale = require("../contexts/locale");
-
-var _confirm = _interopRequireDefault(require("./confirm"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-/* eslint-disable react/jsx-wrap-multilines */
-function ServerEula(_ref) {
-  let {
-    onContinue,
-    nextDisabled,
-    launching
-  } = _ref;
-  const [agreed, setAgreed] = (0, _useLocalStorage.default)('server-eula-checked', false);
-  const [open, setOpen] = (0, _react.useState)(false);
-  const {
-    t
-  } = (0, _react.useContext)(_locale.LocaleContext);
-
-  const handleChecked = () => setAgreed(x => !x);
-
-  const handleOpen = () => setOpen(x => !x);
-
-  const handleCancel = () => setOpen(false);
-
-  const handleConfirm = () => {
-    setAgreed(true);
-    setOpen(false);
-  };
-
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Div, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "eula-checkbox"
-  }, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
-    checked: agreed,
-    onChange: handleChecked,
-    color: "primary",
-    checkedIcon: /*#__PURE__*/_react.default.createElement(_CheckCircleRounded.default, null),
-    icon: /*#__PURE__*/_react.default.createElement(_CheckCircleOutlineRounded.default, null)
-  }), /*#__PURE__*/_react.default.createElement(_FormLabel.default, {
-    className: "eula-trigger",
-    onClick: handleOpen
-  }, t('license.footer'))), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    disabled: !agreed || nextDisabled,
-    color: "primary",
-    variant: "contained",
-    className: "next-button",
-    onClick: onContinue
-  }, launching ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Spinner.default, {
-    size: 14
-  }), t('common.launching')) : t('common.next'))), open && /*#__PURE__*/_react.default.createElement(_confirm.default, {
-    title: t('license.title'),
-    description: /*#__PURE__*/_react.default.createElement(_server.default, {
-      className: "eula-content"
-    }),
-    color: "primary",
-    onCancel: handleCancel,
-    onConfirm: handleConfirm
-  }));
-}
-
-ServerEula.propTypes = {
-  onContinue: _propTypes.default.func.isRequired,
-  nextDisabled: _propTypes.default.bool,
-  launching: _propTypes.default.bool
-};
-ServerEula.defaultProps = {
-  nextDisabled: false,
-  launching: false
-};
-
-const Div = _styledComponents.default.div.withConfig({
-  displayName: "server-eula__Div",
-  componentId: "sc-16uy00s-0"
-})(["width:90%;max-width:450px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;@media (max-width:", "px){flex-direction:column;}.eula-checkbox{display:flex;align-items:center;.eula-trigger{cursor:pointer;font-size:14px;&:hover{color:", ";}}}.next-button{width:120px;}"], props => props.theme.breakpoints.values.sm, props => props.theme.palette.primary.main);