diff --git a/src/notification/bar.html b/src/notification/bar.html index 0403ad1b82..d5b8c95b87 100644 --- a/src/notification/bar.html +++ b/src/notification/bar.html @@ -1,52 +1,38 @@  - + Bitwarden - - - - - - - - -
- - - - X - -
+
+ +
+
+ + X + +
+
diff --git a/src/notification/bar.js b/src/notification/bar.js index 070b293440..b4d658577e 100644 --- a/src/notification/bar.js +++ b/src/notification/bar.js @@ -8,6 +8,7 @@ document.addEventListener('DOMContentLoaded', () => { i18n.close = chrome.i18n.getMessage('close'); i18n.yes = chrome.i18n.getMessage('yes'); i18n.never = chrome.i18n.getMessage('never'); + i18n.folder = chrome.i18n.getMessage('folder'); i18n.notificationAddSave = chrome.i18n.getMessage('notificationAddSave'); i18n.notificationNeverSave = chrome.i18n.getMessage('notificationNeverSave'); i18n.notificationAddDesc = chrome.i18n.getMessage('notificationAddDesc'); @@ -39,6 +40,7 @@ document.addEventListener('DOMContentLoaded', () => { document.querySelector('#template-add .add-save').textContent = i18n.notificationAddSave; document.querySelector('#template-add .never-save').textContent = i18n.notificationNeverSave; document.querySelector('#template-add .select-folder').style.display = 'initial'; + document.querySelector('#template-add .select-folder').setAttribute('aria-label', i18n.folder); document.querySelector('#template-change .change-save').textContent = i18n.notificationChangeSave; } diff --git a/src/notification/bar.scss b/src/notification/bar.scss index 2705ed324b..d12a891c61 100644 --- a/src/notification/bar.scss +++ b/src/notification/bar.scss @@ -9,31 +9,35 @@ font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } -table { - width: 100%; +.outer-wrapper { + padding: 0 10px; + border-bottom: 2px solid #175ddc; + display: grid; + grid-template-columns: 1fr auto 1fr; + column-gap: 10px; + grid-column-gap: 10px; + box-sizing: border-box; + height: 42px; } -.outter-table > tbody > tr > td { - padding: 0 0 0 10px; - border-bottom: 2px solid #175DDC; - height: 40px; +.outer-wrapper > * { + align-self: center; } - .outter-table > tbody > tr > td:last-child { - padding-right: 10px; - } - -.inner-table td { - padding: 0 10px 0 0; +.inner-wrapper { + display: grid; + grid-template-columns: 2fr 1fr; + column-gap: 10px; + grid-column-gap: 10px; } - .inner-table td:last-child { - padding: 0; - } +#content .change-buttons { + justify-self: end; +} - .inner-table td button { - margin-left: 5px; - } +.wrapper > *, .inner-wrapper > * { + align-self: center; +} img { border: 0; @@ -82,12 +86,13 @@ button.link { } body[class*='lang-en'] .add-buttons { - width: 50px; + width: 175px; + text-align: right; } @media (min-width: 768px) { body[class*='lang-en'] .add-buttons { - width: 320px; + width: 420px; } }