Make clue larger

src/view/components/clue/ClueSimulator.tsx

@@ -12,6 +12,7 @@ import StopLogo from "../../svgs/stop_svg";
 import { sendMessage } from "../../utils/MessageUtils";
 import ActionBar from "../simulator/ActionBar";
 import { BUTTONS_KEYS, ClueImage } from "./ClueImage";
+import "../../styles/Simulator.css";
 
 export const DEFAULT_CLUE_STATE: IClueState = {
     buttons: { button_a: false, button_b: false },
@@ -129,7 +130,7 @@ export class ClueSimulator extends React.Component<any, IState> {
                         : CONSTANTS.FILES_PLACEHOLDER}
                 </div>
 
-                <div className="microbit-container">
+                <div className="clue-container">
                     <ClueImage
                         ref={this.imageRef}
                         eventTriggers={{

src/view/components/clue/Clue_svg.tsx

@@ -47,7 +47,7 @@ export class ClueSvg extends React.Component<IProps, {}> {
 
     render() {
         return (
-            <div className="microbit-svg">
+            <div className="clue-svg">
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 375 250.98"
@@ -1010,17 +1010,17 @@ export class ClueSvg extends React.Component<IProps, {}> {
                     <g id="Frame">
                         <rect
                             className="cls-22"
-                            x="62"
-                            y="25"
-                            width="182"
-                            height="158"
+                            x="60"
+                            y="24"
+                            width="186"
+                            height="170"
                         />
                         <image
                             ref={this.displayRef}
-                            x={65}
-                            y={28}
-                            width={176}
-                            height={152}
+                            x={61}
+                            y={25}
+                            width={184}
+                            height={168}
                         />
                         <rect
                             className="cls-23"

src/view/components/clue/__snapshots__/Clue.spec.tsx.snap

@@ -11,10 +11,10 @@ Array [
       The simulator will run the .py file you have focused on.
     </div>
     <div
-      className="microbit-container"
+      className="clue-container"
     >
       <div
-        className="microbit-svg"
+        className="clue-svg"
       >
         <svg
           height="100%"
@@ -1043,16 +1043,16 @@ Array [
           >
             <rect
               className="cls-22"
-              height="158"
-              width="182"
-              x="62"
-              y="25"
+              height="170"
+              width="186"
+              x="60"
+              y="24"
             />
             <image
-              height={152}
-              width={176}
-              x={65}
-              y={28}
+              height={168}
+              width={184}
+              x={61}
+              y={25}
             />
             <rect
               className="cls-23"

src/view/styles/Simulator.css

@@ -72,6 +72,11 @@
     max-width: 350px;
     padding: 20px;
 }
+.clue-container {
+    width: 100%;
+    max-width: 500px;
+    padding: 20px;
+}
 .cpx-container {
     width: 100%;
     padding-top: 10px;

src/view/styles/SimulatorSvg.css

@@ -51,25 +51,6 @@ sim-button {
     pointer-events: none;
 }
 
-/*
-.sim-button-nut:hover {
-    stroke: 1px solid #704a4a;
-}
-.sim-pin:hover {
-    stroke: #d4af37;
-    stroke-width: 2px;
-}
-.sim-pin-touch.touched:hover {
-    stroke: darkorange;
-}
-.sim-led-back:hover {
-    stroke: #a0a0a0;
-    stroke-width: 3px;
-}
-.sim-led:hover {
-    stroke: #ff7f7f;
-    stroke-width: 3px;
-} */
 .sim-systemled {
     fill: #333;
     stroke: #555;