Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-29 12:55:21 +01:00
Code Issues Projects Releases Wiki Activity

[EC-641] Browser Ext UI Update (#3842)

Browse Source 
* more css changes

* add icon button hover

* Update apps/browser/src/popup/scss/box.scss

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* Update apps/desktop/src/scss/box.scss

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* feedback updates

* restore desktop pseudo rule

* update to include some variable fixes and deletions

* updates per oscar

* feedback updates

more universal variable, adjusted box padding (per Kyle), and aligned footer text

* changes per product design

added border for selects, border around generator, and hover for solarizeddark

* add more helper text space below for visual separation

* group new variable

* login page button fix

Dflinn found an odd margin on the login page

* Revert "Merge branch 'master' into browser-ext-ui-update-test"

This reverts commit b8007102f9, reversing
changes made to 246768cb12.

* fix button height

* revert file changes

* test adjustments

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
Co-authored-by: Kyle Spearrin <kyle.spearrin@gmail.com>
This commit is contained in:
DanHillesheim 2022-11-01 07:06:25 -06:00 committed by GitHub
parent 7b8507cf9b
commit cd35f9a4fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 149 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/browser/src/popup/components/set-pin.component.html
View File

@ -7,7 +7,7 @@
</div>
<div class="box">
<div class="box-content">
<div class="box-content-row box-content-row-flex" appBoxRow>
<div class="box-content-row box-content-row-flex no-hover no-bg" appBoxRow>
<div class="row-main">
<label for="pin">{{ "pin" | i18n }}</label>
<input

14
apps/browser/src/popup/scss/base.scss
View File

@ -202,6 +202,7 @@ header {
flex-direction: row;
justify-content: center;
align-items: center;
height: 100%;
@include themify($themes) {
color: themed("headerColor");
@ -298,6 +299,10 @@ header {
}
}
.no-bg {
background-color: transparent;
}
.content {
padding: 15px;
}
@ -504,11 +509,14 @@ main {
padding-left: 7px;
.org-filter {
@include themify($themes) {
background-color: themed("backgroundColor");
background-color: themed("buttonBackgroundColor");
}
border: 1px solid;
padding: 7px;
border-radius: $border-radius;
padding: 6px 10px;
width: 160px;
display: flex;
align-items: center;
justify-content: space-between;
}
}
.vault-select {

75
apps/browser/src/popup/scss/box.scss
View File

@ -3,7 +3,6 @@
.box {
position: relative;
width: 100%;
margin: 10px 0;
&.first {
margin-top: 0;
@ -20,13 +19,14 @@
}
.box-header-expandable {
padding: 0 10px;
margin-bottom: 5px;
padding: 10px;
margin: 0 10px;
text-transform: uppercase;
display: flex;
width: 100%;
width: calc(100% - 20px);
box-sizing: border-box;
align-items: center;
border-radius: $border-radius;
@include themify($themes) {
color: themed("headingColor");
@ -52,11 +52,8 @@
}
.box-content {
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
@include themify($themes) {
background-color: themed("boxBackgroundColor");
background-color: themed("backgroundColor");
border-color: themed("borderColor");
}
@ -74,13 +71,16 @@
.box-content-row.no-hover {
&:hover,
&:focus {
background-color: initial !important;
@include themify($themes) {
background-color: themed("boxBackgroundColor") !important;
}
}
}
}
.box-footer {
margin: 5px 10px;
margin: 0 10px 10px 10px;
padding: 0 15px 10px 15px;
font-size: $font-size-small;
button.btn {
@ -94,13 +94,18 @@
}
&.list {
margin: 10px 0 20px 0;
.box-content {
.box-content-row {
padding: 3px 10px;
padding: 10px;
text-decoration: none;
border-radius: $border-radius;
margin: 10px;
// background-color: $background-color;
@include themify($themes) {
color: themed("textColor");
background-color: themed("boxBackgroundColor");
}
&.padded {
@ -108,6 +113,14 @@
padding-bottom: 10px;
}
&.no-hover {
&:hover {
@include themify($themes) {
background-color: themed("boxBackgroundColor") !important;
}
}
}
&:hover,
&:focus,
&.active {
@ -155,6 +168,8 @@
display: flex;
padding-top: 10px;
padding-bottom: 10px;
margin: 10px;
border-radius: $border-radius;
}
}
}
@ -184,7 +199,6 @@
.box-section-divider {
border-top: 1px solid #000000;
padding-top: 10px;
@include themify($themes) {
border-color: themed("borderColor");
@ -196,19 +210,15 @@
padding: 10px 15px;
position: relative;
z-index: 1;
border-radius: $border-radius;
margin: 10px;
&:before {
content: "";
position: absolute;
right: 0;
bottom: 0;
height: 1px;
width: calc(100% - 10px);
border-bottom: 1px solid #000000;
@include themify($themes) {
background-color: themed("boxBackgroundColor");
}
@include themify($themes) {
border-bottom-color: themed("boxBorderColor");
}
&.no-bg {
background-color: rgba(0, 0, 0, 0) !important;
}
&:last-child {
@ -331,7 +341,7 @@
}
&.box-content-row-multi {
width: 100%;
width: calc(100% - 20px);
input:not([type="checkbox"]) {
width: 100%;
@ -455,6 +465,7 @@
width: 100%;
border: 1px solid #000000;
border-radius: $border-radius;
padding: 7px 4px;
@include themify($themes) {
border-color: themed("inputBorderColor");
@ -710,3 +721,19 @@
overflow: hidden;
text-overflow: ellipsis;
}
form {
.box {
.box-content {
.box-content-row {
&.no-hover {
&:hover {
@include themify($themes) {
background-color: themed("transparentColor") !important;
}
}
}
}
}
}
}

17
apps/browser/src/popup/scss/buttons.scss
View File

@ -65,7 +65,8 @@
&.block {
display: block;
width: 100%;
width: calc(100% - 20px);
margin: 0 auto;
}
&.link,
@ -89,8 +90,13 @@
button.box-content-row {
display: block;
width: 100%;
width: calc(100% - 20px);
text-align: left;
border-color: none;
@include themify($themes) {
background-color: themed("boxBackgroundColor");
}
}
button {
@ -98,3 +104,10 @@ button {
background: transparent;
color: inherit;
}
.login-buttons {
.btn.block {
width: 100%;
margin-bottom: 10px;
}
}

2
apps/browser/src/popup/scss/misc.scss
View File

@ -132,7 +132,7 @@ p.lead {
}
.img-rounded {
border-radius: 6px;
border-radius: $border-radius;
}
.sr-only {

53
apps/browser/src/popup/scss/pages.scss
View File

@ -11,8 +11,16 @@ app-sync {
app-generator .generated-block {
font-size: $font-size-large;
font-family: $font-family-monospace;
margin: 20px;
margin: 10px;
padding: 10px 10px 10px 0;
display: flex;
border-radius: $border-radius;
border: 1px solid;
@include themify($themes) {
background-color: transparent;
border-color: themed("borderColorAlt");
}
.generated-wrapper {
text-align: left;
@ -20,15 +28,30 @@ app-generator .generated-block {
min-width: 0;
white-space: pre-wrap;
word-break: break-all;
padding: 15px;
border-radius: $border-radius;
@include themify($themes) {
background-color: themed("backgroundColor");
}
}
.action-buttons {
display: flex;
align-self: center;
height: 100%;
margin-left: 10px;
button {
padding: 5px;
margin: -5px -5px 5px 5px;
padding: 6px;
margin: 2px;
border-radius: $border-radius;
&:hover {
@include themify($themes) {
background-color: themed("hoverColorTransparent");
}
}
}
}
}
@ -117,9 +140,31 @@ body.body-full {
}
.createAccountLink {
padding-top: 30px;
padding: 30px 10px 0 10px;
}
.login-buttons > button {
margin: 15px 0 15px 0;
}
app-options {
.box {
margin: 10px 0;
& + .box {
margin-top: 10px;
}
}
}
app-vault-view,
app-vault-add-edit,
app-generator {
.box {
margin: 15px 0 25px 0;
& + .box {
margin-top: 25px;
}
}
}

24
apps/browser/src/popup/scss/variables.scss
View File

@ -6,6 +6,8 @@ $font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-s
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
$font-size-base: 14px;
$font-size-large: 18px;
$font-size-xlarge: 22px;
$font-size-xxlarge: 28px;
$font-size-small: 12px;
$text-color: #000000;
$border-color: #f0f0f0;
@ -13,8 +15,9 @@ $border-color-dark: #ddd;
$list-item-hover: #fbfbfb;
$list-icon-color: #767679;
$disabled-box-opacity: 1;
$border-radius: 3px;
$border-radius: 6px;
$line-height-base: 1.42857143;
$icon-hover-color: lighten($text-color, 50%);
$gray: #555;
$gray-light: #777;
@ -32,6 +35,7 @@ $background-color: #f0f0f0;
$box-background-color: white;
$box-background-hover-color: $list-item-hover;
$box-border-color: $border-color;
$border-color-alt: #c3c5c7;
$button-border-color: darken($border-color-dark, 12%);
$button-background-color: white;
@ -59,8 +63,10 @@ $solarizedDarkGreen: #859900;
$themes: (
light: (
textColor: $text-color,
hoverColorTransparent: rgba($text-color, 0.15),
borderColor: $border-color-dark,
backgroundColor: $background-color,
borderColorAlt: $border-color-alt,
backgroundColorAlt: #ffffff,
scrollbarColor: rgba(100, 100, 100, 0.2),
scrollbarHoverColor: rgba(100, 100, 100, 0.4),
@ -107,11 +113,14 @@ $themes: (
calloutBackgroundColor: $box-background-color,
toastTextColor: #ffffff,
svgSuffix: "-light.svg",
transparentColor: rgba(0, 0, 0, 0),
),
dark: (
textColor: #ffffff,
hoverColorTransparent: rgba($text-color, 0.15),
borderColor: #161c26,
backgroundColor: #161c26,
borderColorAlt: #6e788a,
backgroundColorAlt: #2f343d,
scrollbarColor: #6e788a,
scrollbarHoverColor: #8d94a5,
@ -158,11 +167,14 @@ $themes: (
calloutBackgroundColor: #3c424e,
toastTextColor: #1f242e,
svgSuffix: "-dark.svg",
transparentColor: rgba(0, 0, 0, 0),
),
nord: (
textColor: $nord5,
hoverColorTransparent: rgba($text-color, 0.15),
borderColor: $nord0,
backgroundColor: $nord1,
borderColorAlt: $nord5,
backgroundColorAlt: $nord2,
scrollbarColor: $nord4,
scrollbarHoverColor: $nord6,
@ -209,16 +221,19 @@ $themes: (
calloutBackgroundColor: $nord2,
toastTextColor: #ffffff,
svgSuffix: "-dark.svg",
transparentColor: rgba(0, 0, 0, 0),
),
solarizedDark: (
textColor: $solarizedDarkBase2,
hoverColorTransparent: rgba($text-color, 0.15),
borderColor: $solarizedDarkBase03,
backgroundColor: $solarizedDarkBase03,
borderColorAlt: $solarizedDarkBase01,
backgroundColorAlt: $solarizedDarkBase02,
scrollbarColor: $solarizedDarkBase0,
scrollbarHoverColor: $solarizedDarkBase2,
boxBackgroundColor: $solarizedDarkBase03,
boxBackgroundHoverColor: $solarizedDarkBase02,
boxBackgroundColor: $solarizedDarkBase02,
boxBackgroundHoverColor: lighten($solarizedDarkBase02, 5%),
boxBorderColor: $solarizedDarkBase02,
tabBackgroundColor: $solarizedDarkBase02,
tabBackgroundHoverColor: $solarizedDarkBase01,
@ -230,7 +245,7 @@ $themes: (
headerInputBackgroundFocusColor: $solarizedDarkBase1,
headerInputColor: $solarizedDarkBase01,
headerInputPlaceholderColor: $solarizedDarkBase00,
listItemBackgroundHoverColor: $solarizedDarkBase02,
listItemBackgroundHoverColor: lighten($solarizedDarkBase02, 5%),
disabledIconColor: $solarizedDarkBase0,
disabledBoxOpacity: 0.5,
headingColor: $solarizedDarkBase0,
@ -260,6 +275,7 @@ $themes: (
calloutBackgroundColor: $solarizedDarkBase01,
toastTextColor: #ffffff,
svgSuffix: "-solarized.svg",
transparentColor: rgba(0, 0, 0, 0),
),
);

2
apps/browser/src/popup/vault/current-tab.component.html
View File

@ -41,7 +41,7 @@
{{ "typeLogins" | i18n }}
<span class="flex-right">{{ loginCiphers.length }}</span>
</h2>
<div class="box-content">
<div class="box-content no-hover">
<app-cipher-row
*ngFor="let loginCipher of loginCiphers"
[cipher]="loginCipher"