feat: gui a bit more clear

Author: peterpeterparker

studio/src/app/popovers/editor/app-code/app-code.scss

@@ -27,5 +27,9 @@ app-code {
     --background: inherit;
     --ion-item-border-color: transparent;
     --ion-padding: 0;
+
+    ion-label {
+      margin: 16px 0;
+    }
   }
 }

studio/src/app/popovers/editor/app-code/app-code.tsx

@@ -289,11 +289,15 @@ export class AppCode {
             </ion-item-divider>
 
             <ion-item>
-                <ion-input value={this.highlightLines} placeholder="Click to enter lines" debounce={500}
+                <ion-input value={this.highlightLines} placeholder="Enter lines here" debounce={500}
                            onIonInput={(e: CustomEvent<KeyboardEvent>) => this.handleInput(e)}
                             onIonChange={() => this.highlightSelectedLines()}></ion-input>
             </ion-item>
 
+            <ion-item>
+                <small>To highlight lines, use a coma separated list of lines. For example: 0,2 7,7 13,15</small>
+            </ion-item>
+
             <ion-item>
                 <ion-label>Color</ion-label>
                 <input type="color" value={this.highlightColor} onChange={(e) => this.selectColor(e, this.setHighlightColor)}></input>