Merge branch 'improvement/ARTESCA-7674-better-form-contrast' into q/1.0

scality · Jan 12, 2024 · f7a045a · f7a045a
2 parents 6c74461 + 3981311
commit f7a045a
Showing 1 changed file with 7 additions and 5 deletions.
diff --git a/src/lib/components/form/Form.component.tsx b/src/lib/components/form/Form.component.tsx
@@ -45,11 +45,13 @@ type PageFormProps = {
 } & FormProps;
 type TabFormProps = { layout: { kind: 'tab' } } & FormProps;
 
-const PageFormWrapper = styled.form<FormProps>`
+const StyledForm = styled.form<PageFormProps | TabFormProps>`
   display: flex;
   flex-direction: column;
   align-items: stretch;
   height: 100%;
+  background-color: ${(props) =>
+    props.layout.kind === 'page' && props.theme.backgroundLevel4};
 `;
 
 const BasicPageLayout = styled.div<{ layoutKind: 'page' | 'tab' }>`
@@ -288,7 +290,7 @@ const PageForm = forwardRef<HTMLFormElement, PageFormProps>(
     const requireMode = useContext(RequireModeContext);
     return (
       <ScrollbarWrapper>
-        <PageFormWrapper {...formProps} noValidate ref={ref}>
+        <StyledForm {...formProps} noValidate ref={ref} layout={layout}>
           <FixedHeader layoutKind="page">
             <PaddedForHeaderAndFooterContent>
               <Wrap>
@@ -342,7 +344,7 @@ const PageForm = forwardRef<HTMLFormElement, PageFormProps>(
               </Wrap>
             </PaddedForHeaderAndFooterContent>
           </FixedFooter>
-        </PageFormWrapper>
+        </StyledForm>
       </ScrollbarWrapper>
     );
   },
@@ -352,7 +354,7 @@ const TabForm = forwardRef<HTMLFormElement, TabFormProps>(
   ({ leftActions, rightActions, children, banner, ...formProps }, ref) => {
     return (
       <ScrollbarWrapper>
-        <PageFormWrapper {...formProps} noValidate ref={ref}>
+        <StyledForm {...formProps} noValidate ref={ref}>
           <FixedHeader layoutKind="tab">
             <Wrap>
               <div>{leftActions}</div>
@@ -368,7 +370,7 @@ const TabForm = forwardRef<HTMLFormElement, TabFormProps>(
               </Stack>
             </Stack>
           </ScrollArea>
-        </PageFormWrapper>
+        </StyledForm>
       </ScrollbarWrapper>
     );
   },