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

Update link preview styles to better match designs

Browse source
This commit is contained in:
Evan Hahn 2021-01-07 13:32:12 -06:00 • committed by Scott Nonnenberg
parent 311e17c3b5
commit 4c40d861cf
2 changed files with 7 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
stylesheets/_modules.scss
View file

@ -1,4 +1,4 @@
// Copyright 2018-2020 Signal Messenger, LLC // Copyright 2018-2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
// Using BEM syntax explained here: https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ // Using BEM syntax explained here: https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
@ -307,6 +307,7 @@
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
min-width: 0px; min-width: 0px;
overflow: hidden;
@include light-theme { @include light-theme {
border: 1px solid $color-white; border: 1px solid $color-white;
@ -854,8 +855,6 @@
margin-top: -10px; margin-top: -10px;
margin-bottom: 5px; margin-bottom: 5px;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
overflow: hidden; overflow: hidden;
@include keyboard-mode { @include keyboard-mode {
@ -867,37 +866,22 @@
.module-message__link-preview--with-content-above { .module-message__link-preview--with-content-above {
margin-top: 4px; margin-top: 4px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
} }
.module-message__link-preview__content { .module-message__link-preview__content {
padding: 8px; padding: 8px 12px;
border: 1px solid transparent; /* Color overwritten below. */
border-bottom: 0;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
background-color: $color-white;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
@include light-theme { @include light-theme {
border-color: $color-black-alpha-20; background-color: $color-gray-02;
} }
@include dark-theme { @include dark-theme {
background-color: $color-gray-95; background-color: $color-gray-80;
border-color: $color-gray-60;
} }
} }
.module-message__link-preview__content--with-content-above {
border-top: none;
border-bottom: none;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.module-message__link-preview__icon_container { .module-message__link-preview__icon_container {
margin: -2px; margin: -2px;
margin-right: 8px; margin-right: 8px;
@ -946,7 +930,7 @@
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
align-items: center; align-items: center;
margin-top: 4px; margin-top: 2px;
@include light-theme { @include light-theme {
color: $color-gray-60; color: $color-gray-60;

9
ts/components/conversation/Message.tsx
View file

@ -879,14 +879,7 @@ export class Message extends React.PureComponent<Props, State> {
i18n={i18n} i18n={i18n}
/> />
) : null} ) : null}
<div <div className="module-message__link-preview__content">
className={classNames(
'module-message__link-preview__content',
withContentAbove || isFullSizeImage
? 'module-message__link-preview__content--with-content-above'
: null
)}
>
{first.image && previewHasImage && !isFullSizeImage ? ( {first.image && previewHasImage && !isFullSizeImage ? (
<div className="module-message__link-preview__icon_container"> <div className="module-message__link-preview__icon_container">
<Image <Image