update jambonz-ui

src/components/footer.js

@@ -18,7 +18,7 @@ function FooterItem({ obj }) {
 
 export default function Footer({ siteData }) {
   return (
-    <footer className="bg-jambonz foot">
+    <footer className="bg--jambonz foot">
       <div className="wrap foot__wrap">
         <div className="foot__navs">
           <ul className="foot__links">

src/components/jambonz-ui.js

@@ -89,7 +89,7 @@ export function Latest({ data }) {
     'latest': true,
     [`latest--${data.label}`]: true,
     'pad': true,
-    'bg-pink': true,
+    'bg--pink': true,
   };
 
   return (

src/components/navi.js

@@ -30,7 +30,7 @@ function NaviItem({obj}) {
 
 function NaviMobile({ active, handler, siteData }) {
   const classes = {
-    'bg-jambonz': true,
+    'bg--jambonz': true,
     'wrap': true,
     'navi__mobile': true,
     'active': active,

src/styles/_backgrounds.scss

@@ -1,22 +1,34 @@
-.bg-jambonz {
+.bg--jambonz {
   background-color: $jambonz;
   color: $white;
 }
 
-.bg-black {
+.bg--black {
   background-color: $black;
   color: $white;
 }
 
-.bg-charcoal {
+.bg--charcoal {
   background-color: $charcoal;
   color: $white;
 }
 
-.bg-grey {
+.bg--grey {
   background-color: $grey;
 }
 
-.bg-pink {
+.bg--pink {
   background-color: $pink;
+}
+
+.bg--blue {
+  background-color: $blue;
+}
+
+.bg--purple {
+  background-color: $purple;
+}
+
+.bg--teal {
+  background-color: $teal;
 }

src/styles/_icons.scss

@@ -33,6 +33,38 @@
     svg {
       stroke: $jambonz;
     }
+
+    &--dark {
+      border: 2px solid $charcoal;
+
+      svg {
+        stroke: $charcoal;
+      }
+    }
+
+    &--blue {
+      border: 2px solid $blue;
+
+      svg {
+        stroke: $blue;
+      }
+    }
+
+    &--teal {
+      border: 2px solid $teal;
+
+      svg {
+        stroke: $teal;
+      }
+    }
+
+    &--purple {
+      border: 2px solid $purple;
+
+      svg {
+        stroke: $purple;
+      }
+    }
   }
 
   &--fill {
@@ -48,6 +80,10 @@
       background-color: $teal;
     }
 
+    &--dark {
+      background-color: $charcoal;
+    }
+
     &--white {
       background-color: $white;
 
@@ -72,4 +108,14 @@
       margin: 0 8px;
     }
   }
+
+  &--set {
+    .icon {
+      margin: 16px;
+  
+      @media (max-width: $width-mobile) {
+        margin: 8px;
+      }
+    }
+  }
 }