feat(style): update code tab badge styling (#8549)

Author: naveenkarmegam

packages/ui-components/src/Common/CodeTabs/index.stories.tsx

@@ -67,8 +67,8 @@ export default {
     children: <TabsContent />,
     defaultValue: 'mjs',
     tabs: [
-      { key: 'mjs', label: 'MJS' },
-      { key: 'cjs', label: 'CJS' },
+      { key: 'mjs', label: 'Example', secondaryLabel: 'MJS' },
+      { key: 'cjs', label: 'Example', secondaryLabel: 'CJS' },
     ],
   },
 } as Meta;

packages/ui-components/src/Common/Tabs/index.module.css

@@ -23,8 +23,15 @@
         dark:text-neutral-200;
 
       .tabSecondaryLabel {
-        @apply pl-1
+        @apply ml-1
+          rounded
+          border
+          border-neutral-500
+          px-1
+          py-0.5
+          text-xs
           text-neutral-500
+          dark:border-neutral-800
           dark:text-neutral-800;
       }
 
@@ -35,7 +42,9 @@
           dark:text-green-400;
 
         .tabSecondaryLabel {
-          @apply text-green-800
+          @apply border-green-800
+            text-green-800
+            dark:border-green-600
             dark:text-green-600;
         }
       }