From 22ace21d4fa0dd260635768879f57a6fe9f5bdce Mon Sep 17 00:00:00 2001
From: sunny <hczshd@163.com>
Date: Wed, 11 Oct 2023 23:54:54 +0800
Subject: [PATCH] =?UTF-8?q?:lipstick:=20=E4=BC=98=E5=8C=96=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E8=BF=9E=E6=8E=A5=E6=8C=89=E9=92=AE=E5=92=8C=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E5=88=87=E6=8D=A2=E6=8C=89=E9=92=AE=E5=9C=A8=E6=8B=96?=
 =?UTF-8?q?=E6=8B=BD=E6=94=B9=E5=8F=98=E5=A4=A7=E5=B0=8F=E6=97=B6=E7=9A=84?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/side/side.scss | 10 ++++++++--
 src/components/side/side.tsx  | 37 ++++++++++++++++-------------------
 2 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/components/side/side.scss b/src/components/side/side.scss
index 423aa35..27040ed 100644
--- a/src/components/side/side.scss
+++ b/src/components/side/side.scss
@@ -11,12 +11,18 @@
   width: 100%;
 }
 
+.icon-btn {
+  float: right;
+  margin: 0 0 0 10px;
+}
+
 .conn-btn {
   width: 100%;
 }
 
 .row-container {
-  margin: 0 0 0 -10px
+  margin: 0 0 0 -10px;
+  display: flex;
 }
 
 .light-conn-row {
@@ -27,4 +33,4 @@
 .dark-conn-row {
   //background-color: #11ea40 !important;
   color: #34c3ff;
-}
\ No newline at end of file
+}
diff --git a/src/components/side/side.tsx b/src/components/side/side.tsx
index 22d45ef..92ac190 100644
--- a/src/components/side/side.tsx
+++ b/src/components/side/side.tsx
@@ -154,25 +154,22 @@ const Side = () => {
         <div className='side-container'>
 
             <div className='connect-container'>
-                <Grid fluid>
-                    <Row className='row-container'>
-                        <Col xs={20}>
-                            <Button className='conn-btn' appearance="primary" block
-                                    onClick={handleOpen}>新建连接</Button>
-                        </Col>
-                        <Col xs={4}>
-                            <IconButton
-                                icon={
-                                    <Icon
-                                        as={context.theme === 'light' ? MdOutlineNightlight : MdOutlineLightMode}
-                                    />
-                                }
-                                onClick={changeTheme}
-                            />
-                        </Col>
-                    </Row>
-                </Grid>
-
+                <div className='row-container'>
+                    <div className='conn-btn'>
+                        <Button appearance="primary" block
+                                onClick={handleOpen}>新建连接</Button>
+                    </div>
+                    <div className={"icon-btn"}>
+                        <IconButton
+                            icon={
+                                <Icon
+                                    as={context.theme === 'light' ? MdOutlineNightlight : MdOutlineLightMode}
+                                />
+                            }
+                            onClick={changeTheme}
+                        />
+                    </div>
+                </div>
             </div>
             <div className='cluster-list'>
                 <Table
@@ -189,7 +186,7 @@ const Side = () => {
                     }}
                 >
 
-                    <Column align="center" flexGrow={1}>
+                    <Column align="left" flexGrow={1}>
                         <HeaderCell>clusterName</HeaderCell>
                         <Cell dataKey="clusterName"/>
                     </Column>