v1.6.1

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

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cinny",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "cinny",
-      "version": "1.6.0",
+      "version": "1.6.1",
       "license": "MIT",
       "dependencies": {
         "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinny",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "Yet another matrix client",
   "main": "index.js",
   "engines": {

public/index.html

@@ -4,7 +4,6 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0 user-scalable=no">
-    <link href="https://api.fontshare.com/css?f[]=supreme@300,301,400,401,500,501,700,701&display=swap" rel="stylesheet">
     <title>Cinny</title>
     <meta name="name"        content="Cinny">
     <meta name="author"      content="Ajay Bura">

public/res/fonts/roboto/LICENSE.txt

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

src/app/atoms/avatar/Avatar.jsx

@@ -8,7 +8,7 @@ import Text from '../text/Text';
 import RawIcon from '../system-icons/RawIcon';
 
 function Avatar({
-  text, bgColor, iconSrc, imageSrc, size,
+  text, bgColor, iconSrc, iconColor, imageSrc, size,
 }) {
   const [image, updateImage] = useState(imageSrc);
   let textSize = 's1';
@@ -22,17 +22,17 @@ 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' }}
-              className={`avatar__border${iconSrc !== null ? ' avatar__bordered' : ''} inline-flex--center`}
+              className={`avatar__border${iconSrc !== null ? '--active' : ''}`}
             >
               {
                 iconSrc !== null
-                  ? <RawIcon size={size} src={iconSrc} />
+                  ? <RawIcon size={size} src={iconSrc} color={iconColor} />
                   : text !== null && (
-                    <Text variant={textSize}>
+                    <Text variant={textSize} primary>
                       {twemojify([...text][0])}
                     </Text>
                   )
@@ -48,6 +48,7 @@ Avatar.defaultProps = {
   text: null,
   bgColor: 'transparent',
   iconSrc: null,
+  iconColor: null,
   imageSrc: null,
   size: 'normal',
 };
@@ -56,6 +57,7 @@ Avatar.propTypes = {
   text: PropTypes.string,
   bgColor: PropTypes.string,
   iconSrc: PropTypes.string,
+  iconColor: PropTypes.string,
   imageSrc: PropTypes.string,
   size: PropTypes.oneOf(['large', 'normal', 'small', 'extra-small']),
 };

src/app/atoms/avatar/Avatar.scss

@@ -1,3 +1,5 @@
+@use '../../partials/flex';
+
 .avatar-container {
   display: inline-flex;
   width: 42px;
@@ -31,11 +33,9 @@
     border-radius: inherit;
   }
 
-  .avatar__bordered {
-    box-shadow: var(--bs-surface-border);
-  }
-
   .avatar__border {
+    @extend .cp-fx__row--c-c;
+    
     position: absolute;
     top: 0;
     left: 0;
@@ -45,7 +45,11 @@
     border-radius: inherit;
 
     .text {
-      color: var(--tc-primary-high);
+      color: white;
+    }
+    &--active {
+      @extend .avatar__border;
+      box-shadow: var(--bs-surface-border);
     }
   }
 }

src/app/atoms/badge/NotificationBadge.jsx

@@ -8,7 +8,7 @@ function NotificationBadge({ alert, content }) {
   const notificationClass = alert ? ' notification-badge--alert' : '';
   return (
     <div className={`notification-badge${notificationClass}`}>
-      {content !== null && <Text variant="b3">{content}</Text>}
+      {content !== null && <Text variant="b3" weight="bold">{content}</Text>}
     </div>
   );
 }

src/app/atoms/badge/NotificationBadge.scss

@@ -8,7 +8,6 @@
   .text {
     color: var(--tc-badge);
     text-align: center;
-    font-weight: 700;
   }
 
   &--alert {

src/app/atoms/button/Button.scss

@@ -1,4 +1,5 @@
 @use 'state';
+@use '../../partials/dir';
 
 .btn-surface,
 .btn-primary,
@@ -18,27 +19,10 @@
   @include state.disabled;
 
   &--icon {
-    padding: {
+    @include dir.side(padding, var(--sp-tight), var(--sp-loose));
-      left: var(--sp-tight);
-      right: var(--sp-loose);
-    }
-
-    [dir=rtl] & {
-      padding: {
-        left: var(--sp-loose);
-        right: var(--sp-tight);
-      }
-    }
 
     .ic-raw {
-      margin-right: var(--sp-extra-tight);
+      @include dir.side(margin, 0, var(--sp-extra-tight));
-
-      [dir=rtl] & {
-        margin: {
-          right: 0;
-          left: var(--sp-extra-tight);
-        }
-      }
     }
   }
 }

src/app/atoms/button/Toggle.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .toggle {
   width: 44px;
   height: 24px;
@@ -27,13 +29,13 @@
     background-color: var(--bg-positive);
 
     &::before {
-      background-color: white;
+      --ltr: translateX(calc(125%));
-      transform: translateX(calc(125%));
+      --rtl: translateX(calc(-125%));
-      opacity: 1;
+      @include dir.prop(transform, var(--ltr), var(--rtl));
 
-      [dir=rtl] & {
+      transform: translateX(calc(125%));
-        transform: translateX(calc(-125%));
+      background-color: white;
-      }
+      opacity: 1;
     }
   }
 }

src/app/atoms/chip/Chip.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .chip {
   padding: var(--sp-ultra-tight) var(--sp-extra-tight);
   
@@ -24,10 +26,6 @@
   & > .ic-raw {
     width: 16px;
     height: 16px;
-    margin-right: var(--sp-ultra-tight);
+    @include dir.side(margin, 0, var(--sp-ultra-tight));
-    [dir=rtl] & {
-      margin-right: 0;
-      margin-left: var(--sp-ultra-tight);
-    }
   }
 }

src/app/atoms/context-menu/ContextMenu.scss

@@ -1,3 +1,6 @@
+@use '../../partials/text';
+@use '../../partials/dir';
+
 .context-menu {
   background-color: var(--bg-surface);
   box-shadow: var(--bs-popup);
@@ -29,10 +32,8 @@
   border-bottom: 1px solid var(--bg-surface-border);
 
   .text {
+    @extend .cp-txt__ellipsis;
     color: var(--tc-surface-low);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 
   &:not(:first-child) {
@@ -50,17 +51,11 @@
     white-space: nowrap;
 
     .text:first-child {
-      margin: {
+      @include dir.side(
-        left: calc(var(--ic-small) + var(--sp-ultra-tight));
+        margin,
-        right: var(--sp-extra-tight);
+        calc(var(--ic-small) + var(--sp-ultra-tight)),
-      }
+        var(--sp-extra-tight)
-
+      );
-      [dir=rtl] & {
-        margin: {
-          left: var(--sp-extra-tight);
-          right: calc(var(--ic-small) + var(--sp-ultra-tight));
-        }
-      }
     }
   }
   .btn-surface:focus {

src/app/atoms/divider/Divider.jsx

@@ -8,7 +8,7 @@ function Divider({ text, variant, align }) {
   const dividerClass = ` divider--${variant} divider--${align}`;
   return (
     <div className={`divider${dividerClass}`}>
-      {text !== null && <Text className="divider__text" variant="b3">{text}</Text>}
+      {text !== null && <Text className="divider__text" variant="b3" weight="bold">{text}</Text>}
     </div>
   );
 }

src/app/atoms/divider/Divider.scss

@@ -22,7 +22,6 @@
   &__text {
     padding: 2px var(--sp-extra-tight);
     border-radius: calc(var(--bo-radius) / 2);
-    font-weight: 500;
   }
 }
 

src/app/atoms/header/Header.scss

@@ -1,63 +1,43 @@
+@use '../../partials/text';
+@use '../../partials/dir';
+
 .header {
-  padding: {
+  @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
-    left: var(--sp-normal);
-    right: var(--sp-extra-tight);
-  }
   width: 100%;
   height: var(--header-height);
   border-bottom: 1px solid var(--bg-surface-border);
   display: flex;
   align-items: center;
 
-  [dir=rtl] & {
-    padding: {
-      left: var(--sp-extra-tight);
-      right: var(--sp-normal);
-    }
-  }
-
   &__title-wrapper {
     flex: 1;
     min-width: 0;
     display: flex;
     align-items: center;
     margin: 0 var(--sp-tight);
-
+    
     &:first-child {
-      margin-left: 0;
+      @include dir.side(margin, 0, var(--sp-tight));
-      [dir=rtl] & {
-        margin-right: 0;
-      }
     }
 
     & > .text:first-child {
+      @extend .cp-txt__ellipsis;
       min-width: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
     }
     & > .text-b3{
       flex: 1;
       min-width: 0;
 
       margin-top: var(--sp-ultra-tight);
-      margin-left: var(--sp-tight);
+      @include dir.side(margin, var(--sp-tight), 0);
-      padding-left: var(--sp-tight);
+      @include dir.side(padding, var(--sp-tight), 0);
-      border-left: 1px solid var(--bg-surface-border);
+      @include dir.side(border, 1px solid var(--bg-surface-border), none);
+
       max-height: calc(2 * var(--lh-b3));
       overflow: hidden;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
       display: -webkit-box;
-
-      [dir=rtl] & {
-        margin-left: 0;
-        padding-left: 0;
-        border-left: none;
-        margin-right: var(--sp-tight);
-        padding-right: var(--sp-tight);
-        border-right: 1px solid var(--bg-surface-border);
-      }
     }
   }
 }

src/app/atoms/segmented-controls/SegmentedControls.scss

@@ -1,4 +1,5 @@
 @use '../button/state';
+@use '../../partials/dir';
 
 .segmented-controls {
   background-color: var(--bg-surface-low);
@@ -20,12 +21,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-left: 1px solid var(--bg-surface-border);
+    @include dir.side(border, 1px solid var(--bg-surface-border), none);
-    
-    [dir=rtl] & {
-      border-left: none;
-      border-right: 1px solid var(--bg-surface-border);
-    }
 
     & .text:nth-child(2) {
       margin: 0 var(--sp-extra-tight);

src/app/atoms/text/Text.jsx

@@ -3,25 +3,39 @@ import PropTypes from 'prop-types';
 import './Text.scss';
 
 function Text({
-  id, className, variant, children,
+  className, style, variant, weight,
+  primary, span, children,
 }) {
-  const cName = className !== '' ? `${className} ` : '';
+  const classes = [];
-  if (variant === 'h1') return <h1 id={id === '' ? undefined : id} className={`${cName}text text-h1`}>{ children }</h1>;
+  if (className) classes.push(className);
-  if (variant === 'h2') return <h2 id={id === '' ? undefined : id} className={`${cName}text text-h2`}>{ children }</h2>;
+
-  if (variant === 's1') return <h4 id={id === '' ? undefined : id} className={`${cName}text text-s1`}>{ children }</h4>;
+  classes.push(`text text-${variant} text-${weight}`);
-  return <p id={id === '' ? undefined : id} className={`${cName}text text-${variant}`}>{ children }</p>;
+  if (primary) classes.push('font-primary');
+
+  const textClass = classes.join(' ');
+  if (span) return <span className={textClass} style={style}>{ children }</span>;
+  if (variant === 'h1') return <h1 className={textClass} style={style}>{ children }</h1>;
+  if (variant === 'h2') return <h2 className={textClass} style={style}>{ children }</h2>;
+  if (variant === 's1') return <h4 className={textClass} style={style}>{ children }</h4>;
+  return <p className={textClass} style={style}>{ children }</p>;
 }
 
 Text.defaultProps = {
-  id: '',
+  className: null,
-  className: '',
+  style: null,
   variant: 'b1',
+  weight: 'normal',
+  primary: false,
+  span: false,
 };
 
 Text.propTypes = {
-  id: PropTypes.string,
   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,
+  span: PropTypes.bool,
   children: PropTypes.node.isRequired,
 };
 

src/app/atoms/text/Text.scss

@@ -1,7 +1,5 @@
-@mixin font($type, $weight) {
+@mixin font($type) {
-  
   font-size: var(--fs-#{$type});
-  font-weight: $weight;
   letter-spacing: var(--ls-#{$type});
   line-height: var(--lh-#{$type});
 
@@ -11,7 +9,7 @@
   }
 }
 
-%text {
+.text {
   margin: 0;
   padding: 0;
   color: var(--tc-surface-high);
@@ -26,30 +24,37 @@
   }
 }
 
+.text-light {
+  font-weight: var(--fw-light);
+}
+.text-normal {
+  font-weight: var(--fw-normal);
+}
+.text-medium {
+  font-weight: var(--fw-medium);
+}
+.text-bold {
+  font-weight: var(--fw-bold);
+}
+
 .text-h1 {
-  @extend %text;
+  @include font(h1);
-  @include font(h1, 500);
 }
 .text-h2 {
-  @extend %text;
+  @include font(h2);
-  @include font(h2, 500);
 }
 .text-s1 {
-  @extend %text;
+  @include font(s1);
-  @include font(s1, 400);
 }
 .text-b1 {
-  @extend %text;
+  @include font(b1);
-  @include font(b1, 400);
   color: var(--tc-surface-normal);
 }
 .text-b2 {
-  @extend %text;
+  @include font(b2);
-  @include font(b2, 400);
   color: var(--tc-surface-normal);
 }
 .text-b3 {
-  @extend %text;
+  @include font(b3);
-  @include font(b3, 400);
   color: var(--tc-surface-low);
 }

src/app/molecules/dialog/Dialog.jsx

@@ -10,21 +10,24 @@ import ScrollView from '../../atoms/scroll/ScrollView';
 import RawModal from '../../atoms/modal/RawModal';
 
 function Dialog({
-  className, isOpen, title,
+  className, isOpen, title, onAfterOpen, onAfterClose,
-  contentOptions, onRequestClose, children,
+  contentOptions, onRequestClose, closeFromOutside, children,
 }) {
   return (
     <RawModal
       className={`${className === null ? '' : `${className} `}dialog-model`}
       isOpen={isOpen}
+      onAfterOpen={onAfterOpen}
+      onAfterClose={onAfterClose}
       onRequestClose={onRequestClose}
+      closeFromOutside={closeFromOutside}
       size="small"
     >
       <div className="dialog">
         <div className="dialog__content">
           <Header>
             <TitleWrapper>
-              <Text variant="h2">{twemojify(title)}</Text>
+              <Text variant="h2" weight="medium" primary>{twemojify(title)}</Text>
             </TitleWrapper>
             {contentOptions}
           </Header>
@@ -44,7 +47,10 @@ function Dialog({
 Dialog.defaultProps = {
   className: null,
   contentOptions: null,
+  onAfterOpen: null,
+  onAfterClose: null,
   onRequestClose: null,
+  closeFromOutside: true,
 };
 
 Dialog.propTypes = {
@@ -52,7 +58,10 @@ Dialog.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   title: PropTypes.string.isRequired,
   contentOptions: PropTypes.node,
+  onAfterOpen: PropTypes.func,
+  onAfterClose: PropTypes.func,
   onRequestClose: PropTypes.func,
+  closeFromOutside: PropTypes.bool,
   children: PropTypes.node.isRequired,
 };
 

src/app/molecules/following-members/FollowingMembers.scss

@@ -1,3 +1,4 @@
+@use '../../partials/text';
 
 .following-members {
   width: 100%;
@@ -13,9 +14,7 @@
     margin: 0 var(--sp-extra-tight);
   }
   & .text {
-    overflow: hidden;
+    @extend .cp-txt__ellipsis;
-    white-space: nowrap;
-    text-overflow: ellipsis;
     color: var(--tc-surface-low);
     b {
       color: var(--tc-surface-normal);

src/app/molecules/image-upload/ImageUpload.jsx

@@ -53,7 +53,7 @@ function ImageUpload({
           size="large"
         />
         <div className={`img-upload__process ${uploadPromise === null ? ' img-upload__process--stopped' : ''}`}>
-          {uploadPromise === null && <Text variant="b3">Upload</Text>}
+          {uploadPromise === null && <Text variant="b3" weight="bold">Upload</Text>}
           {uploadPromise !== null && <Spinner size="small" />}
         </div>
       </button>

src/app/molecules/image-upload/ImageUpload.scss

@@ -24,7 +24,6 @@
 		z-index: 1;
 		& .text {
 			text-transform: uppercase;
-			font-weight: 600;
 			color: white;
 		}
 		&--stopped {

src/app/molecules/import-export-e2e-room-keys/ImportE2ERoomKeys.scss

@@ -1,3 +1,5 @@
+@use '../../partials/text';
+@use '../../partials/dir';
 
 .import-e2e-room-keys {
   &__file {
@@ -22,17 +24,9 @@
     }
     
     & .text {
-      margin-left: var(--sp-tight);
+      @extend .cp-txt__ellipsis;
-      margin-right: var(--sp-loose);
+      @include dir.side(margin, var(--sp-tight), var(--sp-loose));
       max-width: 86px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-
-      [dir=rtl] {
-        margin-right: var(--sp-tight);
-        margin-left: var(--sp-loose);
-      }
     }
   }
 

src/app/molecules/media/Media.scss

@@ -1,3 +1,5 @@
+@use '../../partials/text';
+
 .file-header {
   display: flex;
   align-items: center;
@@ -5,11 +7,9 @@
   min-height: 42px;
 
   & .file-name {
+    @extend .cp-txt__ellipsis;
     flex: 1;
     color: var(--tc-surface-low);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 
   & a {

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">{twemojify(username)}</Text>
+      style={{ color: colorMXID(userId) }}
-      <Text variant="b1">{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>
@@ -333,7 +338,7 @@ function MessageReactionGroup({ roomTimeline, mEvent }) {
     } else {
       reaction.users.push(senderId);
       reaction.count = reaction.users.length;
-      reaction.isActive = isActive;
+      if (isActive) reaction.isActive = isActive;
     }
 
     reactions[key] = reaction;
@@ -438,7 +443,7 @@ const MessageOptions = React.memo(({
             <MenuHeader>Options</MenuHeader>
             <MenuItem
               iconSrc={TickMarkIC}
-              onClick={() => openReadReceipts(roomId, roomTimeline.getEventReaders(eventId))}
+              onClick={() => openReadReceipts(roomId, roomTimeline.getEventReaders(mEvent))}
             >
               Read receipts
             </MenuItem>

src/app/molecules/message/Message.scss

@@ -1,9 +1,11 @@
 @use '../../atoms/scroll/scrollbar';
+@use '../../partials/text';
+@use '../../partials/dir';
 
 .message,
 .ph-msg {
-  padding: var(--sp-ultra-tight) var(--sp-normal);
+  padding: var(--sp-ultra-tight);
-  padding-right: var(--sp-extra-tight);
+  @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
   display: flex;
 
   &:hover {
@@ -12,17 +14,11 @@
       display: flex;
     }
   }
-
-  [dir=rtl] & {
-    padding: {
-      left: var(--sp-extra-tight);
-      right: var(--sp-normal);
-    }
-  }
   
   &__avatar-container {
     padding-top: 6px;
-    margin-right: var(--sp-tight);
+    @include dir.side(margin, 0, var(--sp-tight));
+
     & .avatar-container {
       transition: transform 200ms var(--fluid-push);
       &:hover {
@@ -34,13 +30,6 @@
       cursor: pointer;
       display: flex;
     }
-
-    [dir=rtl] & {
-      margin: {
-        left: var(--sp-tight);
-        right: 0;
-      }
-    }
   }
 
   &__main-container {
@@ -62,7 +51,9 @@
     width: var(--av-small);
   }
   &--focus {
-    box-shadow: inset 2px 0 0 var(--bg-caution);
+    --ltr: inset 2px 0 0 var(--bg-caution);
+    --rtl: inset -2px 0 0 var(--bg-caution);
+    @include dir.prop(box-shadow, var(--ltr), var(--rtl));
     background-color: var(--bg-caution-hover);
   }
 }
@@ -77,20 +68,13 @@
 
   &__header,
   &__body > div {
-    margin: var(--sp-ultra-tight) 0;
+    margin: var(--sp-ultra-tight);
-    margin-right: var(--sp-extra-tight);
+    @include dir.side(margin, 0, var(--sp-extra-tight));
     height: var(--fs-b1);
     width: 100%;
     max-width: 100px;
     background-color: var(--bg-surface-hover);
     border-radius: calc(var(--bo-radius) / 2);
-
-    [dir=rtl] & {
-      margin: {
-        right: 0;
-        left: var(--sp-extra-tight);
-      }
-    }
   }
   &__body {
     display: flex;
@@ -121,24 +105,16 @@
   & .message__profile {
     min-width: 0;
     color: var(--tc-surface-high);
-    margin-right: var(--sp-tight);
+    @include dir.side(margin, 0, var(--sp-tight));
 
-    [dir=rtl] & {
+    & > span {
-      margin-left: var(--sp-tight);
+      @extend .cp-txt__ellipsis;
-      margin-right: 0;
-    }
-
-    & > .text {
       color: inherit;
-      font-weight: 500;
-      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; }
     }
   }
 
@@ -167,10 +143,8 @@
     }
   }
   .text {
+    @extend .cp-txt__ellipsis;
     color: var(--tc-surface-low);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
   .ic-raw {
     width: 16px;
@@ -192,7 +166,7 @@
     padding: 0 2px;
     border-radius: 4px;
     cursor: pointer;
-    font-weight: 500;
+    font-weight: var(--fw-medium);
     &:hover {
       background-color: hsla(0, 0%, 64%, 0.3);
       color: var(--tc-surface-high);
@@ -236,10 +210,8 @@
 .message__edit {
   padding: var(--sp-extra-tight) 0;
   &-btns button {
-    margin: var(--sp-tight) var(--sp-tight) 0 0;
+    margin: var(--sp-tight) 0 0 0;
-    [dir=rtl] & {
+    @include dir.side(margin, 0, var(--sp-tight));
-      margin: var(--sp-tight) 0 0 var(--sp-tight);
-    }
   }
 }
 .message__reactions {
@@ -256,7 +228,8 @@
   }
 }
 .msg__reaction {
-  margin: var(--sp-extra-tight) var(--sp-extra-tight) 0 0;
+  margin: var(--sp-extra-tight) 0 0 0;
+  @include dir.side(margin, 0, var(--sp-extra-tight));
   padding: 0 var(--sp-ultra-tight);
   min-height: 26px;
   display: inline-flex;
@@ -283,13 +256,6 @@
     margin-bottom: -2px;
   }
 
-  [dir=rtl] & {
-    margin: {
-      right: 0;
-      left: var(--sp-extra-tight);
-    }
-  }
-
   @media (hover: hover) {
     &:hover {
       background-color: var(--bg-surface-hover);
@@ -315,7 +281,9 @@
 .message__options {
   position: absolute;
   top: 0;
-  right: 60px;
+  @include dir.prop(right, 60px, unset);
+  @include dir.prop(left, unset, 60px);
+
   z-index: 99;
   transform: translateY(-50%);
 
@@ -323,11 +291,6 @@
   box-shadow: var(--bs-surface-border);
   background-color: var(--bg-surface-low);
   display: none;
-
-  [dir=rtl] & {
-    left: 60px;
-    right: unset;
-  }
 }
 
 // markdown formating
@@ -407,41 +370,23 @@
   & blockquote {
     display: inline-block;
     max-width: 100%;
-    padding-left: var(--sp-extra-tight);
+    @include dir.side(padding, var(--sp-extra-tight), 0);
-    border-left: 4px solid var(--bg-surface-active);
+    @include dir.side(border, 4px solid var(--bg-surface-active), 0);
     white-space: initial !important;
 
     & > * {
       white-space: pre-wrap;
     }
-
-    [dir=rtl] & {
-      padding: {
-        left: 0;
-        right: var(--sp-extra-tight);
-      }
-      border: {
-        left: none;
-        right: 4px solid var(--bg-surface-active);
-      }
-    }
   }
   & ul,
   & ol {
     margin: var(--sp-ultra-tight) 0;
-    padding-left: 24px;
+    @include dir.side(padding, 24px, 0);
     white-space: initial !important;
     
     & > * {
       white-space: pre-wrap;
     }
-
-    [dir=rtl] & {
-      padding: {
-        left: 0;
-        right: 24px;
-      }
-    }
   }
   & ul.contains-task-list {
     padding: 0;

src/app/molecules/message/TimelineChange.scss

@@ -1,6 +1,9 @@
+@use '../../partials/dir';
+
 .timeline-change {
-  padding: var(--sp-ultra-tight) var(--sp-normal);
+  padding: var(--sp-ultra-tight);
-  padding-right: var(--sp-extra-tight);
+  @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
+
   display: flex;
   align-items: center;
   width: 100%;
@@ -9,13 +12,6 @@
     background-color: var(--bg-surface-hover);
   }
 
-  [dir=rtl] & {
-    padding: {
-      left: var(--sp-extra-tight);
-      right: var(--sp-normal);
-    }
-  }
-
   &__avatar-container {
     width: var(--av-small);
     display: inline-flex;

src/app/molecules/people-selector/PeopleSelector.scss

@@ -1,17 +1,14 @@
+@use '../../partials/text';
+@use '../../partials/dir';
+
 .people-selector {
   width: 100%;
   padding: var(--sp-extra-tight);
-  padding-left: var(--sp-normal);
+  @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
   display: flex;
   align-items: center;
   cursor: pointer;
-  
+
-  [dir=rtl] & {
-    padding: {
-      left: var(--sp-extra-tight);
-      right: var(--sp-normal);
-    }
-  }
   @media (hover: hover) {
     &:hover {
       background-color: var(--bg-surface-hover);
@@ -26,13 +23,11 @@
   }
 
   &__name {
+    @extend .cp-txt__ellipsis;
     flex: 1;
     min-width: 0;
     margin: 0 var(--sp-tight);
     color: var(--tc-surface-normal);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
   }
   &__role {
     color: var(--tc-surface-low);

src/app/molecules/popup-window/PopupWindow.jsx

@@ -68,7 +68,7 @@ function PopupWindow({
             <Header>
               <IconButton size="small" src={ChevronLeftIC} onClick={onRequestClose} tooltip="Back" />
               <TitleWrapper>
-                <Text variant="s1">{twemojify(title)}</Text>
+                <Text variant="s1" weight="medium" primary>{twemojify(title)}</Text>
               </TitleWrapper>
               {drawerOptions}
             </Header>
@@ -84,7 +84,7 @@ function PopupWindow({
         <div className="pw__content">
           <Header>
             <TitleWrapper>
-              <Text variant="h2">{twemojify(contentTitle !== null ? contentTitle : title)}</Text>
+              <Text variant="h2" weight="medium" primary>{twemojify(contentTitle !== null ? contentTitle : title)}</Text>
             </TitleWrapper>
             {contentOptions}
           </Header>

src/app/molecules/popup-window/PopupWindow.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .pw-model {
   --modal-height: 656px;
   max-height: var(--modal-height) !important;
@@ -16,14 +18,7 @@
   &__drawer {
     width: var(--popup-window-drawer-width);
     background-color: var(--bg-surface-low);
-    border-right: 1px solid var(--bg-surface-border);
+    @include dir.side(border, none, 1px solid var(--bg-surface-border));
-
-    [dir=rtl] & {
-      border: {
-        right: none;
-        left: 1px solid var(--bg-surface-border);
-      }
-    }
   }
   &__content {
     flex: 1;
@@ -52,11 +47,9 @@
 .pw__drawer {
   & .header {
     padding-left: var(--sp-tight);
+    @include dir.side(padding, var(--sp-tight), var(--sp-tight));
     & .header__title-wrapper {
-      margin: 0 var(--sp-extra-tight);
+      @include dir.side(margin, var(--sp-ultra-tight), var(--sp-extra-tight));
-    }
-    [dir=rtl] & {
-        padding-right: var(--sp-tight);
     }
   }
 }
@@ -77,15 +70,8 @@
 
   & .context-menu__item > button {
     border-radius: var(--bo-radius);
-    & .text {
-      color: var(--tc-surface-normal);
-    }
     & .ic-raw {
-      margin-right: var(--sp-tight);
+      @include dir.side(margin, 0, var(--sp-tight));
-      [dir=rtl] & {
-        margin-right: 0;
-        margin-left: var(--sp-tight);
-      }
     }
   }
 }

src/app/molecules/room-intro/RoomIntro.jsx

@@ -15,7 +15,7 @@ function RoomIntro({
     <div className="room-intro">
       <Avatar imageSrc={avatarSrc} text={name} bgColor={colorMXID(roomId)} size="large" />
       <div className="room-intro__content">
-        <Text className="room-intro__name" variant="h1">{twemojify(heading)}</Text>
+        <Text className="room-intro__name" variant="h1" weight="medium" primary>{twemojify(heading)}</Text>
         <Text className="room-intro__desc" variant="b1">{twemojify(desc, undefined, true)}</Text>
         { time !== null && <Text className="room-intro__time" variant="b3">{time}</Text>}
       </div>

src/app/molecules/room-intro/RoomIntro.scss

@@ -1,15 +1,10 @@
+@use '../../partials/dir';
+
 .room-intro {
   margin-top: calc(2 * var(--sp-extra-loose));
   margin-bottom: var(--sp-extra-loose);
-  padding-left: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
+  --left-pad: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
-  padding-right: var(--sp-extra-tight);
+  @include dir.side(padding, var(--left-pad), var(--sp-extra-tight));
-
-  [dir=rtl] & {
-    padding: {
-      left: var(--sp-extra-tight);
-      right: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
-    }
-  }
 
   .room-intro__content {
     margin-top: var(--sp-extra-loose);

src/app/molecules/room-selector/RoomSelector.jsx

@@ -55,16 +55,17 @@ function RoomSelector({
             text={name}
             bgColor={colorMXID(roomId)}
             imageSrc={imageSrc}
+            iconColor="var(--ic-surface-low)"
             iconSrc={iconSrc}
             size="extra-small"
           />
-          <Text variant="b1">
+          <Text variant="b1" weight={isUnread ? 'medium' : 'normal'}>
             {twemojify(name)}
             {parentName && (
-              <span className="text text-b3">
+              <Text variant="b3" span>
                 {' — '}
                 {twemojify(parentName)}
-              </span>
+              </Text>
             )}
           </Text>
           { isUnread && (

src/app/molecules/room-selector/RoomSelector.scss

@@ -1,15 +1,9 @@
-.room-selector-flex {
+@use '../../partials/flex';
-  display: flex;
+@use '../../partials/text';
-  align-items: center;
+@use '../../partials/dir';
-}
-.room-selector-flexItem {
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-}
 
 .room-selector {
-  @extend .room-selector-flex;
+  @extend .cp-fx__row--s-c;
 
   border: 1px solid transparent;
   border-radius: var(--bo-radius);
@@ -17,7 +11,6 @@
 
   &--unread {
     .room-selector__content > .text {
-      font-weight: 500;
       color: var(--tc-surface-high);
     }
   }
@@ -56,35 +49,28 @@
 }
 
 .room-selector__content {
-  @extend .room-selector-flexItem;
+  @extend .cp-fx__item-one;
-  @extend .room-selector-flex;
+  @extend .cp-fx__row--s-c;
   padding: 0 var(--sp-extra-tight);
   min-height: 40px;
   cursor: inherit;
 
-  & > .avatar-container .avatar__bordered {
+  & > .avatar-container .avatar__border--active {
     box-shadow: none;
   }
 
   & > .text {
-    @extend .room-selector-flexItem;
+    @extend .cp-fx__item-one;
+    @extend .cp-txt__ellipsis;
     margin: 0 var(--sp-extra-tight);
 
     color: var(--tc-surface-normal-low);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
   }
 }
 .room-selector__options {
-  @extend .room-selector-flex;
+  @extend .cp-fx__row--s-c;
+  @include dir.side(margin, 0, var(--sp-ultra-tight));
   display: none;
-  margin-right: var(--sp-ultra-tight);
-
-  [dir=rtl] & {
-    margin-right: 0;
-    margin-left: var(--sp-ultra-tight);
-  }
 
   &:empty {
     margin: 0 !important;

src/app/molecules/setting-tile/SettingTile.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .setting-tile {
   &__title__wrapper {
     display: flex;
@@ -6,11 +8,6 @@
   &__title {
     flex: 1;
     min-width: 0;
-    margin-right: var(--sp-normal);
+    @include dir.side(margin, 0, var(--sp-normal));
-    [dir=rtl] & {
-      margin-right: 0;
-      margin-left: var(--sp-normal);
-    }
   }
-
 }

src/app/molecules/sidebar-avatar/SidebarAvatar.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .sidebar-avatar {
   position: relative;
   display: flex;
@@ -7,10 +9,11 @@
   
   & .notification-badge {
     position: absolute;
-    right: 0;
+    @include dir.prop(left, unset, 0);
+    @include dir.prop(right, 0, unset);
     top: 0;
     box-shadow: 0 0 0 2px var(--bg-surface-low);
-    transform: translate(20%, -20%);
+    @include dir.prop(transform, translate(20%, -20%), translate(-20%, -20%));
 
     margin: 0 !important;
   }
@@ -19,10 +22,12 @@
     transition: transform 200ms var(--fluid-push);
   }
   &:hover .avatar-container {
-    transform: translateX(4px)
+    @include dir.prop(transform, translateX(4px), translateX(-4px));
   }
   &:hover .notification-badge {
-    transform: translate(calc(20% + 4px), -20%);
+    --ltr: translate(calc(20% + 4px), -20%);
+    --rtl: translate(calc(-20% - 4px), -20%);
+    @include dir.prop(transform, var(--ltr), var(--rtl));
   }
   &:focus {
     outline: none;
@@ -37,21 +42,16 @@
     content: "";
     display: block;
     position: absolute;
-    left: -11px;
+    @include dir.prop(left, -11px, unset);
+    @include dir.prop(right, unset, -11px);
     top: 50%;
     transform: translateY(-50%);
 
     width: 3px;
     height: 12px;
     background-color: var(--tc-surface-high);
-    border-radius: 0 4px 4px 0;
+    @include dir.prop(border-radius, 0 4px 4px 0, 4px 0 0 4px);
     transition: height 200ms linear;
-
-    [dir=rtl] & {
-      left: unset;
-      right: -11px;
-      border-radius: 4px 0 0 4px;
-    }
   }
   &--active:hover::before,
   &--active:focus::before,

src/app/organisms/create-room/CreateRoom.scss

@@ -1,6 +1,8 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+
 .create-room {
-  margin: 0 var(--sp-normal);
+  @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
-  margin-right: var(--sp-extra-tight);
 
   &__form > * {
     margin-top: var(--sp-normal);
@@ -23,12 +25,8 @@
       margin-bottom: var(--sp-ultra-tight);
     }
     &__tip {
-      margin-left: 46px;
       margin-top: var(--sp-ultra-tight);
-      [dir=rtl] & {
+      @include dir.side(margin, 46px, 0);
-        margin-left: 0;
-        margin-right: 46px;
-      }
     }
     & .text {
       display: flex;
@@ -46,24 +44,20 @@
       }
     }
     & .text:first-child {
-      border-right-width: 0;
+      @include dir.prop(border-width, 1px 0 1px 1px, 1px 1px 1px 0);
-      border-radius: var(--bo-radius) 0 0 var(--bo-radius);
+      @include dir.prop(
+        border-radius,
+        var(--bo-radius) 0 0 var(--bo-radius),
+        0 var(--bo-radius) var(--bo-radius) 0,
+      );
     }
     & .text:last-child {
-      border-left-width: 0;
+      @include dir.prop(border-width, 1px 1px 1px 0, 1px 0 1px 1px);
-      border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
+      @include dir.prop(
-    }
+        border-radius,
-    [dir=rtl] & {
+        0 var(--bo-radius) var(--bo-radius) 0,
-      & .text:first-child {
+        var(--bo-radius) 0 0 var(--bo-radius),
-        border-left-width: 0;
+      );
-        border-right-width: 1px;
-        border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
-      }
-      & .text:last-child {
-        border-right-width: 0;
-        border-left-width: 1px;
-        border-radius: var(--bo-radius) 0 0 var(--bo-radius);
-      }
     }
   }
 
@@ -74,11 +68,7 @@
     & .input-container {
       flex: 1;
       min-width: 0;
-      margin-right: var(--sp-normal);
+      @include dir.side(margin, 0, var(--sp-normal));
-      [dir=rtl] & {
-        margin-right: 0;
-        margin-left: var(--sp-normal);
-      }
     }
     & .btn-primary {
       padding-top: 11px;
@@ -87,24 +77,13 @@
   }
 
   &__loading {
-    display: flex;
+    @extend .cp-fx__row--c-c;
-    justify-content: center;
-    align-items: center;
     & .text {
-      margin-left: var(--sp-normal);
+      @include dir.side(margin, var(--sp-normal), 0);
-      [dir=rtl] & {
-        margin-left: 0;
-        margin-right: var(--sp-normal);
-      }
     }
   }
   &__error {
     text-align: center;
     color: var(--bg-danger) !important;
   }
-
-  [dir=rtl] & {
-    margin-right: var(--sp-normal);
-    margin-left: var(--sp-extra-tight);
-  }
 }

src/app/organisms/emoji-board/EmojiBoard.jsx

@@ -61,7 +61,7 @@ function EmojiGroup({ name, groupEmojis }) {
 
   return (
     <div className="emoji-group">
-      <Text className="emoji-group__header" variant="b2">{name}</Text>
+      <Text className="emoji-group__header" variant="b2" weight="bold">{name}</Text>
       {groupEmojis.length !== 0 && <div className="emoji-set">{getEmojiBoard()}</div>}
     </div>
   );

src/app/organisms/emoji-board/EmojiBoard.scss

@@ -1,32 +1,22 @@
-.emoji-board-flexBoxV {
+@use '../../partials/flex';
-  display: flex;
+@use '../../partials/text';
-  flex-direction: column;
+@use '../../partials/dir';
-}
-.emoji-board-flexItem {
-  flex: 1;
-  min-height: 0;
-  min-width: 0;
-}
 
 .emoji-board {
   display: flex;
   &__content {
-    @extend .emoji-board-flexItem;
+    @extend .cp-fx__item-one;
-    @extend .emoji-board-flexBoxV;
+    @extend .cp-fx__column;
     height: 400px;
     width: 286px;
   }
   &__nav {
-    @extend .emoji-board-flexBoxV;
+    @extend .cp-fx__column;
     justify-content: center;
 
     padding: 4px 6px;
     background-color: var(--bg-surface-low);
-    border-left: 1px solid var(--bg-surface-border);
+    @include dir.side(border, 1px solid var(--bg-surface-border), none);
-    [dir=rtl] & {
-      border-left: none;
-      border-right: 1px solid var(--bg-surface-border);
-    }
 
     & > .ic-btn-surface {
       margin: calc(var(--sp-ultra-tight) / 2) 0;
@@ -41,13 +31,10 @@
   
   & .ic-raw {
     position: absolute;
-    left: var(--sp-normal);
+    @include dir.prop(left, var(--sp-normal), unset);
+    @include dir.prop(right, unset, var(--sp-normal));
     top: var(--sp-normal);
     transform: translateY(1px);
-    [dir=rtl] & {
-      left: unset;
-      right: var(--sp-normal);
-    }
   }
 
   & .input-container {
@@ -60,8 +47,8 @@
   }
 }
 .emoji-board__content__emojis {
-  @extend .emoji-board-flexItem;
+  @extend .cp-fx__item-one;
-  @extend .emoji-board-flexBoxV;
+  @extend .cp-fx__column;
 }
 .emoji-board__content__info {
   margin: 0 var(--sp-extra-tight);
@@ -79,11 +66,9 @@
     }
   }
   & > p:last-child {
-    @extend .emoji-board-flexItem;
+    @extend .cp-fx__item-one;
+    @extend .cp-txt__ellipsis;
     margin: 0 var(--sp-tight);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
   }
 }
 
@@ -98,24 +83,17 @@
     z-index: 99;
     background-color: var(--bg-surface);
 
-    margin-left: var(--sp-extra-tight);
+    @include dir.side(margin, var(--sp-extra-tight), 0);
     padding: var(--sp-extra-tight) var(--sp-ultra-tight);
     text-transform: uppercase;
-    font-weight: 600;
     box-shadow: 0 -4px 0 0 var(--bg-surface);
     border-bottom: 1px solid var(--bg-surface-border);
-    [dir=rtl] & {
-      margin-left: 0;
-      margin-right: var(--sp-extra-tight);
-    }
   }
   & .emoji-set {
-    margin: var(--sp-extra-tight) calc(var(--sp-normal) - var(--emoji-padding));
+    --left-margin: calc(var(--sp-normal) - var(--emoji-padding));
-    margin-right: calc(var(--sp-extra-tight) - var(--emoji-padding));
+    --right-margin: calc(var(--sp-extra-tight) - var(--emoji-padding));
-    [dir=rtl] & {
+    margin: var(--sp-extra-tight);
-      margin-right: calc(var(--sp-normal) - var(--emoji-padding));
+    @include dir.side(margin, var(--left-margin), var(--right-margin));
-      margin-left: calc(var(--sp-extra-tight) - var(--emoji-padding));
-    }
   }
   & .emoji {
     width: 38px;

src/app/organisms/invite-list/InviteList.jsx

@@ -89,7 +89,7 @@ function InviteList({ isOpen, onRequestClose }) {
       <div className="invites-content">
         { initMatrix.roomList.inviteDirects.size !== 0 && (
           <div className="invites-content__subheading">
-            <Text variant="b3">Direct Messages</Text>
+            <Text variant="b3" weight="bold">Direct Messages</Text>
           </div>
         )}
         {
@@ -117,14 +117,14 @@ function InviteList({ isOpen, onRequestClose }) {
         }
         { initMatrix.roomList.inviteSpaces.size !== 0 && (
           <div className="invites-content__subheading">
-            <Text variant="b3">Spaces</Text>
+            <Text variant="b3" weight="bold">Spaces</Text>
           </div>
         )}
         { Array.from(initMatrix.roomList.inviteSpaces).map(renderRoomTile) }
 
         { initMatrix.roomList.inviteRooms.size !== 0 && (
           <div className="invites-content__subheading">
-            <Text variant="b3">Rooms</Text>
+            <Text variant="b3" weight="bold">Rooms</Text>
           </div>
         )}
         { Array.from(initMatrix.roomList.inviteRooms).map(renderRoomTile) }

src/app/organisms/invite-list/InviteList.scss

@@ -1,13 +1,13 @@
+@use '../../partials/dir';
+
 .invites-content {
-  margin: 0 var(--sp-normal);
+  @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
-  margin-right: var(--sp-extra-tight);
 
   &__subheading {
     margin-top: var(--sp-extra-loose);
 
     & .text {
       text-transform: uppercase;
-      font-weight: 600;
     }
     &:first-child {
       margin-top: var(--sp-tight);
@@ -21,19 +21,6 @@
     }
   }
   & .invite-btn__container .btn-surface {
-    margin-right: var(--sp-normal);
+    @include dir.side(margin, 0, var(--sp-normal));
-    [dir=rtl] & {
-      margin: {
-        right: 0;
-        left: var(--sp-normal);
-      }
-    }
-  }
-
-  [dir=rtl] & {
-    margin: {
-      left: var(--sp-extra-tight);
-      right: var(--sp-normal);
-    }
   }
 }

src/app/organisms/invite-user/InviteUser.scss

@@ -1,7 +1,8 @@
+@use '../../partials/dir';
+
 .invite-user {
-  margin: 0 var(--sp-normal);
-  margin-right: var(--sp-extra-tight);
   margin-top: var(--sp-extra-tight);
+  @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
 
   &__form {
     display: flex;
@@ -10,11 +11,7 @@
     & .input-container {
       flex: 1;
       min-width: 0;
-      margin-right: var(--sp-normal);
+      @include dir.side(margin, 0, var(--sp-normal));
-      [dir=rtl] & {
-        margin-right: 0;
-        margin-left: var(--sp-normal);
-      }
     }
 
     & .btn-primary {
@@ -45,11 +42,4 @@
       align-self: flex-end;
     }
   }
-
-  [dir=rtl] & {
-    margin: {
-      left: var(--sp-extra-tight);
-      right: var(--sp-normal);
-    }
-  }
 }

src/app/organisms/navigation/Drawer.scss

@@ -1,37 +1,24 @@
-.drawer-flexBox {
+@use '../../partials/flex';
-  display: flex;
+@use '../../partials/dir';
-  flex-direction: column;
-}
-.drawer-flexItem {
-  flex: 1;
-  min-height: 0;
-}
 
 .drawer {
-  @extend .drawer-flexItem;
+  @extend .cp-fx__column;
-  @extend .drawer-flexBox;
+  @extend .cp-fx__item-one;
   min-width: 0;
-  border-right: 1px solid var(--bg-surface-border);
+  @include dir.side(border,
-
+    none,
-  [dir=rtl] & {
+    1px solid var(--bg-surface-border),
-    border-right: none;
+  );
-    border-left: 1px solid var(--bg-surface-border);
-  }
-
-  & .header__title-wrapper .text {
-    font-weight: 500;
-  }
 
   &__content-wrapper {
-    @extend .drawer-flexItem;
+    @extend .cp-fx__item-one;
-    @extend .drawer-flexBox;
+    @extend .cp-fx__column;
   }
 
   &__state {
     padding: var(--sp-extra-tight);
     border-top: 1px solid var(--bg-surface-border);
-    display: flex;
+    @extend .cp-fx__row--c-c;
-    justify-content: center;
 
     & .text {
       color: var(--tc-danger-high);
@@ -39,7 +26,7 @@
   }
 }
 .rooms__wrapper {
-  @extend .drawer-flexItem;
+  @extend .cp-fx__item-one;
   position: relative;
 }
 
@@ -62,13 +49,7 @@
 
   & > .room-selector {
     width: calc(100% - var(--sp-extra-tight));
-    margin-left: auto;
+    @include dir.side(margin, auto, 0);
-
-    [dir=rtl] & {
-      margin-left: 0;
-      margin-right: auto;
-    }
-
   }
 
   & > .room-selector:first-child {
@@ -79,6 +60,5 @@
     margin: var(--sp-normal);
     margin-bottom: var(--sp-extra-tight);
     text-transform: uppercase;
-    font-weight: 600;
   }
 }

src/app/organisms/navigation/DrawerBreadcrumb.scss

@@ -1,3 +1,6 @@
+@use '../../partials/text';
+@use '../../partials/dir';
+
 .breadcrumb__wrapper {
   height: var(--header-height);
   position: relative;
@@ -47,17 +50,12 @@
     white-space: nowrap;
     box-shadow: none;
     & p {
+      @extend .cp-txt__ellipsis;
       max-width: 86px;
-      overflow: hidden;
-      text-overflow: ellipsis;
     }
 
     & .notification-badge {
-      margin-left: var(--sp-extra-tight);
+      @include dir.side(margin, var(--sp-extra-tight), 0);
-      [dir=rtl] & {
-        margin-left: 0;
-        margin-right: var(--sp-extra-tight);
-      }
     }
   }
 

src/app/organisms/navigation/DrawerHeader.jsx

@@ -32,7 +32,7 @@ function DrawerHeader({ selectedTab, spaceId }) {
   return (
     <Header>
       <TitleWrapper>
-        <Text variant="s1">{twemojify(spaceName) || tabName}</Text>
+        <Text variant="s1" weight="medium" primary>{twemojify(spaceName) || tabName}</Text>
       </TitleWrapper>
       {spaceName && (
         <IconButton

src/app/organisms/navigation/Home.jsx

@@ -72,7 +72,7 @@ function Home({ spaceId }) {
 
   return (
     <>
-      { spaceIds.length !== 0 && <Text className="cat-header" variant="b3">Spaces</Text> }
+      { spaceIds.length !== 0 && <Text className="cat-header" variant="b3" weight="bold">Spaces</Text> }
       { spaceIds.map((id) => (
         <Selector
           key={id}
@@ -83,7 +83,7 @@ function Home({ spaceId }) {
         />
       ))}
 
-      { roomIds.length !== 0 && <Text className="cat-header" variant="b3">Rooms</Text> }
+      { roomIds.length !== 0 && <Text className="cat-header" variant="b3" weight="bold">Rooms</Text> }
       { roomIds.map((id) => (
         <Selector
           key={id}
@@ -94,7 +94,7 @@ function Home({ spaceId }) {
         />
       )) }
 
-      { directIds.length !== 0 && <Text className="cat-header" variant="b3">People</Text> }
+      { directIds.length !== 0 && <Text className="cat-header" variant="b3" weight="bold">People</Text> }
       { directIds.map((id) => (
         <Selector
           key={id}

src/app/organisms/navigation/SideBar.jsx

@@ -4,7 +4,6 @@ import './SideBar.scss';
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import colorMXID from '../../../util/colorMXID';
-import logout from '../../../client/action/logout';
 import {
   selectTab, openInviteList, openSearch, openSettings,
 } from '../../../client/action/navigation';
@@ -13,14 +12,11 @@ import { abbreviateNumber } from '../../../util/common';
 
 import ScrollView from '../../atoms/scroll/ScrollView';
 import SidebarAvatar from '../../molecules/sidebar-avatar/SidebarAvatar';
-import ContextMenu, { MenuItem, MenuHeader, MenuBorder } from '../../atoms/context-menu/ContextMenu';
 
 import HomeIC from '../../../../public/res/ic/outlined/home.svg';
 import UserIC from '../../../../public/res/ic/outlined/user.svg';
 import SearchIC from '../../../../public/res/ic/outlined/search.svg';
 import InviteIC from '../../../../public/res/ic/outlined/invite.svg';
-import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
-import PowerIC from '../../../../public/res/ic/outlined/power.svg';
 
 function ProfileAvatarMenu() {
   const mx = initMatrix.matrixClient;
@@ -48,31 +44,12 @@ function ProfileAvatarMenu() {
   }, []);
 
   return (
-    <ContextMenu
+    <SidebarAvatar
-      content={(hideMenu) => (
+      onClick={openSettings}
-        <>
+      tooltip={profile.displayName}
-          <MenuHeader>{mx.getUserId()}</MenuHeader>
+      imageSrc={profile.avatarUrl !== null ? mx.mxcUrlToHttp(profile.avatarUrl, 42, 42, 'crop') : null}
-          {/* <MenuItem iconSrc={UserIC} onClick={() => ''}>Profile</MenuItem> */}
+      bgColor={colorMXID(mx.getUserId())}
-          {/* <MenuItem iconSrc={BellIC} onClick={() => ''}>Notification settings</MenuItem> */}
+      text={profile.displayName}
-          <MenuItem
-            iconSrc={SettingsIC}
-            onClick={() => { hideMenu(); openSettings(); }}
-          >
-            Settings
-          </MenuItem>
-          <MenuBorder />
-          <MenuItem iconSrc={PowerIC} variant="danger" onClick={logout}>Logout</MenuItem>
-        </>
-      )}
-      render={(toggleMenu) => (
-        <SidebarAvatar
-          onClick={toggleMenu}
-          tooltip={profile.displayName}
-          imageSrc={profile.avatarUrl !== null ? mx.mxcUrlToHttp(profile.avatarUrl, 42, 42, 'crop') : null}
-          bgColor={colorMXID(mx.getUserId())}
-          text={profile.displayName}
-        />
-      )}
     />
   );
 }

src/app/organisms/navigation/SideBar.scss

@@ -1,21 +1,16 @@
-.sidebar__flexBox {
+@use '../../partials/flex';
-  display: flex;
+@use '../../partials/dir';
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-}
 
 .sidebar {
-  @extend .sidebar__flexBox;
+  @extend .cp-fx__column;
+
   width: var(--navigation-sidebar-width);
   height: 100%;
-  border-right: 1px solid var(--bg-surface-border);
   background-color: var(--bg-surface-extra-low);
-
+  @include dir.side(border,
-  [dir=rtl] & {
+    none,
-    border-right: none;
+    1px solid var(--bg-surface-border),
-    border-left: 1px solid var(--bg-surface-border);
+  );
-  }
 
   &__scrollable,
   &__sticky {
@@ -23,12 +18,7 @@
   }
 
   &__scrollable {
-    flex: 1;
+    @extend .cp-fx__item-one;
-    min-height: 0px;
-  }
-
-  &__sticky {
-    align-items: center;
   }
 }
 
@@ -53,7 +43,7 @@
 .featured-container,
 .space-container,
 .sticky-container {
-  @extend .sidebar__flexBox;
+  @extend .cp-fx__column--c-c;
   
   padding: var(--sp-ultra-tight) 0;
 

src/app/organisms/profile-editor/ProfileEditor.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .profile-editor {
   display: flex;
   align-items: flex-start;
@@ -21,10 +23,6 @@
   }
 
   & > * {
-    margin-left: var(--sp-normal);
+    @include dir.side(margin, var(--sp-normal), 0);
-    [dir=rtl] & {
-      margin-left: 0;
-      margin-right: var(--sp-normal);
-    }
   }
 }

src/app/organisms/profile-viewer/ProfileViewer.jsx

@@ -253,11 +253,10 @@ function ProfileViewer() {
     };
   }, []);
 
-  useEffect(() => {
+  const handleAfterClose = () => {
-    if (isOpen) return;
     setUserId(null);
     setRoomId(null);
-  }, [isOpen]);
+  };
 
   function renderProfile() {
     const member = room.getMember(userId) || mx.getUser(userId) || {};
@@ -273,7 +272,7 @@ function ProfileViewer() {
             size="large"
           />
           <div className="profile-viewer__user__info">
-            <Text variant="s1">{twemojify(username)}</Text>
+            <Text variant="s1" weight="medium">{twemojify(username)}</Text>
             <Text variant="b2">{twemojify(userId)}</Text>
           </div>
           <div className="profile-viewer__user__role">
@@ -298,10 +297,11 @@ function ProfileViewer() {
       className="profile-viewer__dialog"
       isOpen={isOpen}
       title={`${username} in ${room?.name ?? ''}`}
+      onAfterClose={handleAfterClose}
       onRequestClose={() => setIsOpen(false)}
       contentOptions={<IconButton src={CrossIC} onClick={() => setIsOpen(false)} tooltip="Close" />}
     >
-      {isOpen && renderProfile()}
+      {roomId ? renderProfile() : <div />}
     </Dialog>
   );
 }

src/app/organisms/profile-viewer/ProfileViewer.scss

@@ -1,15 +1,13 @@
+@use '../../partials/dir';
+
 .profile-viewer__dialog {
   & .dialog__content__wrapper {
     position: relative;
   }
   & .dialog__content-container {
-    padding: var(--sp-normal);
+    padding-top: var(--sp-normal);
     padding-bottom: 89px;
-    padding-right: var(--sp-extra-tight);
+    @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
-    [dir=rtl] & {
-      padding-right: var(--sp-normal);
-      padding-left: var(--sp-extra-tight);
-    }
   }
 }
 
@@ -26,9 +24,6 @@
 
       margin: 0 var(--sp-normal);
 
-      & .text-s1 {
-        font-weight: 500;
-      }
       & .text {
         white-space: pre-wrap;
         word-break: break-word;
@@ -61,11 +56,7 @@
       margin: 0 var(--sp-normal)
     }
     & > *:last-child {
-      margin-left: auto;
+      @include dir.side(margin, auto, 0);
-      [dir=rtl] & {
-        margin-left: 0;
-        margin-right: auto;
-      }
     }
   }
 }
@@ -77,13 +68,8 @@
   &__chips {
     padding-top: var(--sp-ultra-tight);
     & .chip {
-      margin: {
+      margin-top: var(--sp-extra-tight);
-        top: var(--sp-extra-tight);
+      @include dir.side(margin, 0, var(--sp-extra-tight));
-        right: var(--sp-extra-tight);
-      }
-      [dir=rtl] & {
-        margin: 0 0 var(--sp-extra-tight) var(--sp-extra-tight);
-      }
     }
   } 
 }

src/app/organisms/public-rooms/PublicRooms.scss

@@ -1,6 +1,7 @@
+@use '../../partials/dir';
+
 .public-rooms {
-  margin: 0 var(--sp-normal);
+  @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
-  margin-right: var(--sp-extra-tight);
   margin-top: var(--sp-extra-tight);
 
   &__form {
@@ -19,33 +20,28 @@
     min-width: 0;
 
     display: flex;
-    margin-right: var(--sp-normal);
+    @include dir.side(margin, 0, var(--sp-normal));
-    [dir=rtl] & {
-      margin-right: 0;
-      margin-left: var(--sp-normal);
-    }
 
     & > div:first-child {
       flex: 1;
       min-width: 0;
 
       & .input {
-        border-radius: var(--bo-radius) 0 0 var(--bo-radius);
+        @include dir.prop(border-radius,
-        [dir=rtl] & {
+          var(--bo-radius) 0 0 var(--bo-radius),
-          border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
+          0 var(--bo-radius) var(--bo-radius) 0,
-        }
+        );
       }
     }
 
     & > div:last-child .input {
       width: 120px;
-      border-left-width: 0;
+      @include dir.prop(border-left-width, 0, 1px);
-      border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
+      @include dir.prop(border-right-width, 1px, 0);
-      [dir=rtl] & {
+      @include dir.prop(border-radius,
-        border-left-width: 1px;
+        0 var(--bo-radius) var(--bo-radius) 0,
-        border-right-width: 0;
+        var(--bo-radius) 0 0 var(--bo-radius),
-        border-radius: var(--bo-radius) 0 0 var(--bo-radius);
+      );
-      }
     }
   }
 
@@ -68,11 +64,7 @@
   }
   &__view-more {
     margin-top: var(--sp-loose);
-    margin-left: calc(var(--av-normal) + var(--sp-normal));
+    @include dir.side(margin, calc(var(--av-normal) + var(--sp-normal)), 0);
-    [dir=rtl] & {
-      margin-left: 0;
-      margin-right: calc(var(--av-normal) + var(--sp-normal));
-    }
   }
   
   & .room-tile {
@@ -81,13 +73,6 @@
       align-self: flex-end;
     }
   }
-
-  [dir=rtl] & {
-    margin: {
-      left: var(--sp-extra-tight);
-      right: var(--sp-normal);
-    }
-  }
 }
 
 .try-join-with-alias {

src/app/organisms/read-receipts/ReadReceipts.jsx

@@ -30,12 +30,10 @@ function ReadReceipts() {
     };
   }, []);
 
-  useEffect(() => {
+  const handleAfterClose = () => {
-    if (isOpen === false) {
+    setReaders([]);
-      setReaders([]);
+    setRoomId(null);
-      setRoomId(null);
+  };
-    }
-  }, [isOpen]);
 
   function renderPeople(userId) {
     const room = initMatrix.matrixClient.getRoom(roomId);
@@ -62,6 +60,7 @@ function ReadReceipts() {
     <Dialog
       isOpen={isOpen}
       title="Seen by"
+      onAfterClose={handleAfterClose}
       onRequestClose={() => setIsOpen(false)}
       contentOptions={<IconButton src={CrossIC} onClick={() => setIsOpen(false)} tooltip="Close" />}
     >

src/app/organisms/room-optons/RoomOptions.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .context-menu__item {
   position: relative;
 }
@@ -8,13 +10,12 @@
   width: 3px;
   height: 12px;
   background: var(--bg-positive);
-  border-radius: 0 4px 4px 0;
+  @include dir.prop(
+    border-radius,
+    0 4px 4px 0,
+    4px 0 0 4px,
+  );
   position: absolute;
-  left: 0;
+  @include dir.prop(left, 0, unset);
-
+  @include dir.prop(right, unset, 0);
-  [dir=rtl] & {
-    left: unset;
-    right: 0;
-    border-radius: 4px 0 0 4px;
-  }
 }

src/app/organisms/room/PeopleDrawer.jsx

@@ -143,7 +143,7 @@ function PeopleDrawer({ roomId }) {
     <div className="people-drawer">
       <Header>
         <TitleWrapper>
-          <Text variant="s1">
+          <Text variant="s1" primary>
             People
             <Text className="people-drawer__member-count" variant="b3">{`${room.getJoinedMemberCount()} members`}</Text>
           </Text>

src/app/organisms/room/PeopleDrawer.scss

@@ -1,38 +1,23 @@
-.people-drawer-flexBox {
+@use '../../partials/flex';
-  display: flex;
+@use '../../partials/dir';
-  flex-direction: column;
-}
-.people-drawer-flexItem {
-  flex: 1;
-  min-height: 0;
-  min-width: 0;
-}
-
 
 .people-drawer {
-  @extend .people-drawer-flexBox;
+  @extend .cp-fx__column;
   width: var(--people-drawer-width);
   background-color: var(--bg-surface-low);
-  border-left: 1px solid var(--bg-surface-border);
+  @include dir.side(border, 1px solid var(--bg-surface-border), none);
-
-  [dir=rtl] & {
-    border: {
-      left: none;
-      right: 1px solid var(--bg-surface-hover);
-    }
-  }
 
   &__member-count {
     color: var(--tc-surface-low);
   }
 
   &__content-wrapper {
-    @extend .people-drawer-flexItem;
+    @extend .cp-fx__item-one;
-    @extend .people-drawer-flexBox;
+    @extend .cp-fx__column;
   }
 
   &__scrollable {
-    @extend .people-drawer-flexItem;
+    @extend .cp-fx__item-one;
   }
 
   &__noresult {
@@ -58,18 +43,12 @@
         z-index: 99;
       }
       & > .ic-raw {
-        left: var(--sp-tight);
+        @include dir.prop(left, var(--sp-tight), unset);
-        [dir=rtl] & {
+        @include dir.prop(right, unset, var(--sp-tight));
-          right: var(--sp-tight);
-          left: unset;
-        }
       }
       & > .ic-btn {
-        right: 2px;
+        @include dir.prop(right, 2px, unset);
-        [dir=rtl] & {
+        @include dir.prop(left, unset, 2px);
-          left: 2px;
-          right: unset;
-        }
       }
       & .input-container {
         flex: 1;
@@ -89,11 +68,7 @@
   & .segmented-controls {
     display: flex;
     margin-bottom: var(--sp-extra-tight);
-    margin-left: var(--sp-extra-tight);
+    @include dir.side(margin, var(--sp-extra-tight), 0);
-    [dir=rtl] & {
-      margin-left: unset;
-      margin-right: var(--sp-extra-tight);
-    }
   }
   & .segment-btn {
     flex: 1;
@@ -101,16 +76,8 @@
   }
 }
 .people-drawer__load-more {
-  padding: var(--sp-normal);
+  padding: var(--sp-normal) 0 0;
-  padding: {
+  @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
-    bottom: 0;
-    right: var(--sp-extra-tight);
-  }
-
-  [dir=rtl] & {
-    padding-right: var(--sp-normal);
-    padding-left: var(--sp-extra-tight);
-  }
 
   & .btn-surface {
     width: 100%;

src/app/organisms/room/RoomView.scss

@@ -1,24 +1,16 @@
-.room-view-flexBox {
+@use '../../partials/flex';
-  display: flex;
-  flex-direction: column;
-}
-.room-view-flexItem {
-  flex: 1;
-  min-height: 0;
-  min-width: 0;
-}
 
 .room-view {
-  @extend .room-view-flexItem;
+  @extend .cp-fx__item-one;
-  @extend .room-view-flexBox;
+  @extend .cp-fx__column;
 
   &__content-wrapper {
-    @extend .room-view-flexItem;
+    @extend .cp-fx__item-one;
-    @extend .room-view-flexBox;
+    @extend .cp-fx__column;
   }
 
   &__scrollable {
-    @extend .room-view-flexItem;
+    @extend .cp-fx__item-one;
     position: relative;
   }
   

src/app/organisms/room/RoomViewCmdBar.scss

@@ -1,8 +1,6 @@
-.overflow-ellipsis {
+@use '../../partials/flex';
-  overflow: hidden;
+@use '../../partials/text';
-  white-space: nowrap;
+@use '../../partials/dir';
-  text-overflow: ellipsis;
-}
 
 .cmd-bar {
   --cmd-bar-height: 28px;
@@ -12,18 +10,15 @@
   &__info {
     display: flex;
     width: 40px;
-    margin: 0 10px 0 14px;
+    @include dir.side(margin, 10px, 14px);
-    [dir=rtl] & {
+
-      margin: 0 14px 0 10px;
-    }
     & > * {
       margin: auto;
     }
   }
 
   &__content {
-    min-width: 0;
+    @extend .cp-fx__item-one;
-    flex: 1;
     display: flex;
 
     &-suggestions {
@@ -33,7 +28,7 @@
       align-items: center;
 
       & > .text {
-        @extend .overflow-ellipsis;
+        @extend .cp-txt__ellipsis;
       }
     }
   }
@@ -44,7 +39,7 @@
 
   display: inline-flex;
   align-items: center;
-  margin-right: var(--sp-extra-tight);
+  @include dir.side(margin, 0, var(--sp-extra-tight));
   padding: 0 var(--sp-extra-tight);
   height: 100%;
   border-radius: var(--bo-radius) var(--bo-radius) 0 0;
@@ -53,7 +48,7 @@
   & .emoji {
     width: 20px;
     height: 20px;
-    margin-right: var(--sp-ultra-tight);
+    @include dir.side(margin, 0, var(--sp-ultra-tight));
   }
 
   &:hover {
@@ -65,13 +60,4 @@
     border-bottom: 2px solid transparent;
     outline: none;
   }
-  
-  [dir=rtl] & {
-    margin-right: 0;
-    margin-left: var(--sp-extra-tight);
-    & .emoji {
-      margin-right: 0;
-      margin-left: var(--sp-ultra-tight);
-    }
-  }
 }

src/app/organisms/room/RoomViewContent.jsx

@@ -90,10 +90,10 @@ function handleOnClickCapture(e) {
 
 function renderEvent(roomTimeline, mEvent, prevMEvent, isFocus = false) {
   const isBodyOnly = (prevMEvent !== null
+    && prevMEvent.getSender() === mEvent.getSender()
     && prevMEvent.getType() !== 'm.room.member'
     && prevMEvent.getType() !== 'm.room.create'
     && diffMinutes(mEvent.getDate(), prevMEvent.getDate()) <= MAX_MSG_DIFF_MINUTES
-    && prevMEvent.getSender() === mEvent.getSender()
   );
   const mDate = mEvent.getDate();
   const isToday = isInSameDay(mDate, new Date());
@@ -453,6 +453,8 @@ function useEventArrive(roomTimeline, readEventStore) {
         readEventStore.setItem(roomTimeline.findEventByIdInTimelineSet(readUpToId));
         return;
       }
+
+      // user has not mark room as read
       const isUnreadMsg = readUpToEvent?.getId() === readUpToId;
       if (!isUnreadMsg) {
         roomTimeline.markAllAsRead();
@@ -509,6 +511,8 @@ function useEventArrive(roomTimeline, readEventStore) {
       && !roomTimeline.canPaginateForward()
       && document.visibilityState === 'visible') {
       timelineScroll.scrollToBottom();
+    } else {
+      timelineScroll.tryRestoringScroll();
     }
   }, [newEvent, roomTimeline]);
 }
@@ -608,13 +612,17 @@ function RoomViewContent({ eventId, roomTimeline }) {
         }
       }
 
-      unreadDivider = (readEvent && !unreadDivider
+      let isNewEvent = false;
-        && prevMEvent?.getTs() <= readEvent.getTs()
+      if (!unreadDivider) {
-        && readEvent.getTs() < mEvent.getTs());
+        unreadDivider = (readEvent
-      if (unreadDivider) {
+          && prevMEvent?.getTs() <= readEvent.getTs()
-        tl.push(<Divider key={`new-${mEvent.getId()}`} variant="positive" text="New messages" />);
+          && readEvent.getTs() < mEvent.getTs());
-        itemCountIndex += 1;
+        if (unreadDivider) {
-        if (jumpToItemIndex === -1) jumpToItemIndex = itemCountIndex;
+          isNewEvent = true;
+          tl.push(<Divider key={`new-${mEvent.getId()}`} variant="positive" text="New messages" />);
+          itemCountIndex += 1;
+          if (jumpToItemIndex === -1) jumpToItemIndex = itemCountIndex;
+        }
       }
       const dayDivider = prevMEvent && !isInSameDay(mEvent.getDate(), prevMEvent.getDate());
       if (dayDivider) {
@@ -626,7 +634,7 @@ function RoomViewContent({ eventId, roomTimeline }) {
       const isFocus = focusId === mEvent.getId();
       if (isFocus) jumpToItemIndex = itemCountIndex;
 
-      tl.push(renderEvent(roomTimeline, mEvent, prevMEvent, isFocus));
+      tl.push(renderEvent(roomTimeline, mEvent, isNewEvent ? null : prevMEvent, isFocus));
       itemCountIndex += 1;
     }
     if (roomTimeline.canPaginateForward() || limit.getEndIndex() < timeline.length) {

src/app/organisms/room/RoomViewContent.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .room-view__content {
   min-height: 100%;
   display: flex;
@@ -13,26 +15,16 @@
     & .message,
     & .ph-msg,
     & .timeline-change {
-      border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
+      @include dir.prop(border-radius,
-      [dir=rtl] & {
+      0 var(--bo-radius) var(--bo-radius) 0,
-        border-radius: var(--bo-radius) 0 0 var(--bo-radius);
+      var(--bo-radius) 0 0 var(--bo-radius),
-      }
+      );
     }
     
     & > .divider {
-      margin: var(--sp-extra-tight) var(--sp-normal);
+      margin: var(--sp-extra-tight);
-      margin-right: var(--sp-extra-tight);
+      @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
-      padding-left: calc(var(--av-small) + var(--sp-tight));
+      @include dir.side(padding, calc(var(--av-small) + var(--sp-tight)), 0);
-      [dir=rtl] & {
-        padding: {
-          left: 0;
-          right: calc(var(--av-small) + var(--sp-tight));
-        }
-        margin: {
-          left: var(--sp-extra-tight);
-          right: var(--sp-normal);
-        }
-      }
     }
   }
 }

src/app/organisms/room/RoomViewFloating.scss

@@ -1,3 +1,7 @@
+ @use '../../partials/flex';
+@use '../../partials/text';
+@use '../../partials/dir';
+
 .room-view {
   &__typing {
     display: flex;
@@ -10,12 +14,9 @@
     }
 
     & .text {
-      flex: 1;
+      @extend .cp-txt__ellipsis;
-      min-width: 0;
+      @extend .cp-fx__item-one;
 
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
       margin: 0 var(--sp-tight);
     }
 
@@ -72,17 +73,14 @@
 
   &__STB {
     position: absolute;
-    right: var(--sp-normal);
+    @include dir.prop(right, var(--sp-normal), unset);
+    @include dir.prop(left, unset, var(--sp-normal));
     bottom: 0;
     border-radius: var(--bo-radius);
     box-shadow: var(--bs-surface-border);
     background-color: var(--bg-surface-low);
     transition: transform 200ms ease-in-out;
     transform: translateY(100%) scale(0);
-    [dir=rtl] & {
-      right: unset;
-      left: var(--sp-normal);
-    }
 
     &--open {
       transform: translateY(-28px) scale(1);
@@ -92,7 +90,8 @@
   &__unread {
     position: absolute;
     top: var(--sp-extra-tight);
-    right: var(--sp-extra-tight);
+    @include dir.prop(right, var(--sp-extra-tight), unset);
+    @include dir.prop(left, unset, var(--sp-extra-tight));
     z-index: 999;
 
     display: none;
@@ -110,8 +109,8 @@
       border-radius: 0;
     }
     & .btn-primary {
-      flex: 1;
+      @extend .cp-fx__item-one;
-      min-width: 0;
+      @include dir.side(margin, 0, 1px);
       border-radius: 0;
       padding: 0 var(--sp-tight);
       &:focus {

src/app/organisms/room/RoomViewHeader.jsx

@@ -29,7 +29,7 @@ function RoomViewHeader({ roomId }) {
     <Header>
       <Avatar imageSrc={avatarSrc} text={roomName} bgColor={colorMXID(roomId)} size="small" />
       <TitleWrapper>
-        <Text variant="h2">{twemojify(roomName)}</Text>
+        <Text variant="h2" weight="medium" primary>{twemojify(roomName)}</Text>
         { typeof roomTopic !== 'undefined' && <p title={roomTopic} className="text text-b3">{twemojify(roomTopic)}</p>}
       </TitleWrapper>
       <IconButton onClick={togglePeopleDrawer} tooltip="People" src={UserIC} />

src/app/organisms/room/RoomViewInput.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .room-input {
   padding: var(--sp-extra-tight) calc(var(--sp-normal) - 2px);
   display: flex;
@@ -30,11 +32,7 @@
       flex: 1;
 
       &:first-child {
-        margin-left: var(--sp-tight);
+        @include dir.side(margin, var(--sp-tight), 0);
-        [dir=rtl] & {
-          margin-left: 0;
-          margin-right: var(--sp-tight);
-        }
       }
     }
   }
@@ -65,13 +63,9 @@
   --side-spacing: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
   display: flex;
   align-items: center;
-  margin-left: var(--side-spacing);
+  @include dir.side(margin, var(--side-spacing), 0);
   margin-top: var(--sp-extra-tight);
   line-height: 0;
-  [dir=rtl] & {
-    margin-left: 0;
-    margin-right: var(--side-spacing);
-  }
 
   &__preview > img {
     max-height: 40px;
@@ -107,10 +101,7 @@
   border-bottom: 1px solid var(--bg-surface-border);
 
   & .ic-btn-surface {
-    margin: 0 13px 0 17px;
+    @include dir.side(margin, 17px, 13px);
     border-radius: 0;
-    [dir=rtl] & {
-      margin: 0 17px 0 13px;
-    }
   }
 }

src/app/organisms/search/Search.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .search-dialog__model {
   --modal-height: 380px;
   height: 100%;
@@ -17,20 +19,16 @@
 
     & > .ic-raw {
       position: absolute;
-      left: calc(var(--sp-normal) + var(--sp-tight));
+      --away: calc(var(--sp-normal) + var(--sp-tight));
-      [dir=rtl] & {
+      @include dir.prop(left, var(--away), unset);
-        left: unset;
+      @include dir.prop(right, unset, var(--away));
-        right: calc(var(--sp-normal) + var(--sp-tight));
-      }
     }
     & > .ic-btn {
       border-radius: calc(var(--bo-radius) / 2);
       position: absolute;
-      right: calc(var(--sp-normal) + var(--sp-extra-tight));
+      --away: calc(var(--sp-normal) + var(--sp-extra-tight));
-      [dir=rtl] & {
+      @include dir.prop(right, var(--away), unset);
-        right: unset;
+      @include dir.prop(left, unset, var(--away));
-        left: calc(var(--sp-normal) + var(--sp-extra-tight));
-      }
     }
     & .input-container {
       min-width: 0;
@@ -69,13 +67,8 @@
   }
 
   &__content {
-    padding: var(--sp-extra-tight) var(--sp-normal);
+    padding: var(--sp-extra-tight);
-    padding-right: var(--sp-extra-tight);
+    @include dir.side(padding,  var(--sp-normal), var(--sp-extra-tight));
-    
-    [dir=rtl] & {
-      padding-left: var(--sp-extra-tight);
-      padding-right: var(--sp-normal);
-    }
   }
 
   &__footer {

src/app/organisms/settings/Settings.jsx

@@ -6,6 +6,7 @@ import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import settings from '../../../client/state/settings';
 import { toggleMarkdown, toggleMembershipEvents, toggleNickAvatarEvents } from '../../../client/action/settings';
+import logout from '../../../client/action/logout';
 
 import Text from '../../atoms/text/Text';
 import IconButton from '../../atoms/button/IconButton';
@@ -24,6 +25,7 @@ import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
 import SunIC from '../../../../public/res/ic/outlined/sun.svg';
 import LockIC from '../../../../public/res/ic/outlined/lock.svg';
 import InfoIC from '../../../../public/res/ic/outlined/info.svg';
+import PowerIC from '../../../../public/res/ic/outlined/power.svg';
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 
 import CinnySVG from '../../../../public/res/svg/cinny.svg';
@@ -177,6 +179,10 @@ function Settings({ isOpen, onRequestClose }) {
   }];
   const [selectedSection, setSelectedSection] = useState(settingSections[0]);
 
+  const handleLogout = () => {
+    if (confirm('Confirm logout')) logout();
+  };
+
   return (
     <PopupWindow
       className="settings-window"
@@ -184,18 +190,29 @@ function Settings({ isOpen, onRequestClose }) {
       onRequestClose={onRequestClose}
       title="Settings"
       contentTitle={selectedSection.name}
-      drawer={
+      drawer={(
-        settingSections.map((section) => (
+        <>
+          {
+            settingSections.map((section) => (
+              <PWContentSelector
+                key={section.name}
+                selected={selectedSection.name === section.name}
+                onClick={() => setSelectedSection(section)}
+                iconSrc={section.iconSrc}
+              >
+                {section.name}
+              </PWContentSelector>
+            ))
+          }
           <PWContentSelector
-            key={section.name}
+            variant="danger"
-            selected={selectedSection.name === section.name}
+            onClick={handleLogout}
-            onClick={() => setSelectedSection(section)}
+            iconSrc={PowerIC}
-            iconSrc={section.iconSrc}
           >
-            {section.name}
+            Logout
           </PWContentSelector>
-        ))
+        </>
-      }
+      )}
       contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
     >
       {selectedSection.render()}

src/app/organisms/settings/Settings.scss

@@ -1,16 +1,23 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+
 .settings-window {
+  & .pw__drawer__content {
+    @extend .cp-fx__column;
+    min-height: 100%;
+    padding-bottom: var(--sp-extra-tight);
+
+    & > .pw-content-selector:last-child {
+      margin-top: auto;
+    }
+  }
   & .pw__content-container {
     min-height: 100%;
   }
 }
 
 .settings-content {
-  margin: 0 var(--sp-normal);
+  @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
-  margin-right: var(--sp-extra-tight);
-  [dir=rtl] & {
-    margin-left: var(--sp-extra-tight);
-    margin-right: var(--sp-normal);
-  }
 
   & .setting-tile {
     margin-top: var(--sp-normal);

src/app/organisms/welcome/Welcome.jsx

@@ -8,9 +8,9 @@ import CinnySvg from '../../../../public/res/svg/cinny.svg';
 function Welcome() {
   return (
     <div className="app-welcome flex--center">
-      <div className="flex-v--center">
+      <div>
         <img className="app-welcome__logo noselect" src={CinnySvg} alt="Cinny logo" />
-        <Text className="app-welcome__heading" variant="h1">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/organisms/welcome/Welcome.scss

@@ -1,10 +1,12 @@
+@use '../../partials/flex';
+
 .app-welcome {
   width: 100%;
   height: 100%;
 
   & > div {
+    @extend .cp-fx__column--c-c;
     max-width: 600px;
-    align-items: center;
   }
   &__logo {
     width: 64px;

src/app/partials/_dir.scss

@@ -0,0 +1,26 @@
+/*
+* NOTICE: only use this
+* when sides are un-even
+* if they are even just use $property: 0 $spacing; 
+*/
+
+@mixin side($property, $left, $right) {
+  #{$property}: {
+    left: $left;
+    right: $right;
+  };
+  
+  [dir=rtl] & {
+    #{$property}: {
+      left: $right;
+      right: $left;
+    };
+  }
+}
+
+@mixin prop($property, $ltr, $rtl) {
+  #{$property}: $ltr;
+  [dir=rtl] & {
+    #{$property}: $rtl;
+  }
+}

src/app/partials/_flex.scss

@@ -0,0 +1,58 @@
+._s-c {
+  justify-content: flex-start;
+  align-items: center;
+}
+._c-c {
+  justify-content: center;
+  align-items: center;
+}
+._e-c {
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.cp-fx__row {
+  display: flex;
+  flex-direction: row;
+}
+
+.cp-fx__column {
+  display: flex;
+  flex-direction: column;
+}
+
+.cp-fx__row--s-c {
+  @extend .cp-fx__row;
+  @extend ._s-c;
+}
+
+.cp-fx__row--c-c {
+  @extend .cp-fx__row;
+  @extend ._c-c;
+}
+
+.cp-fx__row--e-c {
+  @extend .cp-fx__row;
+  @extend ._e-c;
+}
+
+.cp-fx__column--s-c {
+  @extend .cp-fx__column;
+  @extend ._s-c;
+}
+
+.cp-fx__column--c-c {
+  @extend .cp-fx__column;
+  @extend ._c-c;
+}
+
+.cp-fx__column--e-c {
+  @extend .cp-fx__column;
+  @extend ._e-c;
+}
+
+.cp-fx__item-one {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}

src/app/partials/_text.scss

@@ -0,0 +1,5 @@
+.cp-txt__ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

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 && (
@@ -533,11 +533,11 @@ function Auth() {
         <div className="auth__wrapper">
           {loginToken && <LoadingScreen message="Redirecting..." />}
           {!loginToken && (
-            <div className="auth-card flex-v">
+            <div className="auth-card">
               <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/auth/Auth.scss

@@ -1,3 +1,6 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+
 .auth__base {
   --pattern-size: 48px;
   min-height: 100%;
@@ -60,25 +63,22 @@
   & > .input-container {
     flex: 1;
     & .input {
-      border-right: unset;
-      border-radius: var(--bo-radius) 0 0 var(--bo-radius);
       background-color: var(--bg-surface);
+      @include dir.prop(border-right-width, 0, 1px);
+      @include dir.prop(border-left-width, 1px, 0 );
+      @include dir.prop(border-radius,
+        var(--bo-radius) 0 0 var(--bo-radius),
+        0 var(--bo-radius) var(--bo-radius) 0,
+      );
     }
   }
   & .ic-btn {
     height: 46px;
     border: 1px solid var(--bg-surface-border);
-    border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
+    @include dir.prop(border-radius,
-  }
+      0 var(--bo-radius) var(--bo-radius) 0,
-  [dir=rtl] & {
+      var(--bo-radius) 0 0 var(--bo-radius),
-    & .input {
+    );
-      border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
-      border-radius: 1px;
-      border-left: unset;
-    }
-    .ic-btn {
-      border-radius: var(--bo-radius) 0 0 var(--bo-radius);
-    }
   }
 
   &__status {
@@ -144,10 +144,7 @@
 }
 
 .process-wrapper {
-  display: flex;
+  @extend .cp-fx__column--c-c;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
 
   min-height: 100%;
   width: 100%;

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">Cinny</Text>
+          <Text variant="h2" weight="medium">Cinny</Text>
         </div>
       </div>
     );

src/client/state/RoomTimeline.js

@@ -247,23 +247,26 @@ class RoomTimeline extends EventEmitter {
   getLiveReaders() {
     const lastEvent = this.timeline[this.timeline.length - 1];
     const liveEvents = this.liveTimeline.getEvents();
-    const lastLiveEvent = liveEvents[liveEvents.length - 1];
 
-    let readers = [];
+    const readers = [];
-    if (lastEvent) readers = this.room.getUsersReadUpTo(lastEvent);
+
-    if (lastLiveEvent !== lastEvent) {
+    for (let i = liveEvents.length - 1; i >= 0; i -= 1) {
-      readers.splice(readers.length, 0, ...this.room.getUsersReadUpTo(lastLiveEvent));
+      readers.splice(readers.length, 0, ...this.room.getUsersReadUpTo(liveEvents[i]));
+      if (lastEvent === liveEvents[i]) break;
     }
+
     return [...new Set(readers)];
   }
 
-  getEventReaders(eventId) {
+  getEventReaders(mEvent) {
+    const liveEvents = this.liveTimeline.getEvents();
     const readers = [];
-    let eventIndex = this.getEventIndex(eventId);
+
-    if (eventIndex < 0) return this.getLiveReaders();
+    for (let i = liveEvents.length - 1; i >= 0; i -= 1) {
-    for (; eventIndex < this.timeline.length; eventIndex += 1) {
+      readers.splice(readers.length, 0, ...this.room.getUsersReadUpTo(liveEvents[i]));
-      readers.splice(readers.length, 0, ...this.room.getUsersReadUpTo(this.timeline[eventIndex]));
+      if (mEvent === liveEvents[i]) break;
     }
+
     return [...new Set(readers)];
   }
 

src/client/state/cons.js

@@ -1,5 +1,5 @@
 const cons = {
-  version: '1.6.0',
+  version: '1.6.1',
   secretKey: {
     ACCESS_TOKEN: 'cinny_access_token',
     DEVICE_ID: 'cinny_device_id',

src/font-face.css

@@ -0,0 +1,59 @@
+/* ---- ROBOTO ---- */
+
+@font-face {
+  font-family: 'Roboto';
+  src: url(../public/res/fonts/roboto/Roboto-Light.ttf);
+  font-weight: 300;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url(../public/res/fonts/roboto/Roboto-Regular.ttf);
+  font-weight: 400;
+  font-display: swap;  
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url(../public/res/fonts/roboto/Roboto-Medium.ttf);
+  font-weight: 500;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url(../public/res/fonts/roboto/Roboto-Bold.ttf);
+  font-weight: 600;
+  font-display: swap;
+}
+
+/* ---- Inter ---- */
+
+@font-face {
+  font-family: 'Inter';
+  src: url(../public/res/fonts/inter/Inter_vf_slant_weight.ttf);
+  font-weight: 300;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter';
+  src: url(../public/res/fonts/inter/Inter_vf_slant_weight.ttf);
+  font-weight: 380;
+  font-display: swap;  
+}
+@font-face {
+  font-family: 'Inter';
+  src: url(../public/res/fonts/inter/Inter_vf_slant_weight.ttf);
+  font-weight: 400;
+  font-display: swap;  
+}
+@font-face {
+  font-family: 'Inter';
+  src: url(../public/res/fonts/inter/Inter_vf_slant_weight.ttf);
+  font-weight: 500;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter';
+  src: url(../public/res/fonts/inter/Inter_vf_slant_weight.ttf);
+  font-weight: 600;
+  font-display: swap;
+}

src/index.scss

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
+@import url(./font-face.css);
 
 :root {
 
@@ -43,7 +43,7 @@
   --tc-surface-high: #000000;
   --tc-surface-normal: rgba(0, 0, 0, 78%);
   --tc-surface-normal-low: rgba(0, 0, 0, 60%);
-  --tc-surface-low: rgba(0, 0, 0, 38%);
+  --tc-surface-low: rgba(0, 0, 0, 48%);
   
   --tc-primary-high: #ffffff;
   --tc-primary-normal: rgba(255, 255, 255, 68%);
@@ -69,11 +69,21 @@
 
   /* system icons | --ic-[background type]-[priority]: value */
   --ic-surface-normal: #626262;
+  --ic-surface-low: #7c7c7c;
   --ic-primary-normal: #ffffff;
   --ic-positive-normal: rgba(69, 184, 59, 80%);
   --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;
@@ -113,7 +123,7 @@
   --bo-radius: 8px;
 
 
-  /* font syles */
+  /* font styles: font-size, letter-spacing, line-hight */
   --fs-h1: 36px;
   --ls-h1: -1.5px;
   --lh-h1: 38px;
@@ -138,6 +148,12 @@
   --ls-b3: 0px;
   --lh-b3: 16px;
 
+  /* font-weight */
+  --fw-light: 300;
+  --fw-normal: 400;
+  --fw-medium: 500;
+  --fw-bold: 600;
+
 
   /* spacing | --sp-[space]: value */
   --sp-none: 0px;
@@ -162,7 +178,8 @@
   /* transition curves */
   --fluid-push: cubic-bezier(0, 0.8, 0.67, 0.97);
   
-  --font-family: 'Roboto', 'Supreme', sans-serif;
+  --font-primary: 'Roboto', sans-serif;
+  --font-secondary: 'Roboto', sans-serif;
 }
 
 .silver-theme {
@@ -216,7 +233,20 @@
 
   /* system icons | --ic-[background type]-[priority]: value */
   --ic-surface-normal: rgba(255, 255, 255, 84%);
+  --ic-surface-low: rgba(255, 255, 255, 64%);
   --ic-primary-normal: #ffffff;
+
+  & .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%);
@@ -228,8 +258,25 @@
 
   --bs-primary-border: inset 0 0 0 1px var(--bg-primary-border);
   --bs-primary-outline: 0 0 0 2px var(--bg-primary-border);
+  
+  /* font styles: font-size, letter-spacing, line-hight */
+  --fs-h1: 35.6px;
 
-  --font-family: 'Supreme', 'Roboto', sans-serif;
+  --fs-h2: 23.6px;
+
+  --fs-s1: 17.6px;
+
+  --fs-b1: 14.6px;
+  --ls-b1: 0.14px;
+
+  --fs-b2: 13.2px;
+
+  --fs-b3: 11.2px;
+
+  /* override normal font weight for dark mode */
+  --fw-normal: 380;
+
+  --font-secondary: 'Inter', 'Roboto', sans-serif;
 }
 
 .butter-theme {
@@ -253,6 +300,41 @@
 
   /* system icons | --ic-[background type]-[priority]: value */
   --ic-surface-normal: rgb(255, 251, 222, 84%);
+  --ic-surface-low: rgba(255, 251, 222, 64%);
+}
+
+.font-primary {
+  font-family: var(--font-primary);
+
+  /* override font styles for primary font */
+  --fs-h1: 36px;
+  --ls-h1: -1.5px;
+  --lh-h1: 38px;
+
+  --fs-h2: 24px;
+  --ls-h2: -0.5px;
+  --lh-h2: 30px;
+
+  --fs-s1: 18px;
+  --ls-s1: -0.2px;
+  --lh-s1: 24px;
+
+  --fs-b1: 16px;
+  --ls-b1: 0.1px;
+  --lh-b1: 24px;
+
+  --fs-b2: 14px;
+  --ls-b2: 0.2px;
+  --lh-b2: 20px;
+
+  --fs-b3: 12px;
+  --ls-b3: 0px;
+  --lh-b3: 16px;
+
+  --fw-light: 300;
+  --fw-normal: 400;
+  --fw-medium: 500;
+  --fw-bold: 600;
 }
 
 html {
@@ -264,8 +346,9 @@ body {
   margin: 0;
   padding: 0;
   height: 100%;
-  font-family: var(--font-family);
+  font-family: var(--font-secondary);
   font-size: 16px;
+  font-weight: var(--fw-normal);
   background-color: var(--bg-surface-low);
 }
 #root {
@@ -283,7 +366,7 @@ a {
   text-decoration: none;
 }
 b {
-  font-weight: 500;
+  font-weight: var(--fw-medium);
 }
 label {
   margin: 0;
@@ -359,45 +442,8 @@ textarea {
                                   supported by Chrome, Edge, Opera and Firefox */
 }
 
-.flex {
+.flex--center {
   display: flex;
-}
-.flex-v {
-  display: flex;
-  flex-direction: column;
-}
-
-.flex--center,
-.flex--spaceBetween-center,
-.flex--end-center {
-  @extend .flex;
   justify-content: center;
   align-items: center;
-}
-.flex--spaceBetween,
-.flex--spaceBetween-center {
-  @extend .flex;
-  justify-content: space-between;
-}
-.flex--end,
-.flex--end-center {
-  @extend .flex;
-  justify-content: flex-end;
-}
-.inline-flex--center {
-  @extend .flex--center;
-  display: inline-flex
-}
-.flex--center-baseline {
-  @extend .flex--center;
-  align-items: baseline;
-}
-
-.flex-v--center {
-  @extend .flex-v;
-  justify-content: center;
-}
-.flex-v--end {
-  @extend .flex-v;
-  justify-content: flex-end;
 }

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;