udpate badge style

Author: ch264

build/footerDev.json

@@ -23,6 +23,14 @@
             "label": "enterprise",
             "ariaLabel": "Read more about Postman enterprise"
           },
+          {
+            "title": "Spec Hub",
+            "url": "https://www.postman.com/product/spec-hub/",
+            "category": "global-footer",
+            "label": "Spec Hub",
+            "ariaLabel": "Read more about Postman Spec Hub",
+            "badge": "new"
+          },
           {
             "title": "Flows",
             "url": "https://www.postman.com/product/flows/",

src/components/Footer/Footer.jsx

@@ -189,7 +189,10 @@ const Footer = () => {
                                   triggerGA(link.category, link.label)
                                 }}
                               >
-                                {link.title}
+                                <span>{link.title}</span>
+                                {link.badge && (
+                                  <span className="badge">{link.badge}</span>
+                                )}
                               </FooterLinkStyles>
                             </ColumnRow>
                           ))) ||
@@ -222,7 +225,10 @@ const Footer = () => {
                                     triggerGA(link.category, link.label)
                                   }}
                                 >
-                                  {link.title}
+                                  <span>{link.title}</span>
+                                  {link.badge && (
+                                    <span className="badge">{link.badge}</span>
+                                  )}
                                 </FooterLinkStyles>
                               </ColumnRow>
                             ))) ||
@@ -256,7 +262,10 @@ const Footer = () => {
                                     triggerGA(link.category, link.label)
                                   }}
                                 >
-                                  {link.title}
+                                  <span>{link.title}</span>
+                                  {link.badge && (
+                                    <span className="badge">{link.badge}</span>
+                                  )}
                                 </FooterLinkStyles>
                               </ColumnRow>
                             ))) ||
@@ -286,7 +295,10 @@ const Footer = () => {
                                   triggerGA(link.category, link.label)
                                 }}
                               >
-                                {link.title}
+                                <span>{link.title}</span>
+                                {link.badge && (
+                                  <span className="badge">{link.badge}</span>
+                                )}
                               </FooterLinkStyles>
                             </ColumnRow>
                           ))) ||
@@ -315,7 +327,10 @@ const Footer = () => {
                                   triggerGA(link.category, link.label)
                                 }}
                               >
-                                {link.title}
+                                <span>{link.title}</span>
+                                {link.badge && (
+                                  <span className="badge">{link.badge}</span>
+                                )}
                               </FooterLinkStyles>
                             </ColumnRow>
                           ))) ||

src/components/Header/Header.jsx

@@ -336,7 +336,7 @@ const Header = (props) => {
                                   >
                                     <span>{link.title}</span>
                                     {link.badge && (
-                                      <span className="dropdown__badge">{link.badge}</span>
+                                      <span className="badge">{link.badge}</span>
                                     )}
                                   </a>
                                 ))}

src/components/Header/HeaderStyles.jsx

@@ -671,16 +671,6 @@ export const DropdownStyles = styled.div`
     font-weight: 600;
     margin-bottom: 0px;
   }
-
-  .dropdown__badge {
-    margin-left: 0.5rem; /* ml-2 */
-    border-radius: 0.25rem; /* rounded */
-    border: 1px solid #e4d8f6; /* border border-[#e4d8f6] */
-    padding: 0.5rem; /* px-1 */
-    font-size: 10px; /* text-[10px] */
-    text-transform: uppercase; /* uppercase */
-    color: #623497; /* text-[#623497] */
-  }
 `
 
 

styles/globalStyle.js

@@ -358,5 +358,18 @@ small,
   font-size: 14px;
   line-height: 1.5714285714; /* 22px */
 }
+
+.badge {
+  margin-left: 0.8rem; /* ml-2 */
+  border-radius: 0.5rem; /* rounded */
+  border: 1px solid #6f2cba; /* border border-[#e4d8f6] */
+  padding: 3px 9px; /* px-1 */
+  font-size: 10px; /* text-[10px] */
+  text-transform: uppercase; /* uppercase */
+  color: #6f2cba; /* grey-50 */
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 18px;
+}
 `
 export default GlobalStyle;