Signal/Desktop
1
0
Fork 0
mirror of https://github.com/signalapp/Signal-Desktop.git synced 2026-04-28 12:23:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

Spam Reporting UI changes

Browse Source
This commit is contained in:
Jamie Kyle
2024-03-12 09:29:31 -07:00
committed by GitHub
parent e031d136a1
commit 8387f938eb
88 changed files with 2711 additions and 807 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
stylesheets/components/SafetyTipsModal.scss Normal file
View File

@@ -0,0 +1,220 @@
// Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
$SafetyTipsModal__paddingInline: 32px;
$SafetyTipsModal__paddingBlock: 24px;
.SafetyTipsModal {
.module-Modal__headerTitle {
align-items: start;
}
.module-Modal__title {
padding-top: 20px;
@include font-title-1;
text-align: center;
}
.module-Modal__body {
padding-inline: 0;
}
.module-Modal__button-footer {
padding-block: $SafetyTipsModal__paddingBlock;
padding-inline: $SafetyTipsModal__paddingInline;
}
}
.SafetyTipsModal__width-container {
max-width: 420px;
width: 95%;
}
.SafetyTipsModal__Description {
margin: 0;
padding-inline: $SafetyTipsModal__paddingInline;
padding-bottom: 24px;
text-align: center;
@include font-body-1;
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
}
}
.SafetyTipsModal__Footer {
display: flex;
gap: 16px;
}
.SafetyTipsModal__Button {
flex: 1;
}
.SafetyTipsModal__Button--Previous {
&,
&:is(:disabled, [aria-disabled='true']) {
@include any-theme {
background: transparent;
}
@include light-theme {
color: $color-accent-blue;
}
@include dark-theme {
color: $color-white;
}
}
&:is(:disabled, [aria-disabled='true']) {
opacity: 0.5;
}
&:not(:disabled):not([aria-disabled='true']) {
&:hover,
&:focus {
@include light-theme {
background: $color-gray-15;
}
@include dark-theme {
background: $color-gray-65;
}
}
&:active {
@include light-theme {
background: $color-gray-20;
}
@include dark-theme {
background: $color-gray-60;
}
}
}
}
.SafetyTipsModal__CardWrapper {
display: flex;
flex-direction: row;
gap: $SafetyTipsModal__paddingInline;
overflow: hidden;
scroll-snap-type: x mandatory;
padding-inline: $SafetyTipsModal__paddingInline;
}
.SafetyTipsModal__Card {
width: 100%;
flex-shrink: 0;
scroll-snap-align: center;
padding-block: 14px 32px;
padding-inline: 12px;
border-radius: 18px;
text-align: center;
@include light-theme {
background: $color-gray-02;
}
@include dark-theme {
background: $color-gray-75;
}
}
.SafetyTipsModal__CardImage {
width: 100%;
height: auto;
vertical-align: top;
border-radius: 12px;
@include light-theme {
background: white;
}
@include dark-theme {
background: $color-gray-65;
}
}
.SafetyTipsModal__CardTitle {
margin-block: 14px 0;
@include font-title-2;
@include light-theme {
color: $color-gray-90;
}
@include dark-theme {
color: $color-gray-05;
}
}
.SafetyTipsModal__CardDescription {
margin-block: 8px 0;
@include font-body-1;
@include light-theme {
color: $color-gray-62;
}
@include dark-theme {
color: $color-gray-20;
}
}
.SafetyTipsModal__Dots {
display: flex;
justify-content: center;
padding-block: 24px 20px;
}
.SafetyTipsModal__DotsButton {
@include button-reset;
padding: 4px;
&::before {
content: '';
display: block;
width: 8px;
height: 8px;
border-radius: 9999px;
transition: background 100ms ease;
@include light-theme {
background: rgba($color-black, 30%);
}
@include dark-theme {
background: rgba($color-white, 30%);
}
}
&:not([aria-current]) {
&:hover,
&:focus {
&::before {
@include light-theme {
background: rgba($color-black, 45%);
}
@include dark-theme {
background: rgba($color-white, 45%);
}
}
}
}
&[aria-current]::before {
@include light-theme {
background: $color-black;
}
@include dark-theme {
background: $color-white;
}
}
&:focus {
@include keyboard-mode {
&::before {
box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-accent-blue;
}
}
@include dark-keyboard-mode {
&::before {
box-shadow: 0 0 0 2px $color-gray-80, 0 0 0 4px $color-accent-blue;
}
}
}
}
.SafetyTipsModal__DotsButtonLabel {
@include sr-only;
}