style prop to css()

cybersemics · Oct 25, 2024 · 4769cc7 · 4769cc7
1 parent 818e8d1
commit 4769cc7
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 12 deletions.
diff --git a/src/components/Logs.tsx b/src/components/Logs.tsx
@@ -1,3 +1,4 @@
+import { css } from '../../styled-system/css'
 import Log from '../@types/Log'
 
 /** Render the local logs in a readonly textarea. */
@@ -9,14 +10,14 @@ const Logs = ({ logs }: { logs: Log[] }) => {
     <textarea
       readOnly
       defaultValue={logs.length > 0 ? logsFormatted : 'No logs.'}
-      style={{
+      className={css({
         marginTop: 20,
         backgroundColor: '#111',
         border: 0,
         padding: 20,
         fontFamily: 'monospace',
         fontSize: 14,
-      }}
+      })}
     />
   )
 }

diff --git a/src/components/ThoughtAnnotation.tsx b/src/components/ThoughtAnnotation.tsx
@@ -322,10 +322,7 @@ const ThoughtAnnotation = React.memo(
             //   border-bottom: solid 1px;
             // }
           }
-          style={{
-            fontFamily: isAttribute(value) ? 'monospace' : undefined,
-            ...styleAnnotation,
-          }}
+          style={styleAnnotation}
         >
           <span
             className={css(

diff --git a/src/components/modals/ModalComponent.tsx b/src/components/modals/ModalComponent.tsx
@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react'
-import { css } from '../../../styled-system/css'
+import { css, cx } from '../../../styled-system/css'
 import { modal } from '../../../styled-system/recipes'
 import ModalType from '../../@types/Modal'
 import { closeModalActionCreator as closeModal } from '../../actions/closeModal'
@@ -81,7 +81,7 @@ class ModalComponent extends React.Component<ModalProps> {
     const modalClasses = modal({ id, center })
 
     return (
-      <div ref={this.ref} style={{ ...style, ...(top ? { top: 55 } : null) }} className={modalClasses.root}>
+      <div ref={this.ref} style={style} className={cx(modalClasses.root, css({ ...(top ? { top: 55 } : null) }))}>
         {!this.props.preventCloseOnEscape && !hideClose && (
           <a
             className={css({

diff --git a/src/components/modals/Settings.tsx b/src/components/modals/Settings.tsx
@@ -91,10 +91,8 @@ const FontSize = () => {
           if (inputValue < MIN_FONT_SIZE || inputValue > MAX_FONT_SIZE) return
           dispatch(fontSizeActionCreator(inputValue))
         }}
-        style={{
-          fontSize: fontSizeSelector,
-          padding: '0.5em',
-        }}
+        className={css({ padding: '0.5em' })}
+        style={{ fontSize: fontSizeSelector }}
       />
       {fontSizeSelector !== DEFAULT_FONT_SIZE && (
         <a