feat: different thumb colours for light and dark themes

refactor: renaming accessibleChunks to viewable

Author: tuankhainguy

src/components/mid-panel/ProgressBar.js

@@ -15,7 +15,7 @@ class ProgressBar extends React.Component {
 
     this.max;
     this.current;
-    this.accessibleChunks;
+    this.viewable;
     this.next;
     this.prev;
 
@@ -48,30 +48,29 @@ class ProgressBar extends React.Component {
         return;
       }
 
-      // search for the closest accessible chunk
-      // in a certain radius
+      // search for the closest viewable chunk in a certain radius
       for (let i = 0; i <= searchRadius; i++) {
         if (i === 0) {
-          if (this.accessibleChunks[x]) {
+          if (this.viewable[x]) {
             chunkNum = x;
             break;
           }
           continue;
         }
 
-        if (this.accessibleChunks[x + i]) {
+        if (this.viewable[x + i]) {
           chunkNum = x + i;
           break;
         }
 
-        if (this.accessibleChunks[x - i]) {
+        if (this.viewable[x - i]) {
           chunkNum = x - i;
           break;
         }
       }
     }
 
-    if (this.accessibleChunks[chunkNum]) {
+    if (this.viewable[chunkNum]) {
       if (chunkNum > this.current) {
         this.next({stopAt: chunkNum, playing: false});
       }
@@ -102,8 +101,8 @@ class ProgressBar extends React.Component {
 
     this.max = max;
     this.current = current;
-    this.accessibleChunks = (state.chunker !== undefined) ?
-      state.chunker.accessibleChunks :
+    this.viewable = (state.chunker !== undefined) ?
+      state.chunker.viewable :
       null;
 
     this.prev = (playing) => {

src/context/actions.js

@@ -211,19 +211,18 @@ function addLineExplanation(procedurePseudocode) {
   }
 }
 
-// set the visibility attribute for chunks if the chunk can be reached
-// i.e. not in a collapsed code block
-function setChunkAccessibility(chunker, pseudocode, collapse) {
+// get the list showing which chunks can be viewed
+function viewableChunks(chunker, pseudocode, collapse) {
   let currChunkNum = 0;
-  let accessibleChunks = Array(chunker.chunks.length).fill(false);
-  accessibleChunks[0] = true;
+  let viewable = Array(chunker.chunks.length).fill(false);
+  viewable[0] = true;
 
   while (currChunkNum < chunker.chunks.length - 1) {
     currChunkNum = findNext(chunker.chunks, currChunkNum, pseudocode, collapse);
-    accessibleChunks[currChunkNum] = true;
+    viewable[currChunkNum] = true;
   }
 
-  chunker.accessibleChunks = accessibleChunks;
+  chunker.viewable = viewable;
 }
 
 // At any time the app may call dispatch(action, params), which will trigger one of
@@ -287,7 +286,7 @@ export const GlobalActions = {
     const collapse = state === undefined || state.collapse === undefined
       ? getCollapseController(algorithms)
       : state.collapse;
-    setChunkAccessibility(chunker, procedurePseudocode, collapse[params.name][params.mode]);
+    viewableChunks(chunker, procedurePseudocode, collapse[params.name][params.mode]);
 
     return {
       ...state,
@@ -336,7 +335,7 @@ export const GlobalActions = {
       if (stopAt < state.chunker.chunks.length - 1) {
         do {
           stopAt++;
-        } while (!state.chunker.accessibleChunks[stopAt])
+        } while (!state.chunker.viewable[stopAt])
       }
     }
     // step forward until we are at stopAt, or last chunk, or some weird
@@ -399,7 +398,7 @@ export const GlobalActions = {
       if (stopAt > 0) {
         do {
           stopAt--;
-        } while (!state.chunker.accessibleChunks[stopAt])
+        } while (!state.chunker.viewable[stopAt])
       }
     }
     let result1 = {bookmark:"", chunk: state.chunker.currentChunk};
@@ -439,7 +438,12 @@ export const GlobalActions = {
     onCollapseStateChange(); // Transitive closure plugin
     unionFindToggleRank(state);
 
-    setChunkAccessibility(state.chunker, state.pseudocode, state.collapse[state.id.name][state.id.mode]);
+    // update viewable chunks
+    viewableChunks(
+      state.chunker,
+      state.pseudocode,
+      state.collapse[state.id.name][state.id.mode]
+    );
 
     return {
       ...state,

src/styles/ProgressBar.scss

@@ -178,7 +178,7 @@ $progWidth: 320px;
   overflow: hidden;
   position: relative;
   transform: translateZ(0);
-  background-color: var(--mid-control-slider-bg);
+  background-color: var(--mid-control-progress-bg);
   transition: opacity 250ms linear;
   width: $progWidth;
   @include border-radius(16px); // makes the border curvy
@@ -252,7 +252,7 @@ $border: 4px;
     z-index: 51;
     width: $progHeight - ($border + $border);
     height: $progHeight - ($border + $border);
-    background-color: $darkerBlue;
+    background-color: var(--mid-control-progress-thumb);
     @include border-radius(14px);
   }
 }

src/styles/global.scss

@@ -1,6 +1,6 @@
 // Shared Colors and Sizes
 $blue: #037DFF;
-$darkerBlue: #1565C0;
+$darkerBlue: #01579B;
 $sigBlue: #027AFF;
 $red: #DC0707;
 $green: #53DD6C;
@@ -61,8 +61,9 @@ $yellowLine: #FFDE3C;
 	--mid-instruction-content-number-col: #2d2d2d;
 	--mid-instruction-content-key: #027AFF;
 
-	--mid-control-progress-bg: #b5b5b5;
+	--mid-control-progress-bg: #F7F7F7;
 	--mid-control-progress-active: #027AFF;
+    --mid-control-progress-thumb: #64B5F6;
 	--mid-control-progress-font: #161515;
 
 	--mid-control-param-border: #D4D4D4;
@@ -282,6 +283,7 @@ $yellowLine: #FFDE3C;
 
 	--mid-control-progress-bg: #111215;
 	--mid-control-progress-active: #027AFF;
+    --mid-control-progress-thumb: #1565C0;
 	--mid-control-progress-font: #a0a0a0;
 
 	--mid-control-bg: #16171B;