refactor: remove css from more components

src/component/1d/ranges/Range.tsx

@@ -186,7 +186,6 @@ function Range({ range, selectedTool, relativeFormat }: RangeProps) {
       onMouseEnter={mouseEnterHandler}
       onMouseLeave={mouseLeaveHandler}
       isActive={assignmentRange.isActive}
-      // {...(!assignmentRange.isActive && { css: style })}
     >
       <ActionsButtonsPopover
         targetTagName="g"

src/component/elements/Input2Controller.tsx

@@ -1,7 +1,5 @@
-/** @jsxImportSource @emotion/react */
-
 import { FormGroup } from '@blueprintjs/core';
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { ControllerProps, FieldValues } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 
@@ -13,6 +11,17 @@ export interface InputMapValueFunctions {
   mapValue?: (value: any) => string;
 }
 
+const CustomFormGroup = styled(FormGroup)<{ isFill?: boolean }>`
+  ${({ isFill }) =>
+    isFill
+      ? `
+      div {
+                    flex: 1;
+                  }
+   `
+      : ''}
+`;
+
 interface Input2ControllerProps<TFieldValues extends FieldValues = FieldValues>
   extends Omit<Input2Props, 'name'>,
     Pick<ControllerProps<TFieldValues>, 'control' | 'name'>,
@@ -78,20 +87,14 @@ export function Input2Controller<
 
         if (enableErrorMessage && error?.message) {
           return (
-            <FormGroup
+            <CustomFormGroup
               fill={fill}
-              {...(fill && {
-                css: css`
-                  div {
-                    flex: 1;
-                  }
-                `,
-              })}
+              isFill={fill}
               helperText={error.message}
               intent={invalid ? 'danger' : intent}
             >
               {inputComponent}
-            </FormGroup>
+            </CustomFormGroup>
           );
         }
 

src/component/elements/MenuButton.tsx

@@ -1,59 +1,56 @@
 /** @jsxImportSource @emotion/react */
 import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { ReactNode } from 'react';
 import { useState, useCallback, useRef } from 'react';
 
 import ToolTip from './ToolTip/ToolTip.js';
 
-const menuStyles = css`
-  .menu {
-    box-shadow: 0 0 10px rgb(0 0 0 / 50%);
-    margin: 0;
-    border-radius: 5px;
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    z-index: 99999;
-    padding: 2px;
-    background-color: white;
-
-    button:hover {
-      background-color: #fafafa;
-    }
+const MenuCover = styled.div`
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1;
+`;
+const Menu = styled.div`
+  box-shadow: 0 0 10px rgb(0 0 0 / 50%);
+  margin: 0;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  z-index: 99999;
+  padding: 2px;
+  background-color: white;
+
+  button:hover {
+    background-color: #fafafa;
   }
+`;
 
-  .menu-cover {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    z-index: 1;
+const MenuItemButton = styled.button`
+  background-color: transparent;
+  border: none;
+  border-bottom: 0.55px solid whitesmoke;
+  height: 35px;
+  display: table-cell;
+  vertical-align: middle;
+  text-align: left;
+  padding: 0 10px;
+
+  svg {
+    display: inline-block;
   }
 
-  .menu-item {
-    background-color: transparent;
-    border: none;
-    border-bottom: 0.55px solid whitesmoke;
-    height: 35px;
-    display: table-cell;
-    vertical-align: middle;
-    text-align: left;
-    padding: 0 10px;
-
-    svg {
-      display: inline-block;
-    }
-
-    :focus {
-      outline: none !important;
-    }
+  :focus {
+    outline: none !important;
+  }
 
-    span {
-      font-size: 10px;
-      padding: 0 10px;
-    }
+  span {
+    font-size: 10px;
+    padding: 0 10px;
   }
 `;
 
@@ -65,10 +62,10 @@ interface MenuItemProps {
 
 function MenuItem({ icon, label, onClick }: MenuItemProps) {
   return (
-    <button type="button" className="menu-item" onClick={onClick}>
+    <MenuItemButton type="button" onClick={onClick}>
       {icon}
       <span>{label}</span>
-    </button>
+    </MenuItemButton>
   );
 }
 export interface BoundingBox {
@@ -90,8 +87,7 @@ function MenuList({
   onClick,
 }: MenuListProps) {
   return (
-    <div
-      className="menu"
+    <Menu
       style={{
         transform: `translate(${boxBounding.width}px, -${boxBounding.height}px) `,
       }}
@@ -101,7 +97,7 @@ function MenuList({
           <MenuItem key={item.id} {...item} onClick={() => onClick(item)} />
         );
       })}
-    </div>
+    </Menu>
   );
 }
 
@@ -139,7 +135,7 @@ export default function MenuButton({
   );
 
   return (
-    <div style={{ height: 'auto' }} css={menuStyles}>
+    <div>
       <button
         ref={menuButtonRef}
         type="button"
@@ -160,7 +156,7 @@ export default function MenuButton({
         />
       )}
 
-      {isShown && <div className="menu-cover" onClick={closeMenuButton} />}
+      {isShown && <MenuCover onClick={closeMenuButton} />}
     </div>
   );
 }

src/component/elements/MoleculeSelection.tsx

@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { useCallback, useEffect, useState } from 'react';
 import { MF } from 'react-mf';
 import { MolfileSvgRenderer } from 'react-ocl/full';
@@ -8,7 +7,7 @@ import type { StateMoleculeExtended } from '../../data/molecules/Molecule.js';
 
 import { NextPrev } from './NextPrev.js';
 
-const toolbarStyle = css`
+const BarContainer = styled.div`
   display: flex;
   flex-direction: row;
   border-top: 0.55px solid rgb(240 240 240);
@@ -24,32 +23,10 @@ const toolbarStyle = css`
   }
 `;
 
-const moleculeContainerStyle = css`
+const MoleculeContainer = styled.div`
   width: 100%;
   position: relative;
 
-  .slider {
-    height: 180px;
-    width: 100%;
-    padding: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-  }
-
-  .slider p {
-    width: 100%;
-    margin: 0 auto;
-    display: block;
-    position: relative;
-    text-align: center;
-  }
-
-  .slider svg polygon {
-    fill: gray !important;
-  }
-
   button {
     flex: 2;
     padding: 5px;
@@ -65,6 +42,28 @@ const moleculeContainerStyle = css`
   }
 `;
 
+const SliderContent = styled.div`
+  height: 180px;
+  width: 100%;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  p {
+    width: 100%;
+    margin: 0 auto;
+    display: block;
+    position: relative;
+    text-align: center;
+  }
+
+  svg polygon {
+    fill: gray !important;
+  }
+`;
+
 interface MoleculeSelectionProps {
   molecules: StateMoleculeExtended[];
   onChange: (element: number) => void;
@@ -92,17 +91,17 @@ export default function MoleculeSelection(props: MoleculeSelectionProps) {
 
   return (
     <div>
-      <div css={toolbarStyle}>
+      <BarContainer>
         <p>
           {molecules &&
             molecules.length > 0 &&
             `${+(currentIndex + 1)} / ${molecules.length}`}{' '}
         </p>
-      </div>
-      <div css={moleculeContainerStyle}>
+      </BarContainer>
+      <MoleculeContainer>
         <NextPrev index={currentIndex} onChange={onChangeHandler}>
           {molecules?.map((mol, index) => (
-            <div key={mol.id} className="slider">
+            <SliderContent key={mol.id}>
               <div>
                 {mol.molfile && (
                   <MolfileSvgRenderer
@@ -115,10 +114,10 @@ export default function MoleculeSelection(props: MoleculeSelectionProps) {
               <p>
                 <MF mf={mol.mf} /> - {mol.mw?.toFixed(2)}
               </p>
-            </div>
+            </SliderContent>
           ))}
         </NextPrev>
-      </div>
+      </MoleculeContainer>
     </div>
   );
 }