fix: remove warnings for :first-child and innerRef

package.json

@@ -25,15 +25,15 @@
     "axios": "^0.18.0",
     "gatsby-image": "^2.0.41",
     "gatsby-plugin-emotion": "^4.0.6",
-    "gatsby-plugin-google-analytics": "^2.0.19",
+    "gatsby-plugin-google-analytics": "^2.0.20",
     "gatsby-plugin-layout": "^1.0.15",
     "gatsby-plugin-manifest": "^2.1.1",
     "gatsby-plugin-offline": "^2.1.0",
     "gatsby-plugin-react-helmet": "^3.0.12",
     "gatsby-plugin-sharp": "^2.0.37",
-    "gatsby-source-shopify": "^2.0.28",
+    "gatsby-source-shopify": "^2.0.30",
     "gatsby-transformer-sharp": "^2.1.19",
-    "gatsby": "^2.4.3",
+    "gatsby": "^2.5.0",
     "react-apollo": "^2.5.5",
     "react-dom": "^16.8.6",
     "react-helmet": "^5.2.1",
@@ -42,7 +42,7 @@
     "react-router-dom": "^5.0.0",
     "react": "^16.8.6",
     "recompose": "^0.30.0",
-    "shopify-buy": "^2.2.3"
+    "shopify-buy": "^2.2.4"
   },
   "devDependencies": {
     "husky": "^2.3.0",

src/components/Cart/CartList.js

@@ -23,7 +23,7 @@ const Headers = styled(`div`)`
     padding-bottom: ${spacing.xs}px;
     text-align: center;
 
-    &:first-child {
+    &:first-of-type {
       flex-grow: 1;
       text-align: left;
     }
@@ -37,25 +37,25 @@ const CartList = ({
   setCartLoading,
   isCartLoading
 }) => (
-  <>
-    <Headers>
-      <span>Product</span>
-      <span>Qty.</span>
-      <span>Remove</span>
-    </Headers>
-    <CartListRoot>
-      {items.map(item => (
-        <CartListItem
-          key={item.id}
-          item={item}
-          handleRemove={handleRemove(item.id)}
-          updateQuantity={updateQuantity(item.id)}
-          setCartLoading={setCartLoading}
-          isCartLoading={isCartLoading}
-        />
-      ))}
-    </CartListRoot>
-  </>
-);
+    <>
+      <Headers>
+        <span>Product</span>
+        <span>Qty.</span>
+        <span>Remove</span>
+      </Headers>
+      <CartListRoot>
+        {items.map(item => (
+          <CartListItem
+            key={item.id}
+            item={item}
+            handleRemove={handleRemove(item.id)}
+            updateQuantity={updateQuantity(item.id)}
+            setCartLoading={setCartLoading}
+            isCartLoading={isCartLoading}
+          />
+        ))}
+      </CartListRoot>
+    </>
+  );
 
 export default CartList;

src/components/ContributorArea/CreateAccountForm.js

@@ -22,7 +22,7 @@ const Fieldset = styled(BaseFieldset)`
   @media (min-width: ${breakpoints.hd}px) {
     flex-basis: 65%;
 
-    &:first-child {
+    &:first-of-type {
       flex-basis: 35%;
       padding-right: ${spacing.sm}px;
     }

src/components/Dashboard/IssueList.js

@@ -14,7 +14,7 @@ const Issue = styled('li')`
   margin: 0;
   padding: 0.5rem 0;
 
-  :last-child:not(:first-child) {
+  :last-child:not(:first-of-type) {
     border-bottom: 0;
   }
 `;

src/components/ProductListing/ProductListingItem.js

@@ -99,7 +99,7 @@ const CodeEligibility = styled(`div`)`
     justify-content: center;
   }
 
-  span:first-child {
+  span:first-of-type {
     background: #999;
     flex-basis: 35%;
     font-size: 0.9rem;

src/components/ProductPage/ProductImage.js

@@ -89,7 +89,7 @@ class ProductImage extends Component {
 
     return (
       <ProductImageLink
-        innerRef={el => {
+        ref={el => {
           this.imageLink = el;
         }}
         href={fluid.src}

src/components/ProductPage/ProductImagesBrowser.js

@@ -299,7 +299,7 @@ class ProductImagesBrowser extends Component {
         </Actions>
 
         <ZoomArea
-          innerRef={container => {
+          ref={container => {
             this.zoomArea = container;
           }}
         >
@@ -308,7 +308,7 @@ class ProductImagesBrowser extends Component {
             href={fluid.src}
             superZoom={superZoom}
             width={imageBoxHeight}
-            innerRef={image => {
+            ref={image => {
               this.imageBox = image;
             }}
           >