From 6f5f8cc7d8b6043e66d9a8680054edffff653701 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Wed, 1 Feb 2023 22:30:24 +0100
Subject: [PATCH] fix: minirepl styles

---
 packages/react/src/components/Icon.tsx     | 2 +-
 packages/react/src/components/MiniRepl.jsx | 4 ++--
 website/src/docs/MiniRepl.astro            | 1 -
 website/src/repl/Repl.css                  | 2 --
 website/src/styles/index.css               | 2 --
 website/tailwind.config.cjs                | 5 ++++-
 6 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/components/Icon.tsx b/packages/react/src/components/Icon.tsx
index 28a8a374..24ec8786 100644
--- a/packages/react/src/components/Icon.tsx
+++ b/packages/react/src/components/Icon.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 export function Icon({ type }) {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" className="sc-h-5 sc-w-5" viewBox="0 0 20 20" fill="currentColor">
+    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
       {
         {
           refresh: (
diff --git a/packages/react/src/components/MiniRepl.jsx b/packages/react/src/components/MiniRepl.jsx
index 6b647dfb..fd803ac1 100644
--- a/packages/react/src/components/MiniRepl.jsx
+++ b/packages/react/src/components/MiniRepl.jsx
@@ -101,7 +101,7 @@ export function MiniRepl({ tune, hideOutsideView = false, enableKeyboard, drawTi
     <div className={styles.container} ref={ref}>
       <div className={styles.header}>
         <div className={styles.buttons}>
-          <button className={cx(styles.button, started ? 'sc-animate-pulse' : '')} onClick={() => togglePlay()}>
+          <button className={cx(styles.button, started ? 'animate-pulse' : '')} onClick={() => togglePlay()}>
             <Icon type={started ? 'stop' : 'play'} />
           </button>
           <button className={cx(isDirty ? styles.button : styles.buttonDisabled)} onClick={() => activateCode()}>
@@ -126,7 +126,7 @@ export function MiniRepl({ tune, hideOutsideView = false, enableKeyboard, drawTi
         ></canvas>
       )}
       {!!log.length && (
-        <div className="sc-bg-gray-800 sc-rounded-md sc-p-2">
+        <div className="bg-gray-800 rounded-md p-2">
           {log.map(({ message }, i) => (
             <div key={i}>{message}</div>
           ))}
diff --git a/website/src/docs/MiniRepl.astro b/website/src/docs/MiniRepl.astro
index 84d38800..69980d5a 100644
--- a/website/src/docs/MiniRepl.astro
+++ b/website/src/docs/MiniRepl.astro
@@ -1,7 +1,6 @@
 ---
 import { MiniRepl } from './MiniRepl';
 const { tune } = Astro.props;
-import '@strudel.cycles/react/dist/style.css';
 ---
 
 <MiniRepl tune={tune} client:only="react" />
diff --git a/website/src/repl/Repl.css b/website/src/repl/Repl.css
index 0f34fb1a..91132464 100644
--- a/website/src/repl/Repl.css
+++ b/website/src/repl/Repl.css
@@ -1,5 +1,3 @@
-@import '@strudel.cycles/react/dist/style.css';
-
 .darken::before {
   content: ' ';
   position: fixed;
diff --git a/website/src/styles/index.css b/website/src/styles/index.css
index d439928d..ef62234d 100644
--- a/website/src/styles/index.css
+++ b/website/src/styles/index.css
@@ -1,5 +1,3 @@
-@import '@strudel.cycles/react/dist/style.css';
-
 body {
   background-color: #222;
 }
diff --git a/website/tailwind.config.cjs b/website/tailwind.config.cjs
index 7d263336..f84b5c6e 100644
--- a/website/tailwind.config.cjs
+++ b/website/tailwind.config.cjs
@@ -3,7 +3,10 @@
 const defaultTheme = require('tailwindcss/defaultTheme');
 
 module.exports = {
-  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  content: [
+    './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
+    '../packages/react/src/**/*.{html,js,jsx,md,mdx,ts,tsx}',
+  ],
   theme: {
     extend: {
       colors: {