custom footer inside of css.footer

determined-ai · Dec 11, 2023 · fb14381 · fb14381
1 parent 34ae859
commit fb14381
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 30 deletions.
diff --git a/src/DesignKit.module.scss b/src/DesignKit.module.scss
@@ -192,9 +192,6 @@ ul.sections {
   font-weight: bold;
 }
 .modalFooter {
-  border-top: solid var(--theme-stroke-width) var(--theme-surface-border);
-  display: flex;
-  flex-direction: row;
-  padding-block: 8px;
-  padding-inline: 16px;
+  justify-content: space-between;
+  width: 100%;
 }
diff --git a/src/kit/Modal.tsx b/src/kit/Modal.tsx
@@ -135,32 +135,34 @@ export const Modal: React.FC<ModalProps> = ({
         className={classes.join(' ')}
         closeIcon={<Icon name="close" size="small" title="Close modal" />}
         footer={
-          footer ?? (
-            <div className={css.footer}>
-              <div className={css.footerLink}>{footerLink}</div>
-              <div className={css.buttons}>
-                {(cancel || cancelText) && (
-                  <Button key="back" onClick={close}>
-                    {cancelText || DEFAULT_CANCEL_LABEL}
+          <div className={css.footer}>
+            {footer ?? (
+              <>
+                <div className={css.footerLink}>{footerLink}</div>
+                <div className={css.buttons}>
+                  {(cancel || cancelText) && (
+                    <Button key="back" onClick={close}>
+                      {cancelText || DEFAULT_CANCEL_LABEL}
+                    </Button>
+                  )}
+                  <Button
+                    danger={danger}
+                    disabled={!!submit?.disabled}
+                    form={submit?.form}
+                    htmlType={submit?.form ? 'submit' : 'button'}
+                    key="submit"
+                    loading={isSubmitting}
+                    tooltip={
+                      submit?.disabled ? 'Address validation errors before proceeding' : undefined
+                    }
+                    type="primary"
+                    onClick={handleSubmit}>
+                    {submit?.text ?? 'OK'}
                   </Button>
-                )}
-                <Button
-                  danger={danger}
-                  disabled={!!submit?.disabled}
-                  form={submit?.form}
-                  htmlType={submit?.form ? 'submit' : 'button'}
-                  key="submit"
-                  loading={isSubmitting}
-                  tooltip={
-                    submit?.disabled ? 'Address validation errors before proceeding' : undefined
-                  }
-                  type="primary"
-                  onClick={handleSubmit}>
-                  {submit?.text ?? 'OK'}
-                </Button>
-              </div>
-            </div>
-          )
+                </div>
+              </>
+            )}
+          </div>
         }
         key={key}
         maskClosable={true}