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>
     );