Merge branch 'master' into P2Fancy

source-academy · Jun 17, 2021 · b547e8d · b547e8d
2 parents 1c8ab76 + 39798d1
commit b547e8d
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 15 deletions.
diff --git a/src/features/sicp/SourceTheme.ts b/src/features/sicp/SourceTheme.ts
@@ -7,7 +7,7 @@ const SourceThemeBackground = '#2c3e50';
 export const SourceTheme = {
   'code[class*="language-"]': {
     color: 'white',
-    background: SourceThemeBackground,
+    background: 'transparent',
     fontFamily: "'Inconsolata', 'Consolas', monospace",
     textAlign: 'left',
     whiteSpace: 'pre',
@@ -47,7 +47,7 @@ export const SourceTheme = {
     borderRadius: '0.3em'
   },
   ':not(pre) > code[class*="language-"]': {
-    background: SourceThemeBackground,
+    background: 'transparent',
     padding: '0.1em',
     borderRadius: '0.3em',
     whiteSpace: 'normal'

diff --git a/src/pages/sicp/subcomponents/CodeSnippet.tsx b/src/pages/sicp/subcomponents/CodeSnippet.tsx
@@ -1,4 +1,4 @@
-import { Pre } from '@blueprintjs/core';
+import { Card, Elevation, Pre } from '@blueprintjs/core';
 import { HighlightRulesSelector, ModeSelector } from 'js-slang/dist/editors/ace/modes/source';
 import { Resizable } from 're-resizable';
 import * as React from 'react';
@@ -113,9 +113,11 @@ const CodeSnippet: React.FC<CodeSnippetProps> = props => {
           )}
         </div>
       ) : (
-        <SyntaxHighlighter language="javascript" style={SourceTheme} onClick={handleOpen}>
-          {body}
-        </SyntaxHighlighter>
+        <Card className="sicp-code-snippet-closed" interactive={true} elevation={Elevation.TWO}>
+          <SyntaxHighlighter language="javascript" style={SourceTheme} onClick={handleOpen}>
+            {body}
+          </SyntaxHighlighter>
+        </Card>
       )}
       {output && <Pre>{output}</Pre>}
     </div>

diff --git a/src/pages/sicp/subcomponents/SicpIndexPage.tsx b/src/pages/sicp/subcomponents/SicpIndexPage.tsx
@@ -11,19 +11,16 @@ const developers = 'Samuel Fang';
 
 const authors = (
   <div className="sicp-authors">
-    <br />
     <H4>{originalAuthors}</H4>
     <p>
       {originalWithAuthors}
       <i>— original authors</i>
     </p>
-    <br />
     <H4>{adaptedAuthors}</H4>
     <p>
       {adaptedWithAuthors}
       <i>— adapters to JavaScript</i>
     </p>
-    <br />
     <H4>{developers}</H4>
     <p>
       <i>— designer and developer of Interactive SICP</i>

diff --git a/src/pages/sicp/subcomponents/__tests__/__snapshots__/CodeSnippet.tsx.snap b/src/pages/sicp/subcomponents/__tests__/__snapshots__/CodeSnippet.tsx.snap
@@ -2,9 +2,11 @@
 
 exports[`Sicp Code Snippet renders correctly 1`] = `
 "<div className=\\"sicp-code-snippet\\">
-  <SyntaxHighlighter language=\\"javascript\\" style={{...}} onClick={[Function: handleOpen]}>
-    1+1;
-  </SyntaxHighlighter>
+  <Blueprint3.Card className=\\"sicp-code-snippet-closed\\" interactive={true} elevation={2}>
+    <SyntaxHighlighter language=\\"javascript\\" style={{...}} onClick={[Function: handleOpen]}>
+      1+1;
+    </SyntaxHighlighter>
+  </Blueprint3.Card>
   <Component>
     2
   </Component>

diff --git a/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpIndexPage.tsx.snap b/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpIndexPage.tsx.snap
@@ -19,7 +19,6 @@ exports[`Sicp index page 1`] = `
           </Component>
         </div>
         <div className=\\"sicp-authors\\">
-          <br />
           <Component>
             <h4 className=\\"bp3-heading\\">
               Harold Abelson and Gerald Jay Sussman
@@ -31,7 +30,6 @@ exports[`Sicp index page 1`] = `
               — original authors
             </i>
           </p>
-          <br />
           <Component>
             <h4 className=\\"bp3-heading\\">
               Martin Henz and Tobias Wrigstad
@@ -43,7 +41,6 @@ exports[`Sicp index page 1`] = `
               — adapters to JavaScript
             </i>
           </p>
-          <br />
           <Component>
             <h4 className=\\"bp3-heading\\">
               Samuel Fang

diff --git a/src/styles/_sicp.scss b/src/styles/_sicp.scss
@@ -19,6 +19,10 @@ $sicp-background-color: #ffffff;
     overflow-x: scroll;
   }
 
+  .bp3-blockquote {
+    margin: 10px 0;
+  }
+
   .bp3-heading {
     margin-top: 10px;
   }
@@ -69,6 +73,10 @@ $sicp-background-color: #ffffff;
       text-align: right;
     }
 
+    h4 {
+      margin-top: 15px;
+    }
+
     > h2,
     > .sicp-licenses {
       text-align: center;
@@ -173,6 +181,11 @@ $sicp-background-color: #ffffff;
         width: 100vw;
       }
     }
+
+    .sicp-code-snippet-closed {
+      padding: 0;
+      margin: 0;
+    }
   }
 
   .sicp-footnote {
@@ -227,6 +240,16 @@ $sicp-background-color: #ffffff;
 
 .sicp-toc {
   overflow-y: auto;
+  text-align: left;
+
+  .bp3-tree-node-caret {
+    color: #777777 !important;
+    scale: 1.25;
+  }
+
+  .bp3-tree-node-caret:hover {
+    color: $sicp-text-color !important;
+  }
 }
 
 .sicp-toc-drawer {