Improvements 01 28 (#264)

* improving footer

* improve ui

* upgrading dependencies

* adding glow to all boxes on dashboard

* introducing single listing view

* next release version

* improve screenshots and login page

ui/src/components/grid/jobs/JobGrid.jsx

@@ -185,31 +185,21 @@ const JobGrid = () => {
 
   return (
     <div className="jobGrid">
-      <div style={{ display: 'flex', flexDirection: 'column' }}>
-        <Button
-          style={{ width: '7rem', margin: 0 }}
-          type="primary"
-          icon={<IconPlusCircle />}
-          className="jobs__newButton"
-          onClick={() => navigate('/jobs/new')}
-        >
+      <Space vertical align="start" style={{ width: '100%', marginBottom: '16px' }} spacing="medium">
+        <Button type="primary" icon={<IconPlusCircle />} onClick={() => navigate('/jobs/new')}>
           New Job
         </Button>
-
-        <div className="jobGrid__searchbar">
+        <div className="jobGrid__searchbar" style={{ width: '100%' }}>
           <Input prefix={<IconSearch />} showClear placeholder="Search" onChange={handleFilterChange} />
-          <Popover content="Filter / Sort Results" style={{ color: 'white', padding: '.5rem' }}>
-            <div>
-              <Button
-                icon={<IconFilter />}
-                onClick={() => {
-                  setShowFilterBar(!showFilterBar);
-                }}
-              />
-            </div>
-          </Popover>
+          <Button
+            icon={<IconFilter />}
+            style={{ marginLeft: '8px' }}
+            onClick={() => {
+              setShowFilterBar(!showFilterBar);
+            }}
+          />
         </div>
-      </div>
+      </Space>
 
       {showFilterBar && (
         <div className="jobGrid__toolbar">
@@ -277,7 +267,6 @@ const JobGrid = () => {
             <Card
               className="jobGrid__card"
               bodyStyle={{ padding: '16px' }}
-              headerLine={true}
               title={
                 <div className="jobGrid__header">
                   <Title heading={5} ellipsis={{ showTooltip: true }} className="jobGrid__title">
@@ -351,6 +340,8 @@ const JobGrid = () => {
                     <div>
                       <Button
                         type="primary"
+                        style={{ background: '#21aa21b5' }}
+                        size="small"
                         theme="solid"
                         icon={<IconPlayCircle />}
                         disabled={job.isOnlyShared || job.running}
@@ -362,7 +353,7 @@ const JobGrid = () => {
                     <div>
                       <Button
                         type="secondary"
-                        theme="solid"
+                        size="small"
                         icon={<IconEdit />}
                         disabled={job.isOnlyShared}
                         onClick={() => navigate(`/jobs/edit/${job.id}`)}
@@ -373,7 +364,7 @@ const JobGrid = () => {
                     <div>
                       <Button
                         type="tertiary"
-                        theme="solid"
+                        size="small"
                         icon={<IconCopy />}
                         disabled={job.isOnlyShared}
                         onClick={() => navigate('/jobs/new', { state: { cloneFrom: job.id } })}
@@ -384,7 +375,7 @@ const JobGrid = () => {
                     <div>
                       <Button
                         type="danger"
-                        theme="solid"
+                        size="small"
                         icon={<IconDescend2 />}
                         disabled={job.isOnlyShared}
                         onClick={() => onListingRemoval(job.id)}
@@ -395,7 +386,7 @@ const JobGrid = () => {
                     <div>
                       <Button
                         type="danger"
-                        theme="solid"
+                        size="small"
                         icon={<IconDelete />}
                         disabled={job.isOnlyShared}
                         onClick={() => onJobRemoval(job.id)}

ui/src/components/grid/jobs/JobGrid.less

@@ -1,11 +1,16 @@
 .jobGrid {
   &__card {
     height: 100%;
-    transition: transform 0.2s;
+    transition: transform 0.2s, box-shadow 0.2s;
+    background-color: rgba(36, 36, 36, 0.9);
+    backdrop-filter: blur(8px);
+    border: 1px solid var(--semi-color-border);
+    box-shadow: 0 0 15px -3px rgb(78 78 78 / 50%);
 
     &:hover {
       transform: translateY(-4px);
-      box-shadow: var(--semi-shadow-elevated);
+      box-shadow: 0 0 15px -3px rgb(78 78 78 / 70%);
+      background-color: rgba(36, 36, 36, 1);
     }
   }
 
@@ -19,12 +24,14 @@
 
   &__toolbar {
     &__card {
-      border-radius: 5px;
+      border-radius: var(--semi-border-radius-medium);
       display: flex;
       flex-direction: column;
       gap: .3rem;
-      background: #232429;
+      background: rgba(36, 36, 36, 0.9);
+      backdrop-filter: blur(8px);
       padding: 0.5rem;
+      border: 1px solid var(--semi-color-border);
     }
   }
 

ui/src/components/grid/listings/ListingsGrid.jsx

@@ -32,7 +32,9 @@ import {
   IconSearch,
   IconFilter,
   IconActivity,
+  IconEyeOpened,
 } from '@douyinfe/semi-icons';
+import { useNavigate } from 'react-router-dom';
 import no_image from '../../../assets/no_image.jpg';
 import * as timeService from '../../../services/time/timeService.js';
 import { xhrDelete, xhrPost } from '../../../services/xhr.js';
@@ -49,6 +51,7 @@ const ListingsGrid = () => {
   const providers = useSelector((state) => state.provider);
   const jobs = useSelector((state) => state.jobsData.jobs);
   const actions = useActions();
+  const navigate = useNavigate();
 
   const [page, setPage] = useState(1);
   const pageSize = 40;
@@ -223,6 +226,8 @@ const ListingsGrid = () => {
           <Col key={item.id} xs={24} sm={12} md={8} lg={6} xl={4} xxl={6}>
             <Card
               className={`listingsGrid__card ${!item.is_active ? 'listingsGrid__card--inactive' : ''}`}
+              style={{ cursor: 'pointer' }}
+              onClick={() => navigate(`/listings/listing/${item.id}`)}
               cover={
                 <div style={{ position: 'relative' }}>
                   <div className="listingsGrid__imageContainer">
@@ -289,17 +294,26 @@ const ListingsGrid = () => {
                 </Space>
                 <Divider margin=".6rem" />
                 <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-                  <div className="listingsGrid__linkButton">
+                  <div className="listingsGrid__linkButton" onClick={(e) => e.stopPropagation()}>
                     <a href={item.link} target="_blank" rel="noopener noreferrer">
                       <IconLink />
                     </a>
                   </div>
 
+                  <Button
+                    type="secondary"
+                    size="small"
+                    title="View Details"
+                    onClick={() => navigate(`/listings/listing/${item.id}`)}
+                    icon={<IconEyeOpened />}
+                  />
+
                   <Button
                     title="Remove"
                     type="danger"
                     size="small"
-                    onClick={async () => {
+                    onClick={async (e) => {
+                      e.stopPropagation();
                       try {
                         await xhrDelete('/api/listings/', { ids: [item.id] });
                         Toast.success('Listing(s) successfully removed');

ui/src/components/grid/listings/ListingsGrid.less

@@ -33,11 +33,15 @@
 
   &__card {
     height: 100%;
-    transition: transform 0.2s;
+    transition: transform 0.2s, box-shadow 0.2s;
+    background-color: rgba(36, 36, 36, 0.9);
+    backdrop-filter: blur(8px);
+    border: 1px solid var(--semi-color-border);
 
     &:hover {
       transform: translateY(-4px);
       box-shadow: var(--semi-shadow-elevated);
+      background-color: rgba(36, 36, 36, 1);
     }
 
     &--inactive {
@@ -90,13 +94,15 @@
   }
 
   &__toolbar {
-
     &__card {
-      border-radius: 5px;
+      border-radius: var(--semi-border-radius-medium);
       display: flex;
       flex-direction: column;
       gap: .3rem;
-      background: #232429;
+      background: rgba(36, 36, 36, 0.9);
+      backdrop-filter: blur(8px);
+      padding: 0.5rem;
+      border: 1px solid var(--semi-color-border);
     }
   }
 
@@ -105,7 +111,7 @@
   }
 
   &__linkButton {
-    background: var(--semi-color-fill-0);
+    background: var(--semi-color-primary);
     font-size: 14px;
     line-height: 20px;
     font-weight: 600;
@@ -115,5 +121,18 @@
     align-items: center;
     justify-content: center;
     border-radius: 3px;
+
+    a {
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+
+    &:hover {
+      background: var(--semi-color-primary-hover);
+    }
   }
 }