Merge branch 'master' into P2Fancy

source-academy · Jun 20, 2021 · f1cf705 · f1cf705
2 parents 706573b + a3f10aa
commit f1cf705
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 6 deletions.
diff --git a/src/pages/sicp/Sicp.tsx b/src/pages/sicp/Sicp.tsx
@@ -109,22 +109,22 @@ const Sicp: React.FC<SicpProps> = props => {
   }, [section]);
 
   // Scroll to correct position
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     const hash = props.location.hash;
 
     if (!hash) {
       if (topRef.current) {
-        topRef.current.scrollIntoView();
+        topRef.current.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
       }
       return;
     }
 
     const ref = refs.current[hash];
 
     if (ref) {
-      ref.scrollIntoView({ block: 'start' });
+      ref.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
     }
-  }, [props.location.hash, data]);
+  }, [props.location.hash]);
 
   // Close all active code snippet when new page is loaded
   React.useEffect(() => {

diff --git a/src/styles/_sicp.scss b/src/styles/_sicp.scss
@@ -41,7 +41,6 @@ $sicp-background-color: #ffffff;
     margin: 1em auto;
     padding: 0 6em;
     max-width: 1050px;
-
     height: fit-content;
     background-color: $sicp-background-color;
 

diff --git a/src/styles/_workspaceGreen.scss b/src/styles/_workspaceGreen.scss
@@ -2,14 +2,25 @@ $pure-green: #00ff00;
 $dark-green: #00e000;
 .GreenScreen {
   // Hide NavigationBar
+  position: absolute;
   height: 100vh;
+  width: 100vw;
   margin-top: -50px;
-  z-index: 1000;
+  z-index: 15;
+  background: $pure-green !important;
 
   .workspace {
     background: $pure-green !important;
   }
 
+  #ace-editor {
+    background: $pure-green !important;
+  }
+
+  .side-content-tooltip {
+    background: $pure-green !important;
+  }
+
   #brace-editor {
     background: $pure-green !important;
   }
@@ -18,6 +29,32 @@ $dark-green: #00e000;
     background: $dark-green !important;
   }
 
+  /* individual components */
+  .bp3-button {
+    background: $pure-green !important;
+    box-shadow: none !important;
+  }
+
+  .bp3-input {
+    background: $pure-green !important;
+    box-shadow: none !important;
+  }
+
+  .bp3-control-indicator {
+    background: $pure-green !important;
+    border: 0.1rem solid $dark-green !important;
+  }
+
+  .bp3-control-indicator::before {
+    background: $pure-green !important;
+    border: 0.1rem solid $dark-green !important;
+    box-shadow: none !important;
+  }
+
+  .ace_gutter-active-line {
+    background: $pure-green !important;
+  }
+
   /* editor specific */
   .editor-react-ace {
     color: #222222;