diff --git a/assets/icons/logo-small.svg b/assets/icons/logo-small.svg new file mode 100644 index 0000000000..7a6f676941 --- /dev/null +++ b/assets/icons/logo-small.svg @@ -0,0 +1 @@ +Logo B diff --git a/assets/js/theme/global/maintenanceMode.js b/assets/js/theme/global/maintenanceMode.js index f63916da06..e0cb0a5fb1 100644 --- a/assets/js/theme/global/maintenanceMode.js +++ b/assets/js/theme/global/maintenanceMode.js @@ -7,17 +7,35 @@ import $ from 'jquery'; export default function (maintenanceMode = {}) { const header = maintenanceMode.header; const notice = maintenanceMode.notice; + const password = maintenanceMode.password; if (!(header && notice)) { return; } - const $element = $('
', { - id: 'maintenance-notice', - class: 'maintenanceNotice', - }); + if (password) { + const securePath = maintenanceMode.secure_path; + const $element = $('
', { + class: 'adminBar', + }); - $element.html(`

${header}

${notice}`); + $element.html(` +
+ Customize Theme + Share your site with passcode: ${password} + Your storefront is private. +
`); + $('body').prepend($element); + } else { + const $element = $('
', { + id: 'maintenance-notice', + class: 'maintenanceNotice', + }); - $('body').append($element); + + $element.html(`

${header}

${notice}`); + + $('body').append($element); + } } diff --git a/assets/scss/components/stencil/maintenanceNotice/_maintenanceNotice.scss b/assets/scss/components/stencil/maintenanceNotice/_maintenanceNotice.scss index 85dce24f3d..4dd5238e1a 100644 --- a/assets/scss/components/stencil/maintenanceNotice/_maintenanceNotice.scss +++ b/assets/scss/components/stencil/maintenanceNotice/_maintenanceNotice.scss @@ -26,3 +26,56 @@ font-family: $maintenanceNotice-header-font-family; margin: $maintenanceNotice-header-margin; } + +.adminBar { + background-color: $adminBar-color; + color: $adminBar-contentLink-color; + float: left; + font-family: "Source Sans Pro", arial, "sans serif", sans-serif; + font-size: 12px; + font-weight: 600; + height: 46px; + left: 0; + position: inherit; + text-decoration: none; + top: 0; + width: 100%; + z-index: 10000; +} + +.adminBarLogo { + background-color: $adminBar-logo-color; + float: left; + height: 46px; + width: 45px; + + svg { + height: 100%; + padding: 7px 10px 11px 7px; + width: 100%; + } +} + +.adminBarContent { + margin-left: 45px; + padding: 17px 20.5px 14px 20px; + + a { + font-weight: 600; + } + + span { + color: $adminBar-text-color; + float: right; + } +} + +.passcode { + color: $adminBar-text-color; + font-weight: 300; + padding-left: 9px; + + a { + border-bottom: 1px dashed $adminBar-contentLink-color; + } +} diff --git a/assets/scss/settings/stencil/maintenanceNotice/_settings.scss b/assets/scss/settings/stencil/maintenanceNotice/_settings.scss index 2f07902400..48821411f3 100644 --- a/assets/scss/settings/stencil/maintenanceNotice/_settings.scss +++ b/assets/scss/settings/stencil/maintenanceNotice/_settings.scss @@ -14,3 +14,8 @@ $maintenanceNotice-z-index: zIndex("highest"); $maintenanceNotice-header-font-family: stencilFontFamily("headings-font"); $maintenanceNotice-header-margin: 0 0 spacing("half"); + +$adminBar-color: #f6f7f9; +$adminBar-logo-color: #273a8a; +$adminBar-contentLink-color: #4b71fc; +$adminBar-text-color: #626568; diff --git a/templates/components/common/icons/icon-defs.html b/templates/components/common/icons/icon-defs.html index a0980aaf8f..f867b8eb0a 100644 --- a/templates/components/common/icons/icon-defs.html +++ b/templates/components/common/icons/icon-defs.html @@ -1 +1 @@ - \ No newline at end of file +