mirror of
https://github.com/signalapp/Signal-Desktop.git
synced 2026-04-18 23:49:20 +01:00
Move Profile Editor into the new Settings Tab
This commit is contained in:
Scott Nonnenberg
GitHub
368
stylesheets/components/UsernameLinkEditor.scss
Normal file
368
stylesheets/components/UsernameLinkEditor.scss
Normal file
@@ -0,0 +1,368 @@
|
||||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
@use '../mixins';
|
||||
@use '../variables';
|
||||
|
||||
.UsernameLinkEditor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__card {
|
||||
--bg-color: #506ecd;
|
||||
--fg-color: #2449c0;
|
||||
--text-color: #ffffff;
|
||||
|
||||
padding-block: 22px;
|
||||
padding-inline: 28px;
|
||||
margin-block-start: 8px;
|
||||
background: var(--bg-color);
|
||||
border-radius: 18px;
|
||||
max-width: 204px;
|
||||
|
||||
&--shadow {
|
||||
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
&__qr {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
padding: 10px;
|
||||
background-color: variables.$color-white;
|
||||
border-radius: 8px;
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
|
||||
.UsernameLinkEditor__card--shadow & {
|
||||
outline: 2px solid variables.$color-gray-05;
|
||||
}
|
||||
|
||||
&__spinner__arc {
|
||||
background-color: var(--fg-color);
|
||||
}
|
||||
|
||||
&__blotches {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__error-icon {
|
||||
-webkit-mask-size: 100%;
|
||||
display: block;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
|
||||
@include mixins.color-svg(
|
||||
'../images/icons/v3/error/error-circle.svg',
|
||||
variables.$color-gray-25
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&__username {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-block: 12px 2px;
|
||||
|
||||
&__text {
|
||||
color: var(--text-color);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
letter-spacing: -0.252px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__copy__button {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 4px;
|
||||
|
||||
i {
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
@include mixins.color-svg(
|
||||
'../images/icons/v3/copy/copy.svg',
|
||||
var(--text-color)
|
||||
);
|
||||
}
|
||||
|
||||
& {
|
||||
@include mixins.button-reset;
|
||||
@include mixins.button-focus-outline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-block-start: 16px;
|
||||
|
||||
&__save,
|
||||
&__color {
|
||||
@include mixins.button-reset;
|
||||
@include mixins.button-focus-outline;
|
||||
& {
|
||||
@include mixins.font-caption;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
min-width: 68px;
|
||||
border-radius: 8px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
@include mixins.light-theme() {
|
||||
background-color: variables.$color-gray-05;
|
||||
color: variables.$color-black;
|
||||
}
|
||||
|
||||
@include mixins.dark-theme() {
|
||||
background-color: variables.$color-gray-75;
|
||||
color: variables.$color-gray-02;
|
||||
}
|
||||
|
||||
i {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-block-start: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&__save i {
|
||||
@include mixins.light-theme() {
|
||||
@include mixins.color-svg(
|
||||
'../images/icons/v3/save/save.svg',
|
||||
variables.$color-black
|
||||
);
|
||||
}
|
||||
|
||||
@include mixins.dark-theme() {
|
||||
@include mixins.color-svg(
|
||||
'../images/icons/v3/save/save.svg',
|
||||
variables.$color-gray-02
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&__color i {
|
||||
@include mixins.light-theme() {
|
||||
@include mixins.color-svg(
|
||||
'../images/icons/v3/color/color.svg',
|
||||
variables.$color-black
|
||||
);
|
||||
}
|
||||
|
||||
@include mixins.dark-theme() {
|
||||
@include mixins.color-svg(
|
||||
'../images/icons/v3/color/color.svg',
|
||||
variables.$color-gray-02
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
|
||||
padding-block: 12px;
|
||||
padding-inline: 16px;
|
||||
border-radius: 12px;
|
||||
margin-block-start: 20px;
|
||||
width: 100%;
|
||||
@include mixins.light-theme() {
|
||||
border: 2px solid variables.$color-gray-05;
|
||||
}
|
||||
@include mixins.dark-theme() {
|
||||
border: 2px solid variables.$color-gray-75;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
@include mixins.button-reset;
|
||||
@include mixins.button-focus-outline;
|
||||
& {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex-shrink: 0;
|
||||
|
||||
@include mixins.light-theme() {
|
||||
@include mixins.color-svg(
|
||||
'../images/icons/v3/copy/copy.svg',
|
||||
variables.$color-black
|
||||
);
|
||||
}
|
||||
|
||||
@include mixins.dark-theme() {
|
||||
@include mixins.color-svg(
|
||||
'../images/icons/v3/copy/copy.svg',
|
||||
variables.$color-gray-02
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled:after {
|
||||
@include mixins.light-theme() {
|
||||
background-color: variables.$color-gray-45;
|
||||
}
|
||||
|
||||
@include mixins.dark-theme() {
|
||||
background-color: variables.$color-gray-25;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
word-break: break-all;
|
||||
user-select: text;
|
||||
|
||||
&--resetting {
|
||||
@include mixins.light-theme() {
|
||||
color: variables.$color-gray-45;
|
||||
}
|
||||
|
||||
@include mixins.dark-theme() {
|
||||
color: variables.$color-gray-25;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__help {
|
||||
@include mixins.font-subtitle;
|
||||
|
||||
margin-block-start: 16px;
|
||||
text-align: center;
|
||||
|
||||
@include mixins.light-theme() {
|
||||
color: variables.$color-gray-60;
|
||||
}
|
||||
@include mixins.dark-theme() {
|
||||
color: variables.$color-gray-25;
|
||||
}
|
||||
}
|
||||
|
||||
&__reset {
|
||||
@include mixins.button-reset;
|
||||
@include mixins.button-focus-outline;
|
||||
& {
|
||||
@include mixins.font-body-1-bold;
|
||||
|
||||
margin-block: 12px 16px;
|
||||
}
|
||||
|
||||
@include mixins.light-theme() {
|
||||
color: variables.$color-ultramarine;
|
||||
}
|
||||
|
||||
@include mixins.dark-theme() {
|
||||
color: variables.$color-ultramarine-light;
|
||||
}
|
||||
}
|
||||
|
||||
&__button-footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding-block: 1em 16px;
|
||||
gap: 8px;
|
||||
|
||||
.module-Button:not(:first-child) {
|
||||
margin-inline-start: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&__done {
|
||||
width: 100%;
|
||||
margin-block-end: 8px;
|
||||
}
|
||||
|
||||
&__colors {
|
||||
&__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 18px 20px;
|
||||
|
||||
margin-block: 24px 30px;
|
||||
}
|
||||
|
||||
&__radio {
|
||||
@include mixins.button-reset;
|
||||
@include mixins.button-focus-outline;
|
||||
|
||||
& {
|
||||
display: flex;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
&[aria-pressed='true'] {
|
||||
padding: 3px;
|
||||
@include mixins.light-theme() {
|
||||
border: 2px solid variables.$color-black;
|
||||
}
|
||||
@include mixins.dark-theme() {
|
||||
border: 2px solid variables.$color-ultramarine;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 24px;
|
||||
border: 2px solid var(--fg-color);
|
||||
background: var(--bg-color);
|
||||
}
|
||||
|
||||
&--white-bg {
|
||||
i {
|
||||
@include mixins.light-theme() {
|
||||
border-color: variables.$color-gray-15;
|
||||
}
|
||||
@include mixins.dark-theme() {
|
||||
border-color: variables.$color-gray-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user