refactor: migrate from @emotion/react to @emotion/styled

Author: hamed-musallam

package-lock.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "@blueprintjs/core": "^5.17.5",
     "@blueprintjs/icons": "^5.19.1",
-    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "fifo-logger": "^1.0.0",
     "filelist-utils": "^1.11.3",
     "nmr-load-save": "^3.1.2",

package.json

@@ -115,7 +115,6 @@ export default function NMRiumWrapper() {
 
   return (
     <RootLayout style={styles.container}>
-      {' '}
       {isFetchAllowedOriginsPending && (
         <div style={styles.loadingContainer}>
           <span>Loading .... </span>

src/NMRiumWrapper.tsx

@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { NMRiumData } from 'nmrium';
 import { Button } from 'react-science/ui';
 
@@ -9,24 +8,23 @@ import { loadFilesFromURLs } from '../utilities/loadFilesFromURLs';
 
 import jsonData from './data/test.json';
 
-const styles = {
-  container: css`
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  `,
-  header: css`
-    height: 40px;
-    width: 100%;
-    padding: 5px;
-    display: flex;
-  `,
-};
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
+const Header = styled.div`
+  height: 40px;
+  width: 100%;
+  padding: 5px;
+  display: flex;
+`;
 
 export default function NMRiumWrapperDemo() {
   return (
-    <div css={styles.container}>
-      <div id="header" css={styles.header}>
+    <Container>
+      <Header>
         <Button
           style={{ marginRight: '10px' }}
           onClick={() => {
@@ -105,9 +103,9 @@ export default function NMRiumWrapperDemo() {
         >
           Test Logger
         </Button>
-      </div>
+      </Header>
 
       <NMRiumWrapper />
-    </div>
+    </Container>
   );
 }

src/demo/NMRiumWrapperDemo.tsx

@@ -1,34 +1,25 @@
-/** @jsxImportSource @emotion/react */
 import { Dialog, DialogBody } from '@blueprintjs/core';
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { useOnOff } from 'react-science/ui';
 
 import versionInfo from '../versionInfo';
 
-const styles = css`
-  button:focus {
-    outline: none;
-  }
-
-  .container {
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  span.title {
-    font-weight: bold;
-    color: #ea580c;
-    font-size: 1.5em;
-  }
-
-  a {
-    color: #969696;
-  }
+const Title = styled.span`
+  font-weight: bold;
+  color: #ea580c;
+  font-size: 1.5em;
+`;
+const Container = styled.div`
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+const Link = styled.a`
+  color: #969696;
 
-  a:hover,
-  a:focus {
+  &:hover,
+  &:focus {
     color: #00bcd4;
   }
 `;
@@ -44,20 +35,20 @@ function AboutUsModal() {
         style={{ maxWidth: 1000 }}
         title="About NMRium react wrapper"
       >
-        <DialogBody css={styles}>
-          <div className="container">
-            <span className="title"> NMRium react wrapper</span>
+        <DialogBody>
+          <Container>
+            <Title> NMRium react wrapper</Title>
             <Separator />
             Version <VersionInfo />
             <Separator />
-            <a
+            <Link
               href="https://github.com/NFDI4Chem/nmrium-react-wrapper"
               target="_blank"
               rel="noreferrer"
             >
               GitHub ( https://github.com/NFDI4Chem/nmrium-react-wrapper )
-            </a>
-          </div>
+            </Link>
+          </Container>
         </DialogBody>
       </Dialog>
     </>
@@ -107,7 +98,7 @@ function InfoButton({ onClick }) {
         height: '25px',
         borderRadius: '25px',
         border: '0.55px solid #ea580c',
-        left: '5px',
+        left: '2px',
         bottom: '10px',
         position: 'absolute',
       }}