chore: adjusts ChevronIcon styling to match other icons (#12133)

### What?

Adjusts the `ChevronIcon` component to match the sizing of other icons
in the `ui` package. Also adds various styling adjustments to places
where icons are used.

### Why?

Using the `ChevronIcon` in other elements currently requires different
styling to make it consistent with other icons. This will make it so
that any usage of the any icons is consistent across components.

### How?

Resizes the `ChevronIcon` components and updates styling throughout the
admin panel.

packages/next/src/views/LivePreview/Toolbar/Controls/index.tsx

@@ -31,7 +31,6 @@ export const ToolbarControls: React.FC<EditViewProps> = () => {
               <span>
                 {breakpoints.find((bp) => bp.name == breakpoint)?.label ?? customOption.label}
               </span>
-              &nbsp;
               <ChevronIcon className={`${baseClass}__chevron`} />
             </React.Fragment>
           }
@@ -82,7 +81,6 @@ export const ToolbarControls: React.FC<EditViewProps> = () => {
         button={
           <React.Fragment>
             <span>{zoom * 100}%</span>
-            &nbsp;
             <ChevronIcon className={`${baseClass}__chevron`} />
           </React.Fragment>
         }

packages/ui/src/elements/BulkUpload/ActionsBar/index.scss

@@ -33,10 +33,6 @@
         width: calc(var(--base) * 1.2);
         height: calc(var(--base) * 1.2);
 
-        svg {
-          max-width: 1rem;
-        }
-
         &:hover {
           background-color: var(--theme-elevation-200);
         }

packages/ui/src/elements/Button/index.scss

@@ -6,7 +6,7 @@
   }
 
   .btn--withPopup {
-    margin-block: 24px;
+    margin-block: 4px;
     .btn {
       margin: 0;
     }

packages/ui/src/elements/Localizer/LocalizerLabel/index.scss

@@ -7,7 +7,7 @@
     white-space: nowrap;
     display: flex;
     padding-inline-start: base(0.4);
-    padding-inline-end: base(0.4);
+    padding-inline-end: base(0.2);
     background-color: var(--theme-elevation-100);
     border-radius: var(--style-radius-s);
 
@@ -24,7 +24,6 @@
     &__current {
       display: flex;
       align-items: center;
-      gap: base(0.3);
     }
 
     button {

packages/ui/src/elements/Localizer/LocalizerLabel/index.tsx

@@ -28,7 +28,7 @@ export const LocalizerLabel: React.FC<{
         <span className={`${baseClass}__current-label`}>
           {`${getTranslation(locale.label, i18n)}`}
         </span>
-        <ChevronIcon className={`${baseClass}__chevron`} size="small" />
+        <ChevronIcon className={`${baseClass}__chevron`} />
       </div>
     </div>
   )

packages/ui/src/elements/PerPage/index.scss

@@ -36,10 +36,6 @@
       }
     }
 
-    &__chevron {
-      padding-left: calc(var(--base) / 4);
-    }
-
     &__button-active {
       font-weight: bold;
       color: var(--theme-text);

packages/ui/src/elements/Pill/index.scss

@@ -55,8 +55,9 @@
     }
 
     &--has-icon {
+      gap: 0;
       padding-inline-start: base(0.4);
-      padding-inline-end: base(0.3);
+      padding-inline-end: base(0.1);
 
       svg {
         display: block;

packages/ui/src/elements/Popup/PopupTrigger/index.scss

@@ -17,15 +17,15 @@
     }
 
     &--size-small {
-      padding: base(0.4);
+      padding: base(0.2);
     }
 
     &--size-medium {
-      padding: base(0.6);
+      padding: base(0.3);
     }
 
     &--size-large {
-      padding: base(0.8);
+      padding: base(0.4);
     }
 
     &--disabled {

packages/ui/src/elements/ReactSelect/index.scss

@@ -17,10 +17,6 @@
       padding: base(0.5) base(0.6);
     }
 
-    .rs__indicators {
-      gap: calc(var(--base) / 4);
-    }
-
     .rs__indicator {
       padding: 0px 4px;
       cursor: pointer;

packages/ui/src/elements/SortColumn/index.scss

@@ -31,7 +31,7 @@
     &__button {
       margin: 0;
       opacity: 0.3;
-      padding: calc(var(--base) / 4);
+      padding: calc(var(--base) / 4) 0;
       display: inline-flex;
       align-items: center;
       justify-content: center;

packages/ui/src/icons/Chevron/index.scss

@@ -2,8 +2,8 @@
 
 @layer payload-default {
   .icon--chevron {
-    height: calc(var(--base) / 2);
-    width: calc(var(--base) / 2);
+    height: var(--base);
+    width: var(--base);
 
     .stroke {
       fill: none;
@@ -18,8 +18,8 @@
     }
 
     &.icon--size-small {
-      height: 8px;
-      width: 8px;
+      height: 12px;
+      width: 12px;
     }
   }
 }

packages/ui/src/icons/Chevron/index.tsx

@@ -24,10 +24,10 @@ export const ChevronIcon: React.FC<{
               ? 'rotate(180deg)'
               : undefined,
     }}
-    viewBox="0 0 22 12"
+    viewBox="0 0 20 20"
     width="100%"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path className="stroke" d="M1 1.12109L11 11.1211L21 1.12109" strokeLinecap="square" />
+    <path className="stroke" d="M14 8L10 12L6 8" strokeLinecap="square" />
   </svg>
 )