updated IDE stylings

squash! squash! updated IDE stylings

Author: MartinNang

src/components/CaptiveContextMenu.tsx

@@ -245,7 +245,7 @@ const DropdownMenu: React.FC<PropsWithChildren<object>> = ({ children }) => {
       onKeyDown={onKeydown}
       data-captive-context-menu-container-id={ctx.containerId}
     >
-      <Dropdown.Toggle as="div">⋮</Dropdown.Toggle>
+      <Dropdown.Toggle as="div"></Dropdown.Toggle>
       <Dropdown.Menu align="end">{children}</Dropdown.Menu>
     </Dropdown>
   );

src/components/Junior/ActivityContent.tsx

@@ -1,7 +1,10 @@
 import React from "react";
 import { EmptyProps, assertNever } from "../../utils";
 import { useJrEditState } from "./hooks";
-import { MaybeContent, MaybeContent as MaybeLessonContent } from "./lesson/MaybeContent";
+import {
+  MaybeContent,
+  MaybeContent as MaybeLessonContent,
+} from "./lesson/MaybeContent";
 import { WidthMonitor } from "./WidthMonitor";
 import { HelpSidebar } from "../HelpSidebar";
 import Tutorial from "../Tutorial";
@@ -28,7 +31,9 @@ export const ActivityContent: React.FC<EmptyProps> = () => {
         return (
           <>
             <WidthMonitor nonStageWd={980} />
-            <MaybeContent />
+            <div className={"bg-white h-100"}>
+              <MaybeContent />
+            </div>
           </>
         );
       case "helpsidebar":

src/components/Junior/CodeEditor.tsx

@@ -144,7 +144,7 @@ const ScriptsEditor = () => {
       groupedFocusKey={`ActorProperties/${actorId}/code`}
       opts={{ onReorder }}
     >
-      <div ref={scriptsDivRef} className="pt-2 pb-5 Junior-ScriptsEditor">
+      <div ref={scriptsDivRef} className="pt-2 pb-5 Junior-ScriptsEditor flex-grow-1">
         {maybeNoContentHelp}
         <ol className="Junior-ScriptsList">{scriptsContent}</ol>
       </div>

src/components/demo-sidebar/DemoHeader.tsx

@@ -49,7 +49,11 @@ export const DemoHeader = ({
       return (
         <div className={classNames("chapter-pill", "rounded-pill")}>
           <FontAwesomeIcon icon={"layer-group"} />
-          <span aria-label={`Chapter ${activeChapter + 1} out of ${headings.length}`}>
+          <span
+            aria-label={`Chapter ${activeChapter + 1} out of ${
+              headings.length
+            }`}
+          >
             {activeChapter + 1}/{headings?.length}
           </span>
         </div>
@@ -60,7 +64,9 @@ export const DemoHeader = ({
       return (
         <Button
           aria-label={"Expand or collapse chapters navigation menu"}
-          className={classNames("w-auto", "caret", "p-0", "ms-2")}
+          className={classNames("w-auto", "caret", "p-0", "ms-2", {
+            isNavigationExpanded,
+          })}
           key={"nav-caret"}
           id={"nav-caret"}
           ref={navCaretRef}

src/demo-sidebar.scss

@@ -25,6 +25,7 @@ $chapter-navigation-link-height: 3rem;
   .demo-header {
     h1 {
       font-size: 1.1rem;
+      margin: 0;
     }
 
     padding: 0;
@@ -223,7 +224,7 @@ $chapter-navigation-link-height: 3rem;
         min-height: 0;
 
         .chapter-markdown {
-          line-break: anywhere;
+          line-break: auto;
           overflow-x: clip;
           overflow-y: scroll;
           transition: max-height 0.1s cubic-bezier(.25, .8, .25, 1);
@@ -264,6 +265,16 @@ $chapter-navigation-link-height: 3rem;
 
     #nav-caret {
       border: none;
+      transition: transform 0.3s cubic-bezier(.25, .8, .25, 1),
+      background-color 0.3s cubic-bezier(.25, .8, .25, 1);
+
+      &.isNavigationExpanded {
+        transform: rotateZ(180deg);
+      }
+
+      &:hover {
+        color: $pytch-colour-main-yellow;
+      }
     }
   }
 
@@ -358,18 +369,6 @@ $chapter-navigation-link-height: 3rem;
     }
   }
 
-  .nav-caret {
-    transition: transform 0.3s cubic-bezier(.25, .8, .25, 1);
-
-    &.isNavigationExpanded {
-      transform: rotateZ(180deg);
-    }
-
-    &:hover {
-      color: $pytch-colour-main-yellow;
-    }
-  }
-
   .loading {
     cursor: progress;
   }

src/font-awesome-lib.ts

@@ -39,11 +39,21 @@ import {
   faExclamationCircle,
   faWindowMinimize,
   faKeyboard,
+  faFloppyDisk,
+  faCamera,
+  faClone,
+  faCode,
+  faDownload,
+  faEllipsisV,
+  faEllipsisH,
     faShare,
     faLayerGroup,
     faSearch
 } from "@fortawesome/free-solid-svg-icons";
 
+import { faGoogleDrive } from '@fortawesome/free-brands-svg-icons'
+
+
 import { faTimesCircle, faEnvelope } from "@fortawesome/free-regular-svg-icons";
 
 library.add(
@@ -87,6 +97,15 @@ library.add(
   faExclamationCircle,
   faWindowMinimize,
   faKeyboard,
+  faTimesCircle,
+  faFloppyDisk,
+  faCamera,
+  faClone,
+  faCode,
+  faDownload,
+  faGoogleDrive,
+  faEllipsisV,
+  faEllipsisH,
   faTimesCircle,
     faShare,
     faLayerGroup,

src/pytch-ide.scss

@@ -26,19 +26,6 @@ $stage-controls-height: 37.6px;
   }
   .FullScreenStage {
     margin: auto;
-
-    .run-stop-controls {
-      display: flex;
-      flex-direction: row;
-
-      > * {
-        margin-left: 16px;
-      }
-
-      > *:first-child {
-        margin-left: 0px;
-      }
-    }
   }
 }
 
@@ -182,11 +169,12 @@ $stage-controls-height: 37.6px;
 }
 
 #pytch-canvas {
-  border: $canvas-border-width solid grey;
+  border: $canvas-border-width solid $pytch-colour-main-blue-darkened;
   border-radius: 2px;
   background: white;
   display: block;
   visibility: visible;
+  box-shadow: rgba(99, 99, 99, 0.05) 0px 2px 8px 0px;
 
   &.resize-active {
     visibility: hidden;
@@ -298,7 +286,6 @@ $speech-bubble-max-height: 180px;
   grid-template-rows: auto 1fr;
   position: relative;
   z-index: 0;
-
   /* Override Ace's ordering of fonts to avoid Monaco-related
      mis-rendering in Safari.
      https://github.com/ajaxorg/ace/issues/3385
@@ -307,6 +294,10 @@ $speech-bubble-max-height: 180px;
     font-family: $monospace-fonts;
   }
 
+  .tab-content {
+    border-radius: 0 0 10px 10px;
+  }
+
   .ReadOnlyOverlay {
     z-index: 10;
     position: absolute;
@@ -438,11 +429,13 @@ $speech-bubble-max-height: 180px;
   }
 
   &.GreenFlag {
-    @include as-bootstrap-button(#2c2, #1a1);
+    @include as-bootstrap-button($pytch-colour-accent-cyan, $pytch-colour-accent-cyan);
+    border-radius: 10px 0 0 10px;
   }
 
   &.RedStop {
-    @include as-bootstrap-button(#e33, #c11);
+    @include as-bootstrap-button($pytch-colour-accent-flame, $pytch-colour-accent-flame);
+    border-radius: 0 10px 10px 0;
   }
 }
 
@@ -956,3 +949,73 @@ ul.ClipArtTagButtonCollection {
     }
   }
 }
+
+.btn-primary {
+  @include as-bootstrap-button(#306998, #306998);
+}
+
+.btn.square-button {
+  width: 36px;
+  height: 36px;
+  padding: 0;
+}
+
+.run-stop-controls {
+  display: flex;
+  flex-direction: row;
+}
+
+.moreOptionsDropdown {
+  button.btn.btn-primary {
+    background-color: transparent;
+    border-color: transparent;
+    color: black;
+
+    &:hover {
+      background-color: #c2d5dd;
+      border-color: transparent;
+      color: black;
+    }
+
+    &.show {
+      background-color: #c2d5dd;
+      border-color: transparent;
+      color: black;
+
+      &:hover {
+        background-color: #c2d5dd;
+        border-color: transparent;
+        color: black;
+      }
+    }
+
+    &::after {
+      display: none !important;
+    }
+  }
+}
+
+.dropdown-menu {
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &.show {
+    border: 0;
+    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
+    padding: 6px;
+    border-radius: 10px;
+  }
+
+  .dropdown-item {
+    border-radius: 10px;
+    margin: 4px 0;
+    padding-top: 6px;
+    padding-bottom: 6px;
+  }
+}
+
+.full-screen {
+  margin-right: auto;
+}