Localize fonts

Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2021-12-16 17:55:16 +05:30
parent ed27e6b8e4
commit 3d7e509f9a
43 changed files with 378 additions and 77 deletions

View file

@ -27,7 +27,7 @@ function Dialog({
<div className="dialog__content">
<Header>
<TitleWrapper>
<Text variant="h2">{twemojify(title)}</Text>
<Text variant="h2" weight="medium" primary>{twemojify(title)}</Text>
</TitleWrapper>
{contentOptions}
</Header>

View file

@ -53,7 +53,7 @@ function ImageUpload({
size="large"
/>
<div className={`img-upload__process ${uploadPromise === null ? ' img-upload__process--stopped' : ''}`}>
{uploadPromise === null && <Text variant="b3">Upload</Text>}
{uploadPromise === null && <Text variant="b3" weight="bold">Upload</Text>}
{uploadPromise !== null && <Spinner size="small" />}
</div>
</button>

View file

@ -24,7 +24,6 @@
z-index: 1;
& .text {
text-transform: uppercase;
font-weight: 600;
color: white;
}
&--stopped {

View file

@ -70,8 +70,8 @@ const MessageHeader = React.memo(({
}) => (
<div className="message__header">
<div style={{ color: colorMXID(userId) }} className="message__profile">
<Text variant="b1">{twemojify(username)}</Text>
<Text variant="b1">{twemojify(userId)}</Text>
<Text variant="b1" weight="medium">{twemojify(username)}</Text>
<Text variant="b1" weight="medium">{twemojify(userId)}</Text>
</div>
<div className="message__time">
<Text variant="b3">{time}</Text>

View file

@ -130,7 +130,6 @@
& > .text {
color: inherit;
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@ -192,7 +191,7 @@
padding: 0 2px;
border-radius: 4px;
cursor: pointer;
font-weight: 500;
font-weight: var(--fw-medium);
&:hover {
background-color: hsla(0, 0%, 64%, 0.3);
color: var(--tc-surface-high);

View file

@ -68,7 +68,7 @@ function PopupWindow({
<Header>
<IconButton size="small" src={ChevronLeftIC} onClick={onRequestClose} tooltip="Back" />
<TitleWrapper>
<Text variant="s1">{twemojify(title)}</Text>
<Text variant="s1" weight="medium" primary>{twemojify(title)}</Text>
</TitleWrapper>
{drawerOptions}
</Header>
@ -84,7 +84,7 @@ function PopupWindow({
<div className="pw__content">
<Header>
<TitleWrapper>
<Text variant="h2">{twemojify(contentTitle !== null ? contentTitle : title)}</Text>
<Text variant="h2" weight="medium" primary>{twemojify(contentTitle !== null ? contentTitle : title)}</Text>
</TitleWrapper>
{contentOptions}
</Header>

View file

@ -53,10 +53,11 @@
& .header {
padding-left: var(--sp-tight);
& .header__title-wrapper {
margin: 0 var(--sp-extra-tight);
margin: 0 var(--sp-extra-tight) 0 var(--sp-ultra-tight);
}
[dir=rtl] & {
padding-right: var(--sp-tight);
padding-right: var(--sp-tight);
margin: 0 var(--sp-ultra-tight) 0 var(--sp-extra-tight);
}
}
}

View file

@ -15,7 +15,7 @@ function RoomIntro({
<div className="room-intro">
<Avatar imageSrc={avatarSrc} text={name} bgColor={colorMXID(roomId)} size="large" />
<div className="room-intro__content">
<Text className="room-intro__name" variant="h1">{twemojify(heading)}</Text>
<Text className="room-intro__name" variant="h1" weight="medium" primary>{twemojify(heading)}</Text>
<Text className="room-intro__desc" variant="b1">{twemojify(desc, undefined, true)}</Text>
{ time !== null && <Text className="room-intro__time" variant="b3">{time}</Text>}
</div>

View file

@ -58,13 +58,13 @@ function RoomSelector({
iconSrc={iconSrc}
size="extra-small"
/>
<Text variant="b1">
<Text variant="b1" weight={isUnread ? 'medium' : 'normal'}>
{twemojify(name)}
{parentName && (
<span className="text text-b3">
<Text variant="b3" span>
{' — '}
{twemojify(parentName)}
</span>
</Text>
)}
</Text>
{ isUnread && (

View file

@ -17,7 +17,6 @@
&--unread {
.room-selector__content > .text {
font-weight: 500;
color: var(--tc-surface-high);
}
}