From 53484db76899e4cf291fbd038303488025a50c53 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Tue, 26 Dec 2023 00:29:43 +0100
Subject: [PATCH] style fixes + remove lastShared state

---
 packages/codemirror/codemirror.mjs | 16 ++++++++++++++--
 website/src/repl/Header.jsx        |  3 +--
 website/src/repl/Repl.jsx          |  1 -
 website/src/repl/Repl2.jsx         |  4 ++--
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/codemirror/codemirror.mjs b/packages/codemirror/codemirror.mjs
index a2c70599..e5692a55 100644
--- a/packages/codemirror/codemirror.mjs
+++ b/packages/codemirror/codemirror.mjs
@@ -108,7 +108,17 @@ export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, roo
 
 export class StrudelMirror {
   constructor(options) {
-    const { root, id, initialCode = '', onDraw, drawTime = [-2, 2], autodraw, prebake, ...replOptions } = options;
+    const {
+      root,
+      id,
+      initialCode = '',
+      onDraw,
+      drawTime = [-2, 2],
+      autodraw,
+      prebake,
+      bgFill = true,
+      ...replOptions
+    } = options;
     this.code = initialCode;
     this.root = root;
     this.miniLocations = [];
@@ -183,7 +193,9 @@ export class StrudelMirror {
     const cmEditor = this.root.querySelector('.cm-editor');
     if (cmEditor) {
       this.root.style.display = 'block';
-      this.root.style.backgroundColor = 'var(--background)';
+      if (bgFill) {
+        this.root.style.backgroundColor = 'var(--background)';
+      }
       cmEditor.style.backgroundColor = 'transparent';
     }
     const settings = codemirrorSettings.get();
diff --git a/website/src/repl/Header.jsx b/website/src/repl/Header.jsx
index b6f13060..2592b917 100644
--- a/website/src/repl/Header.jsx
+++ b/website/src/repl/Header.jsx
@@ -18,7 +18,6 @@ export function Header({ context }) {
     started,
     pending,
     isDirty,
-    lastShared,
     activeCode,
     handleTogglePlay,
     handleUpdate,
@@ -119,7 +118,7 @@ export function Header({ context }) {
               onClick={handleShare}
             >
               <LinkIcon className="w-6 h-6" />
-              <span>share{lastShared && lastShared === (activeCode || code) ? 'd!' : ''}</span>
+              <span>share</span>
             </button>
           )}
           {!isEmbedded && (
diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index 4cd1696a..eb2b495b 100644
--- a/website/src/repl/Repl.jsx
+++ b/website/src/repl/Repl.jsx
@@ -209,7 +209,6 @@ export function Repl({ embedded = false }) {
     started,
     pending,
     isDirty,
-    lastShared,
     activeCode,
     handleChangeCode,
     handleTogglePlay,
diff --git a/website/src/repl/Repl2.jsx b/website/src/repl/Repl2.jsx
index 2ea527a2..ccd46c94 100644
--- a/website/src/repl/Repl2.jsx
+++ b/website/src/repl/Repl2.jsx
@@ -28,6 +28,7 @@ import { Panel } from './panel/Panel';
 import { useStore } from '@nanostores/react';
 import { prebake /* , resetSounds */ } from './prebake.mjs';
 import { getRandomTune, initCode, loadModules, shareCode } from './util.mjs';
+import './Repl.css';
 
 const { code: randomTune, name } = getRandomTune();
 export const ReplContext = createContext(null);
@@ -50,7 +51,6 @@ if (typeof window !== 'undefined') {
 export function Repl2({ embedded = false }) {
   //const isEmbedded = embedded || window.location !== window.parent.location;
   const isEmbedded = false;
-  const [lastShared, setLastShared] = useState();
   const { panelPosition, isZen } = useSettings();
   /* const replState = useStore($replstate);
   const isDirty = useStore($repldirty); */
@@ -89,6 +89,7 @@ export function Repl2({ embedded = false }) {
         setLatestCode(code);
         window.location.hash = '#' + code2hash(code);
       },
+      bgFill: false,
     });
     // init settings
     initCode().then((decoded) => {
@@ -185,7 +186,6 @@ export function Repl2({ embedded = false }) {
     started,
     pending,
     isDirty,
-    lastShared,
     activeCode,
     handleTogglePlay,
     handleUpdate,