jonny
/
Signal-Desktop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change dark mode QR code screen to make scanning easier 

Co-authored-by: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com>
This commit is contained in:
automated-signal 2022-02-10 09:44:58 -08:00 committed by GitHub
parent 437feab887
commit bbe4ef8673
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
stylesheets/components/InstallScreenQrCodeNotScannedStep.scss
View File

@ -5,21 +5,26 @@
@include install-screen; @include install-screen;
&__contents { &__contents {
$base-max-width: 760px;
align-items: center; align-items: center;
background: $color-white;
border-radius: 8px; border-radius: 8px;
color: $color-black;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
max-width: 760px;
padding: 22px;
margin: 20px;
animation: 500ms module-InstallScreenQrCodeNotScannedStep__slide-in; animation: 500ms module-InstallScreenQrCodeNotScannedStep__slide-in;
position: relative; position: relative;
@include light-theme { @include light-theme {
background: $color-white; max-width: $base-max-width;
padding: 22px;
} }
@include dark-theme { @include dark-theme {
background: $color-gray-80; max-width: $base-max-width + 44px;
padding: 44px;
margin-top: 44px; // Avoids overlap with the Signal logo
} }
} }
@ -43,16 +48,9 @@
&--load-failed { &--load-failed {
@include font-subtitle; @include font-subtitle;
border-color: $color-gray-05;
border-radius: 4px; border-radius: 4px;
color: $color-gray-60;
@include light-theme {
color: $color-gray-60;
border-color: $color-gray-05;
}
@include dark-theme {
color: $color-gray-25;
border-color: $color-gray-60;
}
} }
&__code { &__code {
@ -91,6 +89,11 @@
padding-inline-start: 0; padding-inline-start: 0;
} }
a {
// We want the right link color in dark mode. This is a no-op in light mode.
color: $color-ultramarine;
}
&__android-plus { &__android-plus {
background: $color-gray-25; background: $color-gray-25;
border-radius: 100%; border-radius: 100%;
@ -99,23 +102,12 @@
vertical-align: middle; vertical-align: middle;
&::before { &::before {
@include color-svg('../images/icons/v2/plus-24.svg', $color-white);
content: ''; content: '';
display: block; display: block;
height: 12px; height: 12px;
width: 12px; width: 12px;
} }
@include light-theme {
&::before {
@include color-svg('../images/icons/v2/plus-24.svg', $color-white);
}
}
@include dark-theme {
&::before {
@include color-svg('../images/icons/v2/plus-24.svg', $color-gray-80);
}
}
} }
} }