lint, css polish, yarn lock, fix some warning

src/components/InviteTile.scss

@@ -15,11 +15,10 @@ limitations under the License.
 */
 
 .inviteTile {
-    .button {
-        margin-top: 24px;
-    }
+    display: grid;
+    row-gap: 24px;
 
-    > .textButton {
-        margin-top: 28px;
+    .advancedPlaceholder {
+        height: 245px;
     }
 }

src/components/LinkButton.tsx

@@ -21,8 +21,14 @@ import './Button.scss';
 
 interface IProps extends React.LinkHTMLAttributes<HTMLElement> {}
 
-const LinkButton: React.FC<IProps> = ({ className, ...props }: IProps) => (
-    <a className={classnames('button', className)} {...props} />
+const LinkButton: React.FC<IProps> = ({
+    className,
+    children,
+    ...props
+}: IProps) => (
+    <a className={classnames('button', className)} {...props}>
+        {children}
+    </a>
 );
 
 export default LinkButton;

src/components/RoomPreview.tsx

@@ -26,11 +26,15 @@ interface IProps {
 }
 
 const RoomPreview: React.FC<IProps> = ({ room }: IProps) => {
-    const roomAlias = room.aliases ? room.aliases[0] : room.room_id;
+    const roomAlias = room.canonical_alias
+        ? room.canonical_alias
+        : room.aliases
+        ? room.aliases[0]
+        : room.room_id;
     return (
         <div className="roomPreview">
             <RoomAvatar room={room} />
-            <h1>{room.name ? room.name : room.room_id}</h1>
+            <h1>{room.name ? room.name : roomAlias}</h1>
             <p>{room.num_joined_members.toLocaleString()} members</p>
             <p>{roomAlias}</p>
         </div>