signal-desktop/stylesheets/components/ProfileEditor.scss

351 lines
7.2 KiB
SCSS
Raw Normal View History

2023-01-03 19:55:46 +00:00
// Copyright 2021 Signal Messenger, LLC
2021-07-19 19:26:06 +00:00
// SPDX-License-Identifier: AGPL-3.0-only
.ProfileEditor {
&__icon {
&--container {
align-items: center;
display: flex;
font-size: 24px;
justify-content: center;
2024-02-06 18:35:59 +00:00
width: 20px;
height: 20px;
2021-07-19 19:26:06 +00:00
}
&::after {
-webkit-mask-size: 100%;
content: '';
display: block;
2024-02-06 18:35:59 +00:00
height: 20px;
width: 20px;
2021-07-19 19:26:06 +00:00
@include light-theme {
background-color: $color-gray-75;
}
@include dark-theme {
background-color: $color-gray-15;
}
}
&--name {
&::after {
2023-05-04 18:04:22 +00:00
@include light-theme {
@include color-svg(
'../images/icons/v3/person/person.svg',
$color-gray-75
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/person/person.svg',
$color-gray-15
);
}
2021-07-19 19:26:06 +00:00
}
}
&--username {
&::after {
2023-05-04 18:04:22 +00:00
@include light-theme {
@include color-svg('../images/icons/v3/at/at.svg', $color-gray-75);
}
@include dark-theme {
@include color-svg('../images/icons/v3/at/at.svg', $color-gray-15);
}
}
}
2023-07-20 03:14:08 +00:00
&--username-link {
&::after {
@include light-theme {
@include color-svg(
'../images/icons/v3/qr_code/qr_code.svg',
$color-gray-75
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/qr_code/qr_code.svg',
$color-gray-15
);
}
}
}
2021-07-19 19:26:06 +00:00
&--bio {
&::after {
2023-05-04 18:04:22 +00:00
@include light-theme {
@include color-svg(
2023-05-05 16:23:43 +00:00
'../images/icons/v3/edit/edit.svg',
2023-05-04 18:04:22 +00:00
$color-gray-75
);
}
@include dark-theme {
@include color-svg(
2023-05-05 16:23:43 +00:00
'../images/icons/v3/edit/edit.svg',
2023-05-04 18:04:22 +00:00
$color-gray-15
);
}
2021-07-19 19:26:06 +00:00
}
}
}
&__row {
2024-02-06 18:35:59 +00:00
padding-inline: 8px;
padding-block: 12px;
2021-07-19 19:26:06 +00:00
}
&__divider {
border-style: solid;
2021-08-06 21:35:25 +00:00
border-bottom: none;
@include light-theme {
border-color: $color-gray-15;
}
@include dark-theme {
border-color: $color-gray-75;
}
2021-07-19 19:26:06 +00:00
}
2024-02-06 18:35:59 +00:00
hr {
margin-block: 24px 12px;
}
2021-07-19 19:26:06 +00:00
&__info {
@include font-body-2;
2024-02-06 18:35:59 +00:00
margin-block: 12px;
margin-inline: 8px;
2021-08-06 21:35:25 +00:00
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
}
a {
2021-11-20 15:41:32 +00:00
font-weight: 600;
2021-08-06 21:35:25 +00:00
text-decoration: none;
}
2022-10-18 17:12:02 +00:00
}
&__username-menu {
&__button {
width: 20px;
height: 20px;
@include dark-theme {
@include color-svg(
2023-05-04 18:04:22 +00:00
'../images/icons/v3/chevron/chevron-down.svg',
2022-10-18 17:12:02 +00:00
$color-white
);
}
@include light-theme {
@include color-svg(
2023-05-04 18:04:22 +00:00
'../images/icons/v3/chevron/chevron-down.svg',
2022-10-18 17:12:02 +00:00
$color-black
);
}
}
&__copy-icon {
@include dark-theme {
2023-05-04 18:04:22 +00:00
@include color-svg('../images/icons/v3/copy/copy.svg', $color-white);
2022-10-18 17:12:02 +00:00
}
@include light-theme {
2023-05-04 18:04:22 +00:00
@include color-svg('../images/icons/v3/copy/copy.svg', $color-black);
2022-10-18 17:12:02 +00:00
}
}
&__copy-link-icon {
@include dark-theme {
2023-05-04 18:04:22 +00:00
@include color-svg('../images/icons/v3/link/link.svg', $color-white);
2022-10-18 17:12:02 +00:00
}
@include light-theme {
2023-05-04 18:04:22 +00:00
@include color-svg('../images/icons/v3/link/link.svg', $color-black);
2022-10-18 17:12:02 +00:00
}
}
2021-11-12 01:17:29 +00:00
2022-10-18 17:12:02 +00:00
&__trash-icon {
@include dark-theme {
2023-05-04 18:04:22 +00:00
@include color-svg('../images/icons/v3/trash/trash.svg', $color-white);
2022-10-18 17:12:02 +00:00
}
@include light-theme {
2023-05-04 18:04:22 +00:00
@include color-svg('../images/icons/v3/trash/trash.svg', $color-black);
2022-10-18 17:12:02 +00:00
}
2021-11-12 01:17:29 +00:00
}
2021-07-19 19:26:06 +00:00
}
2023-07-20 03:14:08 +00:00
&__error-icon {
-webkit-mask-size: 100%;
display: block;
2024-02-06 18:35:59 +00:00
height: 20px;
width: 20px;
@include light-theme {
@include color-svg(
'../images/icons/v3/error/error-circle.svg',
$color-accent-red
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/error/error-circle.svg',
$color-accent-red
);
}
}
2023-07-20 03:14:08 +00:00
&__username-link {
&__tooltip {
padding: 0;
background-color: unset;
--container-padding: 12px;
2023-07-20 03:14:08 +00:00
&__container {
display: flex;
flex-direction: row;
padding: var(--container-padding);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
border: 1px solid $color-gray-20;
border-radius: inherit;
background-color: $color-gray-02;
transform-origin: 0 0; // needed for react-spring scale animation
@include dark-theme {
background-color: $color-gray-75;
border-color: $color-gray-60;
}
2023-07-20 03:14:08 +00:00
}
--direction-multiplier: 1;
&:dir(rtl) {
--direction-multiplier: -1;
}
&__arrow {
position: absolute;
// stylelint-disable-next-line declaration-property-value-disallowed-list
transform: translateY(calc(-50% - var(--container-padding)))
translateX(
calc(
var(--direction-multiplier) * (20px - var(--container-padding))
)
)
rotate(45deg);
width: 14px;
height: 14px;
clip-path: polygon(0 100%, 0 0, 100% 0);
border: inherit;
background: inherit;
}
2023-07-20 03:14:08 +00:00
&__icon {
2024-02-06 18:35:59 +00:00
width: 20px;
height: 20px;
2023-07-20 03:14:08 +00:00
margin-block-start: 4px;
margin-inline: 4px 12px;
@include dark-theme {
@include color-svg(
'../images/icons/v3/share/share.svg',
$color-white
);
}
@include light-theme {
@include color-svg(
'../images/icons/v3/share/share.svg',
$color-black
);
}
}
&__content {
text-align: start;
h3 {
@include font-body-2-bold;
margin: 0;
}
p {
@include font-subtitle;
2023-07-20 03:14:08 +00:00
max-width: 240px;
margin: 0;
}
}
&__close {
@include button-reset;
@include button-focus-outline;
width: 20px;
height: 20px;
padding: 0;
margin: 0;
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-45);
@include dark-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-25);
}
2023-07-20 03:14:08 +00:00
}
}
}
2021-07-19 19:26:06 +00:00
}
.ProfileEditor__Title {
@include font-title-1;
text-align: center;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-block: 0 4px;
margin-inline: 0;
@include light-theme() {
color: $color-gray-90;
}
@include dark-theme() {
color: $color-gray-05;
}
}
.ProfileEditor__PhoneNumber {
@include font-body-2;
text-align: center;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-block: 0 14px;
margin-inline: 0;
@include light-theme() {
color: $color-black;
}
@include dark-theme() {
color: $color-white;
}
}
2024-02-06 18:35:59 +00:00
.ProfileEditor__EditPhotoContainer {
display: flex;
justify-content: center;
margin-block-end: 16px;
}
.ProfileEditor__EditPhoto {
@include font-subtitle;
padding-block: 5px;
padding-inline: 10px;
border-radius: 14px;
font-weight: 600;
}