mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Change dark mode QR code screen to make scanning easier

Browse source
This commit is contained in:
Evan Hahn 2022-02-10 10:27:05 -06:00 committed by GitHub
parent bd9483ddee
commit af995c83b6
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);
}
}
} }
} }