diff --git a/ui/app/components/message-in-page.js b/ui/app/components/alert-banner.js similarity index 93% rename from ui/app/components/message-in-page.js rename to ui/app/components/alert-banner.js index e5e5c59c7..155757d9b 100644 --- a/ui/app/components/message-in-page.js +++ b/ui/app/components/alert-banner.js @@ -17,6 +17,4 @@ export default Component.extend({ alertType: computed('type', function() { return messageTypes([this.get('type')]); }), - - messageClass: 'message-body', }); diff --git a/ui/app/components/alert-inline.js b/ui/app/components/alert-inline.js new file mode 100644 index 000000000..99a90ae7f --- /dev/null +++ b/ui/app/components/alert-inline.js @@ -0,0 +1,22 @@ +import Component from '@ember/component'; +import { computed } from '@ember/object'; + +import { messageTypes } from 'vault/helpers/message-types'; + +export default Component.extend({ + type: null, + + classNames: ['message-inline'], + + textClass: computed('type', function() { + if (this.get('type') == 'danger') { + return messageTypes([this.get('type')]).glyphClass; + } + + return + }), + + alertType: computed('type', function() { + return messageTypes([this.get('type')]); + }), +}); diff --git a/ui/app/components/flash-message.js b/ui/app/components/flash-message.js index 30379488d..814fd3e15 100644 --- a/ui/app/components/flash-message.js +++ b/ui/app/components/flash-message.js @@ -7,7 +7,7 @@ export default FlashMessage.extend({ alertType: computed('flash.type', { get() { const flashType = getWithDefault(this, 'flash.type', ''); - let prefix = 'notification has-border is-'; + let prefix = 'is-'; return `${prefix}${flashType}`; }, diff --git a/ui/app/styles/components/global-flash.scss b/ui/app/styles/components/global-flash.scss index 3c4b5e044..8450efd6c 100644 --- a/ui/app/styles/components/global-flash.scss +++ b/ui/app/styles/components/global-flash.scss @@ -1,17 +1,13 @@ .global-flash { - position: fixed; - max-width: 450px; - width: 95%; bottom: 0; - left: 0; + left: $spacing-s; margin: 10px; + max-width: $drawer-width; + position: fixed; + width: 95%; z-index: 300; - .notification { + .message { box-shadow: $box-shadow-high; - margin: 20px; - @include until($desktop) { - margin: 1rem 0; - } } } diff --git a/ui/app/styles/components/login-form.scss b/ui/app/styles/components/login-form.scss index 897e73ded..2740bf944 100644 --- a/ui/app/styles/components/login-form.scss +++ b/ui/app/styles/components/login-form.scss @@ -1,3 +1,4 @@ .login-form { box-shadow: $box-shadow, $box-shadow-high; + overflow: auto; } diff --git a/ui/app/styles/components/message-in-page.scss b/ui/app/styles/components/message-in-page.scss deleted file mode 100644 index e766d8826..000000000 --- a/ui/app/styles/components/message-in-page.scss +++ /dev/null @@ -1,10 +0,0 @@ -.message-in-page { - margin-bottom: 1rem; - position: relative; - - .close-button { - position: absolute; - right: 1rem; - top: $size-10; - } -} diff --git a/ui/app/styles/components/splash-page.scss b/ui/app/styles/components/splash-page.scss index 4338ca80f..2b6c887ba 100644 --- a/ui/app/styles/components/splash-page.scss +++ b/ui/app/styles/components/splash-page.scss @@ -19,9 +19,7 @@ .splash-page-container { margin: $size-2 0; } + .splash-page-header { padding: $size-6 $size-5; } -.splash-page-sub-header { - margin: 0 $size-5 $size-6; -} diff --git a/ui/app/styles/components/token-expire-warning.scss b/ui/app/styles/components/token-expire-warning.scss index d761b9f70..844e71bbc 100644 --- a/ui/app/styles/components/token-expire-warning.scss +++ b/ui/app/styles/components/token-expire-warning.scss @@ -11,9 +11,7 @@ .token-expire-warning .content p { padding-right: $size-6; } -.token-expire-warning .message-in-page { - margin: 0; -} .token-expire-warning .message { + margin: 0; width: 100%; } diff --git a/ui/app/styles/components/unseal-warning.scss b/ui/app/styles/components/unseal-warning.scss index 817a67a37..8a65b54df 100644 --- a/ui/app/styles/components/unseal-warning.scss +++ b/ui/app/styles/components/unseal-warning.scss @@ -1,5 +1,3 @@ -.unseal-warning.message, -.unseal-warning .message-body { - border-radius: 0; - margin-bottom: 0; +.unseal-warning.message { + margin: -1px -1px 0; } diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss index 73b633193..3c395c50d 100644 --- a/ui/app/styles/core.scss +++ b/ui/app/styles/core.scss @@ -63,7 +63,6 @@ @import "./components/loader"; @import "./components/login-form"; @import "./components/masked-input"; -@import "./components/message-in-page"; @import "./components/namespace-picker"; @import "./components/namespace-reminder"; @import "./components/page-header"; diff --git a/ui/app/styles/core/message.scss b/ui/app/styles/core/message.scss index a3bcbc34f..3ae4df4aa 100644 --- a/ui/app/styles/core/message.scss +++ b/ui/app/styles/core/message.scss @@ -1,38 +1,113 @@ .message { - &.is-list { - margin: $size-10 0; + background: $blue-010; + border: 1px solid $blue-100; + margin-bottom: $spacing-s; + padding: $spacing-s $spacing-m $spacing-m $spacing-s; + position: relative; + + .message-icon { + color: $blue; + margin-right: $spacing-xs; } - &.is-warning { - .message-body { - color: $yellow-darkest; - padding: 0.75rem 1.25rem; + .close-button { + background: transparent; + border: 0; + color: $grey; + cursor: pointer; + position: absolute; + right: $spacing-s; + top: $spacing-m; + } + + .message-title { + color: $blue-500; + font-size: 16px; + font-weight: $font-weight-bold; + line-height: 1.25; + } + + .close-button + .message-title { + padding-right: $spacing-m; + } + + .message-body { + border: 0; + margin-top: $spacing-xxs; + } + + p { + font-size: $size-8; + border: 0; + padding: 0; + } + + .message-actions { + margin-top: $spacing-xs; + + a, + a:not(.button):not(.file-delete-button):not(.tag) { + color: $blue; + font-weight: $font-weight-semibold; + text-decoration: none; + } + + > * + * { + margin-left: $spacing-xs; } } &.is-highlight { - background: $yellow-lightest; - .message-body { - border: none; - box-shadow: 0 0 0 1px $yellow; - color: $yellow-darkest; + background: $yellow-010; + border: 1px solid $yellow-100; + + .message-icon { + color: $yellow-500; } - .has-text-highlight, - .close-button { - color: $yellow; - } - .title, - code { - background: none; - color: inherit; - } - .content .button { - border-color: $yellow; - color: $yellow-darkest; + + .message-title { + color: $orange-700; } } - .content { - margin-bottom: 0; + &.is-success { + background: $green-010; + border: 1px solid $green-100; + + .message-icon { + color: $green-500; + } + + .message-title { + color: $green-700; + } + } + + &.is-danger { + background: $red-010; + border: 1px solid $red-050; + + .message-icon { + color: $red-500; + } + + .message-title { + color: $red-700; + } + } +} + +.message-inline { + display: flex; + margin: -$spacing-xs 0 $spacing-l; + + .icon { + flex: 0; + margin: 0 $spacing-xxs 0 0; + min-width: fit-content; + } + + .p { + margin: 0; } } diff --git a/ui/app/styles/core/notification.scss b/ui/app/styles/core/notification.scss index 1273e643f..4bc10defb 100644 --- a/ui/app/styles/core/notification.scss +++ b/ui/app/styles/core/notification.scss @@ -1,8 +1,10 @@ .notification { - padding: 1rem 2.5rem 1rem 1.5rem; + padding: $spacing-m $spacing-m $spacing-m $spacing-s; + .title { font-weight: $weight-bold; } + &.has-border { border: 1px solid currentColor; border-left-width: 10px; diff --git a/ui/app/styles/utils/_colors.scss b/ui/app/styles/utils/_colors.scss index 245d7407d..fb70aca50 100644 --- a/ui/app/styles/utils/_colors.scss +++ b/ui/app/styles/utils/_colors.scss @@ -1,6 +1,7 @@ // Colors that will eventually be in Structure package // Vault Gray +$vault-gray-010: #FDFDFE; $vault-gray-050: #F7FAFC; $vault-gray-100: #EBEEF5; $vault-gray-200: #D3DBE6; @@ -15,6 +16,7 @@ $vault-gray: $vault-gray-500; $vault-gray-dark: $vault-gray-700; // UI Gray +$ui-gray-010: #FBFBFC; $ui-gray-050: #F7F8FA; $ui-gray-100: #EBEEF2; $ui-gray-200: #DCE0E6; @@ -30,6 +32,7 @@ $grey-dark: $ui-gray-700; $grey-darkest: $ui-gray-900; // Blue +$blue-010: #FBFCFF; $blue-050: #F0F5FF; $blue-100: #BFD4FF; $blue-300: #5B92FF; @@ -43,6 +46,7 @@ $blue-dark: $blue-700; $blue-darkest: $blue-900; // Red +$red-010: #FDFAFB; $red-050: #F9ECEE; $red-100: #EFC7CC; $red-300: #DB7D88; @@ -56,6 +60,7 @@ $red-dark: $red-700; $red-darkest: $red-900; // Green +$green-010: #FAFDFA; $green-050: #ECF7ED; $green-100: #C6E9C9; $green-300: #7ACC81; @@ -69,6 +74,7 @@ $green-dark: $green-700; $green-darkest: $green-900; // Orange +$orange-010: #FFFCFA; $orange-050: #FEF4EC; $orange-100: #FDE0C8; $orange-300: #FBB77F; @@ -82,6 +88,7 @@ $orange-dark: $orange-700; $orange-darkest: $orange-900; // Yellow +$yellow-010: #FFFDF6; $yellow-050: #FFFBED; $yellow-100: #FDEEBA; $yellow-300: #FBD95E; diff --git a/ui/app/templates/components/alert-banner.hbs b/ui/app/templates/components/alert-banner.hbs new file mode 100644 index 000000000..5287fa018 --- /dev/null +++ b/ui/app/templates/components/alert-banner.hbs @@ -0,0 +1,31 @@ +
+ {{message}} +
diff --git a/ui/app/templates/components/config-pki-ca.hbs b/ui/app/templates/components/config-pki-ca.hbs index 328bfd2c6..276fa424a 100644 --- a/ui/app/templates/components/config-pki-ca.hbs +++ b/ui/app/templates/components/config-pki-ca.hbs @@ -32,9 +32,11 @@