Merge pull request #6 from nodece/improve_user_style

fix: improve user style

web/src/app.tsx

@@ -14,22 +14,12 @@
 
 import React, { useEffect, useState } from 'react';
 import * as Setting from './setting';
-import {
-  DownOutlined,
-  LogoutOutlined,
-  SettingOutlined,
-  PieChartOutlined,
-  AppstoreOutlined,
-  DesktopOutlined,
-  ContainerOutlined,
-  MailOutlined,
-  UnorderedListOutlined,
-} from '@ant-design/icons';
+import { DownOutlined, LogoutOutlined, SettingOutlined } from '@ant-design/icons';
 import { Avatar, BackTop, Dropdown, Layout, Menu } from 'antd';
 import { Route, Routes, useNavigate } from 'react-router-dom';
 import * as AccountBackend from './backend/account-backend';
 import { UserRoutes } from './user/user-routes';
-import tw, { styled } from 'twin.macro';
+import tw from 'twin.macro';
 
 const { Header, Footer } = Layout;
 const { SubMenu } = Menu;
@@ -122,9 +112,6 @@ function AppMenu() {
         <Menu.Item key="home">
           <a href="/">Home</a>
         </Menu.Item>
-        <Menu.Item key="user">
-          <a href="/users">Users</a>
-        </Menu.Item>
         {account ? (
           <Dropdown
             key="4"
@@ -221,9 +208,11 @@ function App() {
           <AppFooter />
         </div>
         <div css={tw`flex flex-1 flex-col overflow-x-hidden overflow-y-auto px-6 py-8`}>
-          <Routes>
-            <Route path="users/*" element={<UserRoutes />} />
-          </Routes>
+          <div css={tw`container ml-auto mr-auto`}>
+            <Routes>
+              <Route path="users/*" element={<UserRoutes />} />
+            </Routes>
+          </div>
         </div>
       </div>
     </>

web/src/user/user-list-page.tsx

@@ -13,11 +13,12 @@
 // limitations under the License.
 
 import React, { useEffect, useState } from 'react';
-import { Button, Popconfirm, Row, Table, Col } from 'antd';
+import { Button, Popconfirm, Table } from 'antd';
 import { getFormattedDate, showMessage } from '../setting';
 import { useNavigate } from 'react-router-dom';
 import moment from 'moment';
 import * as userBackend from '../backend/user-backend';
+import tw from 'twin.macro';
 
 function UserTable() {
   const [users, setUsers] = useState<Array<any>>([]);
@@ -156,23 +157,22 @@ function UserTable() {
   ];
   return (
     <div>
-      <Table
-        columns={columns}
-        dataSource={users}
-        rowKey="name"
-        size="middle"
-        bordered
-        pagination={{ pageSize: 100 }}
-        title={() => (
-          <div>
-            Users&nbsp;&nbsp;&nbsp;&nbsp;
-            <Button type="primary" size="small" onClick={addUser}>
-              Add
-            </Button>
-          </div>
-        )}
-        loading={users === null}
-      />
+      <div css={tw`flex items-center justify-between`}>
+        <h1 css={tw`m-0 text-2xl`}>Users</h1>
+        <Button type="primary" size="middle" onClick={addUser}>
+          Add
+        </Button>
+      </div>
+      <div css={tw`py-4`}>
+        <Table
+          columns={columns}
+          dataSource={users}
+          rowKey="name"
+          size="middle"
+          pagination={{ pageSize: 100 }}
+          loading={users === null || users === undefined}
+        />
+      </div>
     </div>
   );
 }
@@ -180,13 +180,7 @@ function UserTable() {
 function UserListPage() {
   return (
     <>
-      <Row style={{ width: '100%' }}>
-        <Col span={1} />
-        <Col span={22}>
-          <UserTable />
-        </Col>
-        <Col span={1} />
-      </Row>
+      <UserTable />
     </>
   );
 }