Language tags

Author: stever

apps/web/src/components/ActivityFeed.jsx

@@ -126,7 +126,7 @@ export default function ActivityFeed() {
                             <Tag
                               value={getLanguageLabel(project.lang)}
                               severity={getLanguageColor(project.lang)}
-                              className="align-self-start mb-3 relative z-1"
+                              className="lang-tag align-self-start mb-3 relative z-1"
                             />
 
                             <div className="mt-auto text-400 text-sm relative z-1">

apps/web/src/components/PublicUserProfile.jsx

@@ -227,7 +227,7 @@ function SortableProjectCard({ project, projectUrl, isDragging }) {
           <Tag
             value={getLanguageLabel(project.lang)}
             severity={getLanguageColor(project.lang)}
-            className="align-self-start mb-3 relative z-1"
+            className="lang-tag align-self-start mb-3 relative z-1"
           />
 
           <div className="mt-auto text-400 text-sm relative z-1">
@@ -746,7 +746,7 @@ export default function PublicUserProfile() {
                               <Tag
                                 value={getLanguageLabel(project.lang)}
                                 severity={getLanguageColor(project.lang)}
-                                className="align-self-start mb-3 relative z-1"
+                                className="lang-tag align-self-start mb-3 relative z-1"
                               />
 
                               <div className="mt-auto text-400 text-sm relative z-1">

packages/ui/theme.scss

@@ -111,6 +111,17 @@
     border-bottom-color: transparent;
 }
 
+// Language tags label a project; they aren't actions. The base theme renders
+// every tag as a filled cyan chip, which reads like a button next to the real
+// buttons. Give the language tag an outline instead: cyan border and text on a
+// transparent fill. Other tags (status, owner) keep the filled style.
+.p-tag.lang-tag {
+    background: transparent;
+    border: 1px solid var(--zx-cyan);
+    color: var(--zx-cyan);
+    font-weight: 600;
+}
+
 // Dropdown panels: match the header tone (the base theme uses a cooler grey)
 // and round the corners to fit the rest of the UI. Items shrink slightly to
 // relate to the menu bar.