fix: adjust form footer styles

dhis2 · Dec 16, 2024 · 1be5c38 · 1be5c38
1 parent c43aa2a
commit 1be5c38
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 13 deletions.
diff --git a/src/app/layout/Layout.module.css b/src/app/layout/Layout.module.css
@@ -17,7 +17,7 @@
 .wrapperWithFooter {
     composes: wrapper;
     grid-template-areas: 'sidebar' 'main' 'footer';
-    grid-template-rows: auto 1fr 68px;
+    grid-template-rows: auto 1fr 44px;
     overflow-y: auto;
 }
 
@@ -50,8 +50,9 @@
 .footerPlaceholder {
     grid-area: footer;
     width: 100vw;
-    padding: var(--spacers-dp16) 0;
+    padding: 0;
     background: var(--colors-white);
+    border-top: 1px solid red;
 }
 
 @media m-medium {
@@ -64,7 +65,7 @@
     }
     .wrapperWithFooter {
         grid-template-areas: 'sidebar main' 'footer footer';
-        grid-template-rows: 1fr 68px;
+        grid-template-rows: 1fr 44px;
     }
     .sidebar {
         width: 240px;

diff --git a/src/components/form/DefaultFormContents.module.css b/src/components/form/DefaultFormContents.module.css
@@ -9,7 +9,9 @@
     left: 0;
     bottom: 0;
     width: 100vw;
-    padding: var(--spacers-dp16);
-    box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
+    padding: var(--spacers-dp8) var(--spacers-dp16);
+    box-shadow: 0px 0px 1px 0px rgba(33, 41, 52, 0.1),
+        0px -4px 6px -1px rgba(33, 41, 52, 0.1),
+        0px -2px 4px -1px rgba(33, 41, 52, 0.06);
     background: var(--colors-white);
 }
diff --git a/src/components/standardForm/StandardFormActions.tsx b/src/components/standardForm/StandardFormActions.tsx
@@ -23,12 +23,17 @@ export function StandardFormActions({
 }) {
     return (
         <ButtonStrip>
-            <Button primary disabled={submitting} type="submit">
+            <Button primary small disabled={submitting} type="submit">
                 {submitting && <LoadingIcon />}
                 {submitLabel}
             </Button>
 
-            <Button disabled={submitting} onClick={onCancelClick}>
+            <Button
+                secondary
+                small
+                disabled={submitting}
+                onClick={onCancelClick}
+            >
                 {cancelLabel}
             </Button>
         </ButtonStrip>

diff --git a/src/pages/dataElementGroupSets/Edit.module.css b/src/pages/dataElementGroupSets/Edit.module.css
@@ -9,7 +9,9 @@
     left: 0;
     bottom: 0;
     width: 100vw;
-    padding: var(--spacers-dp16);
-    box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
+    padding: var(--spacers-dp8) var(--spacers-dp16);
+    box-shadow: 0px 0px 1px 0px rgba(33, 41, 52, 0.1),
+        0px -4px 6px -1px rgba(33, 41, 52, 0.1),
+        0px -2px 4px -1px rgba(33, 41, 52, 0.06);
     background: var(--colors-white);
 }
diff --git a/src/pages/dataElementGroups/Edit.module.css b/src/pages/dataElementGroups/Edit.module.css
@@ -9,7 +9,9 @@
     left: 0;
     bottom: 0;
     width: 100vw;
-    padding: var(--spacers-dp16);
-    box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
+    padding: var(--spacers-dp8) var(--spacers-dp16);
+    box-shadow: 0px 0px 1px 0px rgba(33, 41, 52, 0.1),
+        0px -4px 6px -1px rgba(33, 41, 52, 0.1),
+        0px -2px 4px -1px rgba(33, 41, 52, 0.06);
     background: var(--colors-white);
 }
diff --git a/src/pages/dataElements/Edit.module.css b/src/pages/dataElements/Edit.module.css
@@ -9,7 +9,9 @@
     left: 0;
     bottom: 0;
     width: 100vw;
-    padding: var(--spacers-dp16);
-    box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
+    padding: var(--spacers-dp8) var(--spacers-dp16);
+    box-shadow: 0px 0px 1px 0px rgba(33, 41, 52, 0.1),
+        0px -4px 6px -1px rgba(33, 41, 52, 0.1),
+        0px -2px 4px -1px rgba(33, 41, 52, 0.06);
     background: var(--colors-white);
 }