From 7a5a79affd219c541bb9ae0d27d7fffed37c2963 Mon Sep 17 00:00:00 2001
From: Asmaa EL MOKHTARI <100131224+AsmaaELM@users.noreply.github.com>
Date: Thu, 31 Mar 2022 11:35:13 +0200
Subject: [PATCH] css polishing

---
 src/react/ui-elements/TableKeyValue2.tsx | 8 +++++---
 src/react/workflow/ConfigurationTab.tsx  | 9 ++++++++-
 src/react/workflow/CreateWorkflow.tsx    | 3 ++-
 src/react/workflow/ExpirationForm.tsx    | 6 ++++--
 src/react/workflow/WorkflowList.tsx      | 6 ++++--
 5 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/react/ui-elements/TableKeyValue2.tsx b/src/react/ui-elements/TableKeyValue2.tsx
index f1a314d2f..d6e6349e1 100644
--- a/src/react/ui-elements/TableKeyValue2.tsx
+++ b/src/react/ui-elements/TableKeyValue2.tsx
@@ -57,6 +57,10 @@ export const Groups = styled.div`
 
   max-width: 450px;
 `;
+export const ScrollArea = styled.div`
+  overflow: auto;
+  max-height: calc(100vh - 19rem);
+`;
 export const Group = styled.div`
   margin-bottom: ${spacing.sp24};
 `;
@@ -149,14 +153,12 @@ export const Header = styled.div`
 `;
 export const BannerContainer = styled.div`
   margin-right: ${spacing.sp8};
-  width: 50%;
+  width: 60%;
   visibility: ${(props) => (props.isHidden ? 'hidden' : 'visible')};
 `;
 export const Footer = styled.div`
   display: flex;
   justify-content: flex-end;
-
-  margin-top: ${spacing.sp8};
   margin-bottom: ${spacing.sp8};
 `;
 export const ExtraCell = styled.div`
diff --git a/src/react/workflow/ConfigurationTab.tsx b/src/react/workflow/ConfigurationTab.tsx
index 41729a69d..f7608cd7e 100644
--- a/src/react/workflow/ConfigurationTab.tsx
+++ b/src/react/workflow/ConfigurationTab.tsx
@@ -407,7 +407,10 @@ function EditForm({
                 <T.Row>
                   <T.Key principal={true}> Rule Type </T.Key>
                   {isExpirationWorkflow(workflow) ? (
-                    <T.Value>Expiration</T.Value>
+                    <T.Value>
+                      <i className="fas fa-stopwatch" />
+                      Expiration
+                    </T.Value>
                   ) : (
                     <T.Value>
                       <i className="fas fa-coins" />
@@ -427,6 +430,7 @@ function EditForm({
                 id="cancel-workflow-btn"
                 style={{
                   marginRight: spacing.sp24,
+                  marginBottom: spacing.sp20,
                 }}
                 variant="outline"
                 disabled={!formState.isDirty}
@@ -435,6 +439,9 @@ function EditForm({
               />
               <Button
                 disabled={!formState.isDirty || !formState.isValid}
+                style={{
+                  marginBottom: spacing.sp20,
+                }}
                 icon={<i className="fas fa-save" />}
                 id="create-workflow-btn"
                 variant="primary"
diff --git a/src/react/workflow/CreateWorkflow.tsx b/src/react/workflow/CreateWorkflow.tsx
index 6d77b91e8..9a02f64b6 100644
--- a/src/react/workflow/CreateWorkflow.tsx
+++ b/src/react/workflow/CreateWorkflow.tsx
@@ -195,7 +195,7 @@ const CreateWorkflow = () => {
   return (
     <FormProvider {...useFormMethods}>
       <FormContainer>
-        <F.Form onSubmit={handleSubmit(onSubmit)}>
+        <F.Form onSubmit={handleSubmit(onSubmit)} style={{paddingLeft: '15%', paddingRight: '15%'}}>
           <F.Title>Create New Workflow</F.Title>
           <T.Group>
             <T.GroupContent>
@@ -265,6 +265,7 @@ const CreateWorkflow = () => {
             />
             <Button
               disabled={loading || !formState.isValid}
+              icon={<i className="fas fa-plus" />}
               id="create-workflow-btn"
               variant="primary"
               label="Create"
diff --git a/src/react/workflow/ExpirationForm.tsx b/src/react/workflow/ExpirationForm.tsx
index 956741c9b..4c1d7c14b 100644
--- a/src/react/workflow/ExpirationForm.tsx
+++ b/src/react/workflow/ExpirationForm.tsx
@@ -32,8 +32,8 @@ const ExpirationContainer = styled.div`
   flex-direction: column;
   width: 100%;
   ${T.Row} {
-    height: 42px;
-    min-height: 42px;
+    height: 25px;
+    max-height: 25px;
   }
 `;
 
@@ -126,6 +126,7 @@ export function ExpirationForm({ bucketList, locations, prefix = '' }: Props) {
         {...register(`${prefix}type`)}
         autoComplete="off"
       />
+      <T.ScrollArea>
       <T.Groups style={{ maxWidth: 'inherit' }}>
         <T.Group>
           <T.GroupName>General</T.GroupName>
@@ -630,6 +631,7 @@ export function ExpirationForm({ bucketList, locations, prefix = '' }: Props) {
           </T.GroupContent>
         </T.Group>
       </T.Groups>
+      </T.ScrollArea>
     </ExpirationContainer>
   );
 }
diff --git a/src/react/workflow/WorkflowList.tsx b/src/react/workflow/WorkflowList.tsx
index 8d0e8ca2a..9905f7de0 100644
--- a/src/react/workflow/WorkflowList.tsx
+++ b/src/react/workflow/WorkflowList.tsx
@@ -49,7 +49,7 @@ function WorkflowList({ workflows, workflowId }: Props) {
       accessor: 'name',
       cellStyle: {
         textAlign: 'left',
-        minWidth: '20rem',
+        minWidth: '28rem',
         marginLeft: '1rem',
       },
       Cell: renderRowSubComponent,
@@ -60,6 +60,7 @@ function WorkflowList({ workflows, workflowId }: Props) {
       cellStyle: {
         textAlign: 'left',
         minWidth: '10rem',
+        marginLeft: '3rem',
       },
       Cell({ value: type }: { value: string }) {
         return (
@@ -78,6 +79,7 @@ function WorkflowList({ workflows, workflowId }: Props) {
       cellStyle: {
         textAlign: 'left',
         minWidth: '5rem',
+        marginLeft: '1rem',
       },
       sortType: (row1: RowType, row2: RowType) => {
         return `${row1.original.state}` < `${row2.original.state}` ? 1 : -1;
@@ -90,7 +92,7 @@ function WorkflowList({ workflows, workflowId }: Props) {
 
   return (
     <div
-      style={{ backgroundColor: theme.brand.backgroundLevel3, height: '100%' }}
+      style={{ backgroundColor: theme.brand.backgroundLevel3, height: '100%', width: '50%' }}
     >
       <Table
         columns={columns}