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

Some other minor UI fixes

Browse source
This commit is contained in:
Fedor Indutny 2023-05-05 09:23:43 -07:00 committed by Josh Perez
parent 80d37e2df1
commit 863a441dd4
16 changed files with 92 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
images/icons/v3/album/album-tilt.svg Normal file
View file

@ -0,0 +1 @@
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 9.896a1.25 1.25 0 1 1 2.5 0 1.25 1.25 0 0 1-2.5 0Z" fill="#000"/><path d="m15.623 5.263.09.677c.266.003.504.011.715.028.392.032.756.101 1.099.276.53.27.96.7 1.229 1.23.175.342.244.706.276 1.098.03.378.03.84.03 1.398v3.81c0 .558 0 1.02-.03 1.398-.032.392-.101.756-.276 1.099-.27.529-.7.96-1.23 1.229-.342.175-.706.244-1.098.276-.378.03-.84.03-1.398.03H8.303c-.557 0-1.02 0-1.397-.03-.393-.032-.757-.101-1.1-.276-.529-.27-.959-.7-1.229-1.23-.174-.342-.243-.706-.275-1.098-.023-.282-.03-.61-.03-.99a2.585 2.585 0 0 1-.862-.136 2.812 2.812 0 0 1-1.38-1.058c-.217-.317-.333-.67-.416-1.054-.08-.37-.14-.829-.213-1.382L.958 7.194a18.553 18.553 0 0 1-.152-1.39c-.02-.393.002-.763.13-1.126A2.813 2.813 0 0 1 1.994 3.3c.317-.218.669-.333 1.054-.416.37-.08.829-.14 1.382-.213l6.669-.878c.553-.073 1.011-.134 1.39-.152.393-.02.763.001 1.125.13.56.198 1.043.568 1.38 1.058.217.317.333.669.416 1.053.08.37.14.83.213 1.382ZM4.271 12.73V9.97c0-.558 0-1.02.03-1.398.033-.392.102-.756.276-1.099.27-.53.7-.96 1.23-1.229.342-.175.706-.244 1.099-.276.377-.03.84-.03 1.397-.03h5.938l-.06-.455c-.077-.59-.13-.99-.196-1.294-.064-.297-.128-.44-.194-.535a1.354 1.354 0 0 0-.664-.51c-.108-.038-.264-.063-.566-.048-.312.016-.711.068-1.302.145l-6.61.87c-.59.078-.989.131-1.294.197-.296.064-.44.128-.535.193a1.354 1.354 0 0 0-.51.664c-.038.11-.062.264-.047.567.015.312.067.711.145 1.301l.435 3.305c.078.59.13.99.196 1.295.064.296.128.44.194.535.162.235.394.414.664.51.083.028.192.05.374.051Zm13.186-4.594a1.355 1.355 0 0 0-.592-.592c-.103-.052-.254-.097-.556-.121-.31-.026-.714-.026-1.309-.026H8.333c-.595 0-.998 0-1.309.026-.302.024-.453.069-.555.121-.255.13-.462.337-.592.592-.053.103-.097.254-.122.556-.025.31-.026.714-.026 1.309v3.75c0 .286 0 .528.003.736l1.619-1.618a1.979 1.979 0 0 1 2.798 0l.684.684 2.35-2.35a1.98 1.98 0 0 1 2.8 0l1.621 1.62V10c0-.595 0-.998-.026-1.309-.024-.302-.069-.453-.121-.556Zm-2.505 4.098a.52.52 0 0 0-.737 0L11.349 15.1a.73.73 0 0 1-1.031 0l-1.2-1.2a.52.52 0 0 0-.736 0L6.23 16.052c.073.06.153.112.239.155.102.053.253.098.555.122.311.026.714.026 1.31.026H15c.595 0 .998 0 1.309-.026.302-.024.453-.069.556-.122.255-.13.462-.336.592-.591.052-.103.096-.254.121-.556.005-.06.009-.121.012-.188l-2.638-2.638Z" fill="#000"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 2.3 KiB

1
images/icons/v3/album/album.svg
View file

@ -1 +0,0 @@
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 9.896a1.25 1.25 0 1 1 2.5 0 1.25 1.25 0 0 1-2.5 0Z" fill="#000"/><path d="M15.729 5.94c0-.435-.005-.805-.03-1.118-.033-.392-.102-.756-.276-1.099a2.81 2.81 0 0 0-1.23-1.229c-.342-.175-.706-.244-1.099-.276-.377-.03-.84-.03-1.397-.03H4.97c-.558 0-1.02 0-1.398.03-.392.032-.756.101-1.099.276-.529.27-.96.7-1.229 1.23-.175.342-.244.706-.276 1.098-.03.378-.03.84-.03 1.398v3.393c0 .558 0 1.02.03 1.398.032.393.101.756.276 1.1.27.528.7.959 1.23 1.228.342.175.706.244 1.098.276.207.017.44.024.699.028v.137c0 .558 0 1.02.03 1.398.033.392.102.756.276 1.099.27.53.7.96 1.23 1.229.342.175.706.244 1.099.276.377.03.84.03 1.397.03h6.727c.558 0 1.02 0 1.398-.03.392-.032.756-.101 1.099-.276.53-.27.96-.7 1.229-1.23.175-.342.244-.706.276-1.098.03-.378.03-.84.03-1.398V9.97c0-.558 0-1.02-.03-1.398-.032-.392-.101-.756-.276-1.099a2.81 2.81 0 0 0-1.23-1.229c-.342-.175-.706-.244-1.098-.276-.207-.017-.44-.024-.699-.028Zm-1.458-.003H8.303c-.558 0-1.02 0-1.397.031-.393.032-.757.101-1.1.276-.529.27-.959.7-1.229 1.23-.174.342-.243.706-.275 1.098-.031.378-.031.84-.031 1.398v2.214a8.658 8.658 0 0 1-.58-.022c-.302-.025-.453-.07-.556-.122a1.354 1.354 0 0 1-.592-.592c-.052-.103-.097-.253-.121-.556-.026-.31-.026-.713-.026-1.309V6.25c0-.595 0-.998.026-1.309.024-.302.069-.453.121-.556.13-.255.337-.462.592-.592.103-.052.254-.097.556-.121.31-.026.714-.026 1.309-.026h6.667c.595 0 .998 0 1.309.026.302.024.452.069.555.121.255.13.462.337.592.592.053.103.097.254.122.556.02.253.025.567.026.997Zm3.186 2.198c.052.103.096.254.121.556.026.31.026.714.026 1.309v2.823l-1.621-1.621a1.98 1.98 0 0 0-2.8 0l-2.35 2.35-.684-.684a1.98 1.98 0 0 0-2.798 0l-1.619 1.618c-.003-.208-.003-.45-.003-.736V10c0-.595 0-.998.026-1.309.025-.302.07-.453.122-.556.13-.255.337-.462.592-.592.102-.052.253-.096.555-.121.311-.026.714-.026 1.31-.026H15c.595 0 .998 0 1.309.026.302.025.453.069.556.121.255.13.462.337.592.592Zm-2.505 4.098 2.638 2.638a5.442 5.442 0 0 1-.012.188c-.024.302-.069.453-.121.556-.13.255-.337.462-.592.592-.103.052-.254.096-.556.121-.31.026-.714.026-1.309.026H8.333c-.595 0-.998 0-1.309-.026-.302-.024-.453-.069-.555-.121a1.36 1.36 0 0 1-.24-.156L8.383 13.9a.52.52 0 0 1 .736 0l1.2 1.199a.73.73 0 0 0 1.03 0l2.867-2.866a.52.52 0 0 1 .737 0Z" fill="#000"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 2.3 KiB

1
images/icons/v3/color/color.svg Normal file
View file

@ -0,0 +1 @@
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#color__a)" fill="#000"><path d="M5 12.917a1.25 1.25 0 1 1 2.5 0 1.25 1.25 0 0 1-2.5 0Zm9.688-5.208a1.25 1.25 0 1 0 0 2.499 1.25 1.25 0 0 0 0-2.5ZM4.063 8.958a1.25 1.25 0 1 1 2.499 0 1.25 1.25 0 0 1-2.499 0Zm8.02-4.478a1.25 1.25 0 1 0 0 2.498 1.25 1.25 0 0 0 0-2.499ZM6.667 5.73a1.25 1.25 0 1 1 2.5 0 1.25 1.25 0 0 1-2.5 0Z"/><path d="M10 .938a9.063 9.063 0 0 0 0 18.125 1.838 1.838 0 0 0 1.825-1.893c-.014-.542-.277-.942-.431-1.177a7.085 7.085 0 0 1-.04-.063c-.155-.24-.23-.388-.23-.623 0-.61.422-1.07 1.025-1.07h1.712c2.797-.005 5.201-1.98 5.201-5.202 0-2.159-1.147-4.186-2.81-5.654C14.588 1.91 12.337.938 10 .938ZM2.396 10C2.396 5.8 5.8 2.396 10 2.396c1.94 0 3.856.814 5.287 2.078 1.436 1.268 2.317 2.925 2.317 4.561 0 2.34-1.673 3.74-3.745 3.745h-1.71c-1.502 0-2.483 1.207-2.483 2.527 0 .668.267 1.11.46 1.41.203.318.239.384.242.493v.012a.38.38 0 0 1-.367.382A7.605 7.605 0 0 1 2.396 10Z"/></g><defs><clipPath id="color__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
images/icons/v3/emoji/emoji-plus.svg Normal file
View file

@ -0,0 +1 @@
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.875 3.854a6.134 6.134 0 0 0-4.843 2.361.73.73 0 0 1-1.148-.899 7.604 7.604 0 1 1 0 9.368.73.73 0 0 1 1.148-.9 6.146 6.146 0 1 0 4.843-9.93Z" fill="#000"/><path d="M8.494 11.844a.73.73 0 0 1 1.026.098 3.045 3.045 0 0 0 2.355 1.11c.947 0 1.794-.43 2.355-1.11a.73.73 0 0 1 1.124.929 4.503 4.503 0 0 1-3.479 1.64c-1.4 0-2.653-.64-3.48-1.64a.73.73 0 0 1 .099-1.027Zm4.791-4.37c.17-.262.454-.495.828-.495.375 0 .658.233.828.495.173.265.266.607.266.963s-.093.698-.266.963c-.17.262-.453.495-.828.495-.374 0-.658-.233-.828-.495a1.781 1.781 0 0 1-.266-.963c0-.356.093-.698.266-.963Zm-3.65-.494c-.374 0-.658.232-.828.494a1.783 1.783 0 0 0-.265.963c0 .357.093.699.265.964.17.262.454.495.828.495.375 0 .659-.233.829-.495.172-.265.265-.607.265-.964 0-.356-.093-.698-.265-.963-.17-.262-.454-.495-.829-.495Zm-5.155.312a.73.73 0 1 0-1.46 0V9.27H1.043a.73.73 0 1 0 0 1.458H3.02v1.98a.73.73 0 0 0 1.458 0v-1.98h1.98a.73.73 0 1 0 0-1.458h-1.98V7.29Z" fill="#000"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

1
images/icons/v3/phone/phone-down-light.svg Normal file
View file

@ -0,0 +1 @@
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.773 6.963A16.394 16.394 0 0 1 10 5.296c2.592 0 5.045.599 7.227 1.667 1.718.841 2.565 2.663 2.565 4.459v.506a2.292 2.292 0 0 1-2.602 2.27l-2.916-.397a2.292 2.292 0 0 1-1.982-2.27v-1.278a1.96 1.96 0 0 0-.401-.154c-.458-.13-1.127-.22-1.89-.22-.765 0-1.434.09-1.892.22a1.96 1.96 0 0 0-.4.154v1.277a2.292 2.292 0 0 1-1.983 2.27l-2.916.4a2.292 2.292 0 0 1-2.602-2.271v-.506c0-1.796.847-3.618 2.565-4.459ZM10 6.546c-2.397 0-4.662.554-6.678 1.54-1.189.582-1.864 1.895-1.864 3.336v.506c0 .631.557 1.117 1.183 1.032l2.917-.398c.516-.07.9-.51.9-1.032v-1.443c0-.432.302-.705.505-.842.224-.152.508-.264.803-.348.598-.17 1.388-.268 2.234-.268.847 0 1.636.097 2.234.268.295.084.579.196.803.348.203.137.505.41.505.842v1.443c0 .521.385.962.9 1.032l2.917.398c.626.085 1.183-.4 1.183-1.032v-.506c0-1.44-.675-2.754-1.864-3.336A15.144 15.144 0 0 0 10 6.546Z" fill="#000"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 944 B

1
images/icons/v3/video/video-slash-fill-light-white.svg Normal file
View file

@ -0,0 +1 @@
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.9 1.85a.625.625 0 1 0-.884.884L16.433 18.15a.625.625 0 1 0 .884-.884L1.9 1.85Zm-.197 3.043a2.783 2.783 0 0 0-.042.08c-.163.319-.236.673-.272 1.11-.035.43-.035.965-.035 1.653v4.528c0 .688 0 1.224.035 1.654.036.436.11.79.272 1.109.27.53.7.96 1.229 1.229.319.162.673.236 1.11.271.429.035.964.035 1.652.035h4.112c.688 0 1.224 0 1.653-.035.437-.035.791-.109 1.11-.271.117-.06.23-.127.336-.202L1.703 4.894Zm12.359 7.646V7.736c0-.688 0-1.224-.035-1.653-.035-.437-.109-.791-.271-1.11a2.81 2.81 0 0 0-1.23-1.229c-.318-.162-.672-.236-1.109-.271-.43-.035-.965-.035-1.653-.035H5.652l-.69.001 9.1 9.1Zm1.042-4.277v3.476c0 .304.12.596.336.81l2.378 2.378a.73.73 0 0 0 1.244-.515V5.589a.73.73 0 0 0-1.244-.515L15.44 7.452a1.146 1.146 0 0 0-.336.81Z" fill="#fff"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 840 B

1
images/icons/v3/video/video-slash-fill-white.svg Normal file
View file

@ -0,0 +1 @@
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.974 1.776A.73.73 0 1 0 .943 2.807l15.416 15.417a.73.73 0 1 0 1.032-1.031L1.974 1.776ZM1.338 4.97c-.156.324-.226.68-.26 1.104-.036.434-.036.973-.036 1.657v4.537c0 .685 0 1.224.035 1.658.036.443.111.812.283 1.148.28.549.725.995 1.274 1.275.336.17.706.246 1.148.282.434.036.973.036 1.658.036h4.12c.685 0 1.224 0 1.658-.036.442-.036.812-.111 1.148-.282.077-.04.151-.082.224-.127L1.338 4.97Zm12.62 7.023V7.73c0-.684 0-1.223-.035-1.657-.036-.443-.111-.812-.283-1.148a2.916 2.916 0 0 0-1.274-1.275c-.336-.17-.706-.246-1.148-.282-.434-.036-.973-.036-1.658-.036H5.3l8.658 8.66Zm1.25-3.731v3.476c0 .332.132.65.367.884L17.953 15a.833.833 0 0 0 1.422-.59V5.59A.833.833 0 0 0 17.953 5l-2.378 2.378a1.25 1.25 0 0 0-.367.884Z" fill="#fff"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 818 B

1
images/icons/v3/video/video-slash-light.svg Normal file
View file

@ -0,0 +1 @@
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.9 1.85a.625.625 0 0 0-.884.884L16.433 18.15a.625.625 0 0 0 .884-.884L1.9 1.85Zm-.518 2.981c.03-.056.06-.112.092-.167l.94.941a2.742 2.742 0 0 0-.09.554c-.032.385-.032.88-.032 1.591v4.5c0 .71 0 1.206.032 1.591.03.378.088.596.172.76.18.353.467.64.82.82.164.084.381.141.76.172.385.031.88.032 1.59.032H9.75c.71 0 1.206 0 1.591-.032.378-.03.596-.088.76-.172l.084-.046.902.903a3.12 3.12 0 0 1-.418.256c-.37.189-.77.268-1.226.305-.443.036-.989.036-1.666.036H5.64c-.678 0-1.224 0-1.666-.036-.456-.037-.856-.116-1.226-.305a3.125 3.125 0 0 1-1.366-1.365c-.188-.37-.267-.77-.304-1.226-.036-.443-.036-.989-.036-1.666V7.723c0-.677 0-1.224.036-1.666.037-.455.116-.856.304-1.226Z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="m13.125 11.601 1.249 1.25v-.509l2.511 2.51c.92.92 2.49.269 2.49-1.03V6.177c0-1.299-1.57-1.95-2.49-1.03l-2.51 2.51c0-.647-.001-1.173-.036-1.6-.037-.456-.116-.857-.305-1.227a3.125 3.125 0 0 0-1.365-1.365c-.37-.19-.77-.268-1.226-.305-.443-.036-.989-.036-1.666-.036H5.64c-.365 0-.692 0-.986.006L5.9 4.375h3.85c.711 0 1.207 0 1.592.032.378.03.596.088.76.172.353.18.64.467.82.82.083.164.141.382.172.76.031.385.032.88.032 1.591v3.851ZM14.375 10c0 .368.146.72.406.98l2.988 2.989a.208.208 0 0 0 .356-.148V6.178a.208.208 0 0 0-.356-.147L14.781 9.02c-.26.26-.406.613-.406.981Z" fill="#000"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

28
stylesheets/_modules.scss
View file

@ -3687,6 +3687,7 @@ button.module-image__border-overlay:focus {
@include font-body-1;
color: $color-white;
display: flex;
align-items: center;
z-index: $z-index-base;
margin-top: 10px;
@ -3696,13 +3697,12 @@ button.module-image__border-overlay:focus {
&::before {
content: '';
display: block;
@include color-svg(
'../images/icons/v3/video/video-slash-fill.svg',
$color-white
);
height: 24px;
background-image: url('../images/icons/v3/video/video-slash-fill-white.svg');
background-size: 100%;
-webkit-filter: drop-shadow(0 0 4px $color-black-alpha-40);
height: 20px;
margin-inline-end: 10px;
width: 24px;
width: 20px;
}
}
}
@ -4156,14 +4156,15 @@ button.module-image__border-overlay:focus {
&__button {
&--hangup {
@include color-svg(
'../images/icons/v3/phone/phone-down-fill-light.svg',
'../images/icons/v3/phone/phone-down-light.svg',
$color-gray-75
);
height: 28px;
width: 28px;
border: none;
@include dark-theme {
@include color-svg(
'../images/icons/v3/phone/phone-down-fill-light.svg',
'../images/icons/v3/phone/phone-down-light.svg',
$color-gray-15
);
}
@ -4176,6 +4177,7 @@ button.module-image__border-overlay:focus {
);
height: 24px;
width: 24px;
border: none;
@include dark-theme {
@include color-svg(
'../images/icons/v3/maximize/maximize-square-light.svg',
@ -6350,10 +6352,16 @@ button.module-image__border-overlay:focus {
&--profile-editor::after {
@include light-theme {
@include color-svg('../images/icons/v3/emoji/emoji.svg', $color-gray-75);
@include color-svg(
'../images/icons/v3/emoji/emoji-plus.svg',
$color-gray-75
);
}
@include dark-theme {
@include color-svg('../images/icons/v3/emoji/emoji.svg', $color-gray-15);
@include color-svg(
'../images/icons/v3/emoji/emoji-plus.svg',
$color-gray-15
);
}
}

2
stylesheets/components/AvatarEditor.scss
View file

@ -49,7 +49,7 @@
}
&--photo::before {
@include button-icon('../images/icons/v3/album/album.svg');
@include button-icon('../images/icons/v3/album/album-tilt.svg');
}
&--text::before {

4
stylesheets/components/AvatarPreview.scss
View file

@ -87,8 +87,8 @@
&:after {
@include color-svg('../images/icons/v3/x/x-compact.svg', $color-gray-75);
content: '';
height: 14px;
width: 14px;
height: 16px;
width: 16px;
}
}
}

3
stylesheets/components/CallingButton.scss
View file

@ -6,6 +6,7 @@
@include color-svg($path, $color-white);
height: 20px;
width: 20px;
border: none;
}
&__icon {
@ -128,7 +129,7 @@
}
&--count {
@include font-body-2-bold;
@include font-body-2;
margin-inline-start: 5px;
vertical-align: top;
}

11
stylesheets/components/CallingLobby.scss
View file

@ -41,13 +41,12 @@
&::before {
content: '';
display: block;
@include color-svg(
'../images/icons/v3/video/video-slash-fill-light.svg',
$color-white
);
height: 24px;
background-image: url('../images/icons/v3/video/video-slash-fill-light-white.svg');
background-size: 100%;
-webkit-filter: drop-shadow(0 0 4px $color-black-alpha-40);
height: 20px;
margin-bottom: 8px;
width: 24px;
width: 20px;
}
}
}

63
stylesheets/components/ContactModal.scss
View file

@ -145,25 +145,68 @@
}
}
&__official-badge {
@include color-svg(
'../images/icons/v3/official/official-compact.svg',
$color-ultramarine
);
&__official-badge,
&__official-badge__large {
display: inline-block;
position: relative;
&::before,
&::after {
content: '';
display: block;
position: absolute;
}
// white background behind the icon
&::before {
top: 2px;
inset-inline-start: 2px;
width: 10px;
height: 10px;
border-radius: 5px;
background: $color-white;
}
}
&__official-badge {
height: 14px;
margin-inline-start: 4px;
width: 14px;
&::after {
top: 0;
inset-inline-start: 0;
width: 100%;
height: 100%;
@include color-svg(
'../images/icons/v3/official/official-compact.svg',
$color-ultramarine
);
}
}
&__official-badge__large {
@include color-svg(
'../images/icons/v3/official/official.svg',
$color-ultramarine
);
display: inline-block;
height: 24px;
margin-inline-start: 9px;
width: 24px;
&::before {
top: 4px;
inset-inline-start: 4px;
width: 16px;
height: 16px;
border-radius: 8px;
}
&::after {
top: 0;
inset-inline-start: 0;
width: 100%;
height: 100%;
@include color-svg(
'../images/icons/v3/official/official.svg',
$color-ultramarine
);
}
}
}

4
stylesheets/components/MyStories.scss
View file

@ -160,8 +160,8 @@
'../images/icons/v3/plus/plus-compact-bold.svg',
$color-white
);
height: 10px;
width: 10px;
height: 12px;
width: 12px;
}
}
}

4
stylesheets/components/ProfileEditor.scss
View file

@ -62,14 +62,14 @@
&::after {
@include light-theme {
@include color-svg(
'../images/icons/v3/compose/compose.svg',
'../images/icons/v3/edit/edit.svg',
$color-gray-75
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/compose/compose.svg',
'../images/icons/v3/edit/edit.svg',
$color-gray-15
);
}