Merge pull request #323 from circuitpython/beta

Merge Beta

Author: makermelissa

js/workflows/usb.js

@@ -124,10 +124,6 @@ class USBWorkflow extends Workflow {
                 device = await navigator.serial.requestPort();
                 console.log(device);
             }
-
-            // TODO: Make it more obvious to user that something happened for smaller screens
-            // Perhaps providing checkmarks by adding a css class when a step is complete would be helpful
-            // This would help with other workflows as well
         } else {
             console.log('Requesting any serial device...');
             try {
@@ -171,7 +167,7 @@ class USBWorkflow extends Workflow {
         btnSelectHostFolder.disabled = true;
         let serialConnect = async (event) => {
             try {
-                await this.showBusy(this.connectToSerial());
+                await this.connectToSerial();
             } catch (e) {
                 //console.log(e);
                 //alert(e.message);
@@ -291,7 +287,7 @@ class USBWorkflow extends Workflow {
 
         // At this point we should see if we should init the file client and check if have a saved dir handle
         let fileops = new FileOps(this.repl, false);
-        if (await fileops.isReadOnly()) {
+        if (await this.showBusy(fileops.isReadOnly())) {
             // UID Only needed for matching the CIRCUITPY drive with the Serial Terminal
             await this.showBusy(this._getDeviceUid());
             let modal = this.connectDialog.getModal();

sass/base/_base.scss

@@ -1,3 +1,6 @@
+@use "../base/variables" as *;
+@use "sass:color";
+
 html {
     box-sizing: border-box;
 }
@@ -64,7 +67,7 @@ h5 {
     }
 
     &:hover {
-        background-color: darken($purple, 15%);
+        background-color: color.adjust($purple, $lightness: -15%);
     }
 
     &.hidden {
@@ -77,7 +80,7 @@ h5 {
     background-color: $gray;
 
     &:hover {
-        background-color: darken($gray, 15%);
+        background-color: color.adjust($gray, $lightness: -15%);
     }
 }
 

sass/layout/_grid.scss

@@ -1,3 +1,5 @@
+@use "../base/variables" as *;
+
 .container {
     width: 100%;
     margin: 0 auto;

sass/layout/_header.scss

@@ -1,3 +1,6 @@
+@use "../base/variables" as *;
+@use "../base/mixins" as *;
+
 #site-header {
     display: grid;
     grid-template-rows: 1fr 3px;

sass/layout/_header_mobile.scss

@@ -1,3 +1,5 @@
+@use "../base/variables" as *;
+
 #mobile-header {
     display: none;
     background-color: #333;

sass/layout/_layout.scss

@@ -1,3 +1,6 @@
+@use "../base/variables" as *;
+@use "sass:color";
+
 .layout {
     height: 100vh;
     height: calc(var(--vh, 1vh) * 100);
@@ -170,7 +173,7 @@
     background-color: $gray;
 
     &:hover {
-        background-color: darken($gray, 15%);
+        background-color: color.adjust($gray, $lightness: -15%);
     }
 
     &.active {

sass/style.scss

@@ -1,17 +1,17 @@
 @charset "utf-8";
 
-@import '/node_modules/@fortawesome/fontawesome-free/css/all.min.css';
-@import '/node_modules/@xterm/xterm/css/xterm.css';
+@use '/node_modules/@fortawesome/fontawesome-free/css/all.min.css';
+@use '/node_modules/@xterm/xterm/css/xterm.css';
 
-@import './vendors/normalize';
+@use 'vendors/normalize';
 
-@import './base/variables';
-@import './base/typography';
-@import './base/mixins';
-@import './base/base';
+@use 'base/variables';
+@use 'base/typography';
+@use 'base/mixins';
+@use 'base/base';
 
-@import './layout/layout';
-@import './layout/grid';
-@import './layout/editor';
-@import './layout/header';
-@import './layout/header_mobile';
+@use 'layout/layout';
+@use 'layout/grid';
+@use 'layout/editor';
+@use 'layout/header';
+@use 'layout/header_mobile';