Styling new

db-scheduler-ui-frontend/package.json

@@ -15,6 +15,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@tanstack/react-query": "^4.33.0",
+    "date-fns": "^2.30.0",
     "framer-motion": "^10.15.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

db-scheduler-ui-frontend/src/components/DotButton.tsx

@@ -44,9 +44,10 @@ export const DotButton: React.FC<TaskProps> = ({
           onClick={(event) => event.stopPropagation()}
         />
 
-        <MenuList>
+        <MenuList padding={0}>
           <MenuItem
             rounded={6}
+            minBlockSize={10}
             onClick={(event) => {
               event.stopPropagation();
               setIsOpen(true);

db-scheduler-ui-frontend/src/components/SortButton.tsx

@@ -16,18 +16,17 @@ export const SortButton: React.FC<{
     flex="2"
     textAlign="left"
     fontSize={'sm'}
-    _active={{ color: '#000000', fontWeight: 'semibold' }}
     onClick={() =>
       currentSort === name ? setSortAsc(!sortAsc) : setCurrentSort(name)
     }
-    fontWeight={currentSort === name ? 'bold' : 'normal'}
   >
     {title}
     <ChevronDownIcon
       fontSize={'xl'}
       transform={
         sortAsc || currentSort !== name ? 'rotate(0deg)' : 'rotate(180deg)'
       }
+      color={currentSort === name ? '#000000' : '#ababab'}
       transition="transform 0.3s ease-in-out"
     />
   </Text>

db-scheduler-ui-frontend/src/components/StatusBox.tsx

@@ -39,6 +39,7 @@ export const StatusBox: React.FC<StatusBoxProps> = ({
     <Box
       borderRadius={4}
       mr={4}
+      width={115}
       borderColor={borderColor}
       backgroundColor={backgroundColor}
       color={color}

db-scheduler-ui-frontend/src/components/TaskAccordionButton.tsx

@@ -3,6 +3,7 @@ import { StatusBox } from 'src/components/StatusBox';
 import { TaskRunButton } from 'src/components/TaskRunButton';
 import React from 'react';
 import { DotButton } from 'src/components/DotButton';
+import { dateFormatText } from 'src/components/dateFormatText';
 
 interface TaskAccordionButtonProps {
   taskName: string;
@@ -51,8 +52,7 @@ export const TaskAccordionButton: React.FC<TaskAccordionButtonProps> = ({
             justifyContent={'flex-end'}
             flexDirection={'row'}
           >
-
-            <Box flex="1">{new Date(executionTime)?.toLocaleString()}</Box>
+            <Box flex={1}>{dateFormatText(new Date(executionTime))}</Box>
             <TaskRunButton
               taskName={taskName}
               taskInstance={taskInstance}

db-scheduler-ui-frontend/src/components/TaskRunButton.tsx

@@ -28,6 +28,7 @@ export const TaskRunButton: React.FC<TaskRunButtonProps> = ({
           runTask(taskInstance, taskName).then(() => refetch());
         }}
         iconSpacing={2}
+        width={100}
         bgColor={consecutiveFailures > 0 ? '#5068F6' : '#E9ECFE'}
         textColor={consecutiveFailures > 0 ? '#FFFFFF' : '#002FA7'}
         _hover={{

db-scheduler-ui-frontend/src/components/dateFormatText.ts

@@ -0,0 +1,4 @@
+import { format } from 'date-fns';
+export function dateFormatText(date: Date) {
+  return format(date, 'dd. MMM yy, H:mm:ss');
+}