fix grid repositioning on label change (#8713)

test/e2e/threebox.spec.js

@@ -223,7 +223,7 @@ describe('MetaMask', function () {
 
       it('finds the blockies toggle turned on', async function () {
         await driver.delay(regularDelayMs)
-        const toggleLabel = await driver.findElement(By.css('.toggle-button__status-label'))
+        const toggleLabel = await driver.findElement(By.css('.toggle-button__status'))
         const toggleLabelText = await toggleLabel.getText()
         assert.equal(toggleLabelText, 'ON')
       })

ui/app/components/ui/toggle-button/index.scss

@@ -1,7 +1,8 @@
 .toggle-button {
   display: flex;
+  $self: &;
 
-  &__status-label {
+  &__status {
     font-family: Roboto;
     font-style: normal;
     font-weight: normal;
@@ -10,5 +11,28 @@
     display: flex;
     align-items: center;
     text-transform: uppercase;
+    display: grid;
   }
-}
+
+  &__label-off, &__label-on {
+    grid-area: 1 / 1 / 1 / 1;
+  }
+
+  &__label-off {
+    visibility: hidden;
+  }
+
+  &__label-on {
+    visibility: visible;
+  }
+
+  &--off {
+    #{ $self }__label-off {
+      visibility: visible;
+    }
+
+    #{ $self }__label-on {
+      visibility: hidden;
+    }
+  }
+}

ui/app/components/ui/toggle-button/toggle-button.component.js

@@ -48,8 +48,10 @@ const colors = {
 const ToggleButton = (props) => {
   const { value, onToggle, offLabel, onLabel } = props
 
+  const modifier = value ? 'on' : 'off'
+
   return (
-    <div className="toggle-button">
+    <div className={`toggle-button toggle-button--${modifier}`}>
       <ReactToggleButton
         value={value}
         onToggle={onToggle}
@@ -60,7 +62,10 @@ const ToggleButton = (props) => {
         thumbAnimateRange={[3, 18]}
         colors={colors}
       />
-      <div className="toggle-button__status-label">{ value ? onLabel : offLabel }</div>
+      <div className="toggle-button__status">
+        <span className="toggle-button__label-off">{offLabel}</span>
+        <span className="toggle-button__label-on">{onLabel}</span>
+      </div>
     </div>
   )
 }