ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Contact Message: Fix style inconsistencies (#5314)

Browse Source
This commit is contained in:
Alexander Zinchuk 2024-12-20 11:37:33 +01:00
parent 55170dc047
commit b960e1080b
6 changed files with 18 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/common/PeerColorWrapper.module.scss
View File

@ -2,7 +2,8 @@
position: relative;
overflow: hidden;
padding-inline-start: 0.5rem;
padding-inline-start: 0.5625rem;
padding-inline-end: 0.375rem;
border-radius: 0.25rem;

9
src/components/middle/message/Contact.module.scss
View File

@ -1,11 +1,12 @@
.root {
position: relative;
margin: 0.25rem 0.25rem 0.875rem 0.25rem;
margin-top: 0.25rem;
margin-bottom: var(--message-meta-height);
}
.info-container {
display: flex;
padding: 0.5rem 1.5rem 0.5rem 0.75rem;
padding: 0.5rem 1.5rem 0.5rem 0.125rem;
cursor: var(--custom-cursor, pointer);
}
@ -35,19 +36,19 @@
.divider {
height: 0.0625rem;
margin: 0 0.5rem;
background: var(--accent-color);
filter: opacity(0.35);
}
.buttons {
display: flex;
padding-block: 0.125rem;
.button {
width: auto;
flex: 1;
height: 2.25rem;
margin: 0.375rem;
margin-block: 0.25rem;
font-weight: 500;
background-color: transparent;
color: var(--accent-color);

1
src/components/middle/message/FactCheck.module.scss
View File

@ -4,7 +4,6 @@
margin-top: 0.5rem;
font-size: 0.875rem;
padding-block: 0.25rem;
padding-inline-end: 0.25rem;
}
.title {

17
src/components/middle/message/SponsoredMessage.scss
View File

@ -71,24 +71,9 @@
}
.content-inner {
padding-top: 0.375rem;
padding-inline-end: 0.375rem;
padding-top: 0.25rem;
padding-bottom: 0;
padding-inline-start: 0.625rem;
font-size: calc(var(--message-text-size, 1rem) - 0.125rem);
background-color: var(--accent-background-color);
overflow: hidden;
&::before {
content: "";
display: block;
position: absolute;
top: 0;
inset-inline-start: 0;
bottom: 0;
width: 3px;
background: var(--bar-gradient, var(--accent-color));
}
> .Button {
border-radius: 0 0 0.375rem 0.375rem;

24
src/components/middle/message/WebPage.scss
View File

@ -1,7 +1,8 @@
.WebPage {
color: var(--color-text);
margin-top: 0.25rem;
margin-bottom: 0.125rem;
padding: 0.1875rem;
padding-block: 0.1875rem;
font-size: calc(var(--message-text-size, 1rem) - 0.125rem);
line-height: 1.125rem;
max-width: 29rem;
@ -11,7 +12,7 @@
overflow: hidden;
&.with-video {
padding: 0.1875rem 0.375rem;
padding-block: 0.375rem;
}
&--background-icons {
@ -39,11 +40,12 @@
}
&.in-preview {
padding-inline-start: 0.5rem;
padding-inline-end: 0.375rem;
border-radius: 0.25rem;
background-color: var(--color-primary-tint);
height: 2.625rem;
margin: 0;
padding: 0.125rem 0.25rem 0.125rem 0.625rem;
transition: background-color 0.2s ease-in;
&.interactive {
@ -54,21 +56,8 @@
}
}
&::before {
content: "";
display: block;
position: absolute;
top: 0;
inset-inline-start: 0;
bottom: 0;
width: 3px;
background: var(--bar-gradient, var(--accent-color));
}
.WebPage--content {
position: relative;
margin-inline-start: 0.375rem;
margin-inline-end: 0.25rem;
&.is-story {
display: flex;
@ -105,7 +94,8 @@
.media-inner {
margin: 0 !important;
margin-block: 0.25rem !important;
margin-block-end: 0.1875rem !important;
margin-block-start: 0.25rem !important;
&,
& img,

8
src/components/middle/message/WebPage.tsx
View File

@ -22,6 +22,7 @@ import useOldLang from '../../../hooks/useOldLang';
import Audio from '../../common/Audio';
import Document from '../../common/Document';
import EmojiIconBackground from '../../common/embedded/EmojiIconBackground';
import PeerColorWrapper from '../../common/PeerColorWrapper';
import SafeLink from '../../common/SafeLink';
import StickerView from '../../common/StickerView';
import Button from '../../ui/Button';
@ -87,8 +88,6 @@ const WebPage: FC<OwnProps> = ({
const webPage = getMessageWebPage(message);
const { isMobile } = useAppLayout();
// eslint-disable-next-line no-null/no-null
const ref = useRef<HTMLDivElement>(null);
// eslint-disable-next-line no-null/no-null
const stickersRef = useRef<HTMLDivElement>(null);
const lang = useOldLang();
@ -177,8 +176,7 @@ const WebPage: FC<OwnProps> = ({
}
return (
<div
ref={ref}
<PeerColorWrapper
className={className}
data-initial={(siteName || displayUrl)[0]}
dir={lang.isRtl ? 'rtl' : 'auto'}
@ -292,7 +290,7 @@ const WebPage: FC<OwnProps> = ({
)}
</div>
{quickButtonLangKey && renderQuickButton(quickButtonLangKey)}
</div>
</PeerColorWrapper>
);
};