From 18c7e02609b9b3b88e5fc171eec91ccf67197678 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Tue, 28 Feb 2023 22:40:18 +0100
Subject: [PATCH] fix: minirepl styles for package

---
 packages/react/src/components/MiniRepl.jsx    | 28 +++++++++++++------
 .../react/src/components/MiniRepl.module.css  | 27 ------------------
 2 files changed, 20 insertions(+), 35 deletions(-)
 delete mode 100644 packages/react/src/components/MiniRepl.module.css

diff --git a/packages/react/src/components/MiniRepl.jsx b/packages/react/src/components/MiniRepl.jsx
index ae91bbb0..bf151675 100644
--- a/packages/react/src/components/MiniRepl.jsx
+++ b/packages/react/src/components/MiniRepl.jsx
@@ -7,7 +7,6 @@ import useHighlighting from '../hooks/useHighlighting.mjs';
 import useStrudel from '../hooks/useStrudel.mjs';
 import CodeMirror6, { flash } from './CodeMirror6';
 import { Icon } from './Icon';
-import styles from './MiniRepl.module.css';
 import './style.css';
 import { logger } from '@strudel.cycles/core';
 import useEvent from '../hooks/useEvent.mjs';
@@ -129,19 +128,32 @@ export function MiniRepl({
   );
 
   return (
-    <div className={styles.container} ref={ref}>
-      <div className={styles.header}>
-        <div className={styles.buttons}>
-          <button className={cx(styles.button, started ? 'animate-pulse' : '')} onClick={() => togglePlay()}>
+    <div className="overflow-hidden rounded-t-md bg-background border border-lineHighlight" ref={ref}>
+      <div className="flex justify-between bg-lineHighlight">
+        <div className="flex">
+          <button
+            className={cx(
+              'cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground bg-lineHighlight hover:bg-background',
+              started ? 'animate-pulse' : '',
+            )}
+            onClick={() => togglePlay()}
+          >
             <Icon type={started ? 'stop' : 'play'} />
           </button>
-          <button className={cx(isDirty ? styles.button : styles.buttonDisabled)} onClick={() => activateCode()}>
+          <button
+            className={cx(
+              isDirty
+                ? 'cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground bg-lineHighlight hover:bg-background'
+                : 'w-16 flex items-center justify-center p-1 opacity-50 cursor-not-allowed border-r border-lineHighlight',
+            )}
+            onClick={() => activateCode()}
+          >
             <Icon type="refresh" />
           </button>
         </div>
-        {error && <div className={styles.error}>{error.message}</div>}
+        {error && <div className="text-right p-1 text-sm text-red-200">{error.message}</div>}
       </div>
-      <div className={styles.body}>
+      <div className="overflow-auto relative">
         {show && <CodeMirror6 value={code} onChange={setCode} onViewChanged={setView} theme={theme} />}
       </div>
       {drawTime && (
diff --git a/packages/react/src/components/MiniRepl.module.css b/packages/react/src/components/MiniRepl.module.css
deleted file mode 100644
index 257268a8..00000000
--- a/packages/react/src/components/MiniRepl.module.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.container {
-  @apply overflow-hidden;
-}
-
-.header {
-  @apply flex justify-between bg-lineHighlight border-t border-l border-r border-lineHighlight rounded-t-md overflow-hidden;
-}
-
-.buttons {
-  @apply flex;
-}
-
-.button {
-  @apply cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground hover:bg-background;
-}
-
-.buttonDisabled {
-  @apply w-16 flex items-center justify-center p-1 opacity-50 cursor-not-allowed border-r border-lineHighlight;
-}
-
-.error {
-  @apply text-right p-1 text-sm text-red-200;
-}
-
-.body {
-  @apply overflow-auto relative;
-}