Toggle: Fix compact styles (#3081)

src/components/left/main/LeftMainHeader.scss

@@ -77,6 +77,15 @@
     }
   }
 
+  .MenuItem .Toggle {
+    margin-inline-start: auto;
+  }
+
+  .MenuItem.compact .Toggle {
+    transform: scale(0.75);
+    margin-inline-end: -0.125rem;
+  }
+
   .MenuItem.compact .Switcher {
     transform: scale(0.75);
   }

src/components/ui/Toggle.module.scss

@@ -1,17 +1,12 @@
 .root {
-  --widget-width: 2.375rem;
-  --widget-height: 0.3125rem;
-  --thumb-size: 0.625rem;
+  --widget-width: 3.125rem;
+  --widget-height: 0.375rem;
+  --thumb-size: 1.125rem;
 
   display: inline-flex;
   position: relative;
 }
 
-.alignToEnd {
-  margin-inline-start: auto;
-  margin-inline-end: 0.25rem;
-}
-
 .widget {
   cursor: var(--custom-cursor, pointer);
   position: relative;
@@ -28,6 +23,7 @@
     background-color: var(--color-background);
     border-radius: calc(var(--thumb-size) / 2);
     transition: transform 200ms;
+    border: 0.125rem solid var(--color-gray);
 
     :global(body.no-page-transitions) & {
       transition: none !important;
@@ -36,20 +32,16 @@
 
   &.min::after {
     transform: translate(0, -50%);
-    /* stylelint-disable-next-line plugin/whole-pixel */
-    box-shadow: 0 0 0 0.109375rem var(--color-gray);
   }
 
   &.mid::after {
     transform: translate(calc(var(--widget-width) / 2 - calc(var(--thumb-size) / 2)), -50%);
-    /* stylelint-disable-next-line plugin/whole-pixel */
-    box-shadow: 0 0 0 0.109375rem var(--color-primary);
+    border-color: var(--color-primary)
   }
 
   &.max::after {
-    transform: translate(calc(var(--widget-width) - var(--thumb-size)), -50%);
-    /* stylelint-disable-next-line plugin/whole-pixel */
-    box-shadow: 0 0 0 0.109375rem var(--color-primary);
+    transform: translate(calc(var(--widget-width) - var(--thumb-size) + 0.125rem), -50%);
+    border-color: var(--color-primary)
   }
 }
 

src/components/ui/Toggle.tsx

@@ -10,7 +10,7 @@ interface OwnProps {
 
 function Toggle({ value }: OwnProps) {
   return (
-    <div className={buildClassName(styles.root, styles.alignToEnd)} aria-hidden>
+    <div className={buildClassName(styles.root, 'Toggle')} aria-hidden>
       <i className={buildClassName(styles.filler, styles[value])} />
       <i className={buildClassName(styles.widget, styles[value])} />
     </div>