Tailwind upgrade

gatsby-browser.js

@@ -10,7 +10,6 @@ const supportedLanguagePaths = langConfig
 // eslint-disable-next-line import/prefer-default-export
 export const onInitialClientRender = () => {
   let currentPath = window.location.pathname + window.location.hash;
-  console.log(currentPath);
 
   // get language to use
   let language = window.navigator.language.substr(0, 2);

gatsby-config.js

@@ -32,7 +32,6 @@ module.exports = {
         short_name: `hubblr`,
         start_url: `/`,
         background_color: fullConfig.theme.colors.white,
-        theme_color: fullConfig.theme.colors.teal['400'],
         display: `minimal-ui`,
         icon: `src/images/fav.png`,
       },

package.json

@@ -4,13 +4,13 @@
   "dependencies": {
     "@hubblr/react-side-content-accordion": "^1.0.3",
     "@reach/router": "^1.3.4",
-    "autoprefixer": "^9.8.6",
+    "autoprefixer": "^10.4.0",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.2.2",
     "babel-plugin-module-resolver": "^4.0.0",
     "browser-cookies": "^1.2.0",
     "cssnano": "4.1.10",
-    "eslint": "7.11.0",
+    "eslint": "^7.18.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^6.15.0",
     "eslint-import-resolver-babel-module": "^5.1.2",
@@ -21,21 +21,22 @@
     "eslint-plugin-react": "^7.21.5",
     "flat": "^5.0.2",
     "framer-motion": "^2.9.4",
-    "gatsby": "^2.24.92",
-    "gatsby-plugin-eslint": "2.0.8",
-    "gatsby-plugin-ffmpeg": "^0.3.1",
-    "gatsby-plugin-manifest": "^2.4.34",
-    "gatsby-plugin-offline": "3.2.31",
-    "gatsby-plugin-postcss": "2.3.13",
-    "gatsby-plugin-react-helmet": "3.3.14",
-    "gatsby-plugin-sass": "^2.6.0",
-    "gatsby-plugin-sharp": "^2.9.1",
-    "gatsby-source-airtable": "^2.1.1",
-    "gatsby-source-filesystem": "^3.4.0",
+    "gatsby": "^4.0.2",
+    "gatsby-plugin-eslint": "4.0.1",
+    "gatsby-plugin-ffmpeg": "^0.4.1",
+    "gatsby-plugin-manifest": "4.0.0",
+    "gatsby-plugin-offline": "5.0.0",
+    "gatsby-plugin-postcss": "5.0.0",
+    "gatsby-plugin-react-helmet": "5.0.0",
+    "gatsby-plugin-sass": "5.0.0",
+    "gatsby-plugin-sharp": "^4.0.1",
+    "gatsby-source-airtable": "^2.2.1",
+    "gatsby-source-filesystem": "4.0.0",
     "gatsby-theme-i18n": "^1.0.4",
-    "gatsby-transformer-ffmpeg": "^0.3.8",
-    "gatsby-transformer-sharp": "^2.7.0",
+    "gatsby-transformer-ffmpeg": "0.4.0",
+    "gatsby-transformer-sharp": "4.0.0",
     "gatsby-video": "^0.2.0",
+    "postcss": "^8.3.11",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-autosize-textarea": "^7.1.0",
@@ -44,8 +45,10 @@
     "react-intl": "^5.10.6",
     "react-responsive": "^8.1.1",
     "sass": "^1.29.0",
+    "sharp": "^0.29.2",
     "smoothscroll-polyfill": "^0.4.4",
     "sweetalert2": "^10.10.4",
+    "tailwindcss": "^2.2.19",
     "uuid": "^8.3.1",
     "validator": "^13.1.17"
   },
@@ -65,11 +68,10 @@
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
   },
   "devDependencies": {
-    "@tailwindcss/custom-forms": "0.2.1",
+    "@tailwindcss/forms": "0.2.1",
     "@types/tailwindcss": "^2.0.5",
     "eslint-plugin-react-hooks": "^4.2.0",
     "prettier": "^2.2.1",
-    "tailwindcss": "1.9.1",
     "tailwindcss-textshadow": "^2.1.3"
   },
   "prettier": {

src/components/nav-bar/NavBar.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-bind */
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useLocalization } from 'gatsby-theme-i18n';

src/components/seo/Seo.jsx

@@ -23,13 +23,8 @@ const SEO = ({ title, description, image }) => {
   const intl = useIntl();
   const { pathname } = useLocation();
   const { site } = useStaticQuery(query);
-  const {
-    defaultTitle,
-    titleTemplate,
-    defaultDescription,
-    siteUrl,
-    defaultImage,
-  } = site.siteMetadata;
+  const { defaultTitle, titleTemplate, defaultDescription, siteUrl, defaultImage } =
+    site.siteMetadata;
 
   const seo = {
     title: title ? intl.formatMessage({ id: title }) : defaultTitle,

src/components/text/AppKnockoutText.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 function AppKnockoutText({ children, className }) {
   return (
     <span
-      className={`font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-r bg-gradient-to-r to-teal-400 from-blue-500 ${className}`}
+      className={`font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-hubblr-green ${className}`}
     >
       {children}
     </span>

src/css/components/_accordion.scss

@@ -1,9 +1,9 @@
 .accordion-heading {
-  @apply .text-2xl font-bold .py-5 text-left leading-tight tracking-tight;
+  @apply text-2xl font-bold py-5 text-left leading-tight tracking-tight;
 }
 
 .accordion-text-content {
-  @apply .text-2xl leading-tight font-light;
+  @apply text-2xl leading-tight font-light;
   transition: height .8s ease-in-out;
   overflow: hidden;
 }

src/css/components/_buttons.scss

@@ -1,55 +1,55 @@
 // different types of buttons
 .button {
-  @apply .rounded-lg;
+  @apply rounded-lg;
 
   &:not(.button-gradient) {
     &:not([class*='p-']) {
-      @apply .px-3 .py-1;
+      @apply px-3 py-1;
     }
   }
 
   &.button-theme-light {
-    @apply .text-hubblr-turquoise;
+    @apply text-hubblr-turquoise;
 
     &:not(.button-gradient) {
-      @apply .bg-white;
+      @apply bg-white;
       @extend .animate-bg-brand-gray-light;
     }
 
     &.button-gradient > .button-content-container {
-      @apply .bg-white;
+      @apply bg-white;
       @include animate-bg;
     }
 
     &:hover {
       &.button-gradient > .button-content-container {
-        @apply .bg-brand-gray-light;
+        @apply bg-brand-gray-light;
       }
     }
   }
 
   &.button-theme-dark {
-    @apply .text-white;
+    @apply text-white;
 
     &:not(.button-gradient) {
-      @apply .bg-brand-gray-darkest;
+      @apply bg-brand-gray-darkest;
       @extend .animate-bg-brand-gray-darkest;
     }
 
     &.button-gradient > .button-content-container {
-      @apply .bg-brand-gray-darkest;
+      @apply bg-brand-gray-darkest;
       @include animate-bg;
     }
 
     &:hover {
       &.button-gradient > .button-content-container {
-        @apply .bg-black;
+        @apply bg-black;
       }
     }
   }
 
   &.button-theme-transparent {
-    @apply .text-white;
+    @apply text-white;
 
     &:not(.button-gradient) {
       @extend .animate-bg-brand-gray-darkest;
@@ -61,16 +61,16 @@
 
     &:hover {
       &.button-gradient > .button-content-container {
-        @apply .bg-black;
+        @apply bg-black;
       }
     }
   }
 }
 
 .round-button {
   &:not([class*='p-']) {
-    @apply .px-3 .py-3;
+    @apply px-3 py-3;
   }
 
-  @apply .rounded-full;
+  @apply rounded-full;
 }

src/css/components/hamburgers/_base.scss

@@ -55,7 +55,7 @@
 .hamburger-inner {
   display: block;
   top: 50%;
-  margin-top: $hamburger-layer-height / -2;
+  margin-top: calc($hamburger-layer-height / -2);
 
   &,
   &::before,

src/css/components/hamburgers/types/_elastic-r.scss

@@ -4,7 +4,7 @@
    */
   .hamburger--elastic-r {
     .hamburger-inner {
-      top: $hamburger-layer-height / 2;
+      top: calc($hamburger-layer-height / 2);
       transition-duration: 0.275s;
       transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
 

src/css/components/hamburgers/types/_elastic.scss

@@ -4,7 +4,7 @@
    */
   .hamburger--elastic {
     .hamburger-inner {
-      top: $hamburger-layer-height / 2;
+      top: calc($hamburger-layer-height / 2);
       transition-duration: 0.275s;
       transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
 

src/css/components/hamburgers/types/_slider-r.scss

@@ -4,7 +4,7 @@
    */
   .hamburger--slider-r {
     .hamburger-inner {
-      top: $hamburger-layer-height / 2;
+      top: calc($hamburger-layer-height / 2);
 
       &::before {
         top: $hamburger-layer-height + $hamburger-layer-spacing;
@@ -25,7 +25,7 @@
         transform: translate3d(0, $y-offset, 0) rotate(-45deg);
 
         &::before {
-          transform: rotate(45deg) translate3d($hamburger-layer-width / 7, $hamburger-layer-spacing * -1, 0);
+          transform: rotate(45deg) translate3d(calc($hamburger-layer-width / 7), $hamburger-layer-spacing * -1, 0);
           opacity: 0;
         }
 

src/css/components/hamburgers/types/_slider.scss

@@ -4,7 +4,7 @@
    */
   .hamburger--slider {
     .hamburger-inner {
-      top: $hamburger-layer-height / 2;
+      top: calc($hamburger-layer-height / 2);
 
       &::before {
         top: $hamburger-layer-height + $hamburger-layer-spacing;
@@ -25,7 +25,7 @@
         transform: translate3d(0, $y-offset, 0) rotate(45deg);
 
         &::before {
-          transform: rotate(-45deg) translate3d($hamburger-layer-width / -7, $hamburger-layer-spacing * -1, 0);
+          transform: rotate(-45deg) translate3d(calc($hamburger-layer-width / -7), $hamburger-layer-spacing * -1, 0);
           opacity: 0;
         }
 

src/css/components/hamburgers/types/_spring.scss

@@ -4,7 +4,7 @@
    */
   .hamburger--spring {
     .hamburger-inner {
-      top: $hamburger-layer-height / 2;
+      top: calc($hamburger-layer-height / 2);
       transition: background-color 0s 0.13s linear;
 
       &::before {

src/css/globals/_animations.scss

@@ -19,13 +19,13 @@
 .animate-bg-brand-gray-light {
   @include animate-bg;
   &:hover {
-    @apply .bg-brand-gray-light;
+    @apply bg-brand-gray-light;
   }
 }
 
 .animate-bg-brand-gray-darkest {
   @include animate-bg;
   &:hover {
-    @apply .bg-brand-gray-darkest;
+    @apply bg-brand-gray-darkest;
   }
 }

src/css/style.scss

@@ -12,51 +12,51 @@
 
 @layer base {
   h1 {
-    @apply .font-black .font-sans .text-xl;
+    @apply font-black font-sans text-xl;
   }
   h2 {
-    @apply .font-black .font-sans .text-xl;
+    @apply font-black font-sans text-xl;
   }
 
   h3 {
-    @apply .font-black .font-sans .text-xl;
+    @apply font-black font-sans text-xl;
   }
 
   p {
-    @apply .font-mono;
+    @apply font-mono;
   }
 
   .secondary-title {
-    @apply .font-black .font-sans .text-lg;
+    @apply font-black font-sans text-lg;
   }
 
   .secondary-subtitle {
-    @apply .font-light .font-sans .text-base;
+    @apply font-light font-sans text-base;
   }
 
   .h1 {
-    @apply .font-black .font-sans .text-xl;
+    @apply font-black font-sans text-xl;
   }
 
   .borderless-link-black {
-    @apply .font-black .font-sans .text-xl .bg-clip-text .text-transparent .bg-gradient-to-r .from-hubblr-blue .to-hubblr-green;
+    @apply font-black font-sans text-xl bg-clip-text text-transparent bg-gradient-to-r from-hubblr-blue to-hubblr-green;
     a {
-      @apply .font-black .font-sans .text-xl .bg-clip-text .text-transparent .bg-gradient-to-r .from-hubblr-blue .to-hubblr-green;
+      @apply font-black font-sans text-xl bg-clip-text text-transparent bg-gradient-to-r from-hubblr-blue to-hubblr-green;
 
       @screen lg {
-        @apply .text-3xl;
+        @apply text-3xl;
       }
     }
   }
 
   .swimmingunderline {
     padding-bottom: 3px;
-  background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%);
-  background-position: 0 100%;
-  background-repeat: repeat-x;
-  background-size: 3px 3px;
-  color: #000;
-  text-decoration: none;
+    background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%);
+    background-position: 0 100%;
+    background-repeat: repeat-x;
+    background-size: 3px 3px;
+    color: #000;
+    text-decoration: none;
 }
 
 .swimmingunderline:hover {