Signal/Desktop
1
0
Fork 0
mirror of https://github.com/signalapp/Signal-Desktop.git synced 2025-12-24 12:19:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update staged link preview styles

Browse Source
This commit is contained in:
Fedor Indutny
2025-04-23 10:39:56 -07:00
committed by GitHub
parent 6f3d1f3696
commit 6a20d91b71
3 changed files with 26 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
stylesheets/_variables.scss
View File

@@ -53,6 +53,7 @@ $color-white-alpha-20: rgba($color-white, 0.2);
$color-white-alpha-30: rgba($color-white, 0.3);
$color-white-alpha-40: rgba($color-white, 0.4);
$color-white-alpha-50: rgba($color-white, 0.5);
$color-white-alpha-55: rgba($color-white, 0.55);
$color-white-alpha-60: rgba($color-white, 0.6);
$color-white-alpha-70: rgba($color-white, 0.7);
$color-white-alpha-80: rgba($color-white, 0.8);

20
stylesheets/components/CompositionInput.scss
View File

@@ -494,8 +494,8 @@ button.CompositionInput__link-preview__close-button {
-webkit-mask: none;
@include mixins.rounded-corners;
align-items: center;
backdrop-filter: blur(32px);
background: variables.$color-white-alpha-80;
backdrop-filter: blur(12px);
background: rgba(variables.$color-gray-05, 0.8);
display: flex;
height: 20px;
justify-content: center;
@@ -503,20 +503,26 @@ button.CompositionInput__link-preview__close-button {
top: 6px;
width: 20px;
@include mixins.dark-theme {
background-color: rgba(variables.$color-gray-75, 0.8);
-webkit-mask: none;
}
&::before {
@include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-gray-75
variables.$color-black-alpha-50
);
@include mixins.dark-theme {
background-color: variables.$color-white-alpha-55;
}
& {
content: '';
height: 16px;
width: 16px;
}
@include mixins.dark-theme {
background-color: variables.$color-gray-05;
}
}
}

12
ts/components/conversation/StagedLinkPreview.stories.tsx
View File

@@ -112,3 +112,15 @@ EverythingImageTitleDescriptionAndDate.args = {
contentType: IMAGE_JPEG,
}),
};
export const CompositionInput = Template.bind({});
CompositionInput.args = {
...getDefaultProps(),
moduleClassName: 'CompositionInput__link-preview',
title: LONG_TITLE,
description: LONG_DESCRIPTION,
image: fakeAttachment({
url: '/fixtures/kitten-4-112-112.jpg',
contentType: IMAGE_JPEG,
}),
};