css fix battery and components

src/plugins/Battery.js

@@ -74,7 +74,6 @@ module.exports = class Battery extends OverlayPlugin {
      */
     renderWidget() {
         // Create elements
-
         const {modal, container} = this.createTemplateModal({
             title: this.i18n.BATTERY_TITLE || 'Battery',
             classes: 'gm-battery-plugin',
@@ -184,7 +183,6 @@ module.exports = class Battery extends OverlayPlugin {
         this.chargeGroup.appendChild(sliderGroup);
 
         // Charge level input
-        const inputGroup = document.createElement('div');
         this.chargeInput = textInput.createTextInput({
             appendText: '%',
             value: '50',
@@ -198,8 +196,7 @@ module.exports = class Battery extends OverlayPlugin {
 
         this.chargeInput.element.className = 'gm-charge-input';
 
-        inputGroup.appendChild(this.chargeInput.element);
-        this.chargeGroup.appendChild(inputGroup);
+        this.chargeGroup.appendChild(this.chargeInput.element);
 
         return this.chargeGroup;
     }

src/plugins/util/components.js

@@ -181,8 +181,9 @@ const slider = (() => {
  */
 
 const textInput = (() => {
-    const createTextInput = ({onChange = null, value = '', regexFilter, appendText = ''}) => {
+    const createTextInput = ({onChange = null, value = '', regexFilter, appendText = '', classes=''}) => {
         const inputDiv = document.createElement('div');
+        inputDiv.className = classes;
         const inputDivContainer = document.createElement('div');
         inputDivContainer.classList.add('text-input-container');
 

src/scss/base/_genymotion.scss

@@ -47,6 +47,13 @@
             display: block;
             width: 30px;
             height: 30px;
+
+            -webkit-mask-size: contain;
+            mask-size: contain;
+            -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+            -webkit-mask-position: center;
+            mask-position: center;
         }
 
         &-video-overlay {
@@ -213,7 +220,7 @@
 .gm-separator {
     width: 100%;
     height: 1px;
-    background-color: color-mix(in srgb, var(--gm-modal-bg-color), grey 10%);
+    background-color: color-mix(in srgb, var(--gm-fourth-color), transparent 70%);
     margin: 10px 0;
 }
 

src/scss/base/_variables.scss

@@ -55,4 +55,6 @@ $spacing-l: 20px;
 $spacing-xl: 30px;
 
 // Modal
-$modal-x-padding: 40px;
+$modal-x-padding: 40px;
+$modal-section-mb: $spacing-xl;
+$modal-label-mb: $spacing-m;

src/scss/components/_battery.scss

@@ -4,7 +4,6 @@
  .device-renderer-instance .gm-battery-plugin {
     .gm {
         &-charging-group {
-            margin-top: 15px;
             display: flex;
             justify-content: space-between;
             align-items: center;
@@ -46,7 +45,7 @@
             display: flex;
             justify-content: space-around;
             align-items: center;
-            margin-bottom: 30px;
+            margin-bottom: $modal-section-mb;
 
             > div:nth-child(2) {
                 flex-grow: 1;
@@ -119,7 +118,7 @@
 
             .gm-charge-input {
                 width: 39px;
-                margin-bottom: 37px;
+                margin-top: -30px;
             }
 
             .gm-charge-slider {

src/scss/components/_textInput.scss

@@ -3,6 +3,7 @@
     color: var(--gm-input-text-color);
     display: flex;
     align-items: center;
+    height: 34px;
 
     &:has(.text-input:read-only) {
         border-bottom: 2px solid transparent;
@@ -21,9 +22,9 @@
         }
 
         &:read-only {
-            background:  color-mix(in srgb, var(--gm-btn-bg-color-disabled), transparent 80%); //TODO
+            background:  color-mix(in srgb, var(--gm-fourth-color), transparent 90%);
             border: none;
-            color: var(--gm-btn-bg-color-disabled) //TODO
+            color: var(--gm-fourth-color)
         }
     }
 }

src/scss/components/_toolbar.scss

@@ -5,12 +5,6 @@
     .gm-toolbar {
         .gm {
             &-icon-button {
-                -webkit-mask-size: contain;
-                mask-size: contain;
-                -webkit-mask-repeat: no-repeat;
-                mask-repeat: no-repeat;
-                -webkit-mask-position: center;
-                mask-position: center;
                 background-color: var(--gm-toolbar-icon-color);
 
                 &:hover,

src/scss/components/_widgetwindow.scss

@@ -177,6 +177,9 @@
     label {
         color: var(--gm-primary-color);
         font-weight: bold;
+        margin-bottom: $modal-label-mb;
+        display: block;
+
     }
     .gm-modal-header {
         display: flex;
@@ -187,7 +190,7 @@
         font-size: 16px;
         font-weight: bold;
         letter-spacing: 0.1em;
-        border-bottom: 2px solid color-mix(in srgb, var(--gm-modal-bg-color), grey 10%);
+        border-bottom: 1px solid color-mix(in srgb, var(--gm-fourth-color), transparent 70%);
     }
 
     .gm-modal-title {
@@ -197,11 +200,11 @@
     }
 
     .gm-modal-close-btn {
-        mask-image: url('../assets/images/ic_close-modal.svg');
+        mask-image: url('../assets/images/ic_close.svg');
         mask-repeat: no-repeat;
         mask-position: top center;
         mask-size: contain;
-        -webkit-mask-image: url('../assets/images/ic_close-modal.svg');
+        -webkit-mask-image: url('../assets/images/ic_close.svg');
         -webkit-mask-repeat: no-repeat;
         -webkit-mask-position: top center;
         -webkit-mask-size: contain;
@@ -221,5 +224,6 @@
     .gm-separator {
         width: calc(100% + $modal-x-padding + $modal-x-padding);
         margin-left: -$modal-x-padding;
+        margin-bottom: $spacing-m;
     }
 }