2105: Refactor workflow action styles

frontend/src/languages/georgian.js

@@ -23,7 +23,7 @@ const ka = {
     approver: "Approver",
     assign: "assign",
     assigned_budget: "გამოყოფილი ბიუჯეტი",
-    assigned: "Assigned",
+    assigned: "მინიჭებული",
     assignees: "Assignee(s)",
     back: "უკან დაბრუნება",
     backToLogin: "უკან შესვლა",
@@ -332,7 +332,7 @@ const ka = {
     workflow_budget_allocated: "გამოყოფილი",
     workflow_budget_disbursed: "გადახდილი",
     workflow_budget_na: "არ მიესადაგება",
-    workflow_budget_status_allocated: "Assigned",
+    workflow_budget_status_allocated: "მინიჭებული",
     workflow_budget_status_disbursed: "გადახდილი",
     workflow_budget_status_na: "N/A",
     workflow_budget: "ბიუჯეტის თანხა",

frontend/src/pages/Workflows/WorkflowItem.js

@@ -35,16 +35,6 @@ import WorkflowAssigneeContainer from "./WorkflowAssigneeContainer.js";
 
 import "./WorkflowItem.scss";
 
-const createLine = (isFirst, selectable) => {
-  let className = "";
-  if (isFirst && selectable) {
-    className = "first-line";
-  } else {
-    className = selectable ? "line" : "line not-selectable";
-  }
-  return <div className={className} />;
-};
-
 const StepDot = (props) => {
   const {
     sortEnabled,
@@ -83,13 +73,11 @@ const StepDot = (props) => {
     }
   };
   return isWorkflowItemSelectable(redacted, sortEnabled, allowedIntents) ? (
-    <div className="workflow-checkbox">
-      <Checkbox
-        onChange={updateSelectedList}
-        checked={!!selectedWorkflowItems.find((item) => item.data.id === currentWorkflowItem.data.id)}
-        data-test="check-workflowitem"
-      />
-    </div>
+    <Checkbox
+      onChange={updateSelectedList}
+      checked={!!selectedWorkflowItems.find((item) => item.data.id === currentWorkflowItem.data.id)}
+      data-test="check-workflowitem"
+    />
   ) : (
     <Paper className="dots" elevation={2} disabled={selectable}>
       <Icon className={selectable ? "workflow-icon" : "workflow-icon not-selectable"} />
@@ -236,7 +224,13 @@ const getAmountField = (amount, type, exchangeRate, sourceCurrency, targetCurren
         </div>
       ) : null}
       <div>
-        <Chip className="amount-chip" label={amountTypes(type)} />
+        <Chip
+          sx={{
+            backgroundColor: type === "allocated" ? "blue" : "#16b816",
+            color: "white"
+          }}
+          label={amountTypes(type)}
+        />
       </div>
     </div>
   );
@@ -444,24 +438,25 @@ export const WorkflowItem = ({
             }}
             className="container-item"
           >
-            {createLine(mapIndex === 0, workflowSelectable)}
-            <StepDot
-              sortEnabled={workflowSortEnabled}
-              status={status}
-              selectable={workflowSelectable}
-              storeWorkflowItemsSelected={storeWorkflowItemsSelected}
-              storeWorkflowItemsBulkAction={storeWorkflowItemsBulkAction}
-              currentWorkflowItem={workflow}
-              selectedWorkflowItems={selectedWorkflowItems}
-              allowedIntents={allowedIntents}
-            />
             <Card
               data-test="selectable-card"
               elevation={workflowSelectable ? 1 : 0}
               key={mapIndex}
               className={getCardStyle(workflowSortEnabled, status, rejectReason)}
             >
               <div className="workflow-item-content" data-test={`workflowitem-${id}`}>
+                <div className="info-cell">
+                  <StepDot
+                    sortEnabled={workflowSortEnabled}
+                    status={status}
+                    selectable={workflowSelectable}
+                    storeWorkflowItemsSelected={storeWorkflowItemsSelected}
+                    storeWorkflowItemsBulkAction={storeWorkflowItemsBulkAction}
+                    currentWorkflowItem={workflow}
+                    selectedWorkflowItems={selectedWorkflowItems}
+                    allowedIntents={allowedIntents}
+                  />
+                </div>
                 <div className="info-cell">{infoButton}</div>
                 <div className="info-cell">{attachmentButton}</div>
                 <div className={workflowSelectable ? "workflow-cell" : "workflow-cell not-selectable"}>
@@ -588,15 +583,14 @@ export const RedactedWorkflowItem = ({
             }}
             className="container-item"
           >
-            {createLine(mapIndex === 0, workflowSelectable)}
-            <StepDot status={status} selectable={workflowSelectable} redacted={true} />
             <Card
               data-test="redacted-selectable-card"
               elevation={workflowSelectable ? 1 : 0}
               key={mapIndex}
               className="workflow-item-card"
             >
               <div className="workflow-item-content">
+                <StepDot status={status} selectable={workflowSelectable} redacted={true} />
                 <div className="hidden-icon-container">
                   <IconButton aria-label="Hidden Icon" className="button-style" size="large">
                     <HiddenIcon />

frontend/src/pages/Workflows/WorkflowItem.scss

@@ -14,23 +14,8 @@
   height: 1.25rem;
   width: 1.25rem;
   text-align: center;
-  display: inline-block;
-  position: absolute;
-  z-index: 20;
-  top: 21px;
-  left: 16px;
-  border-radius: 10px;
-}
-
-.workflow-checkbox {
-  height: 1.25rem;
-  width: 1.25rem;
-  text-align: center;
-  display: inline-block;
-  position: absolute;
-  top: 8px;
-  left: 5px;
   border-radius: 10px;
+  margin-left: 0.7rem;
 }
 
 .workflow-item-actions {
@@ -43,34 +28,10 @@
   width: 25%;
 }
 
-.line {
-  position: absolute;
-  border-left: 2px solid black;
-  height: 100%;
-  left: 25px;
-  bottom: 35px;
-  &.not-selectable {
-    opacity: 0.2;
-  }
-}
-
-.first-line {
-  position: absolute;
-  border-left: 2px solid black;
-  height: 2.3rem;
-  left: 25px;
-  bottom: 35px;
-}
-
 .button-style {
   min-width: 1.875rem;
   margin-left: 0.3rem;
 }
-
-.amount-chip {
-  margin-left: 1rem;
-}
-
 .tag-chip {
   color: var(--mui-palette-tag-main);
 }
@@ -100,7 +61,7 @@
   display: flex;
   justify-content: space-between;
   overflow: hidden;
-  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
+  padding: 0.3rem;
 }
 
 .info-cell {
@@ -177,7 +138,7 @@
 }
 
 .workflow-item-card {
-  margin-left: 3rem;
+  margin-left: 0.625rem;
   margin-right: 0.625rem;
   &.green {
     background-color: #f1f8e9;
@@ -209,6 +170,7 @@
 
 .amount-field-container {
   display: flex;
+  flex-direction: column;
 }
 
 .amount-field {

frontend/src/pages/Workflows/WorkflowList.scss

@@ -1,7 +1,7 @@
 .edit-button-container {
   position: absolute;
   top: 160px;
-  left: 7px;
+  left: 17px;
   @media screen and (min-width: 768px) and (max-width: 900px) {
     top: 210px;
   }