Renamed channels to rooms (#30)

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import './ChannelIntro.scss';
+import './RoomIntro.scss';
 
 import Linkify from 'linkifyjs/react';
 import colorMXID from '../../../util/colorMXID';
@@ -12,27 +12,27 @@ function linkifyContent(content) {
   return <Linkify options={{ target: { url: '_blank' } }}>{content}</Linkify>;
 }
 
-function ChannelIntro({
+function RoomIntro({
   roomId, avatarSrc, name, heading, desc, time,
 }) {
   return (
-    <div className="channel-intro">
+    <div className="room-intro">
       <Avatar imageSrc={avatarSrc} text={name.slice(0, 1)} bgColor={colorMXID(roomId)} size="large" />
-      <div className="channel-intro__content">
-        <Text className="channel-intro__name" variant="h1">{heading}</Text>
-        <Text className="channel-intro__desc" variant="b1">{linkifyContent(desc)}</Text>
-        { time !== null && <Text className="channel-intro__time" variant="b3">{time}</Text>}
+      <div className="room-intro__content">
+        <Text className="room-intro__name" variant="h1">{heading}</Text>
+        <Text className="room-intro__desc" variant="b1">{linkifyContent(desc)}</Text>
+        { time !== null && <Text className="room-intro__time" variant="b3">{time}</Text>}
       </div>
     </div>
   );
 }
 
-ChannelIntro.defaultProps = {
+RoomIntro.defaultProps = {
   avatarSrc: false,
   time: null,
 };
 
-ChannelIntro.propTypes = {
+RoomIntro.propTypes = {
   roomId: PropTypes.string.isRequired,
   avatarSrc: PropTypes.oneOfType([
     PropTypes.string,
@@ -44,4 +44,4 @@ ChannelIntro.propTypes = {
   time: PropTypes.string,
 };
 
-export default ChannelIntro;
+export default RoomIntro;

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

@@ -1,4 +1,4 @@
-.channel-intro {
+.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));
@@ -11,7 +11,7 @@
     }
   }
 
-  .channel-intro__content {
+  .room-intro__content {
     margin-top: var(--sp-extra-loose);
     max-width: 640px;
   }

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import './ChannelSelector.scss';
+import './RoomSelector.scss';
 
 import colorMXID from '../../../util/colorMXID';
 
@@ -9,40 +9,40 @@ import Avatar from '../../atoms/avatar/Avatar';
 import NotificationBadge from '../../atoms/badge/NotificationBadge';
 import { blurOnBubbling } from '../../atoms/button/script';
 
-function ChannelSelectorWrapper({
+function RoomSelectorWrapper({
   isSelected, onClick, content, options,
 }) {
   return (
-    <div className={`channel-selector${isSelected ? ' channel-selector--selected' : ''}`}>
+    <div className={`room-selector${isSelected ? ' room-selector--selected' : ''}`}>
       <button
-        className="channel-selector__content"
+        className="room-selector__content"
         type="button"
         onClick={onClick}
-        onMouseUp={(e) => blurOnBubbling(e, '.channel-selector')}
+        onMouseUp={(e) => blurOnBubbling(e, '.room-selector')}
       >
         {content}
       </button>
-      <div className="channel-selector__options">{options}</div>
+      <div className="room-selector__options">{options}</div>
     </div>
   );
 }
-ChannelSelectorWrapper.defaultProps = {
+RoomSelectorWrapper.defaultProps = {
   options: null,
 };
-ChannelSelectorWrapper.propTypes = {
+RoomSelectorWrapper.propTypes = {
   isSelected: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,
   content: PropTypes.node.isRequired,
   options: PropTypes.node,
 };
 
-function ChannelSelector({
+function RoomSelector({
   name, roomId, imageSrc, iconSrc,
   isSelected, isUnread, notificationCount, isAlert,
   options, onClick,
 }) {
   return (
-    <ChannelSelectorWrapper
+    <RoomSelectorWrapper
       isSelected={isSelected}
       content={(
         <>
@@ -67,12 +67,12 @@ function ChannelSelector({
     />
   );
 }
-ChannelSelector.defaultProps = {
+RoomSelector.defaultProps = {
   imageSrc: null,
   iconSrc: null,
   options: null,
 };
-ChannelSelector.propTypes = {
+RoomSelector.propTypes = {
   name: PropTypes.string.isRequired,
   roomId: PropTypes.string.isRequired,
   imageSrc: PropTypes.string,
@@ -85,4 +85,4 @@ ChannelSelector.propTypes = {
   onClick: PropTypes.func.isRequired,
 };
 
-export default ChannelSelector;
+export default RoomSelector;

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

@@ -1,15 +1,15 @@
-.channel-selector-flex {
+.room-selector-flex {
   display: flex;
   align-items: center;
 }
-.channel-selector-flexItem {
+.room-selector-flexItem {
   flex: 1;
   min-width: 0;
   min-height: 0;
 }
 
-.channel-selector {
-  @extend .channel-selector-flex;
+.room-selector {
+  @extend .room-selector-flex;
 
   border: 1px solid transparent;
   border-radius: var(--bo-radius);
@@ -19,7 +19,7 @@
     background-color: var(--bg-surface);
     border-color: var(--bg-surface-border);
 
-    & .channel-selector__options {
+    & .room-selector__options {
       display: flex;
     }
   }
@@ -27,7 +27,7 @@
   @media (hover: hover) {
     &:hover {
       background-color: var(--bg-surface-hover);
-      & .channel-selector__options {
+      & .room-selector__options {
         display: flex;
       }
     }
@@ -46,9 +46,9 @@
   }
 }
 
-.channel-selector__content {
-  @extend .channel-selector-flexItem;
-  @extend .channel-selector-flex;
+.room-selector__content {
+  @extend .room-selector-flexItem;
+  @extend .room-selector-flex;
   padding: 0 var(--sp-extra-tight);
   min-height: 40px;
   cursor: inherit;
@@ -58,7 +58,7 @@
   }
 
   & > .text {
-    @extend .channel-selector-flexItem;
+    @extend .room-selector-flexItem;
     margin: 0 var(--sp-extra-tight);
 
     color: var(--tc-surface-normal);
@@ -67,8 +67,8 @@
     text-overflow: ellipsis;
   }
 }
-.channel-selector__options {
-  @extend .channel-selector-flex;
+.room-selector__options {
+  @extend .room-selector-flex;
   display: none;
   margin-right: var(--sp-ultra-tight);
 

src/app/molecules/room-tile/RoomTile.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import './ChannelTile.scss';
+import './RoomTile.scss';
 
 import Linkify from 'linkifyjs/react';
 import colorMXID from '../../../util/colorMXID';
@@ -12,20 +12,20 @@ function linkifyContent(content) {
   return <Linkify options={{ target: { url: '_blank' } }}>{content}</Linkify>;
 }
 
-function ChannelTile({
+function RoomTile({
   avatarSrc, name, id,
   inviterName, memberCount, desc, options,
 }) {
   return (
-    <div className="channel-tile">
-      <div className="channel-tile__avatar">
+    <div className="room-tile">
+      <div className="room-tile__avatar">
         <Avatar
           imageSrc={avatarSrc}
           bgColor={colorMXID(id)}
           text={name.slice(0, 1)}
         />
       </div>
-      <div className="channel-tile__content">
+      <div className="room-tile__content">
         <Text variant="s1">{name}</Text>
         <Text variant="b3">
           {
@@ -36,12 +36,12 @@ function ChannelTile({
         </Text>
         {
           desc !== null && (typeof desc === 'string')
-            ? <Text className="channel-tile__content__desc" variant="b2">{linkifyContent(desc)}</Text>
+            ? <Text className="room-tile__content__desc" variant="b2">{linkifyContent(desc)}</Text>
             : desc
         }
       </div>
       { options !== null && (
-        <div className="channel-tile__options">
+        <div className="room-tile__options">
           {options}
         </div>
       )}
@@ -49,14 +49,14 @@ function ChannelTile({
   );
 }
 
-ChannelTile.defaultProps = {
+RoomTile.defaultProps = {
   avatarSrc: null,
   inviterName: null,
   options: null,
   desc: null,
   memberCount: null,
 };
-ChannelTile.propTypes = {
+RoomTile.propTypes = {
   avatarSrc: PropTypes.string,
   name: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
@@ -69,4 +69,4 @@ ChannelTile.propTypes = {
   options: PropTypes.node,
 };
 
-export default ChannelTile;
+export default RoomTile;

src/app/molecules/room-tile/RoomTile.scss

@@ -1,4 +1,4 @@
-.channel-tile {
+.room-tile {
   display: flex;
 
   &__content {