Update badge style

Author: LanesGood

src/components/badge.js

@@ -1,4 +1,16 @@
 import React from 'react'
+import theme from '../styles/theme'
+
+const hexToRgb = (hex) =>
+  hex
+    .replace(
+      /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
+      (m, r, g, b) => '#' + r + r + g + g + b + b
+    )
+    .substring(1)
+    .match(/.{2}/g)
+    .map((x) => parseInt(x, 16))
+    .join()
 
 export default function Badge({ name, color, children }) {
   return (
@@ -8,16 +20,27 @@ export default function Badge({ name, color, children }) {
       <style jsx>
         {`
           .badge {
-            font-size: 0.75rem;
-            background: ${color};
             display: inline-flex;
             align-items: center;
+            font-size: 0.75rem;
+            background: rgba(${hexToRgb(color)}, 0.125);
             padding: 0.125rem 0.5rem;
             border-radius: 999px;
+            box-shadow: 0 0 0 1px ${theme.colors.primaryLite};
             font-size: 12px;
-            line-height: 1.5;
             white-space: nowrap;
             margin-right: 4px;
+            position: relative;
+            overflow: hidden;
+          }
+          .badge::before {
+            content: '';
+            background-color: ${color};
+            box-shadow: 0 0 0 1px ${theme.colors.primaryLite};
+            height: 0.5rem;
+            width: 0.5rem;
+            border-radius: 999px;
+            margin-right: 0.25rem;
           }
         `}
       </style>