🐛 Fix several fronted errors related with new UI (#3691)

* 🐛 Fix title toggle arrow without content
* 🐛 Fix export dropdowns
* 🐛 Fix colorpicker eyedrop
* 🐛 Fix hover state on color row
* 🐛 Fix color bullet on color row
* 🐛 Fix some css errors in new UI
* 🐛 Fix text and typography component
* 🐛 Fix some icons
* 💄 Update ui in feedback page, webhooks page and access token page

frontend/resources/styles/common/refactor/basic-rules.scss

@@ -168,14 +168,13 @@
   @include flexCenter;
   border-radius: $br-8;
   color: var(--button-radio-foreground-color-rest);
-  background-color: var(--button-radio-background-color-rest);
   border: $s-1 solid var(--button-radio-background-color-rest);
   svg,
   span svg {
     stroke: var(--button-radio-foreground-color-rest);
   }
   &:hover {
-    background-color: transparent;
+    background-color: var(--button-radio-background-color-rest);
     color: var(--button-radio-foreground-color-hover);
     border: $s-1 solid transparent;
     svg,
@@ -288,8 +287,10 @@
   @include textEllipsis;
   height: $s-28;
   width: 100%;
+  flex-grow: 1;
   margin: $s-2 0;
-  padding: 0 0 0 $s-4;
+  padding: 0 0 0 $s-6;
+  border-radius: $br-8;
   color: var(--input-foreground-color-active);
   &:focus-within,
   &:active {
@@ -302,18 +303,17 @@
   @include flexCenter;
   min-width: $s-12;
   height: $s-32;
-  margin-right: $s-4;
   svg {
-    @extend .button-icon;
+    @extend .button-icon-small;
   }
 }
 
 .input-label {
   @include tabTitleTipography;
   @include flexCenter;
-  min-width: $s-12;
+  width: $s-20;
+  padding-left: $s-8;
   height: $s-32;
-  margin-right: $s-4;
   color: var(--input-foreground-color);
 }
 
@@ -322,15 +322,15 @@
   display: flex;
   align-items: center;
   height: $s-32;
-  padding: 0 $s-4;
   border-radius: $br-8;
   background-color: var(--input-background-color);
   border: $s-1 solid var(--input-background-color);
   color: var(--input-foreground-color);
-  span {
+  span,
+  label {
     @extend .input-label;
     svg {
-      @extend .button-icon;
+      @extend .button-icon-small;
       stroke: var(--input-foreground-color);
     }
   }

frontend/resources/styles/common/refactor/design-tokens.scss

@@ -176,6 +176,7 @@
 
   --color-bullet-background-color: var(--white); // We don't want this color to change with palette
   --color-bullet-border-color: var(--color-background-quaternary);
+  --color-bullet-border-color-selected: var(--color-accent-primary);
   --palette-handler-background-color: var(--color-background-quaternary);
 
   --assets-title-background-color: var(--color-background-primary);

frontend/resources/styles/common/refactor/spacing.scss

@@ -9,6 +9,7 @@
 $s-0: 0px;
 $s-1: 1px;
 $s-2: math.div(0.25rem, 2);
+$s-3: calc($s-1 + $s-2);
 $s-4: var(--s-4);
 $s-6: calc($s-2 + $s-4);
 $s-8: calc(var(--s-4) * 2);