From 984bd95cc0ee973b5bc2d30e9cfdd7c81756c1e0 Mon Sep 17 00:00:00 2001
From: Felix Roos <roos@entrecode.de>
Date: Sat, 12 Mar 2022 20:30:15 +0100
Subject: [PATCH] style repl

---
 repl/public/global.css | 14 +++--------
 repl/src/App.tsx       | 55 +++++++++++++++++++++++++++++++++---------
 2 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/repl/public/global.css b/repl/public/global.css
index 16e72fa9..a0a08e22 100644
--- a/repl/public/global.css
+++ b/repl/public/global.css
@@ -10,17 +10,9 @@ body {
 .CodeMirror {
   height: 100% !important;
   background-color: transparent !important;
-  //font-size: 15px;
+  font-size: 15px;
 }
 
-.CodeMirror-line span {
-  background-color: #2a323660;
-}
-
-.CodeMirror-code {
-  //padding: 10px;
-}
-
-.CodeMirror-linenumber {
-  background-color: transparent !important;
+.CodeMirror-line > span {
+  background-color: #2a323690;
 }
diff --git a/repl/src/App.tsx b/repl/src/App.tsx
index f06fab03..7e835ab8 100644
--- a/repl/src/App.tsx
+++ b/repl/src/App.tsx
@@ -43,6 +43,7 @@ function App() {
       defaultSynth,
       onDraw: useCallback(markEvent(editor), [editor]),
     });
+  const [uiHidden, setUiHidden] = useState(false);
   const logBox = useRef<any>();
   // scroll log box to bottom when log changes
   useLayoutEffect(() => {
@@ -81,12 +82,43 @@ function App() {
 
   return (
     <div className="min-h-screen flex flex-col">
-      <header className="flex-none w-full h-16 px-2 flex border-b border-gray-200 bg-white justify-between z-[10]">
+      <header
+        className={cx(
+          'flex-none w-full h-14 px-2 flex border-b border-gray-200  justify-between z-[10]',
+          uiHidden ? 'bg-transparent text-white' : 'bg-white'
+        )}
+      >
         <div className="flex items-center space-x-2">
-          <img src={logo} className="Tidal-logo w-16 h-16" alt="logo" />
+          <img src={logo} className="Tidal-logo w-12 h-12" alt="logo" />
           <h1 className="text-2xl">Strudel REPL</h1>
         </div>
         <div className="flex space-x-4">
+          <button onClick={() => togglePlay()}>
+            {!pending ? (
+              <span className="flex items-center w-16">
+                {cycle.started ? (
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                    <path
+                      fillRule="evenodd"
+                      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                ) : (
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                    <path
+                      fillRule="evenodd"
+                      d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                )}
+                {cycle.started ? 'pause' : 'play'}
+              </span>
+            ) : (
+              <>loading...</>
+            )}
+          </button>
           <button
             onClick={async () => {
               const _code = getRandomTune();
@@ -97,16 +129,23 @@ function App() {
               setPattern(parsed.pattern);
             }}
           >
-            🎲 random tune
+            🎲 random
           </button>
           <button>
             <a href="./tutorial">📚 tutorial</a>
           </button>
+          <button onClick={() => setUiHidden((c) => !c)}>👀 {uiHidden ? 'show ui' : 'hide ui'}</button>
         </div>
       </header>
       <section className="grow flex flex-col text-gray-100">
         <div className="grow relative">
-          <div className={cx('h-full', error ? 'focus:ring-red-500' : 'focus:ring-slate-800')}>
+          <div
+            className={cx(
+              'h-full transition-opacity',
+              error ? 'focus:ring-red-500' : 'focus:ring-slate-800',
+              uiHidden ? 'opacity-0' : 'opacity-100'
+            )}
+          >
             <CodeMirror
               value={code}
               editorDidMount={setEditor}
@@ -129,14 +168,8 @@ function App() {
             </div>
           )}
         </div>
-        <button
-          className="z-[10] flex-none w-full border border-gray-700 p-2 bg-slate-700 hover:bg-slate-500"
-          onClick={() => togglePlay()}
-        >
-          {!pending ? <>{cycle.started ? 'pause' : 'play'}</> : <>loading...</>}
-        </button>
         <textarea
-          className="z-[10] grow border-0 text-xs min-h-[200px] bg-[transparent]"
+          className="z-[10] h-16 border-0 text-xs bg-[transparent] border-t border-slate-600 resize-none"
           value={log}
           readOnly
           ref={logBox}