Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[EC-641] Browser Ext UI Update #3842

Merged
merged 27 commits into from
Nov 1, 2022
Merged

[EC-641] Browser Ext UI Update #3842

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
cd8cc63
more css changes
DanHillesheim Oct 7, 2022
d57e909
add icon button hover
DanHillesheim Oct 19, 2022
fd1f0b6
Update apps/browser/src/popup/scss/box.scss
DanHillesheim Oct 20, 2022
1d42dbe
Update apps/desktop/src/scss/box.scss
DanHillesheim Oct 20, 2022
1259cd0
Merge branch 'master' into browser-ext-ui-update-test
DanHillesheim Oct 20, 2022
4d4b10f
feedback updates
DanHillesheim Oct 20, 2022
ad4eb68
Merge branch 'browser-ext-ui-update-test' of https://github.com/bitwa…
DanHillesheim Oct 20, 2022
623240e
restore desktop pseudo rule
DanHillesheim Oct 24, 2022
f645129
Merge branch 'master' into browser-ext-ui-update-test
DanHillesheim Oct 24, 2022
e271198
Merge branch 'master' into browser-ext-ui-update-test
DanHillesheim Oct 26, 2022
b5c7a10
update to include some variable fixes and deletions
DanHillesheim Oct 26, 2022
4004219
Merge branch 'master' into browser-ext-ui-update-test
DanHillesheim Oct 26, 2022
be1b412
updates per oscar
DanHillesheim Oct 27, 2022
3a3b667
Merge branch 'master' into browser-ext-ui-update-test
DanHillesheim Oct 27, 2022
31bf01f
feedback updates
DanHillesheim Oct 27, 2022
51615c5
Merge branch 'master' into browser-ext-ui-update-test
DanHillesheim Oct 27, 2022
8bd18f5
changes per product design
DanHillesheim Oct 28, 2022
fbc3adc
Merge branch 'master' into browser-ext-ui-update-test
DanHillesheim Oct 28, 2022
0aa4103
add more helper text space below for visual separation
DanHillesheim Oct 28, 2022
de15d9b
group new variable
DanHillesheim Oct 28, 2022
246768c
login page button fix
DanHillesheim Oct 28, 2022
b800710
Merge branch 'master' into browser-ext-ui-update-test
DanHillesheim Oct 31, 2022
ae661aa
Revert "Merge branch 'master' into browser-ext-ui-update-test"
DanHillesheim Oct 31, 2022
8f2ae2b
fix button height
DanHillesheim Oct 31, 2022
a0ef655
Merge branch 'master' into browser-ext-ui-update-test
kspearrin Nov 1, 2022
46eafaa
revert file changes
kspearrin Nov 1, 2022
03c95b5
test adjustments
kspearrin Nov 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/browser/src/popup/components/set-pin.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
13 changes: 10 additions & 3 deletions apps/browser/src/popup/scss/base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -289,6 +289,10 @@ header {
}
}

.no-bg {
background-color: transparent;
}

.content {
padding: 15px;
}
Expand Down Expand Up @@ -482,11 +486,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 {
Expand Down
72 changes: 50 additions & 22 deletions apps/browser/src/popup/scss/box.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
.box {
position: relative;
width: 100%;
margin: 10px 0;
margin: 10px 0 20px 0;

&.first {
margin-top: 0;
Expand All @@ -20,13 +20,14 @@
}

.box-header-expandable {
padding: 0 10px;
margin-bottom: 5px;
padding: 10px;
margin: 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");
Expand All @@ -52,11 +53,8 @@
}

.box-content {
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we removed the borders from the boxes, Solarize Dark theme seems to need adjustments as there is nothing visually separating the rows.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I addressed the issue for the most part. I think there's a little more cleanup to do possibly.

Copy link
Member

@danielleflinn danielleflinn Oct 20, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Only bit of feedback is we should probably add a new lighter variable for the hover color so that the hover state is retained.

Edit: actually hover state in settings looks good; however it isn't showing up on the main Tab or Vault pages or 'password history' in Generator


@include themify($themes) {
background-color: themed("boxBackgroundColor");
background-color: themed("backgroundColor");
DanHillesheim marked this conversation as resolved.
Show resolved Hide resolved
border-color: themed("borderColor");
}

Expand All @@ -74,7 +72,9 @@
.box-content-row.no-hover {
&:hover,
&:focus {
background-color: initial !important;
@include themify($themes) {
background-color: themed("boxBackgroundColor") !important;
}
}
}
}
Expand All @@ -91,18 +91,30 @@
&.list {
.box-content {
.box-content-row {
padding: 3px 10px;
padding: 10px;
text-decoration: none;
border-radius: $border-radius;
margin: 10px;
// background-color: $background-color;
Hinton marked this conversation as resolved.
Show resolved Hide resolved

@include themify($themes) {
color: themed("textColor");
background-color: themed("boxBackgroundColor");
}

&.padded {
padding-top: 10px;
padding-bottom: 10px;
}

&.no-hover {
&:hover {
@include themify($themes) {
background-color: themed("boxBackgroundColor") !important;
}
}
}

&:hover,
&:focus,
&.active {
Expand Down Expand Up @@ -150,6 +162,8 @@
display: flex;
padding-top: 10px;
padding-bottom: 10px;
margin: 10px;
border-radius: $border-radius;
}
}
}
Expand Down Expand Up @@ -191,19 +205,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 {
Expand Down Expand Up @@ -326,7 +336,7 @@
}

&.box-content-row-multi {
width: 100%;
width: calc(100% - 20px);

input:not([type="checkbox"]) {
width: 100%;
Expand Down Expand Up @@ -450,8 +460,10 @@
width: 100%;
border: 1px solid #000000;
border-radius: $border-radius;
padding: 7px 4px;

@include themify($themes) {
background-color: themed("selectBoxBackgroundColor");
border-color: themed("inputBorderColor");
}
}
Expand Down Expand Up @@ -705,3 +717,19 @@
overflow: hidden;
text-overflow: ellipsis;
}

form {
.box {
.box-content {
.box-content-row {
&.no-hover {
&:hover {
@include themify($themes) {
background-color: themed("transparentColor") !important;
}
}
}
}
}
}
}
7 changes: 6 additions & 1 deletion apps/browser/src/popup/scss/buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,8 +89,13 @@

button.box-content-row {
display: block;
width: 100%;
width: calc(100% - 20px);
text-align: left;

@include themify($themes) {
background-color: themed("boxBackgroundColor");
DanHillesheim marked this conversation as resolved.
Show resolved Hide resolved
border-color: none;
Hinton marked this conversation as resolved.
Show resolved Hide resolved
}
}

button {
Expand Down
2 changes: 1 addition & 1 deletion apps/browser/src/popup/scss/misc.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ p.lead {
}

.img-rounded {
border-radius: 6px;
border-radius: $border-radius;
}

.sr-only {
Expand Down
30 changes: 27 additions & 3 deletions apps/browser/src/popup/scss/pages.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,48 @@ 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;

@include themify($themes) {
background-color: transparent;
}

.generated-wrapper {
DanHillesheim marked this conversation as resolved.
Show resolved Hide resolved
text-align: left;
width: 100%;
min-width: 0;
white-space: pre-wrap;
word-break: break-all;
padding: 15px;
border-color: $background-color;
border-radius: $border-radius;
border: 1px solid;

@include themify($themes) {
background-color: themed("backgroundColor");
border-color: themed("genBorderColor");
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems really odd to me that we have some separate defined variable for this one use case.

}
}

.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");
DanHillesheim marked this conversation as resolved.
Show resolved Hide resolved
}
}
}
}
}
Expand Down
27 changes: 24 additions & 3 deletions apps/browser/src/popup/scss/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,18 @@ $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;
$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;
Expand All @@ -29,6 +32,8 @@ $brand-primary-accent: #1252a3;

$background-color: #f0f0f0;

$border-color-alt: #c3c5c7;

$box-background-color: white;
$box-background-hover-color: $list-item-hover;
$box-border-color: $border-color;
Expand Down Expand Up @@ -59,14 +64,17 @@ $solarizedDarkGreen: #859900;
$themes: (
light: (
textColor: $text-color,
hoverColorTransparent: rgba($text-color, 0.15),
borderColor: $border-color-dark,
backgroundColor: $background-color,
genBorderColor: $border-color-alt,
backgroundColorAlt: #ffffff,
scrollbarColor: rgba(100, 100, 100, 0.2),
scrollbarHoverColor: rgba(100, 100, 100, 0.4),
boxBackgroundColor: $box-background-color,
boxBackgroundHoverColor: $box-background-hover-color,
boxBorderColor: $box-border-color,
selectBoxBackgroundColor: $box-border-color,
tabBackgroundColor: #ffffff,
tabBackgroundHoverColor: $list-item-hover,
headerColor: #ffffff,
Expand Down Expand Up @@ -107,17 +115,21 @@ $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,
genBorderColor: #4c525f,
backgroundColorAlt: #2f343d,
scrollbarColor: #6e788a,
scrollbarHoverColor: #8d94a5,
boxBackgroundColor: #2f343d,
boxBackgroundHoverColor: #3c424e,
boxBorderColor: #4c525f,
selectBoxBackgroundColor: #4c525f,
tabBackgroundColor: #2f343d,
tabBackgroundHoverColor: #3c424e,
headerColor: #ffffff,
Expand Down Expand Up @@ -158,17 +170,21 @@ $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,
genBorderColor: $nord3,
backgroundColorAlt: $nord2,
scrollbarColor: $nord4,
scrollbarHoverColor: $nord6,
boxBackgroundColor: $nord2,
boxBackgroundHoverColor: $nord3,
boxBorderColor: $nord1,
selectBoxBackgroundColor: $nord1,
tabBackgroundColor: $nord1,
tabBackgroundHoverColor: $nord2,
headerColor: $nord5,
Expand Down Expand Up @@ -209,17 +225,21 @@ $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,
genBorderColor: $solarizedDarkBase01,
backgroundColorAlt: $solarizedDarkBase02,
scrollbarColor: $solarizedDarkBase0,
scrollbarHoverColor: $solarizedDarkBase2,
boxBackgroundColor: $solarizedDarkBase03,
boxBackgroundHoverColor: $solarizedDarkBase02,
boxBackgroundColor: $solarizedDarkBase02,
boxBackgroundHoverColor: lighten($solarizedDarkBase02, 5%),
boxBorderColor: $solarizedDarkBase02,
selectBoxBackgroundColor: $solarizedDarkBase02,
tabBackgroundColor: $solarizedDarkBase02,
tabBackgroundHoverColor: $solarizedDarkBase01,
headerColor: $solarizedDarkBase1,
Expand Down Expand Up @@ -260,6 +280,7 @@ $themes: (
calloutBackgroundColor: $solarizedDarkBase01,
toastTextColor: #ffffff,
svgSuffix: "-solarized.svg",
transparentColor: rgba(0, 0, 0, 0),
),
);

Expand Down
Loading