Fix mxid colors for dark theme

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

src/app/atoms/avatar/Avatar.jsx

@@ -32,7 +32,7 @@ function Avatar({
                 iconSrc !== null
                   ? <RawIcon size={size} src={iconSrc} />
                   : text !== null && (
-                    <Text variant={textSize} primary>
+                    <Text variant={textSize} weight="medium" primary>
                       {twemojify([...text][0])}
                     </Text>
                   )

src/app/atoms/avatar/Avatar.scss

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

src/app/organisms/welcome/Welcome.jsx

@@ -10,7 +10,7 @@ function Welcome() {
     <div className="app-welcome flex--center">
       <div className="flex-v--center">
         <img className="app-welcome__logo noselect" src={CinnySvg} alt="Cinny logo" />
-        <Text className="app-welcome__heading" variant="h1" weight="medium">Welcome to Cinny</Text>
+        <Text className="app-welcome__heading" variant="h1" weight="medium" primary>Welcome to Cinny</Text>
         <Text className="app-welcome__subheading" variant="s1">Yet another matrix client</Text>
       </div>
     </div>

src/app/templates/auth/Auth.jsx

@@ -193,7 +193,7 @@ function Login({ loginFlow, baseUrl }) {
   return (
     <>
       <div className="auth-form__heading">
-        <Text variant="h2">Login</Text>
+        <Text variant="h2" weight="medium">Login</Text>
         {isPassword && (
           <ContextMenu
             placement="right"
@@ -418,7 +418,7 @@ function Register({ registerInfo, loginFlow, baseUrl }) {
       {process.type === 'm.login.terms' && <Terms url={process.url} onSubmit={handleTerms} />}
       {process.type === 'm.login.email.identity' && <EmailVerify email={process.email} onContinue={handleEmailVerify} />}
       <div className="auth-form__heading">
-        {!isDisabled && <Text variant="h2">Register</Text>}
+        {!isDisabled && <Text variant="h2" weight="medium">Register</Text>}
         {isDisabled && <Text className="auth-form__error">{registerInfo.error}</Text>}
       </div>
       {!isDisabled && (
@@ -537,7 +537,7 @@ function Auth() {
               <Header>
                 <Avatar size="extra-small" imageSrc={CinnySvg} />
                 <TitleWrapper>
-                  <Text variant="h2">Cinny</Text>
+                  <Text variant="h2" weight="medium">Cinny</Text>
                 </TitleWrapper>
               </Header>
               <div className="auth-card__content">
@@ -584,7 +584,7 @@ function Recaptcha({ message, sitekey, onChange }) {
   return (
     <ProcessWrapper>
       <div style={{ marginBottom: 'var(--sp-normal)' }}>
-        <Text variant="s1">{message}</Text>
+        <Text variant="s1" weight="medium">{message}</Text>
       </div>
       <ReCAPTCHA sitekey={sitekey} onChange={onChange} />
     </ProcessWrapper>
@@ -601,7 +601,7 @@ function Terms({ url, onSubmit }) {
     <ProcessWrapper>
       <form onSubmit={(e) => { e.preventDefault(); onSubmit(); }}>
         <div style={{ margin: 'var(--sp-normal)', maxWidth: '450px' }}>
-          <Text variant="h2">Agree with terms</Text>
+          <Text variant="h2" weight="medium">Agree with terms</Text>
           <div style={{ marginBottom: 'var(--sp-normal)' }} />
           <Text variant="b1">In order to complete registration, you need to agree to the terms and conditions.</Text>
           <div style={{ display: 'flex', alignItems: 'center', margin: 'var(--sp-normal) 0' }}>
@@ -626,7 +626,7 @@ function EmailVerify({ email, onContinue }) {
   return (
     <ProcessWrapper>
       <div style={{ margin: 'var(--sp-normal)', maxWidth: '450px' }}>
-        <Text variant="h2">Verify email</Text>
+        <Text variant="h2" weight="medium">Verify email</Text>
         <div style={{ margin: 'var(--sp-normal) 0' }}>
           <Text variant="b1">
             {'Please check your email '}

src/app/templates/client/Client.jsx

@@ -49,7 +49,7 @@ function Client() {
         <Text className="loading__message" variant="b2">{loadingMsg}</Text>
 
         <div className="loading__appname">
-          <Text variant="h2" weight="bold">Cinny</Text>
+          <Text variant="h2" weight="medium">Cinny</Text>
         </div>
       </div>
     );

src/index.scss

@@ -74,6 +74,15 @@
   --ic-caution-normal: rgba(255, 179, 0, 80%);
   --ic-danger-normal: rgba(240, 71, 71, 0.7);
 
+  /* user mxid colors */
+  --mx-uc-1: hsl(208, 66%, 53%);
+  --mx-uc-2: hsl(302, 49%, 45%);
+  --mx-uc-3: hsl(163, 97%, 36%);
+  --mx-uc-4: hsl(343, 75%, 61%);
+  --mx-uc-5: hsl(24, 100%, 59%);
+  --mx-uc-6: hsl(181, 63%, 47%);
+  --mx-uc-7: hsl(242, 89%, 65%);
+  --mx-uc-8: hsl(94, 65%, 50%);
 
   /* system icon size | -ic-[size]: value */
   --ic-large: 38px;
@@ -229,6 +238,16 @@
   /* system icons | --ic-[background type]-[priority]: value */
   --ic-surface-normal: rgba(255, 255, 255, 84%);
   --ic-primary-normal: #ffffff;
+
+  /* user mxid colors */
+  --mx-uc-1: hsl(208, 100%, 58%);
+  --mx-uc-2: hsl(301, 100%, 60%);
+  --mx-uc-3: hsl(163, 93%, 41%);
+  --mx-uc-4: hsl(343, 91%, 66%);
+  --mx-uc-5: hsl(24, 100%, 67%);
+  --mx-uc-6: hsl(181, 100%, 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%);

src/util/colorMXID.js

@@ -1,6 +1,15 @@
 // https://github.com/cloudrac3r/cadencegq/blob/master/pug/mxid.pug
 
-const colors = ['#368bd6', '#ac3ba8', '#03b381', '#e64f7a', '#ff812d', '#2dc2c5', '#5c56f5', '#74d12c'];
+const colors = [
+  'var(--mx-uc-1)',
+  'var(--mx-uc-2)',
+  'var(--mx-uc-3)',
+  'var(--mx-uc-4)',
+  'var(--mx-uc-5)',
+  'var(--mx-uc-6)',
+  'var(--mx-uc-7)',
+  'var(--mx-uc-8)',
+];
 function hashCode(str) {
   let hash = 0;
   let i;