update style

packages/app/src/pages/streams/index.jsx

@@ -1,6 +1,7 @@
 import React from "react"
 import * as antd from "antd"
-import { SelectableList, ActionsBar } from "components"
+import { Icons } from "components/Icons"
+import { ActionsBar } from "components"
 
 import "./index.less"
 
@@ -62,9 +63,9 @@ export default class Streams extends React.Component {
             <div className="details">
                 <div className="title">
                     <h1>@{stream.userData.username}</h1>
-                    <span>
+                </div>
-                        #{stream.id}
+                <div>
-                    </span>
+                    <span> #{stream.id}</span>
                 </div>
             </div>
         </div>
@@ -74,16 +75,28 @@ export default class Streams extends React.Component {
         return <div className="streams">
             <ActionsBar mode="float">
                 <div>
-                    <antd.Button onClick={this.updateStreamsList}>Refresh</antd.Button>
+                    <antd.Button
-                </div>
+                        shape="round"
-            </ActionsBar>
+                        icon={<Icons.RefreshCw style={{ margin: 0 }} />}
-            <div>
+                        onClick={this.updateStreamsList}
-                <SelectableList
-                    selectionEnabled={false}
-                    renderItem={this.renderListItem}
-                    items={this.state.list}
                     />
                 </div>
+                <div>
+                    <antd.Button
+                        shape="round"
+                        icon={<Icons.Sliders />}
+                        onClick={() => window.app.setLocation("/streaming_control")}
+                    >
+                        Control Panel
+                    </antd.Button>
+                </div>
+            </ActionsBar>
+            {
+                this.state.list.length > 0 &&
+                <div className="streams-list">
+                    {this.state.list.map(this.renderListItem)}
+                </div>
+            }
         </div>
     }
 }

packages/app/src/pages/streams/index.less

@@ -1,20 +1,15 @@
 .streams {
-    .selectableList_content {
+    .streams-list {
-        display: flex;
-        flex-wrap: wrap;
-
-        .selectableList_item {
-            max-width: 20vw;
-        }
-
-        .streaming-item {
         display: flex;
         flex-direction: column;
 
-            align-items: center;
+        .streaming-item {
-            justify-content: center;
+            cursor: pointer;
+            display: flex;
+            flex-direction: row;
 
             padding: 10px;
+            border-bottom: 1px solid #e6e6e6;
 
             .thumbnail {
                 width: 15vw;
@@ -22,17 +17,21 @@
                 background-size: cover;
 
                 img {
+                    border-radius: 8px;
                     width: 100%;
                     height: 100%;
                 }
             }
 
             .details {
+                display: flex;
+                flex-direction: column;
+
                 .title {
                     display: inline-flex;
                     align-items: center;
 
-                    h1{
+                    h1 {
                         font-size: 1.5em;
                         font-weight: bold;
                         margin-right: 10px;
@@ -45,5 +44,9 @@
                 }
             }
         }
+
+        .streaming-item:hover {
+            background-color: var(--background-color-accent);
+        }
     }
 }