Improve the styling

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

res/css/views/rooms/_AppsDrawer.scss

@@ -61,6 +61,15 @@ $MiniAppTileHeight: 200px;
     justify-content: center;
     height: 100%;
     margin-bottom: 8px;
+
+    .mx_AppTile:first-of-type {
+        border-left-width: 8px;
+        border-radius: 10px 0 0 10px;
+    }
+    .mx_AppTile:last-of-type {
+        border-right-width: 8px;
+        border-radius: 0 10px 10px 0;
+    }
 }
 
 .mx_AppsDrawer_minimised .mx_AppsContainer {
@@ -89,13 +98,15 @@ $MiniAppTileHeight: 200px;
 
 .mx_AppTile {
     width: 50%;
-    border: 5px solid $widget-menu-bar-bg-color;
+    border: 8px solid $widget-menu-bar-bg-color;
-    border-radius: 4px;
+    border-left-width: 5px;
+    border-right-width: 5px;
     display: flex;
     flex-direction: column;
+    box-sizing: border-box;
 
     & + .mx_AppTile {
-        margin-left: 5px;
+
     }
 }
 
@@ -138,14 +149,19 @@ $MiniAppTileHeight: 200px;
     align-items: center;
     justify-content: space-between;
     width: 100%;
-    padding-bottom: 5px;
+    padding-top: 8px;
+    padding-bottom: 12px;
 }
 
 .mx_AppTileMenuBarTitle {
-    display: flex;
+    line-height: 20px;
-    flex-direction: row;
+    white-space: nowrap;
-    align-items: center;
+    overflow: hidden;
-    pointer-events: none;
+    text-overflow: ellipsis;
+
+    .mx_WidgetAvatar {
+        margin-right: 12px;
+    }
 }
 
 .mx_AppTileMenuBarTitle > :last-child {

src/components/views/rooms/AppsDrawer.js

@@ -107,6 +107,10 @@ export default class AppsDrawer extends React.Component {
         }
     }
 
+    setResizing = (resizing) => {
+        this.setState({ resizing });
+    };
+
     render() {
         if (!this.props.showApps) return <div />;
 
@@ -142,10 +146,11 @@ export default class AppsDrawer extends React.Component {
         }
 
         const classes = classNames({
-            "mx_AppsDrawer": true,
+            mx_AppsDrawer: true,
-            "mx_AppsDrawer_hidden": this.props.hide,
+            mx_AppsDrawer_hidden: this.props.hide,
-            "mx_AppsDrawer_fullWidth": apps.length < 2,
+            mx_AppsDrawer_fullWidth: apps.length < 2,
-            "mx_AppsDrawer_minimised": !this.props.showApps,
+            mx_AppsDrawer_minimised: !this.props.showApps,
+            mx_AppsDrawer_resizing: this.state.resizing,
         });
 
         return (
@@ -157,6 +162,7 @@ export default class AppsDrawer extends React.Component {
                     handleClass="mx_AppsContainer_resizerHandle"
                     className="mx_AppsContainer"
                     resizeNotifier={this.props.resizeNotifier}
+                    setResizing={this.setResizing}
                 >
                     { apps }
                     { spinner }
@@ -174,17 +180,17 @@ const PersistentVResizer = ({
     handleWrapperClass,
     handleClass,
     resizeNotifier,
+    setResizing,
     children,
 }) => {
     const [height, setHeight] = useLocalStorageState("pvr_" + id, 280); // old fixed height was 273px
-    const [resizing, setResizing] = useState(false);
 
     return <Resizable
         size={{height: Math.min(height, maxHeight)}}
         minHeight={minHeight}
         maxHeight={maxHeight}
         onResizeStart={() => {
-            if (!resizing) setResizing(true);
+            setResizing(true);
             resizeNotifier.startResizing();
         }}
         onResize={() => {
@@ -192,14 +198,12 @@ const PersistentVResizer = ({
         }}
         onResizeStop={(e, dir, ref, d) => {
             setHeight(height + d.height);
-            if (resizing) setResizing(false);
+            setResizing(false);
             resizeNotifier.stopResizing();
         }}
         handleWrapperClass={handleWrapperClass}
         handleClasses={{bottom: handleClass}}
-        className={classNames(className, {
+        className={className}
-            mx_AppsDrawer_resizing: resizing,
-        })}
         enable={{bottom: true}}
     >
         { children }