fixed ui for jobList

src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobActionMenu.tsx

@@ -19,16 +19,19 @@ const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick
       {
         key: CopyJobActions.pause,
         text: ContainerCopyMessages.MonitorJobs.Actions.pause,
+        iconProps: { iconName: "Pause" },
         onClick: () => handleClick(job, CopyJobActions.pause),
       },
       {
         key: CopyJobActions.cancel,
         text: ContainerCopyMessages.MonitorJobs.Actions.cancel,
+        iconProps: { iconName: "Cancel" },
         onClick: () => handleClick(job, CopyJobActions.cancel),
       },
       {
         key: CopyJobActions.resume,
         text: ContainerCopyMessages.MonitorJobs.Actions.resume,
+        iconProps: { iconName: "Play" },
         onClick: () => handleClick(job, CopyJobActions.resume),
       },
     ];
@@ -49,6 +52,7 @@ const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick
         filteredItems.push({
           key: CopyJobActions.complete,
           text: ContainerCopyMessages.MonitorJobs.Actions.complete,
+          iconProps: { iconName: "CheckMark" },
           onClick: () => handleClick(job, CopyJobActions.complete),
         });
       }
@@ -65,8 +69,9 @@ const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick
   return (
     <IconButton
       role="button"
-      iconProps={{ iconName: "more" }}
+      iconProps={{ iconName: "More", styles: { root: { fontSize: "20px", fontWeight: "bold" } } }}
       menuProps={{ items: getMenuItems() }}
+      menuIconProps={{ iconName: "" }}
       ariaLabel={ContainerCopyMessages.MonitorJobs.Columns.actions}
       title={ContainerCopyMessages.MonitorJobs.Columns.actions}
     />

src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobColumns.tsx

@@ -15,8 +15,8 @@ export const getColumns = (
       key: "LastUpdatedTime",
       name: ContainerCopyMessages.MonitorJobs.Columns.lastUpdatedTime,
       fieldName: "LastUpdatedTime",
-    minWidth: 100,
-    maxWidth: 150,
+      minWidth: 140,
+      maxWidth: 300,
       isResizable: true,
       isSorted: sortedColumnKey === "timestamp",
       isSortedDescending: isSortedDescending,
@@ -26,8 +26,8 @@ export const getColumns = (
       key: "Name",
       name: ContainerCopyMessages.MonitorJobs.Columns.name,
       fieldName: "Name",
-    minWidth: 90,
-    maxWidth: 130,
+      minWidth: 140,
+      maxWidth: 300,
       isResizable: true,
       isSorted: sortedColumnKey === "Name",
       isSortedDescending: isSortedDescending,
@@ -37,8 +37,8 @@ export const getColumns = (
       key: "Mode",
       name: ContainerCopyMessages.MonitorJobs.Columns.mode,
       fieldName: "Mode",
-    minWidth: 70,
-    maxWidth: 90,
+      minWidth: 90,
+      maxWidth: 200,
       isResizable: true,
       isSorted: sortedColumnKey === "Mode",
       isSortedDescending: isSortedDescending,
@@ -48,8 +48,8 @@ export const getColumns = (
       key: "CompletionPercentage",
       name: ContainerCopyMessages.MonitorJobs.Columns.completionPercentage,
       fieldName: "CompletionPercentage",
-    minWidth: 120,
-    maxWidth: 130,
+      minWidth: 110,
+      maxWidth: 200,
       isResizable: true,
       isSorted: sortedColumnKey === "CompletionPercentage",
       isSortedDescending: isSortedDescending,
@@ -60,8 +60,8 @@ export const getColumns = (
       key: "CopyJobStatus",
       name: ContainerCopyMessages.MonitorJobs.Columns.status,
       fieldName: "Status",
-    minWidth: 80,
-    maxWidth: 100,
+      minWidth: 130,
+      maxWidth: 200,
       isResizable: true,
       isSorted: sortedColumnKey === "Status",
       isSortedDescending: isSortedDescending,
@@ -70,9 +70,10 @@ export const getColumns = (
     },
     {
       key: "Actions",
-    name: ContainerCopyMessages.MonitorJobs.Columns.actions,
-    minWidth: 200,
+      name: "",
+      minWidth: 80,
+      maxWidth: 200,
       isResizable: true,
       onRender: (job: CopyJobType) => <CopyJobActionMenu job={job} handleClick={handleActionClick} />,
     },
-];
+  ];

src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobStatusWithIcon.tsx

@@ -1,38 +1,39 @@
-import { FontIcon, mergeStyles, mergeStyleSets, Stack, Text } from "@fluentui/react";
+import { FontIcon, getTheme, mergeStyles, mergeStyleSets, Stack, Text } from "@fluentui/react";
 import React from "react";
 import ContainerCopyMessages from "../../ContainerCopyMessages";
 import { CopyJobStatusType } from "../../Enums";
 
-// Styles
+const theme = getTheme();
+
 const iconClass = mergeStyles({
-  fontSize: "1em",
-  marginRight: "0.3em",
-});
-const classNames = mergeStyleSets({
-  [CopyJobStatusType.Pending]: [{ color: "#fe7f2d" }, iconClass],
-  [CopyJobStatusType.InProgress]: [{ color: "#ee9b00" }, iconClass],
-  [CopyJobStatusType.Running]: [{ color: "#ee9b00" }, iconClass],
-  [CopyJobStatusType.Partitioning]: [{ color: "#ee9b00" }, iconClass],
-  [CopyJobStatusType.Paused]: [{ color: "#bb3e03" }, iconClass],
-  [CopyJobStatusType.Skipped]: [{ color: "#00bbf9" }, iconClass],
-  [CopyJobStatusType.Cancelled]: [{ color: "#00bbf9" }, iconClass],
-  [CopyJobStatusType.Failed]: [{ color: "#d90429" }, iconClass],
-  [CopyJobStatusType.Faulted]: [{ color: "#d90429" }, iconClass],
-  [CopyJobStatusType.Completed]: [{ color: "#386641" }, iconClass],
-  unknown: [{ color: "#000814" }, iconClass],
+  fontSize: "16px",
+  marginRight: "8px",
+});
+
+const classNames = mergeStyleSets({
+  [CopyJobStatusType.Pending]: [{ color: theme.semanticColors.bodySubtext }, iconClass],
+  [CopyJobStatusType.InProgress]: [{ color: theme.palette.themePrimary }, iconClass],
+  [CopyJobStatusType.Running]: [{ color: theme.palette.themePrimary }, iconClass],
+  [CopyJobStatusType.Partitioning]: [{ color: theme.palette.themePrimary }, iconClass],
+  [CopyJobStatusType.Paused]: [{ color: theme.palette.themePrimary }, iconClass],
+  [CopyJobStatusType.Skipped]: [{ color: theme.semanticColors.bodySubtext }, iconClass],
+  [CopyJobStatusType.Cancelled]: [{ color: theme.semanticColors.bodySubtext }, iconClass],
+  [CopyJobStatusType.Failed]: [{ color: theme.semanticColors.errorIcon }, iconClass],
+  [CopyJobStatusType.Faulted]: [{ color: theme.semanticColors.errorIcon }, iconClass],
+  [CopyJobStatusType.Completed]: [{ color: theme.semanticColors.successIcon }, iconClass],
+  unknown: [{ color: theme.semanticColors.bodySubtext }, iconClass],
 });
 
-// Icon Mapping
 const iconMap: Record<CopyJobStatusType, string> = {
-  [CopyJobStatusType.Pending]: "MSNVideosSolid",
-  [CopyJobStatusType.InProgress]: "SyncStatusSolid",
-  [CopyJobStatusType.Running]: "SyncStatusSolid",
-  [CopyJobStatusType.Partitioning]: "SyncStatusSolid",
-  [CopyJobStatusType.Paused]: "CirclePauseSolid",
-  [CopyJobStatusType.Skipped]: "Blocked2Solid",
-  [CopyJobStatusType.Cancelled]: "Blocked2Solid",
-  [CopyJobStatusType.Failed]: "AlertSolid",
-  [CopyJobStatusType.Faulted]: "AlertSolid",
+  [CopyJobStatusType.Pending]: "StatusCircleRing",
+  [CopyJobStatusType.InProgress]: "ProgressRingDots",
+  [CopyJobStatusType.Running]: "ProgressRingDots",
+  [CopyJobStatusType.Partitioning]: "ProgressRingDots",
+  [CopyJobStatusType.Paused]: "CirclePause",
+  [CopyJobStatusType.Skipped]: "StatusCircleBlock2",
+  [CopyJobStatusType.Cancelled]: "StatusErrorFull",
+  [CopyJobStatusType.Failed]: "StatusErrorFull",
+  [CopyJobStatusType.Faulted]: "StatusErrorFull",
   [CopyJobStatusType.Completed]: "CompletedSolid",
 };
 

src/Explorer/ContainerCopy/containerCopyStyles.less

@@ -77,5 +77,52 @@
 }
 
 .monitorCopyJobs {
-    padding: 0 2.5rem;
+  padding: 0;
+  width: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+
+  .ms-DetailsList {
+    width: 100%;
+
+    .ms-DetailsHeader {
+      .ms-DetailsHeader-cell {
+        padding: @DefaultSpace 20px;
+        font-weight: 600;
+        font-size: @DefaultFontSize;
+        color: @BaseHigh;
+        background-color: @BaseLow;
+        border-bottom: @ButtonBorderWidth solid @BaseMedium;
+
+        &:hover {
+          background-color: @BaseMediumLow;
+        }
+      }
+    }
+
+    .ms-DetailsRow {
+      border-bottom: @ButtonBorderWidth solid @BaseMedium;
+
+      &:hover {
+        background-color: @BaseMediumLow;
+      }
+
+      .ms-DetailsRow-cell {
+        padding: @MediumSpace 20px;
+        font-size: @DefaultFontSize;
+        color: @BaseHigh;
+        min-height: 48px;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+
+  button[role="button"] {
+    &.ms-Button--icon {
+      i.ms-Icon {
+        font-size: @LargeSpace;
+      }
+    }
+  }
 }