Fix theme

Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2021-12-18 10:10:23 +05:30
parent 9c12e11375
commit 85c3240b54
6 changed files with 38 additions and 29 deletions

View file

@ -22,7 +22,7 @@ function Avatar({
<div className={`avatar-container avatar-container__${size} noselect`}> <div className={`avatar-container avatar-container__${size} noselect`}>
{ {
image !== null image !== null
? <img src={image} onError={() => updateImage(null)} alt="avatar" /> ? <img draggable="false" src={image} onError={() => updateImage(null)} alt="avatar" />
: ( : (
<span <span
style={{ backgroundColor: iconSrc === null ? bgColor : 'transparent' }} style={{ backgroundColor: iconSrc === null ? bgColor : 'transparent' }}
@ -32,7 +32,7 @@ function Avatar({
iconSrc !== null iconSrc !== null
? <RawIcon size={size} src={iconSrc} color={iconColor} /> ? <RawIcon size={size} src={iconSrc} color={iconColor} />
: text !== null && ( : text !== null && (
<Text variant={textSize} weight="medium" primary> <Text variant={textSize} primary>
{twemojify([...text][0])} {twemojify([...text][0])}
</Text> </Text>
) )

View file

@ -45,7 +45,7 @@
border-radius: inherit; border-radius: inherit;
.text { .text {
color: var(--bg-surface); color: white;
} }
} }
} }

View file

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import './Text.scss'; import './Text.scss';
function Text({ function Text({
className, variant, weight, className, style, variant, weight,
primary, span, children, primary, span, children,
}) { }) {
const classes = []; const classes = [];
@ -13,15 +13,16 @@ function Text({
if (primary) classes.push('font-primary'); if (primary) classes.push('font-primary');
const textClass = classes.join(' '); const textClass = classes.join(' ');
if (span) return <span className={classes.join(' ')}>{ children }</span>; if (span) return <span className={textClass} style={style}>{ children }</span>;
if (variant === 'h1') return <h1 className={textClass}>{ children }</h1>; if (variant === 'h1') return <h1 className={textClass} style={style}>{ children }</h1>;
if (variant === 'h2') return <h2 className={textClass}>{ children }</h2>; if (variant === 'h2') return <h2 className={textClass} style={style}>{ children }</h2>;
if (variant === 's1') return <h4 className={textClass}>{ children }</h4>; if (variant === 's1') return <h4 className={textClass} style={style}>{ children }</h4>;
return <p className={textClass}>{ children }</p>; return <p className={textClass} style={style}>{ children }</p>;
} }
Text.defaultProps = { Text.defaultProps = {
className: null, className: null,
style: null,
variant: 'b1', variant: 'b1',
weight: 'normal', weight: 'normal',
primary: false, primary: false,
@ -30,6 +31,7 @@ Text.defaultProps = {
Text.propTypes = { Text.propTypes = {
className: PropTypes.string, className: PropTypes.string,
style: PropTypes.shape({}),
variant: PropTypes.oneOf(['h1', 'h2', 's1', 'b1', 'b2', 'b3']), variant: PropTypes.oneOf(['h1', 'h2', 's1', 'b1', 'b2', 'b3']),
weight: PropTypes.oneOf(['light', 'normal', 'medium', 'bold']), weight: PropTypes.oneOf(['light', 'normal', 'medium', 'bold']),
primary: PropTypes.bool, primary: PropTypes.bool,

View file

@ -3,7 +3,6 @@ import React, { useState, useEffect, useCallback, useRef } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './Message.scss'; import './Message.scss';
import dateFormat from 'dateformat';
import { twemojify } from '../../../util/twemojify'; import { twemojify } from '../../../util/twemojify';
import initMatrix from '../../../client/initMatrix'; import initMatrix from '../../../client/initMatrix';
@ -69,10 +68,16 @@ const MessageHeader = React.memo(({
userId, username, time, userId, username, time,
}) => ( }) => (
<div className="message__header"> <div className="message__header">
<div style={{ color: colorMXID(userId) }} className="message__profile"> <Text
<Text variant="b1" weight="medium">{twemojify(username)}</Text> style={{ color: colorMXID(userId) }}
<Text variant="b1" weight="medium">{twemojify(userId)}</Text> className="message__profile"
</div> variant="b1"
weight="medium"
span
>
<span>{twemojify(username)}</span>
<span>{twemojify(userId)}</span>
</Text>
<div className="message__time"> <div className="message__time">
<Text variant="b3">{time}</Text> <Text variant="b3">{time}</Text>
</div> </div>

View file

@ -128,16 +128,16 @@
margin-right: 0; margin-right: 0;
} }
& > .text { & > span {
color: inherit; color: inherit;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
& > .text:last-child { display: none; } & > span:last-child { display: none; }
&:hover { &:hover {
& > .text:first-child { display: none; } & > span:first-child { display: none; }
& > .text:last-child { display: block; } & > span:last-child { display: block; }
} }
} }

View file

@ -236,7 +236,8 @@
--ic-surface-low: rgba(255, 255, 255, 64%); --ic-surface-low: rgba(255, 255, 255, 64%);
--ic-primary-normal: #ffffff; --ic-primary-normal: #ffffff;
/* user mxid colors */ & .text {
/* override user mxid colors for texts */
--mx-uc-1: hsl(208, 100%, 58%); --mx-uc-1: hsl(208, 100%, 58%);
--mx-uc-2: hsl(301, 80%, 70%); --mx-uc-2: hsl(301, 80%, 70%);
--mx-uc-3: hsl(163, 93%, 41%); --mx-uc-3: hsl(163, 93%, 41%);
@ -245,6 +246,7 @@
--mx-uc-6: hsl(181, 90%, 50%); --mx-uc-6: hsl(181, 90%, 50%);
--mx-uc-7: hsl(243, 100%, 74%); --mx-uc-7: hsl(243, 100%, 74%);
--mx-uc-8: hsl(94, 66%, 50%); --mx-uc-8: hsl(94, 66%, 50%);
}
/* shadow and overlay */ /* shadow and overlay */
--bg-overlay: rgba(0, 0, 0, 50%); --bg-overlay: rgba(0, 0, 0, 50%);
@ -267,9 +269,9 @@
--fs-b1: 14.6px; --fs-b1: 14.6px;
--ls-b1: 0.14px; --ls-b1: 0.14px;
--fs-b2: 13.6px; --fs-b2: 13.2px;
--fs-b3: 11.6px; --fs-b3: 11.2px;
/* override normal font weight for dark mode */ /* override normal font weight for dark mode */
--fw-normal: 380; --fw-normal: 380;