Improve the UI organization and responsiveness

src/movehub-extension/components/ColorSelector.tsx

@@ -61,12 +61,12 @@ export function ColorSelector({ device }: IMoveHubPanelProps) {
       <div className="led-color-main-container">
         <div className="led-color-text" style={{ display: 'flex' }}>
           <p style={{ margin: '8px 0px' }}>Current color</p>
-         {(selectedColor!=='lightblue') ? <ColoredCircleWithText color={selectedColor} text={selectedColor} /> : <ColoredCircleWithText color={selectedColor} text={'light blue'} />}
+          {(selectedColor !== 'lightblue') ? <ColoredCircleWithText color={selectedColor} text={''} /> : <ColoredCircleWithText color={selectedColor} text={''} />}
         </div>
-        <div className="color-selector-container">
+        <div className="led-color-selector-container">
           <select
-            className="color-selector"
-            id="color-selector"
+            className="led-color-selector"
+            id="led-color-selector"
             value={''}
             onChange={handleColorChange}
           >
@@ -75,7 +75,7 @@ export function ColorSelector({ device }: IMoveHubPanelProps) {
             </option>
             {colors.map(color => (
               <option key={color} value={color}>
-                {(color !=='lightblue') ? color : 'light blue'}
+                {(color !== 'lightblue') ? color : 'light blue'}
               </option>
             ))}
           </select>

src/movehub-extension/components/Frankie.tsx

@@ -5,7 +5,7 @@ const FrankieSVGUrl = `data:image/svg+xml;base64,${btoa(FrankieSVG)}`;
 export default function Frankie () {
   return (
     <div>
-      <img src={FrankieSVGUrl} alt="Frankie schematics" height="200px" />
+      <img src={FrankieSVGUrl} alt="Frankie schematics" height="220px" />
     </div>
   );
 };

src/movehub-extension/components/FrankieComponent.tsx

@@ -6,8 +6,11 @@ import Frankie from './Frankie';
 export function FrankieComponent({ device }: IMoveHubPanelProps) {
   return (
     <>
-      <div className="vernie-control-grid-container">
-        <div className="vernie-control-grid-item-right">
+      <div className="lego-build-control-grid-container">
+        <div className="lego-build-control-grid-item-left">
+          <Frankie />
+        </div>
+        <div className="lego-build-control-grid-item-right">
           <h4
             style={{
               color: 'var(--jp-accept-color-normal)',
@@ -55,9 +58,6 @@ export function FrankieComponent({ device }: IMoveHubPanelProps) {
           />
           <ColorSelector device={device} />
         </div>
-        <div className="vernie-control-grid-item-right">
-          <Frankie />
-        </div>
       </div>
     </>
   );

src/movehub-extension/components/MoveHubComponent.tsx

@@ -11,8 +11,11 @@ export interface IHubControlProps {
 export function MoveHubComponent({ device }: IMoveHubPanelProps) {
   return (
     <>
-      <div className="vernie-control-grid-container">
-        <div className="vernie-control-grid-item-left">
+      <div className="lego-build-control-grid-container">
+        <div className="lego-build-control-grid-item-left">
+          <MoveHub />
+        </div>
+        <div className="lego-build-control-grid-item-right">
           <h4
             style={{
               color: 'var(--jp-accept-color-normal)',
@@ -59,9 +62,6 @@ export function MoveHubComponent({ device }: IMoveHubPanelProps) {
           />
           <ColorSelector device={device} />
         </div>
-        <div className="vernie-control-grid-item-right">
-          <MoveHub />
-        </div>
       </div>
     </>
   );

src/movehub-extension/components/MoveHubPanel.tsx

@@ -15,19 +15,15 @@ export interface IHubControlProps {
 
 export function MoveHubInfos(props: { device: MoveHub }) {
   return (
-    <>
-      <div className="lego-movehub-infos-container">
-        <DeviceInfoTable moveHub={props.device} />
-      </div>
-    </>
+    <DeviceInfoTable moveHub={props.device} />
   );
 }
 
 export function MoveHubPanel({ device }: IMoveHubPanelProps) {
   return (
     <div>
-      <MoveHubInfos device={device} />
       <LegoBuildSpecific device={device} />
+      <MoveHubInfos device={device} />
     </div>
   );
 }

src/movehub-extension/components/Vernie.tsx

@@ -10,7 +10,7 @@ export default function Vernie () {
         justifyContent: 'center'
       }}
     >
-      <img src={VernieSVGUrl} alt="Vernie schematics" height="300px" />
+      <img src={VernieSVGUrl} alt="Vernie schematics" height="250px" />
     </div>
   );
 };

src/movehub-extension/components/VernieComponent.tsx

@@ -8,7 +8,11 @@ export function VernieComponent({ device }: IMoveHubPanelProps) {
   return (
     <>
       <div className="vernie-control-grid-container">
+
         <div className="vernie-control-grid-item-left">
+          <Vernie />
+        </div>
+        <div className="vernie-control-grid-item-center">
           <h4
             style={{
               color: 'var(--jp-accept-color-normal)',
@@ -49,19 +53,17 @@ export function VernieComponent({ device }: IMoveHubPanelProps) {
             buttonText2={'Left'}
             type={'angle'}
             port={'D'}
-            caution="⚠ The angle for Port D should be in range: [0°, 110°]."
+            caution=""
             dutyCycleDirect={-100}
             dutyCycleIndirect={100}
           />
           <ColorSelector device={device} />
         </div>
-        <div className="vernie-control-grid-item-right">
-          <Vernie />
-        </div>
 
-        <div className="vernie-control-grid-item-left">
+        <div className="vernie-control-grid-item-right">
           <ManualControl moveHub={device} />
         </div>
+
       </div>
     </>
   );