Tag component updated

- updated tag component to make it stand out more and add more color to the UI. Most of the time, the tag component is used to inform the user if a feature is paid. This work emphasizes this.

packages/bbui/src/Tags/Tag.svelte

@@ -31,13 +31,59 @@
   {/if}
   <span class="spectrum-Tags-itemLabel"><slot /></span>
   {#if closable}
-    <ClearButton on:click />
+    <ClearButton small id="clear" on:click />
   {/if}
 </div>
 
 <style>
+  .spectrum-Tags-item > .spectrum-Icon {
+    margin-right: 2px !important;
+  }
   .spectrum-Tags-item {
-    margin-bottom: 0;
+    position: relative;
-    margin-top: 0;
+    display: inline-flex !important;
+    max-width: 100%;
+    align-items: center !important;
+    padding: 2px 8px !important;
+    background-color: var(--spectrum-global-color-gray-300);
+    border: none;
+    border-radius: 7px;
+    text-decoration: none;
+    color: var(--spectrum-global-color-gray-900);
+  }
+  /* Change the color of the tag to draw the eye */
+  .spectrum-Tags-item:has(.spectrum-Icon) {
+    position: relative;
+    display: inline-flex !important;
+    max-width: 100%;
+    align-items: center !important;
+    padding: 2px 8px !important;
+    background-color: var(--spectrum-global-color-indigo-700);
+    border: none;
+    border-radius: 7px;
+    text-decoration: none;
+    color: var(--spectrum-global-color-indigo-100);
+  }
+  /* Change the color of the tag to match the default tag when it has a close button */
+  .spectrum-Tags-item:has(.spectrum-Icon):has(button):has(svg) {
+    position: relative;
+    display: inline-flex !important;
+    max-width: 100%;
+    align-items: center !important;
+    padding: 2px 8px !important;
+    background-color: var(--spectrum-global-color-gray-300);
+    border: none;
+    border-radius: 7px;
+    text-decoration: none;
+    color: var(--spectrum-global-color-gray-900);
+  }
+
+  .spectrum-Tags-itemLabel {
+    font-size: 13px;
+    font-weight: 400;
+    pointer-events: auto;
+    margin: 0 !important;
+    line-height: 1 !important;
+    height: auto;
   }
 </style>

packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte

@@ -150,11 +150,9 @@
               {action.name}
             </p>
             {#if isDisabled && !syncAutomationsEnabled && !triggerAutomationRunEnabled && lockedFeatures.includes(action.stepId)}
-              <div class="tag-color">
+              <Tags>
-                <Tags>
+                <Tag icon="LockClosed">Premium</Tag>
-                  <Tag icon="LockClosed">Premium</Tag>
+              </Tags>
-                </Tags>
-              </div>
             {:else if isDisabled}
               <Icon name="Help" tooltip={disabled()[idx].message} />
             {/if}
@@ -244,6 +242,9 @@
     margin: 0;
     color: var(--spectrum-global-color-gray-900);
   }
+  :is(.disabled) p {
+    color: var(--spectrum-global-color-gray-600);
+  }
 
   .item:not(.disabled):hover,
   .selected {
@@ -251,14 +252,8 @@
   }
   .disabled {
     background: var(--spectrum-global-color-gray-200);
-    opacity: 0.5;
+    cursor: auto;
-  }
+    color: var(--spectrum-global-color-gray-300) !important;
-  .disabled :global(.spectrum-Body) {
-    color: var(--spectrum-global-color-gray-600);
-  }
-
-  .tag-color :global(.spectrum-Tags-item) {
-    background: var(--spectrum-global-color-gray-200);
   }
   .icon-background {
     background-color: #5e12f7;
@@ -269,6 +264,7 @@
     display: inline-flex;
     justify-content: center;
     align-items: center;
+    color: white;
   }
   .icon-background-external {
     background-color: var(--spectrum-global-color-gray-200);
@@ -280,10 +276,6 @@
     justify-content: center;
     align-items: center;
   }
-  div:has(svg) {
-    color: white;
-  }
-
   img {
     border-radius: 6px;
     padding: 2px;