adapt padding and margin to new Tabs

scality · Jun 26, 2024 · 28934d1 · 28934d1
1 parent 2a0acbc
commit 28934d1
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 90 deletions.
diff --git a/src/react/account/AccountLocations.tsx b/src/react/account/AccountLocations.tsx
@@ -1,4 +1,4 @@
-import { Loader, Stack } from '@scality/core-ui';
+import { Loader, Stack, spacing } from '@scality/core-ui';
 import { Table } from '@scality/core-ui/dist/next';
 import { useMemo } from 'react';
 import { CellProps, CoreUIColumn } from 'react-table';
@@ -33,7 +33,7 @@ export function AccountLocations() {
       (location: Location) => {
         return location;
       },
-      { flex: '0.5' },
+      { flex: '0.5', paddingRight: spacing.r16 },
     );
     const columns: CoreUIColumn<Location>[] = [
       {

diff --git a/src/react/databrowser/buckets/details/Workflow.tsx b/src/react/databrowser/buckets/details/Workflow.tsx
@@ -73,6 +73,7 @@ function Workflow({ bucketName }: { bucketName: string }) {
       cellStyle: {
         flex: 1,
         textAlign: 'right',
+        paddingRight: spacing.r16,
       },
       Cell: ({ value }: { value: boolean }) => (value ? 'Active' : 'Inactive'),
       width: 0,

diff --git a/src/react/ui-elements/Container.ts b/src/react/ui-elements/Container.ts
@@ -1,20 +1,20 @@
-import { spacing } from '@scality/core-ui/dist/style/theme';
+import { spacing } from '@scality/core-ui';
 import styled from 'styled-components';
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
 
   max-width: 600px;
-  margin: ${spacing.sp8};
-  padding: ${spacing.sp20};
+  margin: ${spacing.r8};
+  padding: ${spacing.r20};
   background-color: ${(props) => props.theme.backgroundLevel1};
 `;
 const ContainerFooter = styled.div`
   display: flex;
   justify-content: flex-end;
 
-  margin-top: ${spacing.sp8};
+  margin-top: ${spacing.r8};
 `;
 const LoaderContainer = styled.div`
   display: flex;
@@ -83,6 +83,7 @@ const ZenkoUIContainer = styled.div`
 const ButtonContainer = styled.div`
   display: flex;
   justify-content: flex-end;
+  padding-bottom: ${spacing.r16};
 `;
 const ButtonsContainer = styled.div`
   height: 100%;

diff --git a/src/react/ui-elements/DeleteBucket/index.tsx b/src/react/ui-elements/DeleteBucket/index.tsx
@@ -38,7 +38,6 @@ export const DeleteBucket = ({ bucketName }: DeleteBucketProps) => {
             : 'Bucket is not empty'
         }
         overlayStyle={{
-          width: '9rem',
           display: isBucketEmpty ? undefined : 'none',
         }}
       >

diff --git a/src/react/ui-elements/Table.tsx b/src/react/ui-elements/Table.tsx
@@ -259,7 +259,6 @@ export const TableContainer = styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;
-  padding: ${spacing.r16};
 `;
 export const GentleEmphaseSecondaryText = styled(SecondaryText)<{
   alignRight?: boolean;

diff --git a/src/react/ui-elements/TableKeyValue2.tsx b/src/react/ui-elements/TableKeyValue2.tsx
@@ -147,6 +147,8 @@ export const ErrorContainer = styled.div`
   position: absolute;
 `;
 const Table = styled.div`
+  height: 100%;
+  overflow: auto;
   width: 100%;
 `;
 export const Header = styled.div<{ isRemoved?: boolean }>`

diff --git a/src/react/workflow/ConfigurationTab.tsx b/src/react/workflow/ConfigurationTab.tsx
@@ -578,93 +578,88 @@ function EditForm({
   };
 
   return (
-    <Box style={{ padding: spacing.r16 }}>
-      <FormProvider {...useFormMethods}>
-        <Form
-          requireMode="all"
-          banner={
-            formState.isDirty && (
-              <Banner
-                icon={<Icon name="Exclamation-triangle" />}
-                variant="warning"
-              >
-                If you leave this screen without saving, your changes will be
-                lost.
-              </Banner>
-            )
-          }
-          layout={{ kind: 'tab' }}
-          onSubmit={handleSubmit(onSubmit)}
-          rightActions={
-            <Stack gap="r16" style={{ paddingRight: spacing.r16 }}>
-              <Button
-                disabled={!formState.isDirty || !formState.isValid}
-                icon={<Icon name="Save" />}
-                id="create-workflow-btn"
-                variant="primary"
-                label="Save"
-                type="submit"
-              />
-              <Button
-                id="cancel-workflow-btn"
-                variant="outline"
-                disabled={!formState.isDirty}
-                onClick={() => useFormMethods.reset()}
-                label="Cancel"
-                type="button"
-              />
-              <DeleteWorkflowButton workflow={workflow} />
-            </Stack>
-          }
-        >
-          <FormSection forceLabelWidth={convertRemToPixels(12)}>
-            <FormGroup
-              required
-              label="Rule Type"
-              id="type"
-              content={
-                isExpirationWorkflow(workflow) ? (
-                  <Stack direction="horizontal">
-                    <Icon name="Expiration" />
-                    Expiration
-                  </Stack>
-                ) : isTransitionWorkflow(workflow) ? (
-                  <Stack direction="horizontal">
-                    <Icon name="Transition" />
-                    Transition
-                  </Stack>
-                ) : (
-                  <Stack direction="horizontal">
-                    <Icon name="Replication" />
-                    Replication
-                  </Stack>
-                )
-              }
+    <FormProvider {...useFormMethods}>
+      <Form
+        requireMode="all"
+        banner={
+          formState.isDirty && (
+            <Banner icon={<Icon name="Exclamation-circle" />} variant="warning">
+              If you leave this screen without saving, your changes will be
+              lost.
+            </Banner>
+          )
+        }
+        layout={{ kind: 'tab' }}
+        onSubmit={handleSubmit(onSubmit)}
+        rightActions={
+          <Stack gap="r16">
+            <Button
+              disabled={!formState.isDirty || !formState.isValid}
+              icon={<Icon name="Save" />}
+              id="create-workflow-btn"
+              variant="primary"
+              label="Save"
+              type="submit"
+            />
+            <Button
+              id="cancel-workflow-btn"
+              variant="outline"
+              disabled={!formState.isDirty}
+              onClick={() => useFormMethods.reset()}
+              label="Cancel"
+              type="button"
             />
-          </FormSection>
-          <FormSection
-            forceLabelWidth={convertRemToPixels(12)}
-            title={{ name: 'General' }}
-          >
-            {/* The required prop is a little hacky to remove the "optional" label of FormSection */}
-            {isExpirationWorkflow(workflow) ? (
-              <GeneralExpirationGroup required />
-            ) : isTransitionWorkflow(workflow) ? (
-              <GeneralTransitionGroup required />
-            ) : (
-              <GeneralReplicationGroup required />
-            )}
-          </FormSection>
+            <DeleteWorkflowButton workflow={workflow} />
+          </Stack>
+        }
+      >
+        <FormSection forceLabelWidth={convertRemToPixels(12)}>
+          <FormGroup
+            required
+            label="Rule Type"
+            id="type"
+            content={
+              isExpirationWorkflow(workflow) ? (
+                <Stack direction="horizontal">
+                  <Icon name="Expiration" />
+                  Expiration
+                </Stack>
+              ) : isTransitionWorkflow(workflow) ? (
+                <Stack direction="horizontal">
+                  <Icon name="Transition" />
+                  Transition
+                </Stack>
+              ) : (
+                <Stack direction="horizontal">
+                  <Icon name="Replication" />
+                  Replication
+                </Stack>
+              )
+            }
+          />
+        </FormSection>
+        <FormSection
+          forceLabelWidth={convertRemToPixels(12)}
+          title={{ name: 'General' }}
+        >
+          {/* The required prop is a little hacky to remove the "optional" label of FormSection */}
           {isExpirationWorkflow(workflow) ? (
-            <ExpirationForm />
+            <GeneralExpirationGroup required />
           ) : isTransitionWorkflow(workflow) ? (
-            <TransitionForm />
+            <GeneralTransitionGroup required />
           ) : (
-            <ReplicationForm isPrefixMandatory={isPrefixMandatory} />
+            <GeneralReplicationGroup required />
           )}
-        </Form>
-      </FormProvider>
-    </Box>
+        </FormSection>
+        {isExpirationWorkflow(workflow) ? (
+          <ExpirationForm />
+        ) : isTransitionWorkflow(workflow) ? (
+          <TransitionForm />
+        ) : (
+          <ReplicationForm isPrefixMandatory={isPrefixMandatory} />
+        )}
+      </Form>
+    </FormProvider>
   );
 }