UI Refinement

src/view/App.css

@@ -9,7 +9,7 @@
   padding: 0px 0.75em 0px 0.75em;
   min-height: 100vh;
   width: 100%;
-  margin-top: 51px;
+  margin-top: 24px;
   margin-bottom: 53px;
   max-height: 400px;
   overflow: scroll;

src/view/components/toolbar/ToolBar.tsx

@@ -10,14 +10,10 @@ import {
   IModalContent,
   TOOLBAR_ICON_ID
 } from "./sensorModalUtils";
-import { INFO_SVG } from "../../svgs/info_svg";
-import { CONSTANTS } from "../../constants";
 
 interface IToolbarState {
   currentOpenedLabel: string;
-  doNotShowAgain: boolean;
   showModal: boolean;
-  showRedirectModal: boolean;
 }
 
 class ToolBar extends React.Component<any, IToolbarState, any> {
@@ -28,23 +24,13 @@ class ToolBar extends React.Component<any, IToolbarState, any> {
     super(props);
     this.state = {
       currentOpenedLabel: "",
-      doNotShowAgain: false,
-      showModal: false,
-      showRedirectModal: false
+      showModal: false
     };
   }
 
   render() {
     return (
       <div className="toolbar-parent" id="toolbar-parent">
-        <div className="info">
-          <div className="redirect-link">
-            <span className="info-icon">{INFO_SVG}</span>
-            <span className="info-text">{CONSTANTS.TOOLBAR_INFO}</span>
-            {this.getLearnLink()}
-          </div>
-          {this.getRedirectModal()}
-        </div>
         <div className="toolbar">
           <div className="toolbar-icon">
             <Button
@@ -267,68 +253,6 @@ class ToolBar extends React.Component<any, IToolbarState, any> {
       </div>
     );
   }
-
-  private getRedirectModal() {
-    if (this.state.doNotShowAgain || !this.state.showRedirectModal) {
-      return null;
-    }
-    return (
-      <span>
-        <div className="redirect-modal">
-          <div className="redirect-description">{`${
-            CONSTANTS.REDIRECT.DESCRIPTION
-          } : \n ${CONSTANTS.REDIRECT.PRIVACY}`}</div>
-          <a
-            className="redirect-button"
-            id="redirect"
-            aria-label={"Information pop-up"}
-            onClick={this.handleOnClickButton}
-            href={CONSTANTS.REDIRECT.LINK}
-          >
-            {`Got it`}
-          </a>
-          <span className="redirect-button" onClick={this.handleOnClickButton}>
-            {`close`}
-          </span>
-          <span className="redirect-button" onClick={this.handleDoNotShow}>
-            {`Do Not Show Again`}
-          </span>
-        </div>
-      </span>
-    );
-  }
-
-  private getLearnLink() {
-    const linkString = (
-      <span className="redirect-learn-link">
-        <span onClick={this.handleOnClickLink}>Learn More</span>
-      </span>
-    );
-    const linkAnchor = (
-      <span className="redirect-learn-link">
-        <a href={CONSTANTS.REDIRECT.LINK}>Learn More</a>
-      </span>
-    );
-    return this.state.doNotShowAgain ? linkAnchor : linkString;
-  }
-
-  private handleOnClickButton = (event: React.MouseEvent<HTMLElement>) => {
-    this.setState({ showRedirectModal: false });
-  };
-
-  private handleOnClickLink = (event: React.MouseEvent<HTMLElement>) => {
-    this.setState({ showRedirectModal: true });
-    if (this.state.doNotShowAgain) {
-      const ref = window.document.getElementById("redirect");
-      if (ref) {
-        window.location.assign(CONSTANTS.REDIRECT.LINK);
-      }
-    }
-  };
-
-  private handleDoNotShow = (event: React.MouseEvent<HTMLElement>) => {
-    this.setState({ doNotShowAgain: true });
-  };
 }
 
 export default ToolBar;

src/view/components/toolbar/sensorModalUtils.tsx

@@ -126,7 +126,7 @@ export const NEOP_MODAL_CONTENT: IModalContent = {
     "The 10 full color RGB LEDs surrounding the outer edge of the boards can be set to any color. Great for beautiful lighting effects!",
   tryItTitle: "Try it on the Simulator!",
   tryItDescriptrion: "Run your code and see the cool effects on the simulator!",
-  component: TRY_IT_MAKE_CODE,
+  component: undefined,
   id: "neon_pixel"
 };
 export const PUSHB_MODAL_CONTENT: IModalContent = {

src/view/constants.ts

@@ -38,13 +38,6 @@ export const CONSTANTS = {
     NUMERIC_SEVEN: "Digit7"
   },
   NO_FILES_AVAILABLE: "Choose a .py file to run on the Simulator",
-  REDIRECT: {
-    DESCRIPTION:
-      'By clicking "Agree and Proceed" you will be redirected to adafruit.com, a third party website not managed by Microsoft. Please note that your activity on adafruit.com is subject to Adafruit\'s privacy policy',
-    LINK:
-      "https://learn.adafruit.com/adafruit-circuit-playground-express/circuitpython-quickstart",
-    PRIVACY: "https://www.adafruit.com/privacy"
-  },
   SIMULATOR_BUTTON_WIDTH: 60,
   TOOLBAR_INFO: `Explore what's on the board:`,
 };

src/view/styles/ToolBar.css

@@ -78,25 +78,6 @@
   padding-bottom: 30px;
 }
 
-.info {
-  background: var(--vscode-editor-background);
-  text-align: left;
-  margin-left: 0;
-  padding-bottom: 10px;
-  border: none;
-  box-shadow: none;
-}
-
-.info-icon {
-  margin-right: 8px;
-}
-
-.info-text {
-  font-weight: 500;
-  font-size: 16px;
-  padding-right: 13px;
-}
-
 .link-parent {
   -webkit-appearance: none;
   padding-left: 150px;
@@ -112,55 +93,6 @@
   text-decoration: none;
 }
 
-.info-icon-svg {
-  fill: var(--vscode-foreground);
-}
-
-.redirect-link {
-  color: var(--vscode-foreground);
-}
-.redirect-modal {
-  background: var(--vscode-debugToolBar-background);
-  position: absolute;
-  right: 50px;
-  bottom: 50px;
-  color: var(--vscode-foreground);
-  /* word-wrap: break-word; */
-  width: 450px;
-  box-shadow: 0px 0px 20px rgba(0, 0, 0, 30%);
-  text-align: center;
-  font-weight: 700;
-  font-optical-sizing: 16px;
-  height: 100px;
-}
-
-.redirect-button {
-  text-decoration: none;
-  margin-left: auto;
-  margin-right: auto;
-  line-height: 17px;
-  color: var(--vscode-button-background);
-  padding-right: 15px;
-}
-
-.redirect-description {
-  word-wrap: break-word;
-  margin-top: 15px;
-  margin-bottom: 15px;
-  text-align: center;
-  line-height: 17px;
-  opacity: 50%;
-  vertical-align: middle;
-}
-
-.redirect-learn-link {
-  text-decoration: none;
-  color: var(--vscode-textLink-activeForeground);
-  font-size: 16px;
-  text-align: right;
-  padding-left: 16px;
-}
-
 .link {
   -webkit-appearance: none;
   text-decoration: none;