Moving/adjusting styles to FlintAlerts.

mlibrary · Aug 23, 2023 · 3e49928 · 3e49928
1 parent 306daf9
commit 3e49928
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 17 deletions.
diff --git a/src/modules/flint/components/FlintAlerts/index.js b/src/modules/flint/components/FlintAlerts/index.js
@@ -1,5 +1,5 @@
+/** @jsxImportSource @emotion/react */
 import React, { useState } from 'react';
-import { Alert } from '../../../reusable';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
@@ -26,15 +26,22 @@ function FlintAlerts (props) {
   };
 
   return (
-    <Alert type='warning'>
+    <div
+      className='alert alert--warning alert-inner'
+      css={{
+        gap: '1rem',
+        justifyContent: 'center',
+        marginTop: '-0.75rem'
+      }}
+    >
       <span dangerouslySetInnerHTML={{ __html: alertMessages[props.datastore] }} />
       <button
         className='btn btn--small btn--secondary'
         onClick={onClose}
       >
         Dismiss
       </button>
-    </Alert>
+    </div>
   );
 };
 

diff --git a/src/modules/pages/components/DatastorePage/container.js b/src/modules/pages/components/DatastorePage/container.js
@@ -102,20 +102,7 @@ class DatastorePageContainer extends React.Component {
                 <>
                   <SearchBox />
                   <DatastoreNavigation />
-                  <div
-                    css={{
-                      marginTop: '-0.75rem',
-                      '.alert-inner': {
-                        display: 'flex',
-                        justifyContent: 'center'
-                      },
-                      ':empty': {
-                        display: 'none'
-                      }
-                    }}
-                  >
-                    <FlintAlerts />
-                  </div>
+                  <FlintAlerts />
                   <ConnectedSwitch>
                     <Route
                       path={match.url + '/record/:recordUid/get-this/:barcode'}