chore: Sync colors from dashboard to tailwind config (#5656)

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue

@@ -321,7 +321,7 @@ export default {
 .beta {
   padding-right: var(--space-smaller) !important;
   padding-left: var(--space-smaller) !important;
-  margin-left: var(--space-half) !important;
+  margin-left: var(--space-smaller) !important;
   display: inline-block;
   font-size: var(--font-size-micro);
   font-weight: var(--font-weight-medium);

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -434,7 +434,7 @@ export default {
 
       &::before {
         transform: rotate(0deg);
-        left: var(--space-half);
+        left: var(--space-smaller);
         bottom: var(--space-minus-slab);
       }
     }

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -970,7 +970,7 @@ export default {
 
   &::before {
     transform: rotate(0deg);
-    left: var(--space-half);
+    left: var(--space-smaller);
     bottom: var(--space-minus-slab);
   }
 }

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue

@@ -181,7 +181,7 @@ export default {
   color: var(--y-700);
   font-size: var(--font-size-mini);
   margin-top: var(--space-small);
-  padding: var(--space-half) var(--space-one);
+  padding: var(--space-smaller) var(--space-small);
 }
 
 .popover-animation-enter-active,

app/javascript/dashboard/modules/widget-preview/components/Widget.vue

@@ -249,8 +249,8 @@ export default {
     display: flex;
     align-items: center;
     border-radius: calc(var(--border-radius-small) * 10);
-    height: calc(var(--space-three) * 2);
-    width: calc(var(--space-three) * 2);
+    height: calc(var(--space-large) * 2);
+    width: calc(var(--space-large) * 2);
     position: relative;
     overflow-wrap: anywhere;
     cursor: pointer;
@@ -274,7 +274,7 @@ export default {
     display: inline;
     height: var(--space-medium);
     width: var(--space-micro);
-    left: var(--space-three);
+    left: var(--space-large);
     position: absolute;
   }
 

app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue

@@ -104,7 +104,7 @@ export default {
       .new-popover-link {
         display: flex;
         align-items: center;
-        padding: var(--space-half) var(--space-one);
+        padding: var(--space-smaller) var(--space-small);
         background-color: var(--s-25);
         font-size: var(--font-size-mini);
         color: var(--s-500);

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue

@@ -118,6 +118,6 @@ table {
   justify-content: center;
   color: var(--s-500);
   font-size: var(--font-size-default);
-  margin-top: var(--space-three);
+  margin-top: var(--space-large);
 }
 </style>