Ui-Redesign (#203)

* new ui design

* improving ui design

* adding new screenshots

* upgrade dependencies

ui/src/components/footer/FredyFooter.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import './FredyFooter.less';
+import { useSelector } from '../../services/state/store.js';
+import { Typography } from '@douyinfe/semi-ui';
+
+export default function FredyFooter() {
+  const { Text } = Typography;
+  const version = useSelector((state) => state.versionUpdate.versionUpdate);
+  return (
+    <div className="fredyFooter">
+      <div className="fredyFooter__version">
+        <Text type="tertiary">Fredy V{version?.localFredyVersion || 'N/A'}</Text>
+      </div>
+      <div className="fredyFooter__copyRight">
+        <Text link={{ href: 'https://github.com/orangecoding', target: '_blank' }}>Made with ❤️</Text>
+      </div>
+    </div>
+  );
+}

ui/src/components/footer/FredyFooter.less

@@ -0,0 +1,17 @@
+.fredyFooter {
+  background:rgb(53, 54, 60);
+  color: white;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &__version {
+    padding-left: .5rem;
+    font-size: small;
+
+  }
+  &__copyRight {
+    padding-right: 1rem;
+
+  }
+}

ui/src/components/logout/Logout.jsx

@@ -2,19 +2,22 @@ import React from 'react';
 import { Button } from '@douyinfe/semi-ui';
 import { xhrPost } from '../../services/xhr';
 import { IconUser } from '@douyinfe/semi-icons';
-const Logout = function Logout() {
+
+const Logout = function Logout({ text }) {
   return (
-    <Button
-      icon={<IconUser />}
-      type="danger"
-      theme="solid"
-      onClick={async () => {
-        await xhrPost('/api/login/logout');
-        location.reload();
-      }}
-    >
-      Logout
-    </Button>
+    <div>
+      <Button
+        icon={<IconUser />}
+        type="danger"
+        theme="solid"
+        onClick={async () => {
+          await xhrPost('/api/login/logout');
+          location.reload();
+        }}
+      >
+        {text && 'Logout'}
+      </Button>
+    </div>
   );
 };
 

ui/src/components/menu/Menu.jsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Tabs, TabPane } from '@douyinfe/semi-ui';
-
-import { useLocation } from 'react-router-dom';
-import { IconUser, IconTerminal, IconSetting, IconArchive } from '@douyinfe/semi-icons';
-import './Menu.less';
-
-function parsePathName(name) {
-  const split = name.split('/').filter((s) => s.length !== 0);
-  return '/' + split[0];
-}
-
-const TopMenu = function TopMenu({ isAdmin }) {
-  const navigate = useNavigate();
-  const location = useLocation();
-  return (
-    <Tabs className="menu" type="line" activeKey={parsePathName(location.pathname)} onTabClick={(key) => navigate(key)}>
-      <TabPane
-        itemKey="/jobs"
-        tab={
-          <span>
-            <IconTerminal />
-            Jobs
-          </span>
-        }
-      />
-      <TabPane
-        itemKey="/listings"
-        tab={
-          <span>
-            <IconArchive />
-            Found listings
-          </span>
-        }
-      />
-
-      {isAdmin && (
-        <TabPane
-          itemKey="/users"
-          tab={
-            <span>
-              <IconUser />
-              User
-            </span>
-          }
-        />
-      )}
-
-      {isAdmin && (
-        <TabPane
-          itemKey="/generalSettings"
-          tab={
-            <span>
-              <IconSetting />
-              Settings
-            </span>
-          }
-        />
-      )}
-    </Tabs>
-  );
-};
-
-export default TopMenu;

ui/src/components/menu/Menu.less

@@ -1,3 +0,0 @@
-.menu {
-  margin-top: 3rem;
-}

ui/src/components/navigation/Navigate.less

@@ -0,0 +1,9 @@
+.navigate {
+  &__logout_Button {
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    display: flex;
+
+  }
+}

ui/src/components/navigation/Navigation.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Nav } from '@douyinfe/semi-ui';
+import { IconUser, IconStar, IconSetting, IconTerminal } from '@douyinfe/semi-icons';
+import logoWhite from '../../assets/logo_white.png';
+import Logout from '../logout/Logout.jsx';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+import './Navigate.less';
+import { useScreenWidth } from '../../hooks/screenWidth.js';
+
+export default function Navigation({ isAdmin }) {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const width = useScreenWidth();
+  const collapsed = width <= 850;
+
+  const items = [
+    { itemKey: '/jobs', text: 'Jobs', icon: <IconTerminal /> },
+    { itemKey: '/listings', text: 'Found Listings', icon: <IconStar /> },
+  ];
+
+  if (isAdmin) {
+    items.push({ itemKey: '/users', text: 'User Management', icon: <IconUser /> });
+    items.push({ itemKey: '/generalSettings', text: 'Settings', icon: <IconSetting /> });
+  }
+
+  function parsePathName(name) {
+    const split = name.split('/').filter((s) => s.length !== 0);
+    return '/' + split[0];
+  }
+
+  return (
+    <Nav
+      style={{ height: '100%', width: collapsed ? '' : '13rem' }}
+      items={items}
+      isCollapsed={collapsed}
+      selectedKeys={[parsePathName(location.pathname)]}
+      onSelect={(key) => {
+        navigate(key.itemKey);
+      }}
+      header={<img src={logoWhite} width="180" alt="Fredy Logo" />}
+      footer={
+        <div className="navigate__logout_Button">
+          <Logout text={!collapsed} />
+        </div>
+      }
+    />
+  );
+}

ui/src/components/segment/SegmentPart.jsx

@@ -8,6 +8,7 @@ export const SegmentPart = ({ name, Icon = null, children, helpText }) => {
 
   return (
     <Card
+      className="segmentParts"
       title={
         <Meta title={name} description={helpText} avatar={Icon == null ? null : <Icon size="extra-extra-small" />} />
       }

ui/src/components/segment/SegmentParts.less

@@ -1,4 +1,7 @@
 .segmentParts {
   border: 1px solid #323232 !important;
   border-radius: 5px !important;
+  color: rgba(var(--semi-grey-8), 1);
+  background: rgb(53, 54, 60);
+  margin: 2rem;
 }

ui/src/components/table/JobTable.jsx

@@ -10,7 +10,7 @@ const empty = (
   <Empty
     image={<IllustrationNoResult />}
     darkModeImage={<IllustrationNoResultDark />}
-    description={'No jobs available.'}
+    description="No jobs available. Why don't you create one? ;)"
   />
 );
 

ui/src/components/table/ListingsTable.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { Table, Popover, Input, Descriptions, Tag, Image } from '@douyinfe/semi-ui';
+import { Table, Popover, Input, Descriptions, Tag, Image, Empty } from '@douyinfe/semi-ui';
 import { useActions, useSelector } from '../../services/state/store.js';
 import { IconClose, IconSearch, IconTick } from '@douyinfe/semi-icons';
 import * as timeService from '../../services/time/timeService.js';
@@ -8,6 +8,7 @@ import no_image from '../../assets/no_image.jpg';
 
 import './ListingsTable.less';
 import { format } from '../../services/time/timeService.js';
+import { IllustrationNoResult, IllustrationNoResultDark } from '@douyinfe/semi-illustrations';
 
 const columns = [
   {
@@ -65,7 +66,7 @@ const columns = [
   },
   {
     title: 'Price',
-    width: 100,
+    width: 110,
     dataIndex: 'price',
     sorter: true,
     render: (text) => text + ' €',
@@ -90,11 +91,19 @@ const columns = [
   },
 ];
 
+const empty = (
+  <Empty
+    image={<IllustrationNoResult />}
+    darkModeImage={<IllustrationNoResultDark />}
+    description="No listings available."
+  />
+);
+
 export default function ListingsTable() {
   const tableData = useSelector((state) => state.listingsTable);
   const actions = useActions();
   const [page, setPage] = useState(1);
-  const pageSize = 15;
+  const pageSize = 10;
   const [sortData, setSortData] = useState({});
   const [filter, setFilter] = useState(null);
 
@@ -158,6 +167,7 @@ export default function ListingsTable() {
       />
       <Table
         rowKey="id"
+        empty={empty}
         hideExpandedColumn={false}
         sticky={{ top: 5 }}
         columns={columns}

ui/src/components/version/VersionBanner.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Banner, Descriptions } from '@douyinfe/semi-ui';
+import { Collapse, Descriptions } from '@douyinfe/semi-ui';
 import { useSelector } from '../../services/state/store.js';
 import { MarkdownRender } from '@douyinfe/semi-ui';
 
@@ -8,12 +8,9 @@ import './VersionBanner.less';
 export default function VersionBanner() {
   const versionUpdate = useSelector((state) => state.versionUpdate.versionUpdate);
   return (
-    <Banner
-      className="versionBanner"
-      type="success"
-      icon={null}
-      description={
-        <div style={{ overflow: 'auto' }}>
+    <Collapse>
+      <Collapse.Panel header="A new version of Fredy is available" itemKey="1" className="versionBanner">
+        <div className="versionBanner__content">
           <p>A new version of Fredy is available. Update now to take advantage of the latest features and bug fixes.</p>
           <Descriptions row size="small">
             <Descriptions.Item itemKey="Your Version">{versionUpdate.localFredyVersion}</Descriptions.Item>
@@ -29,9 +26,9 @@ export default function VersionBanner() {
               <small>Release Notes</small>
             </b>
           </p>
-          <MarkdownRender raw={versionUpdate.body} style={{ height: '200px' }} />
+          <MarkdownRender raw={versionUpdate.body} />
         </div>
-      }
-    />
+      </Collapse.Panel>
+    </Collapse>
   );
 }

ui/src/components/version/VersionBanner.less

@@ -1,3 +1,7 @@
 .versionBanner {
-  margin-bottom: 1rem;
+  background: rgba(var(--semi-teal-1), 1);
+
+  &__content {
+    overflow: auto;
+  }
 }