fix: add box-shadow on buttons

BaseAdresseNationale · Jan 25, 2024 · b699ce9 · b699ce9
1 parent 4a0ec70
commit b699ce9
Showing 1 changed file with 41 additions and 33 deletions.
diff --git a/components/certification-button.js b/components/certification-button.js
@@ -21,47 +21,55 @@ function CertificationButton({isLoading, onConfirm, onCancel, isCertified}) {
 
   return (
     <div className="certification-button-wrapper">
-      <Button
-        isLoading={isLoading}
-        type='submit'
-        appearance='primary'
-        intent='success'
-        marginTop={16}
-        marginLeft={8}
-        iconAfter={EndorsedIcon}
-        onClick={() => onConfirm(isCertified ? null : true)}
-      >
-        {submitCertificationLabel}
-      </Button>
+      <div>
+        <Button
+          isLoading={isLoading}
+          type='submit'
+          appearance='primary'
+          intent='success'
+          iconAfter={EndorsedIcon}
+          onClick={() => onConfirm(isCertified ? null : true)}
+        >
+          {submitCertificationLabel}
+        </Button>
+      </div>
 
-      <Button
-        isLoading={isLoading}
-        type='submit'
-        appearance='default'
-        intent={isCertified ? 'danger' : 'success'}
-        marginTop={16}
-        marginLeft={8}
-        onClick={() => onConfirm(isCertified ? false : null)}
-      >
-        {submitLabel}
-      </Button>
+      <div>
+        <Button
+          isLoading={isLoading}
+          type='submit'
+          appearance='default'
+          intent={isCertified ? 'danger' : 'success'}
+          onClick={() => onConfirm(isCertified ? false : null)}
+        >
+          {submitLabel}
+        </Button>
+      </div>
 
-      <Button
-        disabled={isLoading}
-        appearance='default'
-        marginLeft={8}
-        marginTop={16}
-        display='inline-flex'
-        onClick={onCancel}
-      >
-        Annuler
-      </Button>
+      <div>
+        <Button
+          disabled={isLoading}
+          appearance='default'
+          display='inline-flex'
+          onClick={onCancel}
+        >
+          Annuler
+        </Button>
+      </div>
 
       <style jsx>{`
         .certification-button-wrapper {
           position: sticky;
           bottom: 0;
           display: flex;
+          padding: 10px;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .certification-button-wrapper > div {
+          box-shadow: 0 0 1px rgba(67, 90, 111, 0.3), 0 5px 8px -4px rgba(67, 90, 111, 0.47);
+          margin-left: 8px;
         }
       `}</style>
     </div>