squash! updated IDE stylings

Author: MartinNang

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

@@ -264,6 +264,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 +368,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/pytch-jr-ide.scss

@@ -198,7 +198,7 @@
   }
 
   height: 100%;
-  padding: 6px;
+  padding: 6px 6px 12px;
 }
 
 .StageAndActorsOrAssets {
@@ -351,7 +351,7 @@
 }
 
 .Junior-InfoPanel-container {
-  //border-top: $panel-divider-border-spec;
+  margin-top: 6px;
 
   button.collapse-button {
     font-size: 0.75rem;