lint, css polish, yarn lock, fix some warning

src/App.tsx

@@ -22,6 +22,8 @@ import MatrixTile from './components/MatrixTile';
 import Tile from './components/Tile';
 import LinkRouter from './pages/LinkRouter';
 
+import './App.scss';
+
 import GlobalContext from './contexts/GlobalContext';
 
 /* eslint-disable no-restricted-globals */
@@ -29,15 +31,15 @@ import GlobalContext from './contexts/GlobalContext';
 const App: React.FC = () => {
     let page = (
         <>
-            <CreateLinkTile /> <hr />{' '}
+            <CreateLinkTile />
+            <hr />
         </>
     );
+
     if (location.hash) {
-        console.log(location.hash);
         if (location.hash.startsWith('#/')) {
             page = <LinkRouter link={location.hash.slice(2)} />;
         } else {
-            console.log('asdfadf');
             page = (
                 <Tile>
                     Links should be in the format {location.host}/#/{'<'}

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>