From 85c3240b54726be03dd40b5ae8f43612e7cfa1ad Mon Sep 17 00:00:00 2001 From: Ajay Bura Date: Sat, 18 Dec 2021 10:10:23 +0530 Subject: [PATCH] Fix theme Signed-off-by: Ajay Bura --- src/app/atoms/avatar/Avatar.jsx | 4 ++-- src/app/atoms/avatar/Avatar.scss | 2 +- src/app/atoms/text/Text.jsx | 14 ++++++++------ src/app/molecules/message/Message.jsx | 15 ++++++++++----- src/app/molecules/message/Message.scss | 8 ++++---- src/index.scss | 24 +++++++++++++----------- 6 files changed, 38 insertions(+), 29 deletions(-) diff --git a/src/app/atoms/avatar/Avatar.jsx b/src/app/atoms/avatar/Avatar.jsx index e0fd78e..0f55494 100644 --- a/src/app/atoms/avatar/Avatar.jsx +++ b/src/app/atoms/avatar/Avatar.jsx @@ -22,7 +22,7 @@ function Avatar({
{ image !== null - ? updateImage(null)} alt="avatar" /> + ? updateImage(null)} alt="avatar" /> : ( : text !== null && ( - + {twemojify([...text][0])} ) diff --git a/src/app/atoms/avatar/Avatar.scss b/src/app/atoms/avatar/Avatar.scss index 8c561c1..e45fe55 100644 --- a/src/app/atoms/avatar/Avatar.scss +++ b/src/app/atoms/avatar/Avatar.scss @@ -45,7 +45,7 @@ border-radius: inherit; .text { - color: var(--bg-surface); + color: white; } } } \ No newline at end of file diff --git a/src/app/atoms/text/Text.jsx b/src/app/atoms/text/Text.jsx index a18328b..3f507ee 100644 --- a/src/app/atoms/text/Text.jsx +++ b/src/app/atoms/text/Text.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import './Text.scss'; function Text({ - className, variant, weight, + className, style, variant, weight, primary, span, children, }) { const classes = []; @@ -13,15 +13,16 @@ function Text({ if (primary) classes.push('font-primary'); const textClass = classes.join(' '); - if (span) return { children }; - if (variant === 'h1') return

{ children }

; - if (variant === 'h2') return

{ children }

; - if (variant === 's1') return

{ children }

; - return

{ children }

; + if (span) return { children }; + if (variant === 'h1') return

{ children }

; + if (variant === 'h2') return

{ children }

; + if (variant === 's1') return

{ children }

; + return

{ children }

; } Text.defaultProps = { className: null, + style: null, variant: 'b1', weight: 'normal', primary: false, @@ -30,6 +31,7 @@ Text.defaultProps = { Text.propTypes = { className: PropTypes.string, + style: PropTypes.shape({}), variant: PropTypes.oneOf(['h1', 'h2', 's1', 'b1', 'b2', 'b3']), weight: PropTypes.oneOf(['light', 'normal', 'medium', 'bold']), primary: PropTypes.bool, diff --git a/src/app/molecules/message/Message.jsx b/src/app/molecules/message/Message.jsx index ad7038e..b9db3aa 100644 --- a/src/app/molecules/message/Message.jsx +++ b/src/app/molecules/message/Message.jsx @@ -3,7 +3,6 @@ import React, { useState, useEffect, useCallback, useRef } from 'react'; import PropTypes from 'prop-types'; import './Message.scss'; -import dateFormat from 'dateformat'; import { twemojify } from '../../../util/twemojify'; import initMatrix from '../../../client/initMatrix'; @@ -69,10 +68,16 @@ const MessageHeader = React.memo(({ userId, username, time, }) => (
-
- {twemojify(username)} - {twemojify(userId)} -
+ + {twemojify(username)} + {twemojify(userId)} +
{time}
diff --git a/src/app/molecules/message/Message.scss b/src/app/molecules/message/Message.scss index 91b249b..fd7cd4f 100644 --- a/src/app/molecules/message/Message.scss +++ b/src/app/molecules/message/Message.scss @@ -128,16 +128,16 @@ margin-right: 0; } - & > .text { + & > span { color: inherit; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } - & > .text:last-child { display: none; } + & > span:last-child { display: none; } &:hover { - & > .text:first-child { display: none; } - & > .text:last-child { display: block; } + & > span:first-child { display: none; } + & > span:last-child { display: block; } } } diff --git a/src/index.scss b/src/index.scss index f4c6b60..8e0bdaf 100644 --- a/src/index.scss +++ b/src/index.scss @@ -236,15 +236,17 @@ --ic-surface-low: rgba(255, 255, 255, 64%); --ic-primary-normal: #ffffff; - /* user mxid colors */ - --mx-uc-1: hsl(208, 100%, 58%); - --mx-uc-2: hsl(301, 80%, 70%); - --mx-uc-3: hsl(163, 93%, 41%); - --mx-uc-4: hsl(343, 91%, 66%); - --mx-uc-5: hsl(24, 90%, 67%); - --mx-uc-6: hsl(181, 90%, 50%); - --mx-uc-7: hsl(243, 100%, 74%); - --mx-uc-8: hsl(94, 66%, 50%); + & .text { + /* override user mxid colors for texts */ + --mx-uc-1: hsl(208, 100%, 58%); + --mx-uc-2: hsl(301, 80%, 70%); + --mx-uc-3: hsl(163, 93%, 41%); + --mx-uc-4: hsl(343, 91%, 66%); + --mx-uc-5: hsl(24, 90%, 67%); + --mx-uc-6: hsl(181, 90%, 50%); + --mx-uc-7: hsl(243, 100%, 74%); + --mx-uc-8: hsl(94, 66%, 50%); + } /* shadow and overlay */ --bg-overlay: rgba(0, 0, 0, 50%); @@ -267,9 +269,9 @@ --fs-b1: 14.6px; --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 */ --fw-normal: 380;