design tweaks

src/components/Editor.tsx

@@ -102,7 +102,7 @@ const FnContainers = ({ code, dropZoneZIdx, setDropZoneZIdx, remove, insert }) =
                 code.map((cv, idx) => {
                     return (
                         <div className="fncontainer" key={idx} >
-                            <h3>{cv.name + "(){"}</h3>
+                            <h2>{cv.name + "(){"}</h2>
                             <div style={{ height: Math.floor(cv.nMaxBlocks / 4 + 1) * 4 + 'rem' }}>
                                 <OpIndicators n={cv.nMaxBlocks} />
                                 <div className="ops" >
@@ -120,7 +120,7 @@ const FnContainers = ({ code, dropZoneZIdx, setDropZoneZIdx, remove, insert }) =
                                     insert={insert}
                                     style={{ zIndex: dropZoneZIdx }} />
                             </div>
-                            <h3>{"}"}</h3>
+                            <h2>{"}"}</h2>
                         </div>)
                 })
             }

src/components/talkyFace.tsx

@@ -46,13 +46,13 @@ class TalkyFace extends Component<TalkyFaceProps> {
         this.scene.background = new THREE.Color(0x555555);
 
         // LIGHTS
-        this.scene.add(new THREE.HemisphereLight(0x443333, 0x111122,30));
+        this.scene.add(new THREE.HemisphereLight(0x443333, 0x111122,3));
 
-        let pl = new THREE.PointLight(0xFFFFFFF, 1, 1000);
+        let pl = new THREE.PointLight(0xFFFFFFF, 10, 0,0.3);
         pl.position.set(50, -50, 10);
         this.scene.add(pl);
 
-        let pl1 = new THREE.PointLight(0xFFFFFFF, 1, 1000);
+        let pl1 = new THREE.PointLight(0xFFFFFFF, 10,0,0.3);
         pl1.position.set(-50, 50, 50);
         this.scene.add(pl1);
 

src/index.css

@@ -92,11 +92,12 @@ h1 {
     width:16rem;
     margin-bottom:0.8rem;
     height:12rem;
+    background:#2D2A2E;
 }
 
-.fncontainer h3 {
+.fncontainer h2 {
     text-indent:-2rem;
-    color:#9bf;
+    color:#AB9DF2;
     display:block;
     margin-bottom:0.5rem;
     margin-top:0.4rem;
@@ -115,8 +116,8 @@ h1 {
 
 .op {
     list-style-type:none;
-    background:#444;
-    border: 0.1rem solid black;
+    background:#3E3D32;
+    border: 0.1rem solid #49483E;
     border-radius: 0.2rem;
     width:3.8rem;
     height:3.8rem;
@@ -130,7 +131,7 @@ h1 {
 }
 
 .opspalette {
-    background:#122;
+    background:#1E1F1C;
     display:flex;
     flex-flow: row;
     padding-top: 1.6rem;
@@ -143,14 +144,15 @@ h1 {
     display:flex;
     flex-flow: row wrap;
     position:absolute;
-    z-index:-2;
+    z-index:0;
     width:16rem;
 }
 
 .opindicator {
     width:4rem;
     height:4rem;
-    background:#555;
+    background:#444640;
+    
 }
 
 .opdropzones {
@@ -163,8 +165,6 @@ h1 {
 .opdropzone {
     width:4rem;
     height:4rem;
-    
-    background:#1119;
 }
 
 .frontdropper {
@@ -176,12 +176,12 @@ h1 {
     margin-top:1rem;
     margin-bottom:0.4rem;
     margin-left:2rem;
-    color:#666;
+    color:#FCFCFA;
     user-select:none;
 }
 
 .titlebar{
-    background:#122;
+    background:#1E1F1C;
     width:100%;
     display:flex;
     flex-direction:row;
@@ -203,8 +203,8 @@ h1 {
     width:100%;
     height:100vh;
     font-family:iosevka;
-    color:#fff;
-    border-left: solid #112 0.4rem;
+    color:#FCFCFA;
+    background:#2D2A2E;
 }
 
 .controlbuttons {