fix: minirepl styles

This commit is contained in:
Felix Roos 2023-02-01 22:30:24 +01:00
parent 9ec3fee455
commit 6f5f8cc7d8
6 changed files with 7 additions and 9 deletions

View File

@ -2,7 +2,7 @@ import React from 'react';
export function Icon({ type }) { export function Icon({ type }) {
return ( 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: ( refresh: (

View File

@ -101,7 +101,7 @@ export function MiniRepl({ tune, hideOutsideView = false, enableKeyboard, drawTi
<div className={styles.container} ref={ref}> <div className={styles.container} ref={ref}>
<div className={styles.header}> <div className={styles.header}>
<div className={styles.buttons}> <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'} /> <Icon type={started ? 'stop' : 'play'} />
</button> </button>
<button className={cx(isDirty ? styles.button : styles.buttonDisabled)} onClick={() => activateCode()}> <button className={cx(isDirty ? styles.button : styles.buttonDisabled)} onClick={() => activateCode()}>
@ -126,7 +126,7 @@ export function MiniRepl({ tune, hideOutsideView = false, enableKeyboard, drawTi
></canvas> ></canvas>
)} )}
{!!log.length && ( {!!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) => ( {log.map(({ message }, i) => (
<div key={i}>{message}</div> <div key={i}>{message}</div>
))} ))}

View File

@ -1,7 +1,6 @@
--- ---
import { MiniRepl } from './MiniRepl'; import { MiniRepl } from './MiniRepl';
const { tune } = Astro.props; const { tune } = Astro.props;
import '@strudel.cycles/react/dist/style.css';
--- ---
<MiniRepl tune={tune} client:only="react" /> <MiniRepl tune={tune} client:only="react" />

View File

@ -1,5 +1,3 @@
@import '@strudel.cycles/react/dist/style.css';
.darken::before { .darken::before {
content: ' '; content: ' ';
position: fixed; position: fixed;

View File

@ -1,5 +1,3 @@
@import '@strudel.cycles/react/dist/style.css';
body { body {
background-color: #222; background-color: #222;
} }

View File

@ -3,7 +3,10 @@
const defaultTheme = require('tailwindcss/defaultTheme'); const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = { 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: { theme: {
extend: { extend: {
colors: { colors: {