Fix theme

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/atoms/avatar/Avatar.jsx

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

src/app/atoms/avatar/Avatar.scss

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

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 <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 = {
   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,

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,
 }) => (
   <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">
       <Text variant="b3">{time}</Text>
     </div>

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; }
+      & > span:first-child { display: none; }
-      & > .text:last-child { display: block; }
+      & > span:last-child { display: block; }
     }
   }
 

src/index.scss

@@ -236,15 +236,17 @@
   --ic-surface-low: rgba(255, 255, 255, 64%);
   --ic-primary-normal: #ffffff;
 
-  /* user mxid colors */
+  & .text {
-  --mx-uc-1: hsl(208, 100%, 58%);
+    /* override user mxid colors for texts */
-  --mx-uc-2: hsl(301, 80%, 70%);
+    --mx-uc-1: hsl(208, 100%, 58%);
-  --mx-uc-3: hsl(163, 93%, 41%);
+    --mx-uc-2: hsl(301, 80%, 70%);
-  --mx-uc-4: hsl(343, 91%, 66%);
+    --mx-uc-3: hsl(163, 93%, 41%);
-  --mx-uc-5: hsl(24, 90%, 67%);
+    --mx-uc-4: hsl(343, 91%, 66%);
-  --mx-uc-6: hsl(181, 90%, 50%);
+    --mx-uc-5: hsl(24, 90%, 67%);
-  --mx-uc-7: hsl(243, 100%, 74%);
+    --mx-uc-6: hsl(181, 90%, 50%);
-  --mx-uc-8: hsl(94, 66%, 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;