From eff643a4457b20fb067ff755490418025cc1faf8 Mon Sep 17 00:00:00 2001
From: srgooglo <srgooglo@ragestudio.net>
Date: Thu, 12 May 2022 21:15:39 +0200
Subject: [PATCH] update style

---
 packages/app/src/pages/streams/index.jsx  | 37 +++++++++++++++--------
 packages/app/src/pages/streams/index.less | 25 ++++++++-------
 2 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/packages/app/src/pages/streams/index.jsx b/packages/app/src/pages/streams/index.jsx
index 21eeddbc..4a82826f 100644
--- a/packages/app/src/pages/streams/index.jsx
+++ b/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>
-                        #{stream.id}
-                    </span>
+                </div>
+                <div>
+                    <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
+                        shape="round"
+                        icon={<Icons.RefreshCw style={{ margin: 0 }} />}
+                        onClick={this.updateStreamsList}
+                    />
+                </div>
+                <div>
+                    <antd.Button
+                        shape="round"
+                        icon={<Icons.Sliders />}
+                        onClick={() => window.app.setLocation("/streaming_control")}
+                    >
+                        Control Panel
+                    </antd.Button>
                 </div>
             </ActionsBar>
-            <div>
-                <SelectableList
-                    selectionEnabled={false}
-                    renderItem={this.renderListItem}
-                    items={this.state.list}
-                />
-            </div>
+            {
+                this.state.list.length > 0 &&
+                <div className="streams-list">
+                    {this.state.list.map(this.renderListItem)}
+                </div>
+            }
         </div>
     }
 }
\ No newline at end of file
diff --git a/packages/app/src/pages/streams/index.less b/packages/app/src/pages/streams/index.less
index df0d631f..7ec6150e 100644
--- a/packages/app/src/pages/streams/index.less
+++ b/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;
-        }
+        flex-direction: column;
 
         .streaming-item {
+            cursor: pointer;
             display: flex;
-            flex-direction: column;
-
-            align-items: center;
-            justify-content: center;
+            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);
+        }
     }
 }
\ No newline at end of file