Merge pull request #4389 from Blargian/integrations_tags

Integrations: add a partner badge for integrations

Author: Blargian

src/theme/badges/CommunityMaintained/styles.module.css

@@ -1,39 +1,39 @@
 .CommunityMaintainedBadge {
-    background-color: #fbc9ef;
+    background-color: #69afff;
     border-radius: 16px;
     margin-top: 0px;
     margin-bottom: 15px;
     display: flex;
     align-items: center;
     padding: 5px 12px;
-    color: #990073;
+    color: #ffffff;
     display: inline-flex;
     margin-right: 5px;
 }
 
 .CommunityMaintainedIcon svg path {
-    fill: #fbc9ef;
-    stroke: #990073;
+    fill: #69afff;
+    stroke: #ffffff;
 }
 
 .CommunityMaintainedBadge a {
-    color: #990073;
+    color: #69afff;
 }
 
 .CommunityMaintainedBadge svg path {
-    color: #990073;
+    color: #69afff;
 }
 
 [data-theme="dark"] .CommunityMaintainedBadge {
-    background-color: #990073;
-    color: #fbeff8;
+    background-color: #69afff;
+    color: #ffffff;
 }
 
 [data-theme="dark"] .CommunityMaintainedBadge a {
-    color: #fbeff8;
+    color: #ffffff;
 }
 
 [data-theme="dark"] .CommunityMaintainedIcon svg path {
-    fill: #990073;
-    stroke: #fbeff8;
+    fill: #69afff;
+    stroke: #ffffff;
 }

src/theme/badges/PartnerBadge/index.js

@@ -0,0 +1,28 @@
+import React from "react"
+import styles from "./styles.module.css"
+
+const Icon = () => {
+  return (
+    <div className={styles.PartnerIcon} style={{ marginRight: '8px', marginTop: '4px' }}>
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <polyline points="12.5 9.5 10 12 6 11 2.5 8.5" stroke="#FBEFF8" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1"/>
+            <polyline points="4.54 4.41 8 3.5 11.46 4.41" stroke="#FBEFF8" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1"/>
+            <path d="M2.15,3.78 L0.55,6.95 A0.5,0.5 0,0,0 0.77,7.62 L2.5,8.5 L4.54,4.41 L2.82,3.55 A0.5,0.5 0,0,0 2.15,3.78 Z" stroke="#FBEFF8" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1"/>
+            <path d="M13.5,8.5 L15.23,7.62 A0.5,0.5 0,0,0 15.45,6.95 L13.85,3.78 A0.5,0.5 0,0,0 13.18,3.55 L11.46,4.41 Z" stroke="#FBEFF8" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1"/>
+            <path d="M11.5,4.5 L9,4.5 L6.15,7.27 A0.5,0.5 0,0,0 6.24,8.05 C7.33,8.74 8.81,8.72 10,7.5 L12.5,9.5 L13.5,8.5" stroke="#FBEFF8" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1"/>
+            <polyline points="7.75 13.5 5.15 12.85 3.5 11.67" stroke="#FBEFF8" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1"/>
+        </svg>
+    </div>
+  )
+}
+
+
+const PartnerBadge = () => {
+  return (
+    <div className={styles.PartnerBadge}>
+      <Icon />Partner Integration
+    </div>
+  )
+}
+
+export default PartnerBadge

src/theme/badges/PartnerBadge/styles.module.css

@@ -0,0 +1,39 @@
+.PartnerBadge {
+    background-color: #990073;
+    border-radius: 16px;
+    margin-top: 0px;
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+    padding: 5px 12px;
+    color: #ffffff;
+    display: inline-flex;
+    margin-right: 5px;
+}
+
+.PartnerBadgeIcon svg path {
+    fill: #fbc9ef;
+    stroke: #990073;
+}
+
+.PartnerBadge a {
+    color: #990073;
+}
+
+.PartnerBadge svg path {
+    color: #990073;
+}
+
+[data-theme="dark"] .PartnerBadge {
+    background-color: #990073;
+    color: #fbeff8;
+}
+
+[data-theme="dark"] .PartnerBadge a {
+    color: #fbeff8;
+}
+
+[data-theme="dark"] .PartnerBadgeIcon svg path {
+    fill: #990073;
+    stroke: #fbeff8;
+}