Massive code migration cleanup

Migrate to SCSS, move to named exports, add barel files, format code to be standardized, fix file naming convention, move utils to `src/utils`

gatsby-config.js

@@ -96,7 +96,8 @@ module.exports = {
           include: /\/src\/assets\/icons\/.*\.svg$/ // See below to configure properly
         }
       }
-    }
+    },
+    `gatsby-plugin-sass`
   ],
   mapping: {
     "MarkdownRemark.frontmatter.author": `AuthorsJson`,

gatsby-node.js

@@ -5,8 +5,8 @@ const { createFilePath } = require(`gatsby-source-filesystem`)
 exports.createPages = ({ graphql, actions }) => {
   const { createPage } = actions
 
-  const blogPost = path.resolve(`./src/templates/blog-post/index.js`)
+  const blogPost = path.resolve(`./src/templates/blog-post.js`)
-  const blogAuthor = path.resolve(`./src/templates/blog-author/index.js`)
+  const blogAuthor = path.resolve(`./src/templates/blog-author.js`)
   return graphql(
     `
     {

package-lock.json

@@ -4076,8 +4076,7 @@
     "abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
-      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
-      "dev": true
     },
     "accepts": {
       "version": "1.3.7",
@@ -4190,6 +4189,11 @@
       "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM="
     },
+    "amdefine": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
+      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
+    },
     "ansi-align": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.0.tgz",
@@ -4520,6 +4524,11 @@
       "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz",
       "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ=="
     },
+    "async-foreach": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
+      "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI="
+    },
     "async-limiter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz",
@@ -5858,6 +5867,14 @@
       "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.5.tgz",
       "integrity": "sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig=="
     },
+    "block-stream": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
+      "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
+      "requires": {
+        "inherits": "~2.0.0"
+      }
+    },
     "bluebird": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.3.tgz",
@@ -10700,6 +10717,17 @@
         }
       }
     },
+    "fstream": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
+      "integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "inherits": "~2.0.0",
+        "mkdirp": ">=0.5 0",
+        "rimraf": "2"
+      }
+    },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -11482,6 +11510,15 @@
         "svg-react-loader": "^0.4.4"
       }
     },
+    "gatsby-plugin-sass": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-sass/-/gatsby-plugin-sass-2.1.0.tgz",
+      "integrity": "sha512-9dnZ9jMsgrwGBN+zEkqLk6OLWhdakX1Yb/QjuREYee+EgJGEOAp4auRpVQKLcekqKdtCN+gES5BidmkY7J8zgg==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "sass-loader": "^7.0.1"
+      }
+    },
     "gatsby-plugin-sharp": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-sharp/-/gatsby-plugin-sharp-2.1.3.tgz",
@@ -11871,6 +11908,14 @@
         }
       }
     },
+    "gaze": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz",
+      "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==",
+      "requires": {
+        "globule": "^1.0.0"
+      }
+    },
     "get-caller-file": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
@@ -12071,6 +12116,16 @@
         "pinkie-promise": "^2.0.0"
       }
     },
+    "globule": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.1.tgz",
+      "integrity": "sha512-g7QtgWF4uYSL5/dn71WxubOrS7JVGCnFPEnoeChJmBnyR9Mw8nGoEwOgJL/RC2Te0WhbsEUCejfH8SZNJ+adYQ==",
+      "requires": {
+        "glob": "~7.1.1",
+        "lodash": "~4.17.10",
+        "minimatch": "~3.0.2"
+      }
+    },
     "good-listener": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
@@ -13000,6 +13055,11 @@
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
     },
+    "in-publish": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
+      "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E="
+    },
     "indent-string": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
@@ -14857,6 +14917,11 @@
       "resolved": "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.2.0.tgz",
       "integrity": "sha1-U+RI7J0mPmgyZkZ+lELSxaLvVII="
     },
+    "js-base64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
+      "integrity": "sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw=="
+    },
     "js-levenshtein": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
@@ -15378,6 +15443,11 @@
       "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=",
       "dev": true
     },
+    "lodash.tail": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.tail/-/lodash.tail-4.1.1.tgz",
+      "integrity": "sha1-0jM6NtnncXyK0vfKyv7HwytERmQ="
+    },
     "lodash.template": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.4.0.tgz",
@@ -16113,7 +16183,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mixin-object/-/mixin-object-2.0.1.tgz",
       "integrity": "sha1-T7lJRB2rGCVA8f4DW6YOGUel5X4=",
-      "dev": true,
       "requires": {
         "for-in": "^0.1.3",
         "is-extendable": "^0.1.1"
@@ -16122,8 +16191,7 @@
         "for-in": {
           "version": "0.1.8",
           "resolved": "https://registry.npmjs.org/for-in/-/for-in-0.1.8.tgz",
-          "integrity": "sha1-2Hc5COMSVhCZUrH9ubP6hn0ndeE=",
+          "integrity": "sha1-2Hc5COMSVhCZUrH9ubP6hn0ndeE="
-          "dev": true
         }
       }
     },
@@ -16202,8 +16270,7 @@
     "nan": {
       "version": "2.14.0",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz",
-      "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==",
+      "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg=="
-      "optional": true
     },
     "nanomatch": {
       "version": "1.2.13",
@@ -16316,6 +16383,50 @@
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz",
       "integrity": "sha512-MmbQJ2MTESTjt3Gi/3yG1wGpIMhUfcIypUCGtTizFR9IiccFwxSpfp0vtIZlkFclEqERemxfnSdZEMR9VqqEFQ=="
     },
+    "node-gyp": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.8.0.tgz",
+      "integrity": "sha512-3g8lYefrRRzvGeSowdJKAKyks8oUpLEd/DyPV4eMhVlhJ0aNaZqIrNUIPuEWWTAoPqyFkfGrM67MC69baqn6vA==",
+      "requires": {
+        "fstream": "^1.0.0",
+        "glob": "^7.0.3",
+        "graceful-fs": "^4.1.2",
+        "mkdirp": "^0.5.0",
+        "nopt": "2 || 3",
+        "npmlog": "0 || 1 || 2 || 3 || 4",
+        "osenv": "0",
+        "request": "^2.87.0",
+        "rimraf": "2",
+        "semver": "~5.3.0",
+        "tar": "^2.0.0",
+        "which": "1"
+      },
+      "dependencies": {
+        "nopt": {
+          "version": "3.0.6",
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
+          "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
+          "requires": {
+            "abbrev": "1"
+          }
+        },
+        "semver": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8="
+        },
+        "tar": {
+          "version": "2.2.2",
+          "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz",
+          "integrity": "sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==",
+          "requires": {
+            "block-stream": "*",
+            "fstream": "^1.0.12",
+            "inherits": "2"
+          }
+        }
+      }
+    },
     "node-int64": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
@@ -16390,6 +16501,63 @@
         "semver": "^5.3.0"
       }
     },
+    "node-sass": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.12.0.tgz",
+      "integrity": "sha512-A1Iv4oN+Iel6EPv77/HddXErL2a+gZ4uBeZUy+a8O35CFYTXhgA8MgLCWBtwpGZdCvTvQ9d+bQxX/QC36GDPpQ==",
+      "requires": {
+        "async-foreach": "^0.1.3",
+        "chalk": "^1.1.1",
+        "cross-spawn": "^3.0.0",
+        "gaze": "^1.0.0",
+        "get-stdin": "^4.0.1",
+        "glob": "^7.0.3",
+        "in-publish": "^2.0.0",
+        "lodash": "^4.17.11",
+        "meow": "^3.7.0",
+        "mkdirp": "^0.5.1",
+        "nan": "^2.13.2",
+        "node-gyp": "^3.8.0",
+        "npmlog": "^4.0.0",
+        "request": "^2.88.0",
+        "sass-graph": "^2.2.4",
+        "stdout-stream": "^1.4.0",
+        "true-case-path": "^1.0.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "cross-spawn": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
+          "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=",
+          "requires": {
+            "lru-cache": "^4.0.1",
+            "which": "^1.2.9"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+        }
+      }
+    },
     "noms": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/noms/-/noms-0.0.0.tgz",
@@ -16822,6 +16990,15 @@
       "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
       "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
     },
+    "osenv": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+      "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
+      "requires": {
+        "os-homedir": "^1.0.0",
+        "os-tmpdir": "^1.0.0"
+      }
+    },
     "p-cancelable": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-0.3.0.tgz",
@@ -19946,6 +20123,197 @@
         "xtend": "^4.0.1"
       }
     },
+    "sass-graph": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",
+      "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=",
+      "requires": {
+        "glob": "^7.0.0",
+        "lodash": "^4.0.0",
+        "scss-tokenizer": "^0.2.3",
+        "yargs": "^7.0.0"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
+          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo="
+        },
+        "find-up": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
+          "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
+          "requires": {
+            "path-exists": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "load-json-file": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+          "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "parse-json": "^2.2.0",
+            "pify": "^2.0.0",
+            "pinkie-promise": "^2.0.0",
+            "strip-bom": "^2.0.0"
+          }
+        },
+        "os-locale": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+          "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
+          "requires": {
+            "lcid": "^1.0.0"
+          }
+        },
+        "path-exists": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
+          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
+          "requires": {
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "path-type": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
+          "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "pify": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "read-pkg": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
+          "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
+          "requires": {
+            "load-json-file": "^1.0.0",
+            "normalize-package-data": "^2.3.2",
+            "path-type": "^1.0.0"
+          }
+        },
+        "read-pkg-up": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
+          "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
+          "requires": {
+            "find-up": "^1.0.0",
+            "read-pkg": "^1.0.0"
+          }
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "requires": {
+            "code-point-at": "^1.0.0",
+            "is-fullwidth-code-point": "^1.0.0",
+            "strip-ansi": "^3.0.0"
+          }
+        },
+        "strip-bom": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
+          "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
+          "requires": {
+            "is-utf8": "^0.2.0"
+          }
+        },
+        "which-module": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz",
+          "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8="
+        },
+        "yargs": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz",
+          "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=",
+          "requires": {
+            "camelcase": "^3.0.0",
+            "cliui": "^3.2.0",
+            "decamelize": "^1.1.1",
+            "get-caller-file": "^1.0.1",
+            "os-locale": "^1.4.0",
+            "read-pkg-up": "^1.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^1.0.1",
+            "set-blocking": "^2.0.0",
+            "string-width": "^1.0.2",
+            "which-module": "^1.0.0",
+            "y18n": "^3.2.1",
+            "yargs-parser": "^5.0.0"
+          }
+        },
+        "yargs-parser": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz",
+          "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=",
+          "requires": {
+            "camelcase": "^3.0.0"
+          }
+        }
+      }
+    },
+    "sass-loader": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-7.1.0.tgz",
+      "integrity": "sha512-+G+BKGglmZM2GUSfT9TLuEp6tzehHPjAMoRRItOojWIqIGPloVCMhNIQuG639eJ+y033PaGTSjLaTHts8Kw79w==",
+      "requires": {
+        "clone-deep": "^2.0.1",
+        "loader-utils": "^1.0.1",
+        "lodash.tail": "^4.1.1",
+        "neo-async": "^2.5.0",
+        "pify": "^3.0.0",
+        "semver": "^5.5.0"
+      },
+      "dependencies": {
+        "clone-deep": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-2.0.2.tgz",
+          "integrity": "sha512-SZegPTKjCgpQH63E+eN6mVEEPdQBOUzjyJm5Pora4lrwWRFS8I0QAxV/KD6vV/i0WuijHZWQC1fMsPEdxfdVCQ==",
+          "requires": {
+            "for-own": "^1.0.0",
+            "is-plain-object": "^2.0.4",
+            "kind-of": "^6.0.0",
+            "shallow-clone": "^1.0.0"
+          }
+        },
+        "for-own": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/for-own/-/for-own-1.0.0.tgz",
+          "integrity": "sha1-xjMy9BXO3EsE2/5wz4NklMU8tEs=",
+          "requires": {
+            "for-in": "^1.0.1"
+          }
+        },
+        "pify": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
+        },
+        "shallow-clone": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-1.0.0.tgz",
+          "integrity": "sha512-oeXreoKR/SyNJtRJMAKPDSvd28OqEwG4eR/xc856cRGBII7gX9lvAqDxusPm0846z/w/hWYjI1NpKwJ00NHzRA==",
+          "requires": {
+            "is-extendable": "^0.1.1",
+            "kind-of": "^5.0.0",
+            "mixin-object": "^2.0.1"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "5.1.0",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+              "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw=="
+            }
+          }
+        }
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -19984,6 +20352,25 @@
       "integrity": "sha1-Gw3mTiiMOMQn9KAf4ApGKgS5T98=",
       "dev": true
     },
+    "scss-tokenizer": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
+      "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=",
+      "requires": {
+        "js-base64": "^2.1.8",
+        "source-map": "^0.4.2"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.4.4",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+          "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
+          "requires": {
+            "amdefine": ">=0.0.4"
+          }
+        }
+      }
+    },
     "section-matter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
@@ -21006,6 +21393,14 @@
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
       "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
     },
+    "stdout-stream": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.1.tgz",
+      "integrity": "sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==",
+      "requires": {
+        "readable-stream": "^2.0.1"
+      }
+    },
     "stealthy-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",

package.json

@@ -20,6 +20,7 @@
     "gatsby-plugin-prefetch-google-fonts": "^1.4.2",
     "gatsby-plugin-react-helmet": "^3.0.12",
     "gatsby-plugin-react-svg": "^2.1.1",
+    "gatsby-plugin-sass": "^2.1.0",
     "gatsby-plugin-sharp": "^2.1.3",
     "gatsby-plugin-transition-link": "^1.12.4",
     "gatsby-remark-copy-linked-files": "^2.0.13",
@@ -31,6 +32,7 @@
     "gatsby-transformer-json": "^2.1.11",
     "gatsby-transformer-remark": "^2.3.12",
     "gatsby-transformer-sharp": "^2.1.21",
+    "node-sass": "^4.12.0",
     "prismjs": "^1.16.0",
     "react": "^16.8.6",
     "react-breakpoints": "^3.0.3",

src/assets/icons/attachment.svg

@@ -1,3 +1,5 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M23.2335 7.38826C22.305 7.38826 21.4145 7.76597 20.758 8.4383L10.0412 19.4124C8.94698 20.5328 8.33227 22.0525 8.33227 23.6371C8.33227 25.2217 8.94698 26.7413 10.0412 27.8618C11.1354 28.9823 12.6194 29.6117 14.1668 29.6117C15.7143 29.6117 17.1983 28.9823 18.2925 27.8618L29.0093 16.8877C29.4647 16.4214 30.203 16.4214 30.6584 16.8877C31.1139 17.3541 31.1139 18.1101 30.6584 18.5765L19.9417 29.5506C18.4101 31.1189 16.3328 32 14.1668 32C12.0009 32 9.92359 31.1189 8.39201 29.5506C6.86043 27.9822 6 25.8551 6 23.6371C6 21.4191 6.86043 19.292 8.39201 17.7236L19.1088 6.74954C20.2027 5.62933 21.6865 5 23.2335 5C24.7806 5 26.2643 5.62933 27.3583 6.74954C28.4522 7.86976 29.0668 9.38909 29.0668 10.9733C29.0668 12.5575 28.4522 14.0769 27.3583 15.1971L16.6298 26.1712C15.9735 26.8432 15.0834 27.2208 14.1552 27.2208C13.227 27.2208 12.3368 26.8432 11.6805 26.1712C11.0242 25.4991 10.6555 24.5876 10.6555 23.6371C10.6555 22.6866 11.0242 21.7751 11.6805 21.103L21.5815 10.9763C22.0372 10.5102 22.7755 10.5107 23.2306 10.9773C23.6858 11.4439 23.6854 12.2 23.2297 12.666L13.3297 22.7918C13.111 23.0159 12.9877 23.3203 12.9877 23.6371C12.9877 23.9541 13.1107 24.2582 13.3297 24.4824C13.5486 24.7066 13.8456 24.8326 14.1552 24.8326C14.4648 24.8326 14.7617 24.7066 14.9807 24.4824L25.7091 13.5083C26.3654 12.836 26.7345 11.9239 26.7345 10.9733C26.7345 10.0225 26.3657 9.11063 25.7091 8.4383C25.0526 7.76597 24.1621 7.38826 23.2335 7.38826Z" fill="#153E67"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M23.2335 7.38826C22.305 7.38826 21.4145 7.76597 20.758 8.4383L10.0412 19.4124C8.94698 20.5328 8.33227 22.0525 8.33227 23.6371C8.33227 25.2217 8.94698 26.7413 10.0412 27.8618C11.1354 28.9823 12.6194 29.6117 14.1668 29.6117C15.7143 29.6117 17.1983 28.9823 18.2925 27.8618L29.0093 16.8877C29.4647 16.4214 30.203 16.4214 30.6584 16.8877C31.1139 17.3541 31.1139 18.1101 30.6584 18.5765L19.9417 29.5506C18.4101 31.1189 16.3328 32 14.1668 32C12.0009 32 9.92359 31.1189 8.39201 29.5506C6.86043 27.9822 6 25.8551 6 23.6371C6 21.4191 6.86043 19.292 8.39201 17.7236L19.1088 6.74954C20.2027 5.62933 21.6865 5 23.2335 5C24.7806 5 26.2643 5.62933 27.3583 6.74954C28.4522 7.86976 29.0668 9.38909 29.0668 10.9733C29.0668 12.5575 28.4522 14.0769 27.3583 15.1971L16.6298 26.1712C15.9735 26.8432 15.0834 27.2208 14.1552 27.2208C13.227 27.2208 12.3368 26.8432 11.6805 26.1712C11.0242 25.4991 10.6555 24.5876 10.6555 23.6371C10.6555 22.6866 11.0242 21.7751 11.6805 21.103L21.5815 10.9763C22.0372 10.5102 22.7755 10.5107 23.2306 10.9773C23.6858 11.4439 23.6854 12.2 23.2297 12.666L13.3297 22.7918C13.111 23.0159 12.9877 23.3203 12.9877 23.6371C12.9877 23.9541 13.1107 24.2582 13.3297 24.4824C13.5486 24.7066 13.8456 24.8326 14.1552 24.8326C14.4648 24.8326 14.7617 24.7066 14.9807 24.4824L25.7091 13.5083C26.3654 12.836 26.7345 11.9239 26.7345 10.9733C26.7345 10.0225 26.3657 9.11063 25.7091 8.4383C25.0526 7.76597 24.1621 7.38826 23.2335 7.38826Z"
+          fill="#153E67"/>
 </svg>

src/assets/icons/back.svg

@@ -1,3 +1,5 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.0607 6.43934C19.6464 7.02513 19.6464 7.97487 19.0607 8.56066L11.1213 16.5H28.5C29.3284 16.5 30 17.1716 30 18C30 18.8284 29.3284 19.5 28.5 19.5H11.1213L19.0607 27.4393C19.6464 28.0251 19.6464 28.9749 19.0607 29.5607C18.4749 30.1464 17.5251 30.1464 16.9393 29.5607L6.43934 19.0607C5.85355 18.4749 5.85355 17.5251 6.43934 16.9393L16.9393 6.43934C17.5251 5.85355 18.4749 5.85355 19.0607 6.43934Z" fill="#153E67"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M19.0607 6.43934C19.6464 7.02513 19.6464 7.97487 19.0607 8.56066L11.1213 16.5H28.5C29.3284 16.5 30 17.1716 30 18C30 18.8284 29.3284 19.5 28.5 19.5H11.1213L19.0607 27.4393C19.6464 28.0251 19.6464 28.9749 19.0607 29.5607C18.4749 30.1464 17.5251 30.1464 16.9393 29.5607L6.43934 19.0607C5.85355 18.4749 5.85355 17.5251 6.43934 16.9393L16.9393 6.43934C17.5251 5.85355 18.4749 5.85355 19.0607 6.43934Z"
+          fill="#153E67"/>
 </svg>

src/assets/icons/check.svg

@@ -1,3 +1,5 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M31.0607 9.43934C31.6464 10.0251 31.6464 10.9749 31.0607 11.5607L14.5607 28.0607C13.9749 28.6464 13.0251 28.6464 12.4393 28.0607L4.93934 20.5607C4.35355 19.9749 4.35355 19.0251 4.93934 18.4393C5.52513 17.8536 6.47487 17.8536 7.06066 18.4393L13.5 24.8787L28.9393 9.43934C29.5251 8.85355 30.4749 8.85355 31.0607 9.43934Z" fill="#153E67"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M31.0607 9.43934C31.6464 10.0251 31.6464 10.9749 31.0607 11.5607L14.5607 28.0607C13.9749 28.6464 13.0251 28.6464 12.4393 28.0607L4.93934 20.5607C4.35355 19.9749 4.35355 19.0251 4.93934 18.4393C5.52513 17.8536 6.47487 17.8536 7.06066 18.4393L13.5 24.8787L28.9393 9.43934C29.5251 8.85355 30.4749 8.85355 31.0607 9.43934Z"
+          fill="#153E67"/>
 </svg>

src/assets/icons/collapse.svg

@@ -1,3 +1,5 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9393 12.4393C17.5251 11.8536 18.4749 11.8536 19.0607 12.4393L28.0607 21.4393C28.6464 22.0251 28.6464 22.9749 28.0607 23.5607C27.4749 24.1464 26.5251 24.1464 25.9393 23.5607L18 15.6213L10.0607 23.5607C9.47487 24.1464 8.52513 24.1464 7.93934 23.5607C7.35355 22.9749 7.35355 22.0251 7.93934 21.4393L16.9393 12.4393Z" fill="#153E67"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M16.9393 12.4393C17.5251 11.8536 18.4749 11.8536 19.0607 12.4393L28.0607 21.4393C28.6464 22.0251 28.6464 22.9749 28.0607 23.5607C27.4749 24.1464 26.5251 24.1464 25.9393 23.5607L18 15.6213L10.0607 23.5607C9.47487 24.1464 8.52513 24.1464 7.93934 23.5607C7.35355 22.9749 7.35355 22.0251 7.93934 21.4393L16.9393 12.4393Z"
+          fill="#153E67"/>
 </svg>

src/assets/icons/dark.svg

@@ -1,3 +1,5 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18 12C14.6863 12 12 14.6863 12 18C12 21.3137 14.6863 24 18 24C21.3137 24 24 21.3137 24 18C24 14.6863 21.3137 12 18 12ZM9 18C9 13.0294 13.0294 9 18 9C22.9706 9 27 13.0294 27 18C27 22.9706 22.9706 27 18 27C13.0294 27 9 22.9706 9 18Z" fill="#153E67"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M18 12C14.6863 12 12 14.6863 12 18C12 21.3137 14.6863 24 18 24C21.3137 24 24 21.3137 24 18C24 14.6863 21.3137 12 18 12ZM9 18C9 13.0294 13.0294 9 18 9C22.9706 9 27 13.0294 27 18C27 22.9706 22.9706 27 18 27C13.0294 27 9 22.9706 9 18Z"
+          fill="#153E67"/>
 </svg>

src/assets/icons/expand.svg

@@ -1,3 +1,5 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9393 23.5605C17.5251 24.1463 18.4749 24.1463 19.0607 23.5605L28.0607 14.5605C28.6464 13.9748 28.6464 13.025 28.0607 12.4392C27.4749 11.8534 26.5251 11.8534 25.9393 12.4392L18 20.3786L10.0607 12.4392C9.47487 11.8534 8.52513 11.8534 7.93934 12.4392C7.35355 13.025 7.35355 13.9748 7.93934 14.5605L16.9393 23.5605Z" fill="#153E67"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M16.9393 23.5605C17.5251 24.1463 18.4749 24.1463 19.0607 23.5605L28.0607 14.5605C28.6464 13.9748 28.6464 13.025 28.0607 12.4392C27.4749 11.8534 26.5251 11.8534 25.9393 12.4392L18 20.3786L10.0607 12.4392C9.47487 11.8534 8.52513 11.8534 7.93934 12.4392C7.35355 13.025 7.35355 13.9748 7.93934 14.5605L16.9393 23.5605Z"
+          fill="#153E67"/>
 </svg>

src/assets/icons/facebook.svg

@@ -1,3 +1,5 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.386 4.13604C17.0739 2.44821 19.3631 1.5 21.75 1.5H26.25C27.0784 1.5 27.75 2.17157 27.75 3V9C27.75 9.82843 27.0784 10.5 26.25 10.5H21.75V13.5H26.25C26.7119 13.5 27.148 13.7128 27.4323 14.0769C27.7166 14.441 27.8172 14.9157 27.7052 15.3638L26.2052 21.3638C26.0383 22.0316 25.4383 22.5 24.75 22.5H21.75V33C21.75 33.8284 21.0784 34.5 20.25 34.5H14.25C13.4216 34.5 12.75 33.8284 12.75 33V22.5H9.75C8.92157 22.5 8.25 21.8284 8.25 21V15C8.25 14.1716 8.92157 13.5 9.75 13.5H12.75V10.5C12.75 8.11305 13.6982 5.82387 15.386 4.13604ZM21.75 4.5C20.1587 4.5 18.6326 5.13214 17.5074 6.25736C16.3821 7.38258 15.75 8.9087 15.75 10.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H11.25V19.5H14.25C15.0784 19.5 15.75 20.1716 15.75 21V31.5H18.75V21C18.75 20.1716 19.4216 19.5 20.25 19.5H23.5788L24.3288 16.5H20.25C19.4216 16.5 18.75 15.8284 18.75 15V10.5C18.75 9.70435 19.0661 8.94129 19.6287 8.37868C20.1913 7.81607 20.9543 7.5 21.75 7.5H24.75V4.5H21.75Z" fill="#153E67"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M15.386 4.13604C17.0739 2.44821 19.3631 1.5 21.75 1.5H26.25C27.0784 1.5 27.75 2.17157 27.75 3V9C27.75 9.82843 27.0784 10.5 26.25 10.5H21.75V13.5H26.25C26.7119 13.5 27.148 13.7128 27.4323 14.0769C27.7166 14.441 27.8172 14.9157 27.7052 15.3638L26.2052 21.3638C26.0383 22.0316 25.4383 22.5 24.75 22.5H21.75V33C21.75 33.8284 21.0784 34.5 20.25 34.5H14.25C13.4216 34.5 12.75 33.8284 12.75 33V22.5H9.75C8.92157 22.5 8.25 21.8284 8.25 21V15C8.25 14.1716 8.92157 13.5 9.75 13.5H12.75V10.5C12.75 8.11305 13.6982 5.82387 15.386 4.13604ZM21.75 4.5C20.1587 4.5 18.6326 5.13214 17.5074 6.25736C16.3821 7.38258 15.75 8.9087 15.75 10.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H11.25V19.5H14.25C15.0784 19.5 15.75 20.1716 15.75 21V31.5H18.75V21C18.75 20.1716 19.4216 19.5 20.25 19.5H23.5788L24.3288 16.5H20.25C19.4216 16.5 18.75 15.8284 18.75 15V10.5C18.75 9.70435 19.0661 8.94129 19.6287 8.37868C20.1913 7.81607 20.9543 7.5 21.75 7.5H24.75V4.5H21.75Z"
+          fill="#153E67"/>
 </svg>

src/assets/icons/feather.svg

@@ -1,3 +1,5 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5212 4.16966C18.5511 2.14016 21.3041 1 24.1747 1C27.0453 1 29.7983 2.14016 31.8282 4.16966C33.858 6.19916 34.9983 8.95175 34.9983 11.8219C34.9983 14.6915 33.8584 17.4436 31.8294 19.4729L31.8282 19.4741L21.4131 29.9184C21.1232 30.2092 20.7294 30.3726 20.3187 30.3726H7.82214L3.63833 34.5557C3.03477 35.1592 2.05622 35.1592 1.45267 34.5557C0.849112 33.9523 0.849112 32.9739 1.45267 32.3704L5.63649 28.1873V15.6927C5.63649 15.2829 5.79932 14.8899 6.08915 14.6001L16.5212 4.16966ZM19.6772 27.2821H10.9131L14.0041 24.1916H22.759L19.6772 27.2821ZM25.8371 21.1049L29.6409 17.2904L29.6425 17.2888C31.0927 15.8389 31.9073 13.8724 31.9073 11.8219C31.9073 9.7714 31.0927 7.80489 29.6425 6.35497C28.1924 4.90505 26.2255 4.0905 24.1747 4.0905C22.1239 4.0905 20.1571 4.90505 18.7069 6.35497L8.72748 16.3328V25.0968L23.0896 10.737C23.6932 10.1335 24.6717 10.1335 25.2753 10.737C25.8788 11.3404 25.8788 12.3188 25.2753 12.9223L17.0951 21.1011H25.7279C25.7646 21.1011 25.801 21.1024 25.8371 21.1049Z" fill="#153E67"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M16.5212 4.16966C18.5511 2.14016 21.3041 1 24.1747 1C27.0453 1 29.7983 2.14016 31.8282 4.16966C33.858 6.19916 34.9983 8.95175 34.9983 11.8219C34.9983 14.6915 33.8584 17.4436 31.8294 19.4729L31.8282 19.4741L21.4131 29.9184C21.1232 30.2092 20.7294 30.3726 20.3187 30.3726H7.82214L3.63833 34.5557C3.03477 35.1592 2.05622 35.1592 1.45267 34.5557C0.849112 33.9523 0.849112 32.9739 1.45267 32.3704L5.63649 28.1873V15.6927C5.63649 15.2829 5.79932 14.8899 6.08915 14.6001L16.5212 4.16966ZM19.6772 27.2821H10.9131L14.0041 24.1916H22.759L19.6772 27.2821ZM25.8371 21.1049L29.6409 17.2904L29.6425 17.2888C31.0927 15.8389 31.9073 13.8724 31.9073 11.8219C31.9073 9.7714 31.0927 7.80489 29.6425 6.35497C28.1924 4.90505 26.2255 4.0905 24.1747 4.0905C22.1239 4.0905 20.1571 4.90505 18.7069 6.35497L8.72748 16.3328V25.0968L23.0896 10.737C23.6932 10.1335 24.6717 10.1335 25.2753 10.737C25.8788 11.3404 25.8788 12.3188 25.2753 12.9223L17.0951 21.1011H25.7279C25.7646 21.1011 25.801 21.1024 25.8371 21.1049Z"
+          fill="#153E67"/>
 </svg>

src/assets/icons/file.svg

@@ -1,4 +1,8 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5.81802 2.81802C6.66193 1.97411 7.80653 1.5 9 1.5H21C21.3978 1.5 21.7794 1.65804 22.0607 1.93934L31.0607 10.9393C31.342 11.2206 31.5 11.6022 31.5 12V30C31.5 31.1935 31.0259 32.3381 30.182 33.182C29.3381 34.0259 28.1935 34.5 27 34.5H9C7.80653 34.5 6.66193 34.0259 5.81802 33.182C4.97411 32.3381 4.5 31.1935 4.5 30V6C4.5 4.80653 4.97411 3.66193 5.81802 2.81802ZM9 4.5C8.60217 4.5 8.22064 4.65804 7.93934 4.93934C7.65804 5.22064 7.5 5.60217 7.5 6V30C7.5 30.3978 7.65804 30.7794 7.93934 31.0607C8.22064 31.342 8.60218 31.5 9 31.5H27C27.3978 31.5 27.7794 31.342 28.0607 31.0607C28.342 30.7794 28.5 30.3978 28.5 30V13.5H21C20.1716 13.5 19.5 12.8284 19.5 12V4.5H9ZM22.5 6.62132L26.3787 10.5H22.5V6.62132Z" fill="#153E67"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 12C11.1716 12 10.5 12.6716 10.5 13.5C10.5 14.3284 11.1716 15 12 15H13.5H15C15.8284 15 16.5 14.3284 16.5 13.5C16.5 12.6716 15.8284 12 15 12H13.5H12ZM10.5 19.5C10.5 18.6716 11.1716 18 12 18H24C24.8284 18 25.5 18.6716 25.5 19.5C25.5 20.3284 24.8284 21 24 21H12C11.1716 21 10.5 20.3284 10.5 19.5ZM10.5 25.5C10.5 24.6716 11.1716 24 12 24H24C24.8284 24 25.5 24.6716 25.5 25.5C25.5 26.3284 24.8284 27 24 27H12C11.1716 27 10.5 26.3284 10.5 25.5Z" fill="#153E67"/>
+          d="M5.81802 2.81802C6.66193 1.97411 7.80653 1.5 9 1.5H21C21.3978 1.5 21.7794 1.65804 22.0607 1.93934L31.0607 10.9393C31.342 11.2206 31.5 11.6022 31.5 12V30C31.5 31.1935 31.0259 32.3381 30.182 33.182C29.3381 34.0259 28.1935 34.5 27 34.5H9C7.80653 34.5 6.66193 34.0259 5.81802 33.182C4.97411 32.3381 4.5 31.1935 4.5 30V6C4.5 4.80653 4.97411 3.66193 5.81802 2.81802ZM9 4.5C8.60217 4.5 8.22064 4.65804 7.93934 4.93934C7.65804 5.22064 7.5 5.60217 7.5 6V30C7.5 30.3978 7.65804 30.7794 7.93934 31.0607C8.22064 31.342 8.60218 31.5 9 31.5H27C27.3978 31.5 27.7794 31.342 28.0607 31.0607C28.342 30.7794 28.5 30.3978 28.5 30V13.5H21C20.1716 13.5 19.5 12.8284 19.5 12V4.5H9ZM22.5 6.62132L26.3787 10.5H22.5V6.62132Z"
+          fill="#153E67"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M12 12C11.1716 12 10.5 12.6716 10.5 13.5C10.5 14.3284 11.1716 15 12 15H13.5H15C15.8284 15 16.5 14.3284 16.5 13.5C16.5 12.6716 15.8284 12 15 12H13.5H12ZM10.5 19.5C10.5 18.6716 11.1716 18 12 18H24C24.8284 18 25.5 18.6716 25.5 19.5C25.5 20.3284 24.8284 21 24 21H12C11.1716 21 10.5 20.3284 10.5 19.5ZM10.5 25.5C10.5 24.6716 11.1716 24 12 24H24C24.8284 24 25.5 24.6716 25.5 25.5C25.5 26.3284 24.8284 27 24 27H12C11.1716 27 10.5 26.3284 10.5 25.5Z"
+          fill="#153E67"/>
 </svg>

src/assets/icons/filter.svg

@@ -1,4 +1,8 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 12C4.5 11.1716 5.17157 10.5 6 10.5H30C30.8284 10.5 31.5 11.1716 31.5 12C31.5 12.8284 30.8284 13.5 30 13.5H6C5.17157 13.5 4.5 12.8284 4.5 12ZM4.5 18C4.5 17.1716 5.17157 16.5 6 16.5H24C24.8284 16.5 25.5 17.1716 25.5 18C25.5 18.8284 24.8284 19.5 24 19.5H6C5.17157 19.5 4.5 18.8284 4.5 18ZM6 22.5C5.17157 22.5 4.5 23.1716 4.5 24C4.5 24.8284 5.17157 25.5 6 25.5L17 25.5C17.8284 25.5 18.5 24.8284 18.5 24C18.5 23.1716 17.8284 22.5 17 22.5L6 22.5Z" fill="#153E67"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
-<path class="filterDropdown" d="M27.5446 28.8215L31.0209 25.3452C31.41 24.956 31.5528 24.4645 31.5027 24C31.4178 23.2111 30.7769 22.5 29.8424 22.5H22.8897C21.4049 22.5 20.6613 24.2952 21.7112 25.3452L25.1875 28.8215C25.8384 29.4724 26.8937 29.4724 27.5446 28.8215Z" fill="#153E67"/>
+          d="M4.5 12C4.5 11.1716 5.17157 10.5 6 10.5H30C30.8284 10.5 31.5 11.1716 31.5 12C31.5 12.8284 30.8284 13.5 30 13.5H6C5.17157 13.5 4.5 12.8284 4.5 12ZM4.5 18C4.5 17.1716 5.17157 16.5 6 16.5H24C24.8284 16.5 25.5 17.1716 25.5 18C25.5 18.8284 24.8284 19.5 24 19.5H6C5.17157 19.5 4.5 18.8284 4.5 18ZM6 22.5C5.17157 22.5 4.5 23.1716 4.5 24C4.5 24.8284 5.17157 25.5 6 25.5L17 25.5C17.8284 25.5 18.5 24.8284 18.5 24C18.5 23.1716 17.8284 22.5 17 22.5L6 22.5Z"
+          fill="#153E67"/>
+    <path class="filterDropdown"
+          d="M27.5446 28.8215L31.0209 25.3452C31.41 24.956 31.5528 24.4645 31.5027 24C31.4178 23.2111 30.7769 22.5 29.8424 22.5H22.8897C21.4049 22.5 20.6613 24.2952 21.7112 25.3452L25.1875 28.8215C25.8384 29.4724 26.8937 29.4724 27.5446 28.8215Z"
+          fill="#153E67"/>
 </svg>

src/assets/icons/github.svg

@@ -1,3 +1,4 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.5 28.5402C6 30.7902 6 24.7902 3 24.0402M24 33.0402V27.2352C24.0563 26.5199 23.9596 25.8009 23.7165 25.1259C23.4734 24.4509 23.0894 23.8353 22.59 23.3202C27.3 22.7952 32.25 21.0102 32.25 12.8202C32.2496 10.7259 31.444 8.71199 30 7.19519C30.6838 5.36295 30.6354 3.33771 29.865 1.54019C29.865 1.54019 28.095 1.01519 24 3.76019C20.562 2.82842 16.938 2.82842 13.5 3.76019C9.405 1.01519 7.635 1.54019 7.635 1.54019C6.86456 3.33771 6.81622 5.36295 7.5 7.19519C6.04519 8.72324 5.23878 10.7554 5.25 12.8652C5.25 20.9952 10.2 22.7802 14.91 23.3652C14.4165 23.8751 14.0359 24.4833 13.793 25.1501C13.55 25.8168 13.4502 26.5273 13.5 27.2352V33.0402" stroke="#153E67" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M13.5 28.5402C6 30.7902 6 24.7902 3 24.0402M24 33.0402V27.2352C24.0563 26.5199 23.9596 25.8009 23.7165 25.1259C23.4734 24.4509 23.0894 23.8353 22.59 23.3202C27.3 22.7952 32.25 21.0102 32.25 12.8202C32.2496 10.7259 31.444 8.71199 30 7.19519C30.6838 5.36295 30.6354 3.33771 29.865 1.54019C29.865 1.54019 28.095 1.01519 24 3.76019C20.562 2.82842 16.938 2.82842 13.5 3.76019C9.405 1.01519 7.635 1.54019 7.635 1.54019C6.86456 3.33771 6.81622 5.36295 7.5 7.19519C6.04519 8.72324 5.23878 10.7554 5.25 12.8652C5.25 20.9952 10.2 22.7802 14.91 23.3652C14.4165 23.8751 14.0359 24.4833 13.793 25.1501C13.55 25.8168 13.4502 26.5273 13.5 27.2352V33.0402"
+          stroke="#153E67" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

src/assets/icons/info.svg

@@ -1,3 +1,5 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18 4.5C10.5442 4.5 4.5 10.5442 4.5 18C4.5 25.4558 10.5442 31.5 18 31.5C25.4558 31.5 31.5 25.4558 31.5 18C31.5 10.5442 25.4558 4.5 18 4.5ZM1.5 18C1.5 8.8873 8.8873 1.5 18 1.5C27.1127 1.5 34.5 8.8873 34.5 18C34.5 27.1127 27.1127 34.5 18 34.5C8.8873 34.5 1.5 27.1127 1.5 18ZM18 16.5C18.8284 16.5 19.5 17.1716 19.5 18V24C19.5 24.8284 18.8284 25.5 18 25.5C17.1716 25.5 16.5 24.8284 16.5 24V18C16.5 17.1716 17.1716 16.5 18 16.5ZM18 13.5C18.8284 13.5 19.5 12.8284 19.5 12C19.5 11.1716 18.8284 10.5 18 10.5C17.1716 10.5 16.5 11.1716 16.5 12C16.5 12.8284 17.1716 13.5 18 13.5Z" fill="#153E67"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M18 4.5C10.5442 4.5 4.5 10.5442 4.5 18C4.5 25.4558 10.5442 31.5 18 31.5C25.4558 31.5 31.5 25.4558 31.5 18C31.5 10.5442 25.4558 4.5 18 4.5ZM1.5 18C1.5 8.8873 8.8873 1.5 18 1.5C27.1127 1.5 34.5 8.8873 34.5 18C34.5 27.1127 27.1127 34.5 18 34.5C8.8873 34.5 1.5 27.1127 1.5 18ZM18 16.5C18.8284 16.5 19.5 17.1716 19.5 18V24C19.5 24.8284 18.8284 25.5 18 25.5C17.1716 25.5 16.5 24.8284 16.5 24V18C16.5 17.1716 17.1716 16.5 18 16.5ZM18 13.5C18.8284 13.5 19.5 12.8284 19.5 12C19.5 11.1716 18.8284 10.5 18 10.5C17.1716 10.5 16.5 11.1716 16.5 12C16.5 12.8284 17.1716 13.5 18 13.5Z"
+          fill="#153E67"/>
 </svg>

src/assets/icons/instagram.svg

@@ -1,3 +1,5 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 10.5C3.75 7.18629 6.43629 4.5 9.75 4.5H24.75C28.0637 4.5 30.75 7.18629 30.75 10.5V25.5C30.75 28.8137 28.0637 31.5 24.75 31.5H9.75C6.43629 31.5 3.75 28.8137 3.75 25.5V10.5ZM9.75 1.5C4.77944 1.5 0.75 5.52944 0.75 10.5V25.5C0.75 30.4706 4.77944 34.5 9.75 34.5H24.75C29.7206 34.5 33.75 30.4706 33.75 25.5V10.5C33.75 5.52944 29.7206 1.5 24.75 1.5H9.75ZM15.2419 13.9408C16.082 13.5049 17.0383 13.3449 17.9745 13.4838C18.9296 13.6254 19.8137 14.0704 20.4964 14.7531C21.1791 15.4358 21.6242 16.32 21.7658 17.275C21.9046 18.2113 21.7447 19.1675 21.3088 20.0077C20.8728 20.8478 20.1831 21.5291 19.3376 21.9547C18.4922 22.3802 17.534 22.5283 16.5995 22.3779C15.6651 22.2276 14.8018 21.7864 14.1325 21.1171C13.4632 20.4478 13.022 19.5845 12.8716 18.65C12.7212 17.7155 12.8694 16.7574 13.2949 15.9119C13.7204 15.0665 14.4017 14.3767 15.2419 13.9408ZM18.4146 10.5162C16.8541 10.2848 15.2604 10.5514 13.8602 11.2779C12.4599 12.0045 11.3244 13.1541 10.6152 14.5632C9.90596 15.9723 9.65909 17.5691 9.90971 19.1266C10.1603 20.6841 10.8957 22.1229 12.0112 23.2384C13.1266 24.3539 14.5654 25.0892 16.1229 25.3398C17.6804 25.5905 19.2773 25.3436 20.6864 24.6344C22.0955 23.9251 23.2451 22.7896 23.9716 21.3894C24.6982 19.9891 24.9647 18.3954 24.7333 16.835C24.4973 15.2432 23.7556 13.7696 22.6178 12.6318C21.4799 11.494 20.0063 10.7523 18.4146 10.5162Z" fill="#153E67"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M3.75 10.5C3.75 7.18629 6.43629 4.5 9.75 4.5H24.75C28.0637 4.5 30.75 7.18629 30.75 10.5V25.5C30.75 28.8137 28.0637 31.5 24.75 31.5H9.75C6.43629 31.5 3.75 28.8137 3.75 25.5V10.5ZM9.75 1.5C4.77944 1.5 0.75 5.52944 0.75 10.5V25.5C0.75 30.4706 4.77944 34.5 9.75 34.5H24.75C29.7206 34.5 33.75 30.4706 33.75 25.5V10.5C33.75 5.52944 29.7206 1.5 24.75 1.5H9.75ZM15.2419 13.9408C16.082 13.5049 17.0383 13.3449 17.9745 13.4838C18.9296 13.6254 19.8137 14.0704 20.4964 14.7531C21.1791 15.4358 21.6242 16.32 21.7658 17.275C21.9046 18.2113 21.7447 19.1675 21.3088 20.0077C20.8728 20.8478 20.1831 21.5291 19.3376 21.9547C18.4922 22.3802 17.534 22.5283 16.5995 22.3779C15.6651 22.2276 14.8018 21.7864 14.1325 21.1171C13.4632 20.4478 13.022 19.5845 12.8716 18.65C12.7212 17.7155 12.8694 16.7574 13.2949 15.9119C13.7204 15.0665 14.4017 14.3767 15.2419 13.9408ZM18.4146 10.5162C16.8541 10.2848 15.2604 10.5514 13.8602 11.2779C12.4599 12.0045 11.3244 13.1541 10.6152 14.5632C9.90596 15.9723 9.65909 17.5691 9.90971 19.1266C10.1603 20.6841 10.8957 22.1229 12.0112 23.2384C13.1266 24.3539 14.5654 25.0892 16.1229 25.3398C17.6804 25.5905 19.2773 25.3436 20.6864 24.6344C22.0955 23.9251 23.2451 22.7896 23.9716 21.3894C24.6982 19.9891 24.9647 18.3954 24.7333 16.835C24.4973 15.2432 23.7556 13.7696 22.6178 12.6318C21.4799 11.494 20.0063 10.7523 18.4146 10.5162Z"
+          fill="#153E67"/>
 </svg>

src/assets/icons/light.svg

@@ -1,3 +1,5 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18 0C18.8284 0 19.5 0.671573 19.5 1.5V4.5C19.5 5.32843 18.8284 6 18 6C17.1716 6 16.5 5.32843 16.5 4.5V1.5C16.5 0.671573 17.1716 0 18 0ZM18 12C14.6863 12 12 14.6863 12 18C12 21.3137 14.6863 24 18 24C21.3137 24 24 21.3137 24 18C24 14.6863 21.3137 12 18 12ZM9 18C9 13.0294 13.0294 9 18 9C22.9706 9 27 13.0294 27 18C27 22.9706 22.9706 27 18 27C13.0294 27 9 22.9706 9 18ZM19.5 31.5C19.5 30.6716 18.8284 30 18 30C17.1716 30 16.5 30.6716 16.5 31.5V34.5C16.5 35.3284 17.1716 36 18 36C18.8284 36 19.5 35.3284 19.5 34.5V31.5ZM5.26893 5.2693C5.85472 4.68351 6.80446 4.68351 7.39025 5.2693L9.52025 7.3993C10.106 7.98508 10.106 8.93483 9.52025 9.52062C8.93446 10.1064 7.98472 10.1064 7.39893 9.52062L5.26893 7.39062C4.68314 6.80483 4.68314 5.85508 5.26893 5.2693ZM28.6012 26.4793C28.0154 25.8935 27.0657 25.8935 26.4799 26.4793C25.8941 27.0651 25.8941 28.0149 26.4799 28.6006L28.6099 30.7306C29.1957 31.3164 30.1454 31.3164 30.7312 30.7306C31.317 30.1449 31.317 29.1951 30.7312 28.6093L28.6012 26.4793ZM0 18C0 17.1716 0.671573 16.5 1.5 16.5H4.5C5.32843 16.5 6 17.1716 6 18C6 18.8284 5.32843 19.5 4.5 19.5H1.5C0.671573 19.5 0 18.8284 0 18ZM31.5 16.5C30.6716 16.5 30 17.1716 30 18C30 18.8284 30.6716 19.5 31.5 19.5H34.5C35.3284 19.5 36 18.8284 36 18C36 17.1716 35.3284 16.5 34.5 16.5H31.5ZM9.52025 26.4793C10.106 27.0651 10.106 28.0149 9.52025 28.6006L7.39025 30.7306C6.80446 31.3164 5.85472 31.3164 5.26893 30.7306C4.68314 30.1449 4.68314 29.1951 5.26893 28.6093L7.39893 26.4793C7.98472 25.8935 8.93446 25.8935 9.52025 26.4793ZM30.7312 7.39062C31.317 6.80483 31.317 5.85508 30.7312 5.2693C30.1454 4.68351 29.1957 4.68351 28.6099 5.2693L26.4799 7.3993C25.8941 7.98508 25.8941 8.93483 26.4799 9.52062C27.0657 10.1064 28.0154 10.1064 28.6012 9.52062L30.7312 7.39062Z" fill="#153E67"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M18 0C18.8284 0 19.5 0.671573 19.5 1.5V4.5C19.5 5.32843 18.8284 6 18 6C17.1716 6 16.5 5.32843 16.5 4.5V1.5C16.5 0.671573 17.1716 0 18 0ZM18 12C14.6863 12 12 14.6863 12 18C12 21.3137 14.6863 24 18 24C21.3137 24 24 21.3137 24 18C24 14.6863 21.3137 12 18 12ZM9 18C9 13.0294 13.0294 9 18 9C22.9706 9 27 13.0294 27 18C27 22.9706 22.9706 27 18 27C13.0294 27 9 22.9706 9 18ZM19.5 31.5C19.5 30.6716 18.8284 30 18 30C17.1716 30 16.5 30.6716 16.5 31.5V34.5C16.5 35.3284 17.1716 36 18 36C18.8284 36 19.5 35.3284 19.5 34.5V31.5ZM5.26893 5.2693C5.85472 4.68351 6.80446 4.68351 7.39025 5.2693L9.52025 7.3993C10.106 7.98508 10.106 8.93483 9.52025 9.52062C8.93446 10.1064 7.98472 10.1064 7.39893 9.52062L5.26893 7.39062C4.68314 6.80483 4.68314 5.85508 5.26893 5.2693ZM28.6012 26.4793C28.0154 25.8935 27.0657 25.8935 26.4799 26.4793C25.8941 27.0651 25.8941 28.0149 26.4799 28.6006L28.6099 30.7306C29.1957 31.3164 30.1454 31.3164 30.7312 30.7306C31.317 30.1449 31.317 29.1951 30.7312 28.6093L28.6012 26.4793ZM0 18C0 17.1716 0.671573 16.5 1.5 16.5H4.5C5.32843 16.5 6 17.1716 6 18C6 18.8284 5.32843 19.5 4.5 19.5H1.5C0.671573 19.5 0 18.8284 0 18ZM31.5 16.5C30.6716 16.5 30 17.1716 30 18C30 18.8284 30.6716 19.5 31.5 19.5H34.5C35.3284 19.5 36 18.8284 36 18C36 17.1716 35.3284 16.5 34.5 16.5H31.5ZM9.52025 26.4793C10.106 27.0651 10.106 28.0149 9.52025 28.6006L7.39025 30.7306C6.80446 31.3164 5.85472 31.3164 5.26893 30.7306C4.68314 30.1449 4.68314 29.1951 5.26893 28.6093L7.39893 26.4793C7.98472 25.8935 8.93446 25.8935 9.52025 26.4793ZM30.7312 7.39062C31.317 6.80483 31.317 5.85508 30.7312 5.2693C30.1454 4.68351 29.1957 4.68351 28.6099 5.2693L26.4799 7.3993C25.8941 7.98508 25.8941 8.93483 26.4799 9.52062C27.0657 10.1064 28.0154 10.1064 28.6012 9.52062L30.7312 7.39062Z"
+          fill="#153E67"/>
 </svg>

src/assets/icons/link.svg

@@ -1,3 +1,5 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M26.1587 1.50034C23.7989 1.47983 21.5255 2.38698 19.8281 4.02641L19.8126 4.04159L17.2326 6.60659C16.6451 7.19067 16.6423 8.14041 17.2264 8.7279C17.8105 9.31539 18.7602 9.31816 19.3477 8.73409L21.9196 6.17715C23.0504 5.08869 24.5628 4.48659 26.1326 4.50023C27.7058 4.5139 29.2107 5.14491 30.3231 6.25736C31.4356 7.36981 32.0666 8.87468 32.0802 10.4479C32.0939 12.0169 31.4923 13.5287 30.4047 14.6594L25.9145 19.1497L25.9143 19.1499C25.306 19.7584 24.574 20.2289 23.7679 20.5296C22.9618 20.8303 22.1004 20.9541 21.2423 20.8927C20.3841 20.8312 19.5492 20.5859 18.7941 20.1734C18.0391 19.7609 17.3816 19.1908 16.8663 18.5019C16.3701 17.8385 15.43 17.703 14.7667 18.1992C14.1033 18.6954 13.9678 19.6354 14.464 20.2988C15.237 21.3322 16.2232 22.1873 17.3558 22.8061C18.4883 23.4249 19.7407 23.7928 21.028 23.885C22.3152 23.9772 23.6072 23.7915 24.8164 23.3404C26.0256 22.8894 27.1236 22.1835 28.036 21.2708L32.5358 16.771L32.5541 16.7524C34.1935 15.055 35.1006 12.7816 35.0801 10.4218C35.0596 8.06202 34.1131 5.80471 32.4444 4.13604C30.7758 2.46737 28.5184 1.52085 26.1587 1.50034ZM16.3025 11.9157C15.0153 11.8235 13.7232 12.0092 12.5141 12.4603C11.305 12.9113 10.2068 13.6173 9.29449 14.5299L4.79468 19.0297L4.77641 19.0483C3.13698 20.7457 2.22983 23.0191 2.25034 25.3789C2.27085 27.7387 3.21737 29.996 4.88604 31.6647C6.55471 33.3333 8.81202 34.2799 11.1718 34.3004C13.5316 34.3209 15.805 33.4137 17.5024 31.7743L17.521 31.756L20.086 29.191C20.6718 28.6052 20.6718 27.6555 20.086 27.0697C19.5002 26.4839 18.5505 26.4839 17.9647 27.0697L15.4094 29.625C14.2787 30.7125 12.7669 31.3141 11.1979 31.3005C9.62468 31.2868 8.11981 30.6558 7.00736 29.5433C5.89491 28.4309 5.2639 26.926 5.25023 25.3528C5.23659 23.7838 5.83817 22.272 6.92573 21.1413L11.4162 16.6508C12.0245 16.0423 12.7565 15.5718 13.5626 15.2711C14.3687 14.9704 15.23 14.8466 16.0882 14.908C16.9464 14.9695 17.7813 15.2148 18.5363 15.6273C19.2914 16.0398 19.9488 16.6099 20.4642 17.2988C20.9604 17.9622 21.9004 18.0977 22.5638 17.6015C23.2272 17.1053 23.3627 16.1653 22.8665 15.5019C22.0935 14.4685 21.1072 13.6134 19.9747 12.9946C18.8421 12.3758 17.5898 12.0079 16.3025 11.9157Z" fill="#153E67"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M26.1587 1.50034C23.7989 1.47983 21.5255 2.38698 19.8281 4.02641L19.8126 4.04159L17.2326 6.60659C16.6451 7.19067 16.6423 8.14041 17.2264 8.7279C17.8105 9.31539 18.7602 9.31816 19.3477 8.73409L21.9196 6.17715C23.0504 5.08869 24.5628 4.48659 26.1326 4.50023C27.7058 4.5139 29.2107 5.14491 30.3231 6.25736C31.4356 7.36981 32.0666 8.87468 32.0802 10.4479C32.0939 12.0169 31.4923 13.5287 30.4047 14.6594L25.9145 19.1497L25.9143 19.1499C25.306 19.7584 24.574 20.2289 23.7679 20.5296C22.9618 20.8303 22.1004 20.9541 21.2423 20.8927C20.3841 20.8312 19.5492 20.5859 18.7941 20.1734C18.0391 19.7609 17.3816 19.1908 16.8663 18.5019C16.3701 17.8385 15.43 17.703 14.7667 18.1992C14.1033 18.6954 13.9678 19.6354 14.464 20.2988C15.237 21.3322 16.2232 22.1873 17.3558 22.8061C18.4883 23.4249 19.7407 23.7928 21.028 23.885C22.3152 23.9772 23.6072 23.7915 24.8164 23.3404C26.0256 22.8894 27.1236 22.1835 28.036 21.2708L32.5358 16.771L32.5541 16.7524C34.1935 15.055 35.1006 12.7816 35.0801 10.4218C35.0596 8.06202 34.1131 5.80471 32.4444 4.13604C30.7758 2.46737 28.5184 1.52085 26.1587 1.50034ZM16.3025 11.9157C15.0153 11.8235 13.7232 12.0092 12.5141 12.4603C11.305 12.9113 10.2068 13.6173 9.29449 14.5299L4.79468 19.0297L4.77641 19.0483C3.13698 20.7457 2.22983 23.0191 2.25034 25.3789C2.27085 27.7387 3.21737 29.996 4.88604 31.6647C6.55471 33.3333 8.81202 34.2799 11.1718 34.3004C13.5316 34.3209 15.805 33.4137 17.5024 31.7743L17.521 31.756L20.086 29.191C20.6718 28.6052 20.6718 27.6555 20.086 27.0697C19.5002 26.4839 18.5505 26.4839 17.9647 27.0697L15.4094 29.625C14.2787 30.7125 12.7669 31.3141 11.1979 31.3005C9.62468 31.2868 8.11981 30.6558 7.00736 29.5433C5.89491 28.4309 5.2639 26.926 5.25023 25.3528C5.23659 23.7838 5.83817 22.272 6.92573 21.1413L11.4162 16.6508C12.0245 16.0423 12.7565 15.5718 13.5626 15.2711C14.3687 14.9704 15.23 14.8466 16.0882 14.908C16.9464 14.9695 17.7813 15.2148 18.5363 15.6273C19.2914 16.0398 19.9488 16.6099 20.4642 17.2988C20.9604 17.9622 21.9004 18.0977 22.5638 17.6015C23.2272 17.1053 23.3627 16.1653 22.8665 15.5019C22.0935 14.4685 21.1072 13.6134 19.9747 12.9946C18.8421 12.3758 17.5898 12.0079 16.3025 11.9157Z"
+          fill="#153E67"/>
 </svg>

src/assets/icons/linkedin.svg

@@ -1,3 +1,5 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 7.5C3.75 6.67157 4.42157 6 5.25 6C6.07843 6 6.75 6.67157 6.75 7.5C6.75 8.32843 6.07843 9 5.25 9C4.42157 9 3.75 8.32843 3.75 7.5ZM5.25 3C2.76472 3 0.75 5.01472 0.75 7.5C0.75 9.98528 2.76472 12 5.25 12C7.73528 12 9.75 9.98528 9.75 7.5C9.75 5.01472 7.73528 3 5.25 3ZM23.25 15C21.2609 15 19.3532 15.7902 17.9467 17.1967C16.5402 18.6032 15.75 20.5109 15.75 22.5V31.5H18.75V22.5C18.75 21.3065 19.2241 20.1619 20.068 19.318C20.9119 18.4741 22.0565 18 23.25 18C24.4435 18 25.5881 18.4741 26.432 19.318C27.2759 20.1619 27.75 21.3065 27.75 22.5V31.5H30.75V22.5C30.75 20.5109 29.9598 18.6032 28.5533 17.1967C27.1468 15.7902 25.2391 15 23.25 15ZM23.25 12C20.4652 12 17.7945 13.1062 15.8254 15.0754C13.8562 17.0445 12.75 19.7152 12.75 22.5V33C12.75 33.8284 13.4216 34.5 14.25 34.5H20.25C21.0784 34.5 21.75 33.8284 21.75 33V22.5C21.75 22.1022 21.908 21.7206 22.1893 21.4393C22.4706 21.158 22.8522 21 23.25 21C23.6478 21 24.0294 21.158 24.3107 21.4393C24.592 21.7206 24.75 22.1022 24.75 22.5V33C24.75 33.8284 25.4216 34.5 26.25 34.5H32.25C33.0784 34.5 33.75 33.8284 33.75 33V22.5C33.75 19.7152 32.6438 17.0445 30.6746 15.0754C28.7055 13.1062 26.0348 12 23.25 12ZM0.75 15C0.75 14.1716 1.42157 13.5 2.25 13.5H8.25C9.07843 13.5 9.75 14.1716 9.75 15V33C9.75 33.8284 9.07843 34.5 8.25 34.5H2.25C1.42157 34.5 0.75 33.8284 0.75 33V15ZM3.75 16.5V31.5H6.75V16.5H3.75Z" fill="#153E67"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M3.75 7.5C3.75 6.67157 4.42157 6 5.25 6C6.07843 6 6.75 6.67157 6.75 7.5C6.75 8.32843 6.07843 9 5.25 9C4.42157 9 3.75 8.32843 3.75 7.5ZM5.25 3C2.76472 3 0.75 5.01472 0.75 7.5C0.75 9.98528 2.76472 12 5.25 12C7.73528 12 9.75 9.98528 9.75 7.5C9.75 5.01472 7.73528 3 5.25 3ZM23.25 15C21.2609 15 19.3532 15.7902 17.9467 17.1967C16.5402 18.6032 15.75 20.5109 15.75 22.5V31.5H18.75V22.5C18.75 21.3065 19.2241 20.1619 20.068 19.318C20.9119 18.4741 22.0565 18 23.25 18C24.4435 18 25.5881 18.4741 26.432 19.318C27.2759 20.1619 27.75 21.3065 27.75 22.5V31.5H30.75V22.5C30.75 20.5109 29.9598 18.6032 28.5533 17.1967C27.1468 15.7902 25.2391 15 23.25 15ZM23.25 12C20.4652 12 17.7945 13.1062 15.8254 15.0754C13.8562 17.0445 12.75 19.7152 12.75 22.5V33C12.75 33.8284 13.4216 34.5 14.25 34.5H20.25C21.0784 34.5 21.75 33.8284 21.75 33V22.5C21.75 22.1022 21.908 21.7206 22.1893 21.4393C22.4706 21.158 22.8522 21 23.25 21C23.6478 21 24.0294 21.158 24.3107 21.4393C24.592 21.7206 24.75 22.1022 24.75 22.5V33C24.75 33.8284 25.4216 34.5 26.25 34.5H32.25C33.0784 34.5 33.75 33.8284 33.75 33V22.5C33.75 19.7152 32.6438 17.0445 30.6746 15.0754C28.7055 13.1062 26.0348 12 23.25 12ZM0.75 15C0.75 14.1716 1.42157 13.5 2.25 13.5H8.25C9.07843 13.5 9.75 14.1716 9.75 15V33C9.75 33.8284 9.07843 34.5 8.25 34.5H2.25C1.42157 34.5 0.75 33.8284 0.75 33V15ZM3.75 16.5V31.5H6.75V16.5H3.75Z"
+          fill="#153E67"/>
 </svg>

src/assets/icons/mail.svg

@@ -1,3 +1,5 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.65987 8.33092L18 17.669L31.3401 8.33092C31.0921 7.84038 30.5819 7.5 30 7.5H6C5.41806 7.5 4.90794 7.84038 4.65987 8.33092ZM31.5 11.881L18.8602 20.7288C18.3437 21.0904 17.6563 21.0904 17.1398 20.7288L4.5 11.881V27C4.5 27.8216 5.17843 28.5 6 28.5H30C30.8216 28.5 31.5 27.8216 31.5 27V11.881ZM1.5 9C1.5 6.52157 3.52157 4.5 6 4.5H30C32.4784 4.5 34.5 6.52157 34.5 9V27C34.5 29.4784 32.4784 31.5 30 31.5H6C3.52157 31.5 1.5 29.4784 1.5 27V9Z" fill="#153E67"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M4.65987 8.33092L18 17.669L31.3401 8.33092C31.0921 7.84038 30.5819 7.5 30 7.5H6C5.41806 7.5 4.90794 7.84038 4.65987 8.33092ZM31.5 11.881L18.8602 20.7288C18.3437 21.0904 17.6563 21.0904 17.1398 20.7288L4.5 11.881V27C4.5 27.8216 5.17843 28.5 6 28.5H30C30.8216 28.5 31.5 27.8216 31.5 27V11.881ZM1.5 9C1.5 6.52157 3.52157 4.5 6 4.5H30C32.4784 4.5 34.5 6.52157 34.5 9V27C34.5 29.4784 32.4784 31.5 30 31.5H6C3.52157 31.5 1.5 29.4784 1.5 27V9Z"
+          fill="#153E67"/>
 </svg>

src/assets/icons/message.svg

@@ -1,3 +1,5 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18.75 6C12.5368 6 7.50004 11.0368 7.50004 17.25C7.50004 18.8293 7.82459 20.3289 8.4092 21.6888C8.68985 22.3416 8.76629 23.1132 8.52637 23.861L6.82855 29.1525L12.0209 27.44C12.7832 27.1886 13.5727 27.2674 14.2376 27.5589C15.617 28.1636 17.1423 28.5 18.75 28.5C24.9632 28.5 30 23.4632 30 17.25C30 11.0368 24.9632 6 18.75 6ZM4.50004 17.25C4.50004 9.37994 10.88 3 18.75 3C26.6201 3 33 9.37994 33 17.25C33 25.1201 26.6201 31.5 18.75 31.5C16.7198 31.5 14.785 31.0745 13.033 30.3064C13.0055 30.2943 12.9835 30.2903 12.9703 30.2895C12.9642 30.2891 12.9606 30.2894 12.9591 30.2896L4.96987 32.9245C4.43401 33.1013 3.84429 32.9623 3.44369 32.5649C3.04308 32.1676 2.89937 31.579 3.07176 31.0417L5.66933 22.9459C5.66951 22.9445 5.66978 22.9409 5.66939 22.9349C5.66855 22.9221 5.66471 22.9007 5.65309 22.8736C4.91055 21.1464 4.50004 19.2442 4.50004 17.25Z" fill="#153E67"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M18.75 6C12.5368 6 7.50004 11.0368 7.50004 17.25C7.50004 18.8293 7.82459 20.3289 8.4092 21.6888C8.68985 22.3416 8.76629 23.1132 8.52637 23.861L6.82855 29.1525L12.0209 27.44C12.7832 27.1886 13.5727 27.2674 14.2376 27.5589C15.617 28.1636 17.1423 28.5 18.75 28.5C24.9632 28.5 30 23.4632 30 17.25C30 11.0368 24.9632 6 18.75 6ZM4.50004 17.25C4.50004 9.37994 10.88 3 18.75 3C26.6201 3 33 9.37994 33 17.25C33 25.1201 26.6201 31.5 18.75 31.5C16.7198 31.5 14.785 31.0745 13.033 30.3064C13.0055 30.2943 12.9835 30.2903 12.9703 30.2895C12.9642 30.2891 12.9606 30.2894 12.9591 30.2896L4.96987 32.9245C4.43401 33.1013 3.84429 32.9623 3.44369 32.5649C3.04308 32.1676 2.89937 31.579 3.07176 31.0417L5.66933 22.9459C5.66951 22.9445 5.66978 22.9409 5.66939 22.9349C5.66855 22.9221 5.66471 22.9007 5.65309 22.8736C4.91055 21.1464 4.50004 19.2442 4.50004 17.25Z"
+          fill="#153E67"/>
 </svg>

src/assets/icons/search.svg

@@ -1,3 +1,5 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M24.9268 27.0476C22.6173 28.8952 19.6877 30 16.5 30C9.04416 30 3 23.9558 3 16.5C3 9.04416 9.04416 3 16.5 3C23.9558 3 30 9.04416 30 16.5C30 19.6874 28.8954 22.6168 27.0481 24.9262L32.5612 30.4394C33.147 31.0252 33.147 31.9749 32.5612 32.5607C31.9755 33.1465 31.0257 33.1465 30.4399 32.5607L24.9268 27.0476ZM6 16.5C6 10.701 10.701 6 16.5 6C22.299 6 27 10.701 27 16.5C27 19.3299 25.8805 21.8983 24.0602 23.7865C24.0098 23.8255 23.9612 23.8681 23.9149 23.9144C23.8686 23.9607 23.826 24.0093 23.787 24.0598C21.8987 25.8803 19.3301 27 16.5 27C10.701 27 6 22.299 6 16.5Z" fill="#153E67"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M24.9268 27.0476C22.6173 28.8952 19.6877 30 16.5 30C9.04416 30 3 23.9558 3 16.5C3 9.04416 9.04416 3 16.5 3C23.9558 3 30 9.04416 30 16.5C30 19.6874 28.8954 22.6168 27.0481 24.9262L32.5612 30.4394C33.147 31.0252 33.147 31.9749 32.5612 32.5607C31.9755 33.1465 31.0257 33.1465 30.4399 32.5607L24.9268 27.0476ZM6 16.5C6 10.701 10.701 6 16.5 6C22.299 6 27 10.701 27 16.5C27 19.3299 25.8805 21.8983 24.0602 23.7865C24.0098 23.8255 23.9612 23.8681 23.9149 23.9144C23.8686 23.9607 23.826 24.0093 23.787 24.0598C21.8987 25.8803 19.3301 27 16.5 27C10.701 27 6 22.299 6 16.5Z"
+          fill="#153E67"/>
 </svg>

src/assets/icons/share.svg

@@ -1,3 +1,5 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M27 4.5C25.3431 4.5 24 5.84315 24 7.5C24 8.02096 24.1328 8.5109 24.3664 8.93783C24.3816 8.961 24.3964 8.98471 24.4105 9.00897C24.4246 9.03305 24.4379 9.05736 24.4505 9.08188C24.9798 9.93323 25.9237 10.5 27 10.5C28.6569 10.5 30 9.15685 30 7.5C30 5.84315 28.6569 4.5 27 4.5ZM22.7371 11.7223C23.8245 12.82 25.3328 13.5 27 13.5C30.3137 13.5 33 10.8137 33 7.5C33 4.18629 30.3137 1.5 27 1.5C23.6863 1.5 21 4.18629 21 7.5C21 8.06553 21.0782 8.61279 21.2245 9.13154L13.2629 13.7777C12.1756 12.68 10.6672 12 9 12C5.68629 12 3 14.6863 3 18C3 21.3137 5.68629 24 9 24C10.6675 24 12.1761 23.3198 13.2635 22.2217L21.2264 26.8618C21.0789 27.3825 21 27.9321 21 28.5C21 31.8137 23.6863 34.5 27 34.5C30.3137 34.5 33 31.8137 33 28.5C33 25.1863 30.3137 22.5 27 22.5C25.3353 22.5 23.829 23.1779 22.742 24.2728L14.7757 19.6307C14.9218 19.1122 15 18.5652 15 18C15 17.4345 14.9218 16.8872 14.7755 16.3685L22.7371 11.7223ZM11.5496 16.4182C11.5621 16.4427 11.5754 16.467 11.5895 16.4911C11.6036 16.5153 11.6184 16.539 11.6336 16.5622C11.8672 16.9891 12 17.479 12 18C12 18.521 11.8672 19.011 11.6335 19.438C11.6181 19.4614 11.6033 19.4853 11.589 19.5098C11.5752 19.5335 11.562 19.5575 11.5497 19.5817C11.0203 20.4332 10.0764 21 9 21C7.34315 21 6 19.6569 6 18C6 16.3431 7.34315 15 9 15C10.0763 15 11.0202 15.5668 11.5496 16.4182ZM24 28.5C24 28.0123 24.1164 27.5518 24.3228 27.1447C24.3599 27.096 24.3944 27.0445 24.426 26.9902C24.4563 26.9382 24.4832 26.8851 24.5066 26.8313C25.0449 26.0284 25.9608 25.5 27 25.5C28.6569 25.5 30 26.8431 30 28.5C30 30.1569 28.6569 31.5 27 31.5C25.3431 31.5 24 30.1569 24 28.5Z" fill="#153E67"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M27 4.5C25.3431 4.5 24 5.84315 24 7.5C24 8.02096 24.1328 8.5109 24.3664 8.93783C24.3816 8.961 24.3964 8.98471 24.4105 9.00897C24.4246 9.03305 24.4379 9.05736 24.4505 9.08188C24.9798 9.93323 25.9237 10.5 27 10.5C28.6569 10.5 30 9.15685 30 7.5C30 5.84315 28.6569 4.5 27 4.5ZM22.7371 11.7223C23.8245 12.82 25.3328 13.5 27 13.5C30.3137 13.5 33 10.8137 33 7.5C33 4.18629 30.3137 1.5 27 1.5C23.6863 1.5 21 4.18629 21 7.5C21 8.06553 21.0782 8.61279 21.2245 9.13154L13.2629 13.7777C12.1756 12.68 10.6672 12 9 12C5.68629 12 3 14.6863 3 18C3 21.3137 5.68629 24 9 24C10.6675 24 12.1761 23.3198 13.2635 22.2217L21.2264 26.8618C21.0789 27.3825 21 27.9321 21 28.5C21 31.8137 23.6863 34.5 27 34.5C30.3137 34.5 33 31.8137 33 28.5C33 25.1863 30.3137 22.5 27 22.5C25.3353 22.5 23.829 23.1779 22.742 24.2728L14.7757 19.6307C14.9218 19.1122 15 18.5652 15 18C15 17.4345 14.9218 16.8872 14.7755 16.3685L22.7371 11.7223ZM11.5496 16.4182C11.5621 16.4427 11.5754 16.467 11.5895 16.4911C11.6036 16.5153 11.6184 16.539 11.6336 16.5622C11.8672 16.9891 12 17.479 12 18C12 18.521 11.8672 19.011 11.6335 19.438C11.6181 19.4614 11.6033 19.4853 11.589 19.5098C11.5752 19.5335 11.562 19.5575 11.5497 19.5817C11.0203 20.4332 10.0764 21 9 21C7.34315 21 6 19.6569 6 18C6 16.3431 7.34315 15 9 15C10.0763 15 11.0202 15.5668 11.5496 16.4182ZM24 28.5C24 28.0123 24.1164 27.5518 24.3228 27.1447C24.3599 27.096 24.3944 27.0445 24.426 26.9902C24.4563 26.9382 24.4832 26.8851 24.5066 26.8313C25.0449 26.0284 25.9608 25.5 27 25.5C28.6569 25.5 30 26.8431 30 28.5C30 30.1569 28.6569 31.5 27 31.5C25.3431 31.5 24 30.1569 24 28.5Z"
+          fill="#153E67"/>
 </svg>

src/assets/icons/site.svg

@@ -1,3 +1,5 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.8386 4.93474C8.50321 6.32396 4.45201 10.8949 3.83239 16.5H9.82514C10.1614 12.3552 11.5487 8.37663 13.8386 4.93474ZM20.6614 4.93474C22.9513 8.37663 24.3386 12.3552 24.6749 16.5H30.6676C30.048 10.8949 25.9968 6.32396 20.6614 4.93474ZM21.6636 16.5C21.2868 12.4302 19.7545 8.5529 17.25 5.3262C14.7455 8.5529 13.2132 12.4302 12.8364 16.5H21.6636ZM12.8364 19.5H21.6636C21.2868 23.5698 19.7545 27.4471 17.25 30.6738C14.7455 27.4471 13.2132 23.5698 12.8364 19.5ZM9.82514 19.5H3.83239C4.45201 25.1051 8.50321 29.676 13.8386 31.0653C11.5487 27.6234 10.1614 23.6448 9.82514 19.5ZM20.6614 31.0653C22.9513 27.6234 24.3386 23.6448 24.6749 19.5H30.6676C30.048 25.1051 25.9968 29.676 20.6614 31.0653ZM17.25 34.5C26.3627 34.5 33.75 27.1127 33.75 18C33.75 8.8873 26.3627 1.5 17.25 1.5C8.1373 1.5 0.75 8.8873 0.75 18C0.75 27.1127 8.1373 34.5 17.25 34.5Z" fill="#153E67"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M13.8386 4.93474C8.50321 6.32396 4.45201 10.8949 3.83239 16.5H9.82514C10.1614 12.3552 11.5487 8.37663 13.8386 4.93474ZM20.6614 4.93474C22.9513 8.37663 24.3386 12.3552 24.6749 16.5H30.6676C30.048 10.8949 25.9968 6.32396 20.6614 4.93474ZM21.6636 16.5C21.2868 12.4302 19.7545 8.5529 17.25 5.3262C14.7455 8.5529 13.2132 12.4302 12.8364 16.5H21.6636ZM12.8364 19.5H21.6636C21.2868 23.5698 19.7545 27.4471 17.25 30.6738C14.7455 27.4471 13.2132 23.5698 12.8364 19.5ZM9.82514 19.5H3.83239C4.45201 25.1051 8.50321 29.676 13.8386 31.0653C11.5487 27.6234 10.1614 23.6448 9.82514 19.5ZM20.6614 31.0653C22.9513 27.6234 24.3386 23.6448 24.6749 19.5H30.6676C30.048 25.1051 25.9968 29.676 20.6614 31.0653ZM17.25 34.5C26.3627 34.5 33.75 27.1127 33.75 18C33.75 8.8873 26.3627 1.5 17.25 1.5C8.1373 1.5 0.75 8.8873 0.75 18C0.75 27.1127 8.1373 34.5 17.25 34.5Z"
+          fill="#153E67"/>
 </svg>

src/assets/icons/submit.svg

@@ -1,4 +1,8 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5.81802 2.81802C6.66193 1.97411 7.80653 1.5 9 1.5H21C21.3978 1.5 21.7794 1.65804 22.0607 1.93934L31.0607 10.9393C31.342 11.2206 31.5 11.6022 31.5 12V30C31.5 31.1935 31.0259 32.3381 30.182 33.182C29.3381 34.0259 28.1935 34.5 27 34.5H9C7.80653 34.5 6.66193 34.0259 5.81802 33.182C4.97411 32.3381 4.5 31.1935 4.5 30V6C4.5 4.80653 4.97411 3.66193 5.81802 2.81802ZM9 4.5C8.60217 4.5 8.22064 4.65804 7.93934 4.93934C7.65804 5.22064 7.5 5.60217 7.5 6V30C7.5 30.3978 7.65804 30.7794 7.93934 31.0607C8.22064 31.342 8.60218 31.5 9 31.5H27C27.3978 31.5 27.7794 31.342 28.0607 31.0607C28.342 30.7794 28.5 30.3978 28.5 30V13.5H21C20.1716 13.5 19.5 12.8284 19.5 12V4.5H9ZM22.5 6.62132L26.3787 10.5H22.5V6.62132Z" fill="#153E67"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5 15C19.5 14.1716 18.8284 13.5 18 13.5C17.1716 13.5 16.5 14.1716 16.5 15V19.5H12C11.1716 19.5 10.5 20.1716 10.5 21C10.5 21.8284 11.1716 22.5 12 22.5H16.5V27C16.5 27.8284 17.1716 28.5 18 28.5C18.8284 28.5 19.5 27.8284 19.5 27V22.5H24C24.8284 22.5 25.5 21.8284 25.5 21C25.5 20.1716 24.8284 19.5 24 19.5H19.5V15Z" fill="#153E67"/>
+          d="M5.81802 2.81802C6.66193 1.97411 7.80653 1.5 9 1.5H21C21.3978 1.5 21.7794 1.65804 22.0607 1.93934L31.0607 10.9393C31.342 11.2206 31.5 11.6022 31.5 12V30C31.5 31.1935 31.0259 32.3381 30.182 33.182C29.3381 34.0259 28.1935 34.5 27 34.5H9C7.80653 34.5 6.66193 34.0259 5.81802 33.182C4.97411 32.3381 4.5 31.1935 4.5 30V6C4.5 4.80653 4.97411 3.66193 5.81802 2.81802ZM9 4.5C8.60217 4.5 8.22064 4.65804 7.93934 4.93934C7.65804 5.22064 7.5 5.60217 7.5 6V30C7.5 30.3978 7.65804 30.7794 7.93934 31.0607C8.22064 31.342 8.60218 31.5 9 31.5H27C27.3978 31.5 27.7794 31.342 28.0607 31.0607C28.342 30.7794 28.5 30.3978 28.5 30V13.5H21C20.1716 13.5 19.5 12.8284 19.5 12V4.5H9ZM22.5 6.62132L26.3787 10.5H22.5V6.62132Z"
+          fill="#153E67"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M19.5 15C19.5 14.1716 18.8284 13.5 18 13.5C17.1716 13.5 16.5 14.1716 16.5 15V19.5H12C11.1716 19.5 10.5 20.1716 10.5 21C10.5 21.8284 11.1716 22.5 12 22.5H16.5V27C16.5 27.8284 17.1716 28.5 18 28.5C18.8284 28.5 19.5 27.8284 19.5 27V22.5H24C24.8284 22.5 25.5 21.8284 25.5 21C25.5 20.1716 24.8284 19.5 24 19.5H19.5V15Z"
+          fill="#153E67"/>
 </svg>

src/assets/icons/twitter.svg

@@ -1,3 +1,5 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M21.0388 3.54037C22.612 2.93991 24.3317 2.8371 25.9652 3.24583C27.2643 3.57087 28.459 4.20692 29.4495 5.09274C30.6678 4.64496 31.8233 4.03895 32.886 3.28934C33.3969 2.92894 34.0778 2.92327 34.5947 3.27512C35.1115 3.62696 35.356 4.26251 35.208 4.87001C34.6942 6.9798 33.6643 8.92443 32.2159 10.5315C32.2382 10.7736 32.2498 11.0167 32.2506 11.2601L32.2506 11.2651C32.2506 19.2452 28.339 25.3251 22.7435 28.9726C17.1847 32.5962 9.9778 33.8193 3.26886 32.2363C2.52723 32.0613 1.90878 31.6347 1.5272 31.0061C1.15924 30.3999 1.07845 29.718 1.17598 29.1143C1.36836 27.9234 2.29906 26.7781 3.75553 26.5174C5.26371 26.2475 6.70784 25.8839 7.93771 25.4488C4.391 23.2031 2.47657 20.3209 1.58164 17.3887C0.5038 13.8572 0.950023 10.4093 1.4878 8.17894C1.77783 6.97605 2.71561 6.24764 3.74001 6.07359C4.71973 5.90713 5.76665 6.23611 6.51378 6.9945C7.61948 8.11686 8.90466 9.05526 10.3215 9.7684C12.0193 10.623 13.8642 11.133 15.7502 11.2747C15.7391 9.61021 16.2336 7.98107 17.169 6.60317C18.1148 5.20996 19.4656 4.14083 21.0388 3.54037ZM25.2371 6.15611C24.1997 5.89655 23.1076 5.96184 22.1086 6.34316C21.1096 6.72447 20.2517 7.40341 19.6511 8.28815C19.0505 9.17288 18.7361 10.2207 18.7505 11.29L18.7507 11.3101L18.7506 12.8101C18.7506 13.6234 18.1025 14.2885 17.2895 14.3096C14.4061 14.3843 11.5491 13.7449 8.97272 12.4481C7.20464 11.5582 5.85023 10.3413 4.35725 9.0819C3.90895 11.0383 3.62062 13.7923 4.45098 16.513C5.28777 19.2547 7.30544 22.1202 11.8598 24.1444C12.3575 24.3656 12.6962 24.8392 12.7447 25.3817C12.7931 25.9242 12.5437 26.4503 12.093 26.7562C10.1787 28.0556 7.24952 28.9235 4.48467 29.434C10.2695 30.6508 16.4001 29.5266 21.1052 26.4595C25.9162 23.3233 29.2498 18.1566 29.2506 11.2676C29.2494 10.9434 29.2181 10.6201 29.1573 10.3017C29.0633 9.80992 29.2208 9.30365 29.5773 8.95207C29.9115 8.62254 30.221 8.27133 30.5041 7.90134C30.1644 8.02667 29.8205 8.14176 29.4731 8.24638C28.9082 8.4165 28.296 8.23963 27.9088 7.79444C27.207 6.98757 26.2744 6.41568 25.2371 6.15611Z" fill="#153E67"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M21.0388 3.54037C22.612 2.93991 24.3317 2.8371 25.9652 3.24583C27.2643 3.57087 28.459 4.20692 29.4495 5.09274C30.6678 4.64496 31.8233 4.03895 32.886 3.28934C33.3969 2.92894 34.0778 2.92327 34.5947 3.27512C35.1115 3.62696 35.356 4.26251 35.208 4.87001C34.6942 6.9798 33.6643 8.92443 32.2159 10.5315C32.2382 10.7736 32.2498 11.0167 32.2506 11.2601L32.2506 11.2651C32.2506 19.2452 28.339 25.3251 22.7435 28.9726C17.1847 32.5962 9.9778 33.8193 3.26886 32.2363C2.52723 32.0613 1.90878 31.6347 1.5272 31.0061C1.15924 30.3999 1.07845 29.718 1.17598 29.1143C1.36836 27.9234 2.29906 26.7781 3.75553 26.5174C5.26371 26.2475 6.70784 25.8839 7.93771 25.4488C4.391 23.2031 2.47657 20.3209 1.58164 17.3887C0.5038 13.8572 0.950023 10.4093 1.4878 8.17894C1.77783 6.97605 2.71561 6.24764 3.74001 6.07359C4.71973 5.90713 5.76665 6.23611 6.51378 6.9945C7.61948 8.11686 8.90466 9.05526 10.3215 9.7684C12.0193 10.623 13.8642 11.133 15.7502 11.2747C15.7391 9.61021 16.2336 7.98107 17.169 6.60317C18.1148 5.20996 19.4656 4.14083 21.0388 3.54037ZM25.2371 6.15611C24.1997 5.89655 23.1076 5.96184 22.1086 6.34316C21.1096 6.72447 20.2517 7.40341 19.6511 8.28815C19.0505 9.17288 18.7361 10.2207 18.7505 11.29L18.7507 11.3101L18.7506 12.8101C18.7506 13.6234 18.1025 14.2885 17.2895 14.3096C14.4061 14.3843 11.5491 13.7449 8.97272 12.4481C7.20464 11.5582 5.85023 10.3413 4.35725 9.0819C3.90895 11.0383 3.62062 13.7923 4.45098 16.513C5.28777 19.2547 7.30544 22.1202 11.8598 24.1444C12.3575 24.3656 12.6962 24.8392 12.7447 25.3817C12.7931 25.9242 12.5437 26.4503 12.093 26.7562C10.1787 28.0556 7.24952 28.9235 4.48467 29.434C10.2695 30.6508 16.4001 29.5266 21.1052 26.4595C25.9162 23.3233 29.2498 18.1566 29.2506 11.2676C29.2494 10.9434 29.2181 10.6201 29.1573 10.3017C29.0633 9.80992 29.2208 9.30365 29.5773 8.95207C29.9115 8.62254 30.221 8.27133 30.5041 7.90134C30.1644 8.02667 29.8205 8.14176 29.4731 8.24638C28.9082 8.4165 28.296 8.23963 27.9088 7.79444C27.207 6.98757 26.2744 6.41568 25.2371 6.15611Z"
+          fill="#153E67"/>
 </svg>

src/assets/icons/unchecked.svg

@@ -1,7 +1,11 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="path-1-inside-1" fill="white">
+    <mask id="path-1-inside-1" fill="white">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M27 6H9C7.34315 6 6 7.34315 6 9V27C6 28.6569 7.34315 30 9 30H27C28.6569 30 30 28.6569 30 27V9C30 7.34315 28.6569 6 27 6ZM9 3C5.68629 3 3 5.68629 3 9V27C3 30.3137 5.68629 33 9 33H27C30.3137 33 33 30.3137 33 27V9C33 5.68629 30.3137 3 27 3H9Z"/>
+        <path fill-rule="evenodd" clip-rule="evenodd"
-</mask>
+              d="M27 6H9C7.34315 6 6 7.34315 6 9V27C6 28.6569 7.34315 30 9 30H27C28.6569 30 30 28.6569 30 27V9C30 7.34315 28.6569 6 27 6ZM9 3C5.68629 3 3 5.68629 3 9V27C3 30.3137 5.68629 33 9 33H27C30.3137 33 33 30.3137 33 27V9C33 5.68629 30.3137 3 27 3H9Z"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M27 6H9C7.34315 6 6 7.34315 6 9V27C6 28.6569 7.34315 30 9 30H27C28.6569 30 30 28.6569 30 27V9C30 7.34315 28.6569 6 27 6ZM9 3C5.68629 3 3 5.68629 3 9V27C3 30.3137 5.68629 33 9 33H27C30.3137 33 33 30.3137 33 27V9C33 5.68629 30.3137 3 27 3H9Z" fill="#153E67"/>
+    </mask>
-<path d="M9 9H27V3H9V9ZM9 9V9V3C5.68629 3 3 5.68629 3 9H9ZM9 27V9H3V27H9ZM9 27H9H3C3 30.3137 5.68629 33 9 33V27ZM27 27H9V33H27V27ZM27 27V33C30.3137 33 33 30.3137 33 27H27ZM27 9V27H33V9H27ZM27 9H33C33 5.68629 30.3137 3 27 3V9ZM6 9C6 7.34315 7.34315 6 9 6V0C4.02944 0 0 4.02944 0 9H6ZM6 27V9H0V27H6ZM9 30C7.34315 30 6 28.6569 6 27H0C0 31.9706 4.02944 36 9 36V30ZM27 30H9V36H27V30ZM30 27C30 28.6569 28.6569 30 27 30V36C31.9706 36 36 31.9706 36 27H30ZM30 9V27H36V9H30ZM27 6C28.6569 6 30 7.34315 30 9H36C36 4.02944 31.9706 0 27 0V6ZM9 6H27V0H9V6Z" fill="#153E67" mask="url(#path-1-inside-1)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M27 6H9C7.34315 6 6 7.34315 6 9V27C6 28.6569 7.34315 30 9 30H27C28.6569 30 30 28.6569 30 27V9C30 7.34315 28.6569 6 27 6ZM9 3C5.68629 3 3 5.68629 3 9V27C3 30.3137 5.68629 33 9 33H27C30.3137 33 33 30.3137 33 27V9C33 5.68629 30.3137 3 27 3H9Z"
+          fill="#153E67"/>
+    <path d="M9 9H27V3H9V9ZM9 9V9V3C5.68629 3 3 5.68629 3 9H9ZM9 27V9H3V27H9ZM9 27H9H3C3 30.3137 5.68629 33 9 33V27ZM27 27H9V33H27V27ZM27 27V33C30.3137 33 33 30.3137 33 27H27ZM27 9V27H33V9H27ZM27 9H33C33 5.68629 30.3137 3 27 3V9ZM6 9C6 7.34315 7.34315 6 9 6V0C4.02944 0 0 4.02944 0 9H6ZM6 27V9H0V27H6ZM9 30C7.34315 30 6 28.6569 6 27H0C0 31.9706 4.02944 36 9 36V30ZM27 30H9V36H27V30ZM30 27C30 28.6569 28.6569 30 27 30V36C31.9706 36 36 31.9706 36 27H30ZM30 9V27H36V9H30ZM27 6C28.6569 6 30 7.34315 30 9H36C36 4.02944 31.9706 0 27 0V6ZM9 6H27V0H9V6Z"
+          fill="#153E67" mask="url(#path-1-inside-1)"/>
 </svg>

src/components/dropdown-button/dropdown-button.js

@@ -0,0 +1,262 @@
+import React, { useMemo, useRef } from "react"
+import classNames from "classnames"
+import posed from "react-pose"
+
+import filterStyles from "./dropdown-button.module.scss"
+
+import FilterIcon from "../../../assets/icons/filter.svg"
+
+import { useSelectRef } from "../../utils/a11y/useSelectRef"
+import { useWindowSize } from "../../utils/useWindowSize"
+import { useAfterInit } from "../../utils/useAfterInit"
+
+const FilterListItem = ({ tag, index, active, expanded, selectIndex }) => {
+  const liClassName = classNames(filterStyles.option, {
+    [filterStyles.active]: active.layout === index,
+    [filterStyles.selected]: tag.selected,
+    [filterStyles.expanded]: expanded,
+  })
+  return (
+    <li className={liClassName}
+        role="option"
+        onClick={e => expanded && selectIndex(index, e, e.type)}
+        id={tag.id}
+        aria-selected={tag.selected}>
+      <span>{tag.val}</span>
+    </li>
+  )
+}
+
+const FilterDisplaySpan = posed.span({
+  initial: {
+    width: props => props.wiidth || 0,
+    height: props => props.heiight,
+  },
+})
+
+const ListIdBox = posed.ul({
+  expanded: {
+    height: "auto",
+  },
+  hidden: {
+    height: props => props.heiight,
+  },
+})
+
+
+/**
+ *
+ * @param valArr
+ * @param {React.ReactElement} childComp
+ * @param {'single' | 'mutli' | false} allowSelect
+ * @param onPress
+ * @returns {*}
+ * @constructor
+ */
+export const DropdownButton = ({ valArr = [], childComp, allowSelect, onPress }) => {
+  const {
+    ref: listBoxRef,
+    active,
+    values,
+    selected,
+    selectIndex,
+    expanded,
+    usedKeyboardLast,
+    parentRef,
+    buttonProps,
+  } = useSelectRef(valArr, allowSelect, onPress)
+  const shouldShowFilterMsg = expanded || !selected.length
+
+  /**
+   * Refs
+   */
+  const filterTextRef = useRef()
+  const appliedFiltersTextRef = useRef()
+  const btnRef = useRef()
+  const containerRef = useRef()
+
+  const windowSize = useWindowSize(150)
+
+  /**
+   * Value calcs
+   */
+  const appliedTagsStr = useMemo(() => {
+    if (!selected.length) return ""
+    return selected.map(v => v.val).join(", ")
+  }, [selected])
+
+  /**
+   * Bounding Box Matches
+   */
+
+    // Make bounding boxes work properly
+  const afterInit = useAfterInit()
+
+  const currentSpanHeight = useMemo(() => {
+    if (!filterTextRef.current || !filterTextRef.current) return 0
+    const filtTxtBound = filterTextRef.current.getBoundingClientRect()
+    const appliedFiltBound = appliedFiltersTextRef.current.getBoundingClientRect()
+    return filtTxtBound.height < appliedFiltBound.height ? appliedFiltBound.height : filtTxtBound.height
+  }, [
+    appliedFiltersTextRef,
+    filterTextRef,
+    afterInit,
+    windowSize,
+  ])
+
+  const currentBtnHeight = useMemo(() => {
+    if (!btnRef.current) return 0
+    const btnRefBound = btnRef.current.getBoundingClientRect()
+    return btnRefBound.height
+  }, [
+    afterInit,
+    windowSize,
+  ])
+
+  const currentSpanWidth = useMemo(() => {
+    if (!filterTextRef.current || !filterTextRef.current) return 0
+    if (shouldShowFilterMsg) {
+      const filtTxtBound = filterTextRef.current.getBoundingClientRect()
+      let toReturn = filtTxtBound.width
+      if (expanded) {
+        toReturn += 100
+      }
+      return toReturn
+    }
+
+    const appliedFiltBound = appliedFiltersTextRef.current.getBoundingClientRect()
+    return appliedFiltBound.width
+  }, [
+    expanded,
+    (shouldShowFilterMsg && shouldShowFilterMsg.current),
+    (appliedFiltersTextRef && appliedFiltersTextRef.current),
+    filterTextRef,
+    afterInit,
+    windowSize,
+  ])
+
+  const maxSpanWidth = useMemo(() => {
+    if (!containerRef.current) return 0
+    const containerRefBounding = containerRef.current.getBoundingClientRect()
+    return containerRefBounding.width
+  }, [
+    containerRef,
+    afterInit,
+    windowSize,
+  ])
+
+  /**
+   * Class names
+   */
+  const containerClassName = useMemo(() => classNames({
+    [filterStyles.expanded]: expanded,
+    [filterStyles.container]: true,
+  }), [expanded])
+
+  const filterIconClasses = useMemo(() => classNames({
+    expandedIcon: expanded,
+    [filterStyles.icon]: true,
+  }), [expanded])
+
+  const listBoxClasses = useMemo(() => classNames({
+    [filterStyles.hasTags]: !!selected.length,
+    [filterStyles.listbox]: true,
+    [filterStyles.isKeyboard]: usedKeyboardLast,
+  }), [
+    expanded,
+    usedKeyboardLast,
+    selected,
+  ])
+
+  const filterTextClasses = useMemo(() => classNames({
+    [filterStyles.show]: shouldShowFilterMsg,
+    [filterStyles.placeholder]: true,
+  }), [shouldShowFilterMsg])
+
+  const appliedStrClasses = useMemo(() => classNames({
+    [filterStyles.show]: !shouldShowFilterMsg,
+    [filterStyles.appliedTags]: true,
+  }), [shouldShowFilterMsg])
+
+  return (
+    <div className={containerClassName} ref={containerRef}>
+      <div className={filterStyles.buttonContainer} ref={parentRef}>
+        <span id="exp_elem" className="visually-hidden">
+          Choose a tag to filter by:
+        </span>
+        <button
+          ref={btnRef}
+          className={filterStyles.filterButton}
+          aria-haspopup="listbox"
+          aria-labelledby="exp_elem filter-button"
+          id="filter-button"
+          {...buttonProps}
+        >
+          {
+            <FilterIcon className={filterIconClasses}
+                        aria-hidden={true}/>
+          }
+          <FilterDisplaySpan className={filterStyles.textContainer}
+                             heiight={currentSpanHeight}
+                             pose="initial"
+                             poseKey={currentSpanWidth}
+                             wiidth={currentSpanWidth}>
+           <span
+             ref={filterTextRef}
+             aria-hidden={true}
+             className={filterTextClasses}
+           >
+             Filters
+           </span>
+            <span
+              ref={appliedFiltersTextRef}
+              className={appliedStrClasses}
+              style={{ maxWidth: maxSpanWidth }}
+            >
+              {appliedTagsStr}
+            </span>
+          </FilterDisplaySpan>
+        </button>
+        <ListIdBox
+          id="listBoxID"
+          role="listbox"
+          ref={listBoxRef}
+          className={listBoxClasses}
+          aria-labelledby="exp_elem"
+          tabIndex={-1}
+          aria-multiselectable="true"
+          aria-activedescendant={active && active.id}
+          heiight={currentBtnHeight}
+          poseKey={currentBtnHeight}
+          pose={expanded ? "expanded" : "hidden"}
+        >
+          <div className={filterStyles.maxHeightHideContainer}>
+            <div className={filterStyles.spacer}/>
+            {
+              values.map((tag, index) => (
+                <FilterListItem
+                  tag={tag}
+                  key={tag.id}
+                  index={index}
+                  expanded={expanded}
+                  selectIndex={selectIndex}
+                  active={active}
+                />
+              ))
+            }
+          </div>
+        </ListIdBox>
+      </div>
+
+
+      <button aria-expanded="true" aria-haspopup="menu"
+              id="button-befk28h8"></button>
+
+      <div role="menu" aria-labelledby="button-befk28h8">
+        <div role="menuitem"/>
+      </div>
+
+
+    </div>
+  )
+}

src/components/dropdown-button/dropdown-button.module.scss

@@ -0,0 +1,168 @@
+.container {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.buttonContainer {
+  position: relative;
+  max-width: 100%;
+}
+
+.filterButton {
+  cursor: pointer;
+  appearance: none;
+  max-width: 100%;
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  padding: 8px 16px 8px 8px;
+  font-size: var(--filterBarFontSize);
+  line-height: var(--filterBarFontSize);
+  color: var(--darkPrimary);
+  border: none;
+  background: transparent;
+  z-index: 2;
+  position: relative;
+  overflow: hidden;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.filterButton .textContainer {
+  position: relative;
+}
+
+.filterButton .appliedTags, .filterButton .placeholder {
+  position: absolute;
+}
+
+.filterButton .placeholder, .filterButton .appliedTags {
+  transition: top 350ms var(--animStyle);
+  top: 0;
+  left: 0;
+}
+
+.appliedTags {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.placeholder:not(.show) {
+  top: 40px;
+}
+
+.appliedTags:not(.show) {
+  top: -40px;
+}
+
+.filterButton .icon {
+  margin-right: 16px;
+  flex-shrink: 0;
+  height: var(--filterBarIconSize);
+  width: var(--filterBarIconSize);
+}
+
+.listbox {
+  outline: none;
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 0;
+  border-radius: var(--cardRadius);
+  z-index: 1;
+  margin: 0;
+  padding: 0;
+  border: 1px solid transparent;
+  transition: background var(--animSpeed) var(--animStyle),
+  box-shadow var(--animSpeed) var(--animStyle),
+  border-color var(--animSpeed) var(--animStyle);
+}
+
+.listbox:not(.expanded):hover, .container.expanded .listbox, .container:not(.expanded) .filterButton:hover + .listbox {
+  background: var(--cardActiveBackground);
+  box-shadow: var(--cardActiveBoxShadow);
+}
+
+.container:not(.expanded) .listbox.hasTags {
+  border: var(--cardOutlineStyle);
+}
+
+.listbox .spacer {
+  height: 48px;
+}
+
+.option:first-of-type {
+  margin-top: -14px !important;
+}
+
+.option {
+  display: flex;
+  flex-wrap: nowrap;
+  align-content: center;
+  cursor: pointer;
+  padding: 2px 0;
+  margin: 2px 0;
+  color: rgba(0, 0, 0, 0.58);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  transition: opacity var(--animSpeed) var(--animStyle),
+  box-shadow 60ms var(--animStyle);
+  border-radius: 4px;
+}
+
+.option::before {
+  height: 22px;
+  width: 22px;
+  background: transparent;
+  border-radius: 8px;
+  -webkit-appearance: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  margin-right: 14px;
+  flex-shrink: 0;
+}
+
+.option:not(.selected)::before {
+  content: ' ';
+  box-sizing: border-box;
+  border: 3px solid rgba(0, 0, 0, 0.58);
+}
+
+.option.selected::before {
+  content: '✔️';
+  font-size: 26px;
+  line-height: 26px;
+  color: #153E67;
+}
+
+.option:not(.expanded) {
+  opacity: 0;
+}
+
+.option span {
+  display: inline-flex;
+  align-items: center;
+}
+
+.option.selected {
+  color: var(--darkPrimary);
+}
+
+.isKeyboard .option.active {
+  box-shadow: 0 0 1px 1px var(--primary);
+}
+
+.option.active {
+  color: black;
+}
+
+.maxHeightHideContainer {
+  overflow: hidden;
+  max-height: 100%;
+  padding: 2px 6px 6px;
+}

src/components/dropdown-button/index.js

@@ -1,265 +1 @@
-import React, { useEffect, useMemo, useRef, useState } from "react"
+export * from "./dropdown-button"
-import classNames from "classnames"
-import posed from "react-pose"
-
-import filterStyles from "./style.module.css"
-
-import FilterIcon from "../../../assets/icons/filter.svg"
-
-import { useSelectRef } from "../../utils/a11y/useSelectRef"
-import { useWindowSize } from "../../utils/useWindowSize"
-import { useAfterInit } from "../../utils/useAfterInit"
-
-const FilterListItem = ({ tag, index, active, expanded, selectIndex }) => {
-  const liClassName = classNames(filterStyles.option, {
-    [filterStyles.active]: active.index === index,
-    [filterStyles.selected]: tag.selected,
-    [filterStyles.expanded]: expanded,
-  })
-  return (
-    <li className={liClassName}
-        role="option"
-        onClick={e => expanded && selectIndex(index, e, e.type)}
-        id={tag.id}
-        aria-selected={tag.selected}>
-      <span>{tag.val}</span>
-    </li>
-  )
-}
-
-const FilterDisplaySpan = posed.span({
-  initial: {
-    width: props => props.wiidth || 0,
-    height: props => props.heiight,
-  },
-})
-
-const ListIdBox = posed.ul({
-  expanded: {
-    height: "auto",
-  },
-  hidden: {
-    height: props => props.heiight,
-  },
-})
-
-
-/**
- *
- * @param valArr
- * @param {React.ReactElement} childComp
- * @param {'single' | 'mutli' | false} allowSelect
- * @param onPress
- * @returns {*}
- * @constructor
- */
-const DropdownButton = ({ valArr = [], childComp, allowSelect, onPress }) => {
-  const {
-    ref: listBoxRef,
-    active,
-    values,
-    selected,
-    selectIndex,
-    expanded,
-    usedKeyboardLast,
-    parentRef,
-    buttonProps,
-  } = useSelectRef(valArr, allowSelect, onPress)
-  const shouldShowFilterMsg = expanded || !selected.length
-
-  /**
-   * Refs
-   */
-  const filterTextRef = useRef()
-  const appliedFiltersTextRef = useRef()
-  const btnRef = useRef()
-  const containerRef = useRef();
-
-  const windowSize = useWindowSize(150);
-
-  /**
-   * Value calcs
-   */
-  const appliedTagsStr = useMemo(() => {
-    if (!selected.length) return ""
-    return selected.map(v => v.val).join(", ")
-  }, [selected])
-
-  /**
-   * Bounding Box Matches
-   */
-
-  // Make bounding boxes work properly
-  const afterInit = useAfterInit()
-
-  const currentSpanHeight = useMemo(() => {
-    if (!filterTextRef.current || !filterTextRef.current) return 0
-    const filtTxtBound = filterTextRef.current.getBoundingClientRect()
-    const appliedFiltBound = appliedFiltersTextRef.current.getBoundingClientRect()
-    return filtTxtBound.height < appliedFiltBound.height ? appliedFiltBound.height : filtTxtBound.height
-  }, [
-    appliedFiltersTextRef,
-    filterTextRef,
-    afterInit,
-    windowSize
-  ])
-
-  const currentBtnHeight = useMemo(() => {
-    if (!btnRef.current) return 0
-    const btnRefBound = btnRef.current.getBoundingClientRect()
-    return btnRefBound.height
-  }, [
-    afterInit,
-    windowSize
-  ])
-
-  const currentSpanWidth = useMemo(() => {
-    if (!filterTextRef.current || !filterTextRef.current) return 0
-    if (shouldShowFilterMsg) {
-      const filtTxtBound = filterTextRef.current.getBoundingClientRect()
-      let toReturn = filtTxtBound.width
-      if (expanded) {
-        toReturn += 100
-      }
-      return toReturn
-    }
-
-    const appliedFiltBound = appliedFiltersTextRef.current.getBoundingClientRect()
-    return appliedFiltBound.width
-  }, [
-    expanded,
-    (shouldShowFilterMsg && shouldShowFilterMsg.current),
-    (appliedFiltersTextRef && appliedFiltersTextRef.current),
-    filterTextRef,
-    afterInit,
-    windowSize
-  ])
-
-  const maxSpanWidth = useMemo(() => {
-    if (!containerRef.current) return 0;
-    const containerRefBounding = containerRef.current.getBoundingClientRect()
-    return containerRefBounding.width;
-  }, [containerRef, afterInit, windowSize])
-
-  /**
-   * Class names
-   */
-  const containerClassName = useMemo(() => classNames({
-    [filterStyles.expanded]: expanded,
-    [filterStyles.container]: true,
-  }), [expanded])
-
-  const filterIconClasses = useMemo(() => classNames({
-    expandedIcon: expanded,
-    [filterStyles.icon]: true,
-  }), [expanded])
-
-  const listBoxClasses = useMemo(() => classNames({
-    [filterStyles.hasTags]: !!selected.length,
-    [filterStyles.listbox]: true,
-    [filterStyles.isKeyboard]: usedKeyboardLast,
-  }), [
-    expanded,
-    usedKeyboardLast,
-    selected,
-  ])
-
-  const filterTextClasses = useMemo(() => classNames({
-    [filterStyles.show]: shouldShowFilterMsg,
-    [filterStyles.placeholder]: true,
-  }), [shouldShowFilterMsg])
-
-  const appliedStrClasses = useMemo(() => classNames({
-    [filterStyles.show]: !shouldShowFilterMsg,
-    [filterStyles.appliedTags]: true,
-  }), [shouldShowFilterMsg])
-
-  return (
-    <div className={containerClassName} ref={containerRef}>
-      <div className={filterStyles.buttonContainer} ref={parentRef}>
-        <span id="exp_elem" className="visually-hidden">
-          Choose a tag to filter by:
-        </span>
-        <button
-          ref={btnRef}
-          className={filterStyles.filterButton}
-          aria-haspopup="listbox"
-          aria-labelledby="exp_elem filter-button"
-          id="filter-button"
-          {...buttonProps}
-        >
-          {
-            <FilterIcon className={filterIconClasses}
-                        aria-hidden={true}/>
-          }
-          <FilterDisplaySpan className={filterStyles.textContainer}
-                             heiight={currentSpanHeight}
-                             pose="initial"
-                             poseKey={currentSpanWidth}
-                             wiidth={currentSpanWidth}>
-           <span
-             ref={filterTextRef}
-             aria-hidden={true}
-             className={filterTextClasses}
-           >
-             Filters
-           </span>
-            <span
-              ref={appliedFiltersTextRef}
-              className={appliedStrClasses}
-              style={{maxWidth: maxSpanWidth}}
-            >
-              {appliedTagsStr}
-            </span>
-          </FilterDisplaySpan>
-        </button>
-        <ListIdBox
-          id="listBoxID"
-          role="listbox"
-          ref={listBoxRef}
-          className={listBoxClasses}
-          aria-labelledby="exp_elem"
-          tabIndex={-1}
-          aria-multiselectable="true"
-          aria-activedescendant={active && active.id}
-          heiight={currentBtnHeight}
-          poseKey={currentBtnHeight}
-          pose={expanded ? "expanded" : "hidden"}
-        >
-          <div className={filterStyles.maxHeightHideContainer}>
-            <div className={filterStyles.spacer}/>
-            {
-              values.map((tag, index) => (
-                <FilterListItem
-                  tag={tag}
-                  key={tag.id}
-                  index={index}
-                  expanded={expanded}
-                  selectIndex={selectIndex}
-                  active={active}
-                />
-              ))
-            }
-          </div>
-        </ListIdBox>
-      </div>
-
-
-
-
-      <button aria-expanded="true" aria-haspopup="menu"
-              id="button-befk28h8"></button>
-
-      <div role="menu" aria-labelledby="button-befk28h8">
-        <div role="menuitem"/>
-      </div>
-
-
-
-
-
-    </div>
-  )
-}
-
-export default DropdownButton

src/components/dropdown-button/style.module.css

@@ -1,168 +0,0 @@
-.container {
-    display: flex;
-    justify-content: flex-end;
-}
-
-.buttonContainer {
-    position: relative;
-    max-width: 100%;
-}
-
-.filterButton {
-    cursor: pointer;
-    appearance: none;
-    max-width: 100%;
-    display: flex;
-    justify-content: center;
-    height: 100%;
-    padding: 8px 16px 8px 8px;
-    font-size: var(--filterBarFontSize);
-    line-height: var(--filterBarFontSize);
-    color: var(--darkPrimary);
-    border: none;
-    background: transparent;
-    z-index: 2;
-    position: relative;
-    overflow: hidden;
-    flex-wrap: nowrap;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.filterButton .textContainer {
-    position: relative;
-}
-
-.filterButton .appliedTags, .filterButton .placeholder {
-    position: absolute;
-}
-
-.filterButton .placeholder, .filterButton .appliedTags {
-    transition: top 350ms var(--animStyle);
-    top: 0;
-    left: 0;
-}
-
-.appliedTags {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-
-.placeholder:not(.show) {
-    top: 40px;
-}
-
-.appliedTags:not(.show) {
-    top: -40px;
-}
-
-.filterButton .icon {
-    margin-right: 16px;
-    flex-shrink: 0;
-    height: var(--filterBarIconSize);
-    width: var(--filterBarIconSize);
-}
-
-.listbox {
-    outline: none;
-    position: absolute;
-    width: 100%;
-    left: 0;
-    top: 0;
-    border-radius: var(--cardRadius);
-    z-index: 1;
-    margin: 0;
-    padding: 0;
-    border: 1px solid transparent;
-    transition: background var(--animSpeed) var(--animStyle),
-                box-shadow var(--animSpeed) var(--animStyle),
-                border-color var(--animSpeed) var(--animStyle);
-}
-
-.listbox:not(.expanded):hover, .container.expanded .listbox, .container:not(.expanded) .filterButton:hover + .listbox {
-    background: var(--cardActiveBackground);
-    box-shadow: var(--cardActiveBoxShadow);
-}
-
-.container:not(.expanded) .listbox.hasTags {
-    border: var(--cardOutlineStyle);
-}
-
-.listbox .spacer {
-    height: 48px;
-}
-
-.option:first-of-type {
-    margin-top: -14px !important;
-}
-
-.option {
-    display: flex;
-    flex-wrap: nowrap;
-    align-content: center;
-    cursor: pointer;
-    padding: 2px 0;
-    margin: 2px 0;
-    color: rgba(0, 0, 0, 0.58);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    transition: opacity var(--animSpeed) var(--animStyle),
-    box-shadow 60ms var(--animStyle);
-    border-radius: 4px;
-}
-
-.option::before {
-    height: 22px;
-    width: 22px;
-    background: transparent;
-    border-radius: 8px;
-    -webkit-appearance: none;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    margin-right: 14px;
-    flex-shrink: 0;
-}
-
-.option:not(.selected)::before {
-    content: ' ';
-    box-sizing: border-box;
-    border: 3px solid rgba(0, 0, 0, 0.58);
-}
-
-.option.selected::before {
-    content: '✔️';
-    font-size: 26px;
-    line-height: 26px;
-    color: #153E67;
-}
-
-.option:not(.expanded) {
-    opacity: 0;
-}
-
-.option span {
-    display: inline-flex;
-    align-items: center;
-}
-
-.option.selected {
-    color: var(--darkPrimary);
-}
-
-.isKeyboard .option.active {
-    box-shadow: 0 0 1px 1px var(--primary);
-}
-
-.option.active {
-    color: black;
-}
-
-.maxHeightHideContainer {
-    overflow: hidden;
-    max-height: 100%;
-    padding: 2px 6px 6px;
-}

src/components/filter-search-bar/filter-listbox/filter-listbox.js

@@ -0,0 +1,281 @@
+/**
+ * ⚠ A WARNING TO ALL YE WHO TRAVEL NEAR ⚠️
+ * Life would be dull if we never explored, never played
+ * However, deadlines near ever-closer and when one's played too long, they may
+ * forget to put away their toys in an orderly manor. This is what's occurred
+ *
+ * It is for this reason that this code is deemed a hazard to one's health.
+ * Ye've been warned
+ *
+ * This is a hand-spun component to match the guidelines for a listbox ALA w3 guidelines
+ * @see https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html
+ *
+ * ✅ Escape - Collapse the dropdown
+ * ✅ Up - Focus previous item
+ * ✅ Down - Focus next item
+ * ✅ Home - Goes to first item
+ * ✅ End - Goes to last item
+ * ✅ Space - Toggles selection of item
+ * ✅ Shift + Down - Focuses and selects next item
+ * ✅ Shift + Up - Focuses and selects previous item
+ * ✅ Ctrl + Shift + Home - Selects from the focused option to start of list
+ * ✅ Ctrl + Shift + End - Selects from the focused option to end of list
+ * ✅ Ctrl + A - Toggles selection of all
+ * 🔲 Click outside this component to close
+ * Am I supposed to focus lock w/ tab?
+ * 🔲 If so, add that
+ * 🔲 If not, close on `blur`
+ */
+
+/**
+ * "Filters"
+ * Click to expand
+ * Clicking filters won't do anything
+ * After not expanded, show the filters by animating away "filters"
+ * If nothing is selected, don't animate away "Filters"
+ */
+
+import React, { useMemo, useRef } from "react"
+import classNames from "classnames"
+import posed from "react-pose"
+
+import filterStyles from "./filter-listbox.module.scss"
+
+import FilterIcon from "../../../assets/icons/filter.svg"
+
+import { useSelectRef } from "../../../utils/a11y/useSelectRef"
+import { useWindowSize } from "../../../utils/useWindowSize"
+import { useAfterInit } from "../../../utils/useAfterInit"
+
+const FilterListItem = ({ tag, index, active, expanded, selectIndex }) => {
+  const liClassName = classNames(filterStyles.option, {
+    [filterStyles.active]: active.layout === index,
+    [filterStyles.selected]: tag.selected,
+    [filterStyles.expanded]: expanded,
+  })
+  return (
+    <li className={liClassName}
+        role="option"
+        onClick={e => expanded && selectIndex(index, e, e.type)}
+        id={tag.id}
+        aria-selected={tag.selected}>
+      <span>{tag.val}</span>
+    </li>
+  )
+}
+
+const FilterDisplaySpan = posed.span({
+  initial: {
+    width: props => props.wiidth || 0,
+    height: props => props.heiight,
+  },
+})
+
+const ListIdBox = posed.ul({
+  expanded: {
+    height: "auto",
+  },
+  hidden: {
+    height: props => props.heiight,
+  },
+})
+
+
+export const FilterListbox = ({ tags = [], className }) => {
+  const {
+    ref: listBoxRef,
+    active,
+    values,
+    selected,
+    selectIndex,
+    expanded,
+    usedKeyboardLast,
+    parentRef,
+    buttonProps,
+  } = useSelectRef(tags, "multi")
+  const shouldShowFilterMsg = expanded || !selected.length
+
+  /**
+   * Refs
+   */
+  const filterTextRef = useRef()
+  const appliedFiltersTextRef = useRef()
+  const btnRef = useRef()
+  const containerRef = useRef()
+
+  const windowSize = useWindowSize(150)
+
+  /**
+   * Value calcs
+   */
+  const appliedTagsStr = useMemo(() => {
+    if (!selected.length) return ""
+    return selected.map(v => v.val).join(", ")
+  }, [selected])
+
+  /**
+   * Bounding Box Matches
+   */
+
+    // Make bounding boxes work properly
+  const afterInit = useAfterInit()
+
+  const currentSpanHeight = useMemo(() => {
+    if (!filterTextRef.current || !filterTextRef.current) return 0
+    const filtTxtBound = filterTextRef.current.getBoundingClientRect()
+    const appliedFiltBound = appliedFiltersTextRef.current.getBoundingClientRect()
+    return filtTxtBound.height < appliedFiltBound.height ? appliedFiltBound.height : filtTxtBound.height
+  }, [
+    appliedFiltersTextRef,
+    filterTextRef,
+    afterInit,
+    windowSize,
+  ])
+
+  const currentBtnHeight = useMemo(() => {
+    if (!btnRef.current) return 0
+    const btnRefBound = btnRef.current.getBoundingClientRect()
+    return btnRefBound.height
+  }, [
+    afterInit,
+    windowSize,
+  ])
+
+  const currentSpanWidth = useMemo(() => {
+    if (!filterTextRef.current || !filterTextRef.current) return 0
+    if (shouldShowFilterMsg) {
+      const filtTxtBound = filterTextRef.current.getBoundingClientRect()
+      let toReturn = filtTxtBound.width
+      if (expanded) {
+        toReturn += 100
+      }
+      return toReturn
+    }
+
+    const appliedFiltBound = appliedFiltersTextRef.current.getBoundingClientRect()
+    return appliedFiltBound.width
+  }, [
+    expanded,
+    (shouldShowFilterMsg && shouldShowFilterMsg.current),
+    (appliedFiltersTextRef && appliedFiltersTextRef.current),
+    filterTextRef,
+    afterInit,
+    windowSize,
+  ])
+
+  const maxSpanWidth = useMemo(() => {
+    if (!containerRef.current) return 0
+    const containerRefBounding = containerRef.current.getBoundingClientRect()
+    return containerRefBounding.width
+  }, [
+    containerRef,
+    afterInit,
+    windowSize,
+  ])
+
+  /**
+   * Class names
+   */
+  const containerClassName = useMemo(() => classNames({
+    [filterStyles.expanded]: expanded,
+    [filterStyles.container]: true,
+    [className || ""]: true,
+  }), [expanded])
+
+  const filterIconClasses = useMemo(() => classNames({
+    expandedIcon: expanded,
+    [filterStyles.icon]: true,
+  }), [expanded])
+
+  const listBoxClasses = useMemo(() => classNames({
+    [filterStyles.hasTags]: !!selected.length,
+    [filterStyles.listbox]: true,
+    [filterStyles.isKeyboard]: usedKeyboardLast,
+  }), [
+    expanded,
+    usedKeyboardLast,
+    selected,
+  ])
+
+  const filterTextClasses = useMemo(() => classNames({
+    [filterStyles.show]: shouldShowFilterMsg,
+    [filterStyles.placeholder]: true,
+  }), [shouldShowFilterMsg])
+
+  const appliedStrClasses = useMemo(() => classNames({
+    [filterStyles.show]: !shouldShowFilterMsg,
+    [filterStyles.appliedTags]: true,
+  }), [shouldShowFilterMsg])
+
+  return (
+    <div className={containerClassName} ref={containerRef}>
+      <div className={filterStyles.buttonContainer} ref={parentRef}>
+        <span id="exp_elem" className="visually-hidden">
+          Choose a tag to filter by:
+        </span>
+        <button
+          ref={btnRef}
+          className={filterStyles.filterButton}
+          aria-haspopup="listbox"
+          aria-labelledby="exp_elem filter-button"
+          id="filter-button"
+          {...buttonProps}
+        >
+          {
+            <FilterIcon className={filterIconClasses}
+                        aria-hidden={true}/>
+          }
+          <FilterDisplaySpan className={filterStyles.textContainer}
+                             heiight={currentSpanHeight}
+                             pose="initial"
+                             poseKey={currentSpanWidth}
+                             wiidth={currentSpanWidth}>
+           <span
+             ref={filterTextRef}
+             aria-hidden={true}
+             className={filterTextClasses}
+           >
+             Filters
+           </span>
+            <span
+              ref={appliedFiltersTextRef}
+              className={appliedStrClasses}
+              style={{ maxWidth: maxSpanWidth }}
+            >
+              {appliedTagsStr}
+            </span>
+          </FilterDisplaySpan>
+        </button>
+        <ListIdBox
+          id="listBoxID"
+          role="listbox"
+          ref={listBoxRef}
+          className={listBoxClasses}
+          aria-labelledby="exp_elem"
+          tabIndex={-1}
+          aria-multiselectable="true"
+          aria-activedescendant={active && active.id}
+          heiight={currentBtnHeight}
+          poseKey={currentBtnHeight}
+          pose={expanded ? "expanded" : "hidden"}
+        >
+          <div className={filterStyles.maxHeightHideContainer}>
+            <div className={filterStyles.spacer}/>
+            {
+              values.map((tag, index) => (
+                <FilterListItem
+                  tag={tag}
+                  key={tag.id}
+                  index={index}
+                  expanded={expanded}
+                  selectIndex={selectIndex}
+                  active={active}
+                />
+              ))
+            }
+          </div>
+        </ListIdBox>
+      </div>
+    </div>
+  )
+}

src/components/filter-search-bar/filter-listbox/filter-listbox.module.scss

@@ -0,0 +1,168 @@
+.container {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.buttonContainer {
+  position: relative;
+  max-width: 100%;
+}
+
+.filterButton {
+  cursor: pointer;
+  appearance: none;
+  max-width: 100%;
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  padding: 8px 16px 8px 8px;
+  font-size: var(--filterBarFontSize);
+  line-height: var(--filterBarFontSize);
+  color: var(--darkPrimary);
+  border: none;
+  background: transparent;
+  z-index: 2;
+  position: relative;
+  overflow: hidden;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.filterButton .textContainer {
+  position: relative;
+}
+
+.filterButton .appliedTags, .filterButton .placeholder {
+  position: absolute;
+}
+
+.filterButton .placeholder, .filterButton .appliedTags {
+  transition: top 350ms var(--animStyle);
+  top: 0;
+  left: 0;
+}
+
+.appliedTags {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.placeholder:not(.show) {
+  top: 40px;
+}
+
+.appliedTags:not(.show) {
+  top: -40px;
+}
+
+.filterButton .icon {
+  margin-right: 16px;
+  flex-shrink: 0;
+  height: var(--filterBarIconSize);
+  width: var(--filterBarIconSize);
+}
+
+.listbox {
+  outline: none;
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 0;
+  border-radius: var(--cardRadius);
+  z-index: 1;
+  margin: 0;
+  padding: 0;
+  border: 1px solid transparent;
+  transition: background var(--animSpeed) var(--animStyle),
+  box-shadow var(--animSpeed) var(--animStyle),
+  border-color var(--animSpeed) var(--animStyle);
+}
+
+.listbox:not(.expanded):hover, .container.expanded .listbox, .container:not(.expanded) .filterButton:hover + .listbox {
+  background: var(--cardActiveBackground);
+  box-shadow: var(--cardActiveBoxShadow);
+}
+
+.container:not(.expanded) .listbox.hasTags {
+  border: var(--cardOutlineStyle);
+}
+
+.listbox .spacer {
+  height: 48px;
+}
+
+.option:first-of-type {
+  margin-top: -14px !important;
+}
+
+.option {
+  display: flex;
+  flex-wrap: nowrap;
+  align-content: center;
+  cursor: pointer;
+  padding: 2px 0;
+  margin: 2px 0;
+  color: rgba(0, 0, 0, 0.58);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  transition: opacity var(--animSpeed) var(--animStyle),
+  box-shadow 60ms var(--animStyle);
+  border-radius: 4px;
+}
+
+.option::before {
+  height: 22px;
+  width: 22px;
+  background: transparent;
+  border-radius: 8px;
+  -webkit-appearance: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  margin-right: 14px;
+  flex-shrink: 0;
+}
+
+.option:not(.selected)::before {
+  content: ' ';
+  box-sizing: border-box;
+  border: 3px solid rgba(0, 0, 0, 0.58);
+}
+
+.option.selected::before {
+  content: '✔️';
+  font-size: 26px;
+  line-height: 26px;
+  color: #153E67;
+}
+
+.option:not(.expanded) {
+  opacity: 0;
+}
+
+.option span {
+  display: inline-flex;
+  align-items: center;
+}
+
+.option.selected {
+  color: var(--darkPrimary);
+}
+
+.isKeyboard .option.active {
+  box-shadow: 0 0 1px 1px var(--primary);
+}
+
+.option.active {
+  color: black;
+}
+
+.maxHeightHideContainer {
+  overflow: hidden;
+  max-height: 100%;
+  padding: 2px 6px 6px;
+}

src/components/filter-search-bar/filter-listbox/index.js

@@ -1,279 +1 @@
-/**
+export * from "./filter-listbox"
- * ⚠ A WARNING TO ALL YE WHO TRAVEL NEAR ⚠️
- * Life would be dull if we never explored, never played
- * However, deadlines near ever-closer and when one's played too long, they may
- * forget to put away their toys in an orderly manor. This is what's occurred
- *
- * It is for this reason that this code is deemed a hazard to one's health.
- * Ye've been warned
- *
- * This is a hand-spun component to match the guidelines for a listbox ALA w3 guidelines
- * @see https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html
- *
- * ✅ Escape - Collapse the dropdown
- * ✅ Up - Focus previous item
- * ✅ Down - Focus next item
- * ✅ Home - Goes to first item
- * ✅ End - Goes to last item
- * ✅ Space - Toggles selection of item
- * ✅ Shift + Down - Focuses and selects next item
- * ✅ Shift + Up - Focuses and selects previous item
- * ✅ Ctrl + Shift + Home - Selects from the focused option to start of list
- * ✅ Ctrl + Shift + End - Selects from the focused option to end of list
- * ✅ Ctrl + A - Toggles selection of all
- * 🔲 Click outside this component to close
- * Am I supposed to focus lock w/ tab?
- * 🔲 If so, add that
- * 🔲 If not, close on `blur`
- */
-
-/**
- * "Filters"
- * Click to expand
- * Clicking filters won't do anything
- * After not expanded, show the filters by animating away "filters"
- * If nothing is selected, don't animate away "Filters"
- */
-
-import React, { useEffect, useMemo, useRef, useState } from "react"
-import classNames from "classnames"
-import posed from "react-pose"
-
-import filterStyles from "./style.module.css"
-
-import FilterIcon from "../../../assets/icons/filter.svg"
-
-import { useSelectRef } from "../../utils/a11y/useSelectRef"
-import { useWindowSize } from "../../utils/useWindowSize"
-import { useAfterInit } from "../../utils/useAfterInit"
-
-const FilterListItem = ({ tag, index, active, expanded, selectIndex }) => {
-  const liClassName = classNames(filterStyles.option, {
-    [filterStyles.active]: active.index === index,
-    [filterStyles.selected]: tag.selected,
-    [filterStyles.expanded]: expanded,
-  })
-  return (
-    <li className={liClassName}
-        role="option"
-        onClick={e => expanded && selectIndex(index, e, e.type)}
-        id={tag.id}
-        aria-selected={tag.selected}>
-      <span>{tag.val}</span>
-    </li>
-  )
-}
-
-const FilterDisplaySpan = posed.span({
-  initial: {
-    width: props => props.wiidth || 0,
-    height: props => props.heiight,
-  },
-})
-
-const ListIdBox = posed.ul({
-  expanded: {
-    height: "auto",
-  },
-  hidden: {
-    height: props => props.heiight,
-  },
-})
-
-
-const FilterListbox = ({ tags = [], className }) => {
-  const {
-    ref: listBoxRef,
-    active,
-    values,
-    selected,
-    selectIndex,
-    expanded,
-    usedKeyboardLast,
-    parentRef,
-    buttonProps,
-  } = useSelectRef(tags, 'multi')
-  const shouldShowFilterMsg = expanded || !selected.length
-
-  /**
-   * Refs
-   */
-  const filterTextRef = useRef()
-  const appliedFiltersTextRef = useRef()
-  const btnRef = useRef()
-  const containerRef = useRef();
-
-  const windowSize = useWindowSize(150);
-
-  /**
-   * Value calcs
-   */
-  const appliedTagsStr = useMemo(() => {
-    if (!selected.length) return ""
-    return selected.map(v => v.val).join(", ")
-  }, [selected])
-
-  /**
-   * Bounding Box Matches
-   */
-
-  // Make bounding boxes work properly
-  const afterInit = useAfterInit()
-
-  const currentSpanHeight = useMemo(() => {
-    if (!filterTextRef.current || !filterTextRef.current) return 0
-    const filtTxtBound = filterTextRef.current.getBoundingClientRect()
-    const appliedFiltBound = appliedFiltersTextRef.current.getBoundingClientRect()
-    return filtTxtBound.height < appliedFiltBound.height ? appliedFiltBound.height : filtTxtBound.height
-  }, [
-    appliedFiltersTextRef,
-    filterTextRef,
-    afterInit,
-    windowSize
-  ])
-
-  const currentBtnHeight = useMemo(() => {
-    if (!btnRef.current) return 0
-    const btnRefBound = btnRef.current.getBoundingClientRect()
-    return btnRefBound.height
-  }, [
-    afterInit,
-    windowSize
-  ])
-
-  const currentSpanWidth = useMemo(() => {
-    if (!filterTextRef.current || !filterTextRef.current) return 0
-    if (shouldShowFilterMsg) {
-      const filtTxtBound = filterTextRef.current.getBoundingClientRect()
-      let toReturn = filtTxtBound.width
-      if (expanded) {
-        toReturn += 100
-      }
-      return toReturn
-    }
-
-    const appliedFiltBound = appliedFiltersTextRef.current.getBoundingClientRect()
-    return appliedFiltBound.width
-  }, [
-    expanded,
-    (shouldShowFilterMsg && shouldShowFilterMsg.current),
-    (appliedFiltersTextRef && appliedFiltersTextRef.current),
-    filterTextRef,
-    afterInit,
-    windowSize
-  ])
-
-  const maxSpanWidth = useMemo(() => {
-    if (!containerRef.current) return 0;
-    const containerRefBounding = containerRef.current.getBoundingClientRect()
-    return containerRefBounding.width;
-  }, [containerRef, afterInit, windowSize])
-
-  /**
-   * Class names
-   */
-  const containerClassName = useMemo(() => classNames({
-    [filterStyles.expanded]: expanded,
-    [filterStyles.container]: true,
-    [className || '']: true
-  }), [expanded])
-
-  const filterIconClasses = useMemo(() => classNames({
-    expandedIcon: expanded,
-    [filterStyles.icon]: true,
-  }), [expanded])
-
-  const listBoxClasses = useMemo(() => classNames({
-    [filterStyles.hasTags]: !!selected.length,
-    [filterStyles.listbox]: true,
-    [filterStyles.isKeyboard]: usedKeyboardLast,
-  }), [
-    expanded,
-    usedKeyboardLast,
-    selected,
-  ])
-
-  const filterTextClasses = useMemo(() => classNames({
-    [filterStyles.show]: shouldShowFilterMsg,
-    [filterStyles.placeholder]: true,
-  }), [shouldShowFilterMsg])
-
-  const appliedStrClasses = useMemo(() => classNames({
-    [filterStyles.show]: !shouldShowFilterMsg,
-    [filterStyles.appliedTags]: true,
-  }), [shouldShowFilterMsg])
-
-  return (
-    <div className={containerClassName} ref={containerRef}>
-      <div className={filterStyles.buttonContainer} ref={parentRef}>
-        <span id="exp_elem" className="visually-hidden">
-          Choose a tag to filter by:
-        </span>
-        <button
-          ref={btnRef}
-          className={filterStyles.filterButton}
-          aria-haspopup="listbox"
-          aria-labelledby="exp_elem filter-button"
-          id="filter-button"
-          {...buttonProps}
-        >
-          {
-            <FilterIcon className={filterIconClasses}
-                        aria-hidden={true}/>
-          }
-          <FilterDisplaySpan className={filterStyles.textContainer}
-                             heiight={currentSpanHeight}
-                             pose="initial"
-                             poseKey={currentSpanWidth}
-                             wiidth={currentSpanWidth}>
-           <span
-             ref={filterTextRef}
-             aria-hidden={true}
-             className={filterTextClasses}
-           >
-             Filters
-           </span>
-            <span
-              ref={appliedFiltersTextRef}
-              className={appliedStrClasses}
-              style={{maxWidth: maxSpanWidth}}
-            >
-              {appliedTagsStr}
-            </span>
-          </FilterDisplaySpan>
-        </button>
-        <ListIdBox
-          id="listBoxID"
-          role="listbox"
-          ref={listBoxRef}
-          className={listBoxClasses}
-          aria-labelledby="exp_elem"
-          tabIndex={-1}
-          aria-multiselectable="true"
-          aria-activedescendant={active && active.id}
-          heiight={currentBtnHeight}
-          poseKey={currentBtnHeight}
-          pose={expanded ? "expanded" : "hidden"}
-        >
-          <div className={filterStyles.maxHeightHideContainer}>
-            <div className={filterStyles.spacer}/>
-            {
-              values.map((tag, index) => (
-                <FilterListItem
-                  tag={tag}
-                  key={tag.id}
-                  index={index}
-                  expanded={expanded}
-                  selectIndex={selectIndex}
-                  active={active}
-                />
-              ))
-            }
-          </div>
-        </ListIdBox>
-      </div>
-    </div>
-  )
-}
-
-export default FilterListbox

src/components/filter-search-bar/filter-listbox/style.module.css

@@ -1,168 +0,0 @@
-.container {
-    display: flex;
-    justify-content: flex-end;
-}
-
-.buttonContainer {
-    position: relative;
-    max-width: 100%;
-}
-
-.filterButton {
-    cursor: pointer;
-    appearance: none;
-    max-width: 100%;
-    display: flex;
-    justify-content: center;
-    height: 100%;
-    padding: 8px 16px 8px 8px;
-    font-size: var(--filterBarFontSize);
-    line-height: var(--filterBarFontSize);
-    color: var(--darkPrimary);
-    border: none;
-    background: transparent;
-    z-index: 2;
-    position: relative;
-    overflow: hidden;
-    flex-wrap: nowrap;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.filterButton .textContainer {
-    position: relative;
-}
-
-.filterButton .appliedTags, .filterButton .placeholder {
-    position: absolute;
-}
-
-.filterButton .placeholder, .filterButton .appliedTags {
-    transition: top 350ms var(--animStyle);
-    top: 0;
-    left: 0;
-}
-
-.appliedTags {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-
-.placeholder:not(.show) {
-    top: 40px;
-}
-
-.appliedTags:not(.show) {
-    top: -40px;
-}
-
-.filterButton .icon {
-    margin-right: 16px;
-    flex-shrink: 0;
-    height: var(--filterBarIconSize);
-    width: var(--filterBarIconSize);
-}
-
-.listbox {
-    outline: none;
-    position: absolute;
-    width: 100%;
-    left: 0;
-    top: 0;
-    border-radius: var(--cardRadius);
-    z-index: 1;
-    margin: 0;
-    padding: 0;
-    border: 1px solid transparent;
-    transition: background var(--animSpeed) var(--animStyle),
-                box-shadow var(--animSpeed) var(--animStyle),
-                border-color var(--animSpeed) var(--animStyle);
-}
-
-.listbox:not(.expanded):hover, .container.expanded .listbox, .container:not(.expanded) .filterButton:hover + .listbox {
-    background: var(--cardActiveBackground);
-    box-shadow: var(--cardActiveBoxShadow);
-}
-
-.container:not(.expanded) .listbox.hasTags {
-    border: var(--cardOutlineStyle);
-}
-
-.listbox .spacer {
-    height: 48px;
-}
-
-.option:first-of-type {
-    margin-top: -14px !important;
-}
-
-.option {
-    display: flex;
-    flex-wrap: nowrap;
-    align-content: center;
-    cursor: pointer;
-    padding: 2px 0;
-    margin: 2px 0;
-    color: rgba(0, 0, 0, 0.58);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    transition: opacity var(--animSpeed) var(--animStyle),
-    box-shadow 60ms var(--animStyle);
-    border-radius: 4px;
-}
-
-.option::before {
-    height: 22px;
-    width: 22px;
-    background: transparent;
-    border-radius: 8px;
-    -webkit-appearance: none;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    margin-right: 14px;
-    flex-shrink: 0;
-}
-
-.option:not(.selected)::before {
-    content: ' ';
-    box-sizing: border-box;
-    border: 3px solid rgba(0, 0, 0, 0.58);
-}
-
-.option.selected::before {
-    content: '✔️';
-    font-size: 26px;
-    line-height: 26px;
-    color: #153E67;
-}
-
-.option:not(.expanded) {
-    opacity: 0;
-}
-
-.option span {
-    display: inline-flex;
-    align-items: center;
-}
-
-.option.selected {
-    color: var(--darkPrimary);
-}
-
-.isKeyboard .option.active {
-    box-shadow: 0 0 1px 1px var(--primary);
-}
-
-.option.active {
-    color: black;
-}
-
-.maxHeightHideContainer {
-    overflow: hidden;
-    max-height: 100%;
-    padding: 2px 6px 6px;
-}

src/components/filter-search-bar/filter-search-bar.js

@@ -0,0 +1,27 @@
+import React from "react"
+import styles from "./filter-search-bar.module.scss"
+import { SearchField } from "./search-field"
+import { FilterListbox } from "./filter-listbox"
+import { WordCount } from "./word-count"
+
+export const FilterSearchBar = ({ showWordCount = false }) => {
+  const numberOfArticles = 3
+  const wordCount = 4332
+  return (
+    <div className={styles.iconContainer}>
+      <SearchField className={styles.searchField}/>
+      <div className={styles.midContainer}>
+        {showWordCount && <WordCount wordCount={wordCount} numberOfArticles={numberOfArticles}/>}
+      </div>
+      <FilterListbox className={styles.filterField} tags={[
+        "Test",
+        "Another",
+        "One More Makes 3",
+        "One More Makes 4",
+        "One More Makes 5",
+        "One More Makes 1235",
+        "One More Makes 55",
+      ]}/>
+    </div>
+  )
+}

src/components/filter-search-bar/filter-search-bar.module.scss

@@ -0,0 +1,46 @@
+.iconContainer {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.iconContainer > * {
+  flex-basis: 100%;
+}
+
+@media screen and (min-width: 800px) {
+  .iconContainer {
+    flex-wrap: nowrap;
+    justify-content: space-between;
+  }
+
+  .iconContainer > * {
+    flex-basis: 33%;
+    width: 33%;
+    flex-shrink: 0;
+  }
+}
+
+@media screen and (max-width: 799px) {
+  .midContainer {
+    order: 1;
+    margin: 16px 0 8px;
+    flex-basis: 100%;
+  }
+
+  .searchField, .filterField {
+    flex-basis: calc(50% - 8px);
+    max-width: calc(50% - 8px)
+  }
+  .searchField {
+    margin-right: 4px;
+  }
+  .filterField {
+    margin-left: 4px
+  }
+}
+
+.midContainer {
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+}

src/components/filter-search-bar/index.js

@@ -1,33 +1 @@
-import React from "react"
+export * from "./filter-search-bar"
-import styles from "./style.module.css"
-import SearchField from "./search-field"
-import FilterListbox from "./filter-listbox"
-import WordCount from "./word-count"
-
-class FilterSearchBar extends React.Component {
-  render() {
-    const { showWordCount = false } = this.props
-
-    const numberOfArticles = 3;
-    const wordCount = 4332;
-    return (
-      <div className={styles.iconContainer}>
-        <SearchField className={styles.searchField}/>
-        <div className={styles.midContainer}>
-        {showWordCount && <WordCount wordCount={wordCount} numberOfArticles={numberOfArticles}/>}
-        </div>
-        <FilterListbox className={styles.filterField} tags={[
-          "Test",
-          "Another",
-          "One More Makes 3",
-          "One More Makes 4",
-          "One More Makes 5",
-          "One More Makes 1235",
-          "One More Makes 55"
-        ]}/>
-      </div>
-    )
-  }
-}
-
-export default FilterSearchBar

src/components/filter-search-bar/search-field/index.js

@@ -1,72 +1 @@
-import React, { useState, useMemo } from "react"
+export * from "./search-field"
-import btnWrapperStyles from "./style.module.css"
-import classNames from "classnames"
-import SearchIcon from "../../../assets/icons/search.svg"
-import { useElementBoundingBox } from "../../utils/useRefBoundingBox"
-import posed from "react-pose"
-
-const placeholder = "Search"
-
-
-const PosedInput = posed.input({
-  initial: {
-    width: props => props.wiidth,
-  },
-})
-
-const SearchField = ({className}) => {
-  const [inputVal, setInputVal] = useState("")
-  const [focused, setFocused] = useState("")
-
-  const { ref: containerRef, width: maxSpanWidth } = useElementBoundingBox()
-  const { ref: inputRef, height: inputHeight } = useElementBoundingBox()
-  const { ref: spanRef, width: currInputWidth } = useElementBoundingBox(inputVal, a => ({
-    ...a,
-    width: a.width + 50,
-  }))
-
-  /**
-   * Class calculation
-   */
-  const wrapperClasses = useMemo(() => {
-    return classNames(btnWrapperStyles.btn, {
-      [btnWrapperStyles.contentBtn]: focused || inputVal,
-    })
-  }, [
-    focused,
-    inputVal,
-  ])
-
-  return (
-    // 70 as it's the size of all padding/etc more than just the input
-    <div className={className}>
-      <div className={wrapperClasses} onClick={() => inputRef.current.focus()}>
-        <SearchIcon className={btnWrapperStyles.icon}/>
-        <div className={btnWrapperStyles.inputContainer} ref={containerRef}>
-          <div style={{ height: inputHeight }}/>
-          <PosedInput placeholder={placeholder}
-                      ref={inputRef}
-                      onChange={e => {
-                        console.log("onchange")
-                        setInputVal(e.target.value)
-                      }}
-                      wiidth={currInputWidth}
-                      poseKey={inputVal || currInputWidth}
-                      pose="initial"
-                      value={inputVal}
-                      onFocus={() => setFocused(true)}
-                      style={{ maxWidth: maxSpanWidth }}
-                      onBlur={() => setFocused(false)}
-                      className={btnWrapperStyles.input}/>
-          <span aria-hidden={true} className={btnWrapperStyles.input}
-                style={{
-                  position: "absolute",
-                  top: "-300vh",
-                }} ref={spanRef}>{inputVal || placeholder}</span>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default SearchField

src/components/filter-search-bar/search-field/search-field.js

@@ -0,0 +1,70 @@
+import React, { useMemo, useState } from "react"
+import btnWrapperStyles from "./search-field.module.scss"
+import classNames from "classnames"
+import SearchIcon from "../../../assets/icons/search.svg"
+import { useElementBoundingBox } from "../../../utils/useRefBoundingBox"
+import posed from "react-pose"
+
+const placeholder = "Search"
+
+
+const PosedInput = posed.input({
+  initial: {
+    width: props => props.wiidth,
+  },
+})
+
+export const SearchField = ({ className }) => {
+  const [inputVal, setInputVal] = useState("")
+  const [focused, setFocused] = useState("")
+
+  const { ref: containerRef, width: maxSpanWidth } = useElementBoundingBox()
+  const { ref: inputRef, height: inputHeight } = useElementBoundingBox()
+  const { ref: spanRef, width: currInputWidth } = useElementBoundingBox(inputVal, a => ({
+    ...a,
+    width: a.width + 50,
+  }))
+
+  /**
+   * Class calculation
+   */
+  const wrapperClasses = useMemo(() => {
+    return classNames(btnWrapperStyles.btn, {
+      [btnWrapperStyles.contentBtn]: focused || inputVal,
+    })
+  }, [
+    focused,
+    inputVal,
+  ])
+
+  return (
+    // 70 as it's the size of all padding/etc more than just the input
+    <div className={className}>
+      <div className={wrapperClasses} onClick={() => inputRef.current.focus()}>
+        <SearchIcon className={btnWrapperStyles.icon}/>
+        <div className={btnWrapperStyles.inputContainer} ref={containerRef}>
+          <div style={{ height: inputHeight }}/>
+          <PosedInput placeholder={placeholder}
+                      ref={inputRef}
+                      onChange={e => {
+                        console.log("onchange")
+                        setInputVal(e.target.value)
+                      }}
+                      wiidth={currInputWidth}
+                      poseKey={inputVal || currInputWidth}
+                      pose="initial"
+                      value={inputVal}
+                      onFocus={() => setFocused(true)}
+                      style={{ maxWidth: maxSpanWidth }}
+                      onBlur={() => setFocused(false)}
+                      className={btnWrapperStyles.input}/>
+          <span aria-hidden={true} className={btnWrapperStyles.input}
+                style={{
+                  position: "absolute",
+                  top: "-300vh",
+                }} ref={spanRef}>{inputVal || placeholder}</span>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/filter-search-bar/search-field/search-field.module.scss

@@ -0,0 +1,54 @@
+.btn {
+  display: flex;
+  align-items: center;
+  border-radius: var(--cardRadius);
+  padding: 8px 16px 8px 15px;
+  color: var(--darkPrimary);
+  transition: background var(--animSpeed) var(--animStyle),
+  box-shadow var(--animSpeed) var(--animStyle),
+  border-color var(--animSpeed) var(--animStyle);
+  border: 1px solid transparent;
+  cursor: text;
+}
+
+.btn, .input, .input::placeholder {
+  color: var(--darkPrimary);
+}
+
+.btn:hover {
+  background: var(--cardActiveBackground);
+  box-shadow: var(--cardActiveBoxShadow);
+}
+
+.contentBtn {
+  border: var(--cardOutlineStyle);
+}
+
+.input {
+  background: none;
+  border: none;
+  border-bottom: 1px solid var(--darkGrey);
+  outline: none;
+  min-width: 120px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  font-size: var(--filterBarFontSize);
+  line-height: var(--filterBarFontSize);
+}
+
+.input::placeholder {
+  opacity: 1;
+}
+
+.inputContainer {
+  width: 100%;
+  position: relative;
+  margin-left: 15px;
+}
+
+.icon {
+  flex-shrink: 0;
+  height: var(--filterBarIconSize);
+  width: var(--filterBarIconSize);
+}

src/components/filter-search-bar/search-field/style.module.css

@@ -1,54 +0,0 @@
-.btn {
-    display: flex;
-    align-items: center;
-    border-radius: var(--cardRadius);
-    padding: 8px 16px 8px 15px;
-    color: var(--darkPrimary);
-    transition: background var(--animSpeed) var(--animStyle),
-                box-shadow var(--animSpeed) var(--animStyle),
-                border-color var(--animSpeed) var(--animStyle);
-    border: 1px solid transparent;
-    cursor: text;
-}
-
-.btn, .input, .input::placeholder {
-    color: var(--darkPrimary);
-}
-
-.btn:hover {
-    background: var(--cardActiveBackground);
-    box-shadow: var(--cardActiveBoxShadow);
-}
-
-.contentBtn {
-    border: var(--cardOutlineStyle);
-}
-
-.input {
-    background: none;
-    border: none;
-    border-bottom: 1px solid var(--darkGrey);
-    outline: none;
-    min-width: 120px;
-    position: absolute;
-    top: 0;
-    left: 0;
-    font-size: var(--filterBarFontSize);
-    line-height: var(--filterBarFontSize);
-}
-
-.input::placeholder {
-    opacity: 1;
-}
-
-.inputContainer {
-    width: 100%;
-    position: relative;
-    margin-left: 15px;
-}
-
-.icon {
-    flex-shrink: 0;
-    height: var(--filterBarIconSize);
-    width: var(--filterBarIconSize);
-}

src/components/filter-search-bar/style.module.css

@@ -1,46 +0,0 @@
-.iconContainer {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.iconContainer > * {
-    flex-basis: 100%;
-}
-
-@media screen and (min-width: 800px) {
-    .iconContainer {
-        flex-wrap: nowrap;
-        justify-content: space-between;
-    }
-
-    .iconContainer > * {
-        flex-basis: 33%;
-        width: 33%;
-        flex-shrink: 0;
-    }
-}
-
-@media screen and (max-width: 799px) {
-    .midContainer {
-        order: 1;
-        margin: 16px 0 8px;
-        flex-basis: 100%;
-    }
-
-    .searchField, .filterField {
-        flex-basis: calc(50% - 8px);
-        max-width: calc(50% - 8px)
-    }
-    .searchField {
-        margin-right: 4px;
-    }
-    .filterField {
-        margin-left: 4px
-    }
-}
-
-.midContainer {
-    flex-grow: 1;
-    display: flex;
-    justify-content: center;
-}

src/components/filter-search-bar/word-count/index.js

@@ -1,16 +1 @@
-import React from "react"
+export * from "./word-count"
-import wordCountStyles from "./style.module.css"
-import FeatherIcon from "../../../assets/icons/feather.svg"
-
-const WordCount = ({ numberOfArticles = 0, wordCount = 0 }) => {
-  return (
-    <div className={wordCountStyles.container}>
-      <FeatherIcon className={wordCountStyles.icon}/>
-      <p>{numberOfArticles} Articles</p>
-      <div className={wordCountStyles.divider}/>
-      <p>{wordCount} Words</p>
-    </div>
-  )
-}
-
-export default WordCount

src/components/filter-search-bar/word-count/style.module.css

@@ -1,26 +0,0 @@
-.icon {
-    margin-right: 16px;
-    height: var(--filterBarIconSize);
-    width: var(--filterBarIconSize);
-}
-
-.container {
-    display: flex;
-    color: var(--darkGrey);
-    text-transform: uppercase;
-    font-size: var(--filterBarFontSize);
-    line-height: var(--filterBarFontSize);
-    align-items: center;
-    justify-content: center;
-}
-
-.container p {
-    margin: 0;
-}
-
-.divider {
-    background: var(--darkGrey);
-    width: 1px;
-    height: var(--filterBarIconSize);
-    margin: 0 12px;
-}

src/components/filter-search-bar/word-count/word-count.js

@@ -0,0 +1,14 @@
+import React from "react"
+import wordCountStyles from "./word-count.module.scss"
+import FeatherIcon from "../../../assets/icons/feather.svg"
+
+export const WordCount = ({ numberOfArticles = 0, wordCount = 0 }) => {
+  return (
+    <div className={wordCountStyles.container}>
+      <FeatherIcon className={wordCountStyles.icon}/>
+      <p>{numberOfArticles} Articles</p>
+      <div className={wordCountStyles.divider}/>
+      <p>{wordCount} Words</p>
+    </div>
+  )
+}

src/components/filter-search-bar/word-count/word-count.module.scss

@@ -0,0 +1,26 @@
+.icon {
+  margin-right: 16px;
+  height: var(--filterBarIconSize);
+  width: var(--filterBarIconSize);
+}
+
+.container {
+  display: flex;
+  color: var(--darkGrey);
+  text-transform: uppercase;
+  font-size: var(--filterBarFontSize);
+  line-height: var(--filterBarFontSize);
+  align-items: center;
+  justify-content: center;
+}
+
+.container p {
+  margin: 0;
+}
+
+.divider {
+  background: var(--darkGrey);
+  width: 1px;
+  height: var(--filterBarIconSize);
+  margin: 0 12px;
+}

src/components/layout/index.js

@@ -1,94 +1 @@
-import React from "react"
+export * from "./layout"
-import { graphql, Link } from "gatsby"
-import BackIcon from "../../assets/icons/back.svg"
-import layoutStyles from './layout.module.css'
-import './style.css'
-
-class Layout extends React.Component {
-  render() {
-    const { location, title, children } = this.props
-    const rootPath = `${__PATH_PREFIX__}/`
-    let header
-
-    const isBase = location.pathname === rootPath;
-    const isBlogPost = location.pathname.startsWith(`${rootPath}posts`);
-
-    return (
-      <div
-        style={{
-          marginLeft: `auto`,
-          marginRight: `auto`,
-        }}
-      >
-        <header className={layoutStyles.header}>
-          {!isBase && <Link className={`${layoutStyles.backBtn} baseBtn`} to={`/`}><BackIcon/></Link>}
-          {header}
-        </header>
-        <main className={!isBlogPost ? 'listViewContent' : 'postViewContent'}>{children}</main>
-        <footer>
-          © {new Date().getFullYear()}, Built with
-          {` `}
-          <a href="https://www.gatsbyjs.org">Gatsby</a>
-        </footer>
-      </div>
-    )
-  }
-}
-
-export default Layout
-
-export const authorFragmentQuery = graphql`
-  fragment AuthorInfo on AuthorsJson {
-    name
-    blurbet
-    id
-    description
-    color
-    socials {
-      twitter
-    }
-    pronouns {
-      they
-      them
-      their
-      theirs
-      themselves
-    }
-    profileImg {
-      childImageSharp {
-        smallPic: fixed(width: 60) {
-          ...GatsbyImageSharpFixed
-        }
-        mediumPic: fixed(width: 85) {
-          ...GatsbyImageSharpFixed
-        }
-        bigPic: fixed(width: 300, quality: 100) {
-          ...GatsbyImageSharpFixed
-        }
-      }
-    }
-  }
-`
-
-export const postFragmentQuery = graphql`
-  fragment PostInfo on MarkdownRemark {
-    id
-    excerpt(pruneLength: 160)
-    html
-    frontmatter {
-      title
-      date(formatString: "MMMM DD, YYYY")
-      license
-      tags
-      author {
-        ...AuthorInfo
-      }
-    }
-    fields {
-      slug
-    }
-    wordCount {
-      words
-    }
-  }
-`

src/components/layout/layout.js

@@ -0,0 +1,91 @@
+import React from "react"
+import { graphql, Link } from "gatsby"
+import BackIcon from "../../assets/icons/back.svg"
+import layoutStyles from "./layout.module.scss"
+import "../../global.scss"
+
+export const Layout = ({ location, title, children }) => {
+  const rootPath = `${__PATH_PREFIX__}/`
+  let header
+
+  const isBase = location.pathname === rootPath
+  const isBlogPost = location.pathname.startsWith(`${rootPath}posts`)
+
+  return (
+    <div
+      style={{
+        marginLeft: `auto`,
+        marginRight: `auto`,
+      }}
+    >
+      <header className={layoutStyles.header}>
+        {!isBase && <Link className={`${layoutStyles.backBtn} baseBtn`} to={`/`}><BackIcon/></Link>}
+        {header}
+      </header>
+      <main className={!isBlogPost ? "listViewContent" : "postViewContent"}>{children}</main>
+      <footer>
+        © {new Date().getFullYear()}, Built with
+        {` `}
+        <a href="https://www.gatsbyjs.org">Gatsby</a>
+      </footer>
+    </div>
+  )
+}
+
+export default Layout
+
+export const authorFragmentQuery = graphql`
+  fragment AuthorInfo on AuthorsJson {
+    name
+    blurbet
+    id
+    description
+    color
+    socials {
+      twitter
+    }
+    pronouns {
+      they
+      them
+      their
+      theirs
+      themselves
+    }
+    profileImg {
+      childImageSharp {
+        smallPic: fixed(width: 60) {
+          ...GatsbyImageSharpFixed
+        }
+        mediumPic: fixed(width: 85) {
+          ...GatsbyImageSharpFixed
+        }
+        bigPic: fixed(width: 300, quality: 100) {
+          ...GatsbyImageSharpFixed
+        }
+      }
+    }
+  }
+`
+
+export const postFragmentQuery = graphql`
+  fragment PostInfo on MarkdownRemark {
+    id
+    excerpt(pruneLength: 160)
+    html
+    frontmatter {
+      title
+      date(formatString: "MMMM DD, YYYY")
+      license
+      tags
+      author {
+        ...AuthorInfo
+      }
+    }
+    fields {
+      slug
+    }
+    wordCount {
+      words
+    }
+  }
+`

src/components/layout/layout.module.css

@@ -1,18 +0,0 @@
-.back-btn {
-    border-radius: 50% !important;
-    height: 40px;
-    width: 40px;
-    padding: 0 !important;
-}
-
-.back-btn svg {
-    height: 30px;
-    width: 30px;
-}
-
-.header {
-    max-width: 1200px;
-    padding: 0 15px;
-    margin: 0 auto;
-}
-

src/components/layout/layout.module.scss

@@ -0,0 +1,18 @@
+.back-btn {
+  border-radius: 50% !important;
+  height: 40px;
+  width: 40px;
+  padding: 0 !important;
+}
+
+.back-btn svg {
+  height: 30px;
+  width: 30px;
+}
+
+.header {
+  max-width: 1200px;
+  padding: 0 15px;
+  margin: 0 auto;
+}
+

src/components/layout/style.css

@@ -1,132 +0,0 @@
-:root {
-    /* Some obvious colors are duplicated to provide dark mode */
-    --darkPrimary: #153E67;
-    --primary: #127DB3;
-    --black: black;
-    --white: white;
-    --darkGrey: rgba(0, 0, 0, 0.64);
-    --highImpactBlack: rgba(0, 0, 0, 0.87);
-    --midImpactBlack: rgba(0, 0, 0, 0.64);
-    --lowImpactBlack: rgba(0, 0, 0, 0.58);
-    --backgroundColor: #E4F4FF;
-    --cardActiveBackground: rgb(235, 246, 252);
-    --cardActiveBoxShadow: 0px 2px 4px rgba(11, 37, 104, 0.27), inset 0px 1px 0px #FFFFFF;
-    --animSpeed: 200ms;
-    --animStyle: ease-in-out;
-    --cardRadius: 8px;
-    --cardOutlineStyle: 1px solid var(--primary);
-    --filterBarIconSize: 22px;
-    --filterBarFontSize: 20px;
-    --listViewPadding: 10px;
-    --archivo: 'Archivo', sans-serif;
-    --oswald: 'Oswald', 'Archivo', sans-serif;
-}
-
-@media screen and (min-width: 600px) {
-    :root {
-        --listViewPadding: 20px;
-    }
-}
-
-.listViewContent {
-    margin: 0 auto;
-    max-width: 1272px;
-    padding: 0 var(--listViewPadding)
-}
-
-.postViewContent {
-    padding: 20px;
-}
-
-.postViewContent > * {
-    margin: 0 auto;
-}
-
-body {
-    background-color: var(--backgroundColor);
-    font-family: var(--archivo);
-}
-
-h1, h2, h3 {
-    font-family: var(--oswald);
-}
-
-/* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
-.visually-hidden {
-    position: absolute !important;
-    height: 1px;
-    width: 1px;
-    overflow: hidden;
-    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
-    clip: rect(1px, 1px, 1px, 1px);
-}
-
-.visually-hidden a:focus,
-.visually-hidden input:focus,
-.visually-hidden button:focus {
-    position: static;
-    width: auto;
-    height: auto;
-}
-
-
-.filterDropdown {
-    transform-origin: 26px 26px;
-    transition: transform 300ms var(--animStyle);
-}
-
-.expandedIcon .filterDropdown {
-    transform: rotate(180deg);
-}
-
-.baseBtn {
-    cursor: pointer;
-}
-
-.baseBtn, .btnLike {
-    appearance: none;
-    text-decoration: none;
-    background: none;
-    border: none;
-    transition: background var(--animSpeed) var(--animStyle),
-    box-shadow var(--animSpeed) var(--animStyle),
-    border-color var(--animSpeed) var(--animStyle);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-shrink: 0;
-    border-radius: var(--cardRadius);
-    line-height: 16px;
-    font-size: 16px;
-    padding: 4px 8px;
-    color: var(--darkPrimary)
-}
-
-.baseBtn:hover {
-    background: var(--cardActiveBackground);
-    border-color: transparent;
-    box-shadow: var(--cardActiveBoxShadow);
-}
-
-.baseBtn svg, .btnLike svg {
-    height: 30px;
-    width: 30px;
-    flex-shrink: 0;
-}
-
-.baseBtn.prependIcon svg, .btnLike.prependIcon svg {
-    margin-right: 10px;
-}
-
-.baseBtn.appendIcon svg, .btnLike.appendIcon svg {
-    margin-left: 10px;
-}
-
-.post-body {
-    margin-bottom: 40px;
-    max-width: 576px;
-}
-
-.post-lower-area {
-    max-width: 920px;
-}

src/components/pic-title-header/index.js

@@ -1,24 +1 @@
-import React from 'react';
+export * from "./pic-title-header"
-import Image from "gatsby-image"
-import styles from './style.module.css'
-/**
- *
- * @param image
- * @param socials - Match the object of the authorsJson socials
- * @param title
- * @param description
- * @constructor
- */
-const PicTitleHeader = ({image, socials, title, description, author = false}) => {
-  return (
-    <div className={styles.container}>
-      <Image className={styles.headerPic} style={author ? {borderRadius: '50%'} : {}} fixed={image} loading={"eager"} />
-      <div className={styles.noMgContainer}>
-      <h1 className={styles.title}>{title}</h1>
-      <h2 className={styles.subheader}>{description}</h2>
-      </div>
-    </div>
-  )
-}
-
-export default PicTitleHeader;

src/components/pic-title-header/pic-title-header.js

@@ -0,0 +1,25 @@
+import React from "react"
+import Image from "gatsby-image"
+import styles from "./pic-title-header.module.scss"
+
+/**
+ *
+ * @param image
+ * @param socials - Match the object of the authorsJson socials
+ * @param title
+ * @param description
+ * @param author - Is an author pic?
+ * @constructor
+ */
+export const PicTitleHeader = ({ image, socials, title, description, author = false }) => {
+  return (
+    <div className={styles.container}>
+      <Image className={styles.headerPic} style={author ? { borderRadius: "50%" } : {}} fixed={image}
+             loading={"eager"}/>
+      <div className={styles.noMgContainer}>
+        <h1 className={styles.title}>{title}</h1>
+        <h2 className={styles.subheader}>{description}</h2>
+      </div>
+    </div>
+  )
+}

src/components/pic-title-header/pic-title-header.module.scss

@@ -0,0 +1,62 @@
+.container {
+  margin: 0 auto 50px auto;
+  max-width: 948px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.container > * {
+  flex: 0 0 auto;
+  max-width: 100%;
+}
+
+.headerPic {
+  max-width: 300px;
+  max-height: 300px;
+  margin-right: 48px;
+  margin-bottom: 16px;
+}
+
+.title {
+  font-size: 64px;
+  line-height: 64px;
+  color: var(--highImpactBlack);
+  margin: 0;
+}
+
+.noMgContainer {
+  display: inline-block;
+  vertical-align: top;
+  width: 600px;
+}
+
+.subheader {
+  margin: 22px 0 0 0;
+  color: var(--midImpactBlack);
+  font-size: 32px;
+  line-height: 32px;
+  font-weight: 400;
+}
+
+.socialsContainer {
+  display: flex;
+
+}
+
+.socialIcon {
+  margin-top: 12px;
+  margin-right: 20px;
+}
+
+.socialBox:hover {
+  color: var(--darkPrimary);
+}
+
+.socialBox:hover .link {
+  color: var(--darkPrimary);
+  border-bottom: 1px solid var(--darkPrimary);
+  font-size: 36px;
+  line-height: 36px;
+}

src/components/pic-title-header/style.module.css

@@ -1,62 +0,0 @@
-.container {
-    margin: 0 auto 50px auto;
-    max-width: 948px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-}
-
-.container > * {
-    flex: 0 0 auto;
-    max-width: 100%;
-}
-
-.headerPic {
-    max-width: 300px;
-    max-height: 300px;
-    margin-right: 48px;
-    margin-bottom: 16px;
-}
-
-.title {
-    font-size: 64px;
-    line-height: 64px;
-    color: var(--highImpactBlack);
-    margin: 0;
-}
-
-.noMgContainer {
-    display: inline-block;
-    vertical-align: top;
-    width: 600px;
-}
-
-.subheader {
-    margin: 22px 0 0 0;
-    color: var(--midImpactBlack);
-    font-size: 32px;
-    line-height: 32px;
-    font-weight: 400;
-}
-
-.socialsContainer {
-    display: flex;
-
-}
-
-.socialIcon {
-    margin-top: 12px;
-    margin-right: 20px;
-}
-
-.socialBox:hover {
-    color: var(--darkPrimary);
-}
-
-.socialBox:hover .link {
-    color: var(--darkPrimary);
-    border-bottom: 1px solid var(--darkPrimary);
-    font-size: 36px;
-    line-height: 36px;
-}

src/components/post-card-list/index.js

@@ -1,42 +1 @@
-import React from "react"
+export * from "./post-card-list"
-import listStyle from "./style.module.css"
-import PostCard from "../post-card"
-import FilterSearchBar from "../filter-search-bar"
-
-class PostList extends React.Component {
-  render() {
-    /**
-     * overwriteAuthorInfo is a needed evil for now:
-     * @see https://github.com/gatsbyjs/gatsby/issues/14827
-     */
-    const { posts = [], showWordCount = false, overwriteAuthorInfo} = this.props
-
-    return (
-      <div>
-
-        <FilterSearchBar showWordCount={showWordCount}/>
-
-        <div className={listStyle.postsListContainer}>
-          {posts.map(({ node }) => {
-            const title = node.frontmatter.title || node.fields.slug
-            return (
-              <PostCard
-                slug={node.fields.slug}
-                className={listStyle.postListItem}
-                key={node.fields.slug}
-                excerpt={node.excerpt}
-                title={title}
-                author={overwriteAuthorInfo || node.frontmatter.author}
-                date={node.frontmatter.date}
-                tags={node.frontmatter.tags}
-                description={node.frontmatter.description}
-              />
-            )
-          })}
-        </div>
-      </div>
-    )
-  }
-}
-
-export default PostList

src/components/post-card-list/post-card-list.js

@@ -0,0 +1,37 @@
+import React from "react"
+import listStyle from "./post-card-list.module.scss"
+import { PostCard } from "../post-card"
+import { FilterSearchBar } from "../filter-search-bar"
+
+/**
+ * overwriteAuthorInfo is a needed evil for now:
+ * @see https://github.com/gatsbyjs/gatsby/issues/14827
+ */
+export const PostList = ({ posts = [], showWordCount = false, overwriteAuthorInfo }) => {
+  return (
+    <div>
+
+      <FilterSearchBar showWordCount={showWordCount}/>
+
+      <div className={listStyle.postsListContainer}>
+        {posts.map(({ node }) => {
+          const title = node.frontmatter.title || node.fields.slug
+          return (
+            <PostCard
+              slug={node.fields.slug}
+              className={listStyle.postListItem}
+              key={node.fields.slug}
+              excerpt={node.excerpt}
+              title={title}
+              author={overwriteAuthorInfo || node.frontmatter.author}
+              date={node.frontmatter.date}
+              tags={node.frontmatter.tags}
+              description={node.frontmatter.description}
+            />
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+

src/components/post-card-list/post-card-list.module.scss

@@ -0,0 +1,30 @@
+.postsListContainer {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+
+.postListItem {
+  margin: 6px 0;
+}
+
+
+@media screen and (min-width: 800px) {
+  .postListItem {
+    --marginSize: 12px;
+    flex-basis: calc(50% - var(--marginSize));
+    margin: calc(var(--marginSize) / 2) var(--marginSize);
+    flex-grow: 0;
+    width: calc(50% - var(--marginSize));
+    max-width: calc(50% - var(--marginSize));
+  }
+
+  .postListItem:nth-child(odd) {
+    margin-left: 0;
+  }
+
+  .postListItem:nth-child(even) {
+    margin-right: 0;
+  }
+}

src/components/post-card-list/style.module.css

@@ -1,30 +0,0 @@
-.postsListContainer {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-}
-
-
-.postListItem {
-    margin: 6px 0;
-}
-
-
-@media screen and (min-width: 800px) {
-    .postListItem {
-        --marginSize: 12px;
-        flex-basis: calc(50% - var(--marginSize));
-        margin: calc(var(--marginSize) / 2) var(--marginSize);
-        flex-grow: 0;
-        width: calc(50% - var(--marginSize));
-        max-width: calc(50% - var(--marginSize));
-    }
-
-    .postListItem:nth-child(odd) {
-        margin-left: 0;
-    }
-
-    .postListItem:nth-child(even) {
-        margin-right: 0;
-    }
-}

src/components/post-card/index.js

@@ -1,48 +1 @@
-import React from "react"
+export * from "./post-card"
-import { Link } from "gatsby"
-import cardStyles from "./style.module.css"
-import Image from "gatsby-image"
-
-class PostCard extends React.Component {
-  render() {
-    const { title, author, date, tags, excerpt, description, className, slug } = this.props
-
-    return (
-      <Link to={`posts${slug}`} className={`${cardStyles.card} ${className}`}>
-        <Image
-          fixed={author.profileImg.childImageSharp.smallPic}
-          alt={author.name}
-          className={cardStyles.profilePic}
-          style={{
-          borderColor: author.color,
-          }}
-          imgStyle={{
-            borderRadius: `50%`,
-          }}
-        />
-        <div className={cardStyles.cardContents}>
-          <h2 className={cardStyles.header}>{title}</h2>
-          <p className={cardStyles.authorName}>by <Link  to={`/authors/${author.id}`}>{author.name}</Link></p>
-          <div className={cardStyles.dateTagSubheader}>
-            <p className={cardStyles.date}>{date}</p>
-            <div>
-            {
-              tags.map(tag => (
-                <Link to={"/"} key={tag} className={cardStyles.tag}>
-                  {tag}
-                </Link>
-              ))
-            }
-            </div>
-          </div>
-          <p className={cardStyles.excerpt} dangerouslySetInnerHTML={{
-            __html: description || excerpt,
-          }}
-          />
-        </div>
-      </Link>
-    )
-  }
-}
-
-export default PostCard

src/components/post-card/post-card.js

@@ -0,0 +1,43 @@
+import React from "react"
+import { Link } from "gatsby"
+import cardStyles from "./post-card.module.scss"
+import Image from "gatsby-image"
+
+export const PostCard = ({ title, author, date, tags, excerpt, description, className, slug }) => {
+  return (
+    <Link to={`posts${slug}`} className={`${cardStyles.card} ${className}`}>
+      <Image
+        fixed={author.profileImg.childImageSharp.smallPic}
+        alt={author.name}
+        className={cardStyles.profilePic}
+        style={{
+          borderColor: author.color,
+        }}
+        imgStyle={{
+          borderRadius: `50%`,
+        }}
+      />
+      <div className={cardStyles.cardContents}>
+        <h2 className={cardStyles.header}>{title}</h2>
+        <p className={cardStyles.authorName}>by <Link to={`/authors/${author.id}`}>{author.name}</Link></p>
+        <div className={cardStyles.dateTagSubheader}>
+          <p className={cardStyles.date}>{date}</p>
+          <div>
+            {
+              tags.map(tag => (
+                <Link to={"/"} key={tag} className={cardStyles.tag}>
+                  {tag}
+                </Link>
+              ))
+            }
+          </div>
+        </div>
+        <p className={cardStyles.excerpt} dangerouslySetInnerHTML={{
+          __html: description || excerpt,
+        }}
+        />
+      </div>
+    </Link>
+  )
+}
+

src/components/post-card/post-card.module.scss

@@ -0,0 +1,109 @@
+.card {
+  border: var(--cardOutlineStyle);
+  box-sizing: border-box;
+  border-radius: var(--cardRadius);
+  position: relative;
+  color: inherit;
+  padding: 0 24px 23px 0;
+  box-shadow: none;
+  text-decoration: none;
+  transition: background var(--animSpeed) var(--animStyle),
+  box-shadow var(--animSpeed) var(--animStyle),
+  border-color var(--animSpeed) var(--animStyle);
+}
+
+.card:hover {
+  background: var(--cardActiveBackground);
+  border-color: transparent;
+  box-shadow: var(--cardActiveBoxShadow);
+}
+
+.card:hover .header {
+  text-decoration: underline;
+  transition: text-decoration var(--animSpeed);
+}
+
+.profilePic {
+  position: absolute !important;
+  left: 24px;
+  top: 24px;
+  border-radius: 50%;
+  border-width: 2px;
+  border-style: solid;
+}
+
+.cardContents {
+  margin-left: 108px;
+}
+
+.header {
+  margin: 21px 0 0 0;
+  font-size: 32px;
+}
+
+.authorName {
+  margin: 4px 0;
+}
+
+.dateTagSubheader {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+}
+
+.dateTagSubheader p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.date {
+  position: relative;
+  color: var(--darkGrey);
+  margin-right: 12px;
+}
+
+.tag {
+  color: var(--darkPrimary);
+}
+
+.tag:not(:first-child) {
+  margin-left: 12px;
+  position: relative;
+}
+
+.tag:not(:first-child)::before, .date::after {
+  --height: 20px;
+  --halfHeight: calc(var(--height) / 2);
+  position: absolute;
+  top: 50%;
+  margin-top: calc(0px - var(--halfHeight));
+  height: var(--height);
+  width: 1px;
+  background: var(--darkPrimary);
+  content: ' ';
+}
+
+.tag:not(:first-child)::before, .date::before {
+  left: -6px;
+}
+
+.date::after {
+  right: -6px;
+}
+
+.excerpt {
+  margin: 8px 0 0 0;
+  position: relative;
+}
+
+.excerpt::before {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  left: -12px;
+  width: 2px;
+  background: var(--darkPrimary);
+  content: ' ';
+}

src/components/post-card/style.module.css

@@ -1,109 +0,0 @@
-.card {
-    border: var(--cardOutlineStyle);
-    box-sizing: border-box;
-    border-radius: var(--cardRadius);
-    position: relative;
-    color: inherit;
-    padding: 0 24px 23px 0;
-    box-shadow: none;
-    text-decoration: none;
-    transition: background var(--animSpeed) var(--animStyle),
-    box-shadow var(--animSpeed) var(--animStyle),
-    border-color var(--animSpeed) var(--animStyle);
-}
-
-.card:hover {
-    background: var(--cardActiveBackground);
-    border-color: transparent;
-    box-shadow: var(--cardActiveBoxShadow);
-}
-
-.card:hover .header {
-    text-decoration: underline;
-    transition: text-decoration var(--animSpeed);
-}
-
-.profilePic {
-    position: absolute !important;
-    left: 24px;
-    top: 24px;
-    border-radius: 50%;
-    border-width: 2px;
-    border-style: solid;
-}
-
-.cardContents {
-    margin-left: 108px;
-}
-
-.header {
-    margin: 21px 0 0 0;
-    font-size: 32px;
-}
-
-.authorName {
-    margin: 4px 0;
-}
-
-.dateTagSubheader {
-    display: flex;
-    flex-direction: row;
-    flex-grow: 0;
-    flex-shrink: 0;
-    flex-wrap: wrap;
-}
-
-.dateTagSubheader p {
-    margin-top: 0;
-    margin-bottom: 0;
-}
-
-.date {
-    position: relative;
-    color: var(--darkGrey);
-    margin-right: 12px;
-}
-
-.tag {
-    color: var(--darkPrimary);
-}
-
-.tag:not(:first-child) {
-    margin-left: 12px;
-    position: relative;
-}
-
-.tag:not(:first-child)::before, .date::after {
-    --height: 20px;
-    --halfHeight: calc(var(--height) / 2);
-    position: absolute;
-    top: 50%;
-    margin-top: calc(0px - var(--halfHeight));
-    height: var(--height);
-    width: 1px;
-    background: var(--darkPrimary);
-    content: ' ';
-}
-
-.tag:not(:first-child)::before, .date::before {
-    left: -6px;
-}
-
-.date::after {
-    right: -6px;
-}
-
-.excerpt {
-    margin: 8px 0 0 0;
-    position: relative;
-}
-
-.excerpt::before {
-    position: absolute;
-    top: 0;
-    height: 100%;
-    left: -12px;
-    width: 2px;
-    background: var(--darkPrimary);
-    content: ' ';
-}

src/components/post-view/index.js

@@ -0,0 +1,2 @@
+export * from "./post-metadata"
+export * from "./post-title-header"

src/components/post-view/post-metadata/index.js

@@ -1,25 +1 @@
-import React from "react"
+export * from "./post-metadata"
-import Image from "gatsby-image"
-import styles from "./style.module.css"
-
-const PostMetadata = ({ post }) => {
-
-  const { frontmatter } = post
-  const { author } = frontmatter
-
-  return (
-    <div className={styles.container}>
-      <Image className={styles.img} fixed={author.profileImg.childImageSharp.mediumPic}/>
-      <div className={styles.textDiv}>
-        <h2 className={styles.authorName}>{author.name}</h2>
-        <div className={styles.belowName}>
-          <p className={styles.date}>{frontmatter.date}</p>
-          <p className={styles.wordCount}>{post.wordCount.words} words</p>
-        </div>
-      </div>
-    </div>
-  )
-
-}
-
-export default PostMetadata

src/components/post-view/post-metadata/post-metadata.js

@@ -0,0 +1,21 @@
+import React from "react"
+import Image from "gatsby-image"
+import styles from "./post-metadata.module.scss"
+
+export const PostMetadata = ({ post }) => {
+  const { frontmatter } = post
+  const { author } = frontmatter
+
+  return (
+    <div className={styles.container}>
+      <Image className={styles.img} fixed={author.profileImg.childImageSharp.mediumPic}/>
+      <div className={styles.textDiv}>
+        <h2 className={styles.authorName}>{author.name}</h2>
+        <div className={styles.belowName}>
+          <p className={styles.date}>{frontmatter.date}</p>
+          <p className={styles.wordCount}>{post.wordCount.words} words</p>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/post-view/post-metadata/post-metadata.module.scss

@@ -0,0 +1,48 @@
+.container {
+  display: flex;
+  flex-wrap: nowrap;
+  margin-bottom: 25px;
+  max-width: 768px;
+}
+
+.img {
+  flex-shrink: 0;
+  flex-grow: 0;
+  border-radius: 50%;
+}
+
+.textDiv {
+  margin-left: 24px;
+}
+
+.belowName > * {
+  font-weight: 400;
+  display: inline-block;
+  margin: 0 24px 0 0;
+  color: var(--lowImpactBlack);
+  font-size: 36px;
+  line-height: 36px;
+  position: relative;
+}
+
+.belowName > *:not(:last-child)::after {
+  position: absolute;
+  content: ' ';
+  right: -12px;
+  height: 100%;
+  width: 2px;
+  background: var(--darkPrimary);
+}
+
+.authorName {
+  font-size: 36px;
+  line-height: 36px;
+  color: var(--highImpactBlack);
+  margin: 0;
+}
+
+.date {
+}
+
+.wordCount {
+}

src/components/post-view/post-metadata/style.module.css

@@ -1,44 +0,0 @@
-.container {
-    display: flex;
-    flex-wrap: nowrap;
-    margin-bottom: 25px;
-    max-width: 768px;
-}
-
-.img {
-    flex-shrink: 0;
-    flex-grow: 0;
-    border-radius: 50%;
-}
-
-.textDiv {
-    margin-left: 24px;
-}
-
-.belowName > * {
-    font-weight: 400;
-    display: inline-block;
-    margin: 0 24px 0 0;
-    color: var(--lowImpactBlack);
-    font-size: 36px;
-    line-height: 36px;
-    position: relative;
-}
-
-.belowName > *:not(:last-child)::after {
-    position: absolute;
-    content: ' ';
-    right: -12px;
-    height: 100%;
-    width: 2px;
-    background: var(--darkPrimary);
-}
-
-.authorName {
-    font-size: 36px;
-    line-height: 36px;
-    color: var(--highImpactBlack);
-    margin: 0;
-}
-.date {}
-.wordCount {}

src/components/post-view/post-title-header/index.js

@@ -1,18 +1 @@
-import React from "react"
+export * from "./post-title-header"
-import styles from "./style.module.css"
-
-const PostTitleHeader = ({ post }) => {
-  const { frontmatter: {title, subtitle: a, tags} } = post
-
-  const subtitle = 'Research suggests the feature is overhyped as an accessibility tool'
-
-  return (
-    <div className={styles.container}>
-      <div className={styles.tags}>{tags.map(tag => <p key={tag}>{tag}</p>)}</div>
-      <h1 className={styles.title}>{title}</h1>
-      {subtitle && <h2 className={styles.subtitle}>{subtitle}</h2>}
-    </div>
-  )
-}
-
-export default PostTitleHeader

src/components/post-view/post-title-header/post-title-header.js

@@ -0,0 +1,14 @@
+import React from "react"
+import styles from "./post-title-header.module.scss"
+
+export const PostTitleHeader = ({ post }) => {
+  const { frontmatter: { title, subtitle, tags } } = post
+  
+  return (
+    <div className={styles.container}>
+      <div className={styles.tags}>{tags.map(tag => <p key={tag}>{tag}</p>)}</div>
+      <h1 className={styles.title}>{title}</h1>
+      {subtitle && <h2 className={styles.subtitle}>{subtitle}</h2>}
+    </div>
+  )
+}

src/components/post-view/post-title-header/post-title-header.module.scss

@@ -0,0 +1,34 @@
+.container {
+  max-width: 768px;
+}
+
+.tags > * {
+  font-weight: 700;
+  position: relative;
+  display: inline-block;
+  font-size: 26px;
+  color: var(--darkPrimary);
+  text-transform: uppercase;
+  margin: 0 24px 18px 0;
+}
+
+.tags > *:not(:last-child)::after {
+  position: absolute;
+  content: ' ';
+  right: -12px;
+  height: 100%;
+  width: 2px;
+  background: var(--darkPrimary);
+}
+
+.title {
+  color: var(--highImpactBlack);
+  font-size: 64px;
+  margin: 0 0 50px 0;
+}
+
+.subtitle {
+  font-family: var(--archivo);
+  font-size: 32px;
+  margin-bottom: 35px;
+}

src/components/post-view/post-title-header/style.module.css

@@ -1,34 +0,0 @@
-.container {
-    max-width: 768px;
-}
-
-.tags > * {
-    font-weight: 700;
-    position: relative;
-    display: inline-block;
-    font-size: 26px;
-    color: var(--darkPrimary);
-    text-transform: uppercase;
-    margin: 0 24px 18px 0;
-}
-
-.tags > *:not(:last-child)::after {
-    position: absolute;
-    content: ' ';
-    right: -12px;
-    height: 100%;
-    width: 2px;
-    background: var(--darkPrimary);
-}
-
-.title {
-    color: var(--highImpactBlack);
-    font-size: 64px;
-    margin: 0 0 50px 0;
-}
-
-.subtitle {
-    font-family: var(--archivo);
-    font-size: 32px;
-    margin-bottom: 35px;
-}

src/components/seo.js

@@ -8,7 +8,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import Helmet from "react-helmet"
-import { useStaticQuery, graphql } from "gatsby"
+import { graphql, useStaticQuery } from "gatsby"
 
 function SEO({ description, lang, meta, title }) {
   const { site } = useStaticQuery(
@@ -56,7 +56,7 @@ function SEO({ description, lang, meta, title }) {
         },
         {
           name: `twitter:creator`,
-          content: 'crutchcorn',
+          content: "crutchcorn",
         },
         {
           name: `twitter:title`,
@@ -84,4 +84,4 @@ SEO.propTypes = {
   title: PropTypes.string.isRequired,
 }
 
-export default SEO
+export { SEO }

src/global.scss

@@ -0,0 +1,133 @@
+:root {
+  /* Some obvious colors are duplicated to provide dark mode */
+  --darkPrimary: #153E67;
+  --primary: #127DB3;
+  --black: black;
+  --white: white;
+  --darkGrey: rgba(0, 0, 0, 0.64);
+  --highImpactBlack: rgba(0, 0, 0, 0.87);
+  --midImpactBlack: rgba(0, 0, 0, 0.64);
+  --lowImpactBlack: rgba(0, 0, 0, 0.58);
+  --backgroundColor: #E4F4FF;
+  --cardActiveBackground: rgb(235, 246, 252);
+  --cardActiveBoxShadow: 0px 2px 4px rgba(11, 37, 104, 0.27), inset 0px 1px 0px #FFFFFF;
+  --animSpeed: 200ms;
+  --animStyle: ease-in-out;
+  --cardOutlineStyle: 1px solid var(--primary);
+  --archivo: 'Archivo', sans-serif;
+  --oswald: 'Oswald', 'Archivo', sans-serif;
+  --baseNumber: 4;
+  --cardRadius: calc(2px * var(--baseNumber));
+  --filterBarIconSize: calc(6px * var(--baseNumber));
+  --filterBarFontSize: calc(5px * var(--baseNumber));
+  --listViewPadding: calc(3px * var(--baseNumber));
+}
+
+@media screen and (min-width: 600px) {
+  :root {
+    --listViewPadding: 20px;
+  }
+}
+
+.listViewContent {
+  margin: 0 auto;
+  max-width: 1272px;
+  padding: 0 var(--listViewPadding)
+}
+
+.postViewContent {
+  padding: 20px;
+}
+
+.postViewContent > * {
+  margin: 0 auto;
+}
+
+body {
+  background-color: var(--backgroundColor);
+  font-family: var(--archivo);
+}
+
+h1, h2, h3 {
+  font-family: var(--oswald);
+}
+
+/* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
+.visually-hidden {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+.visually-hidden a:focus,
+.visually-hidden input:focus,
+.visually-hidden button:focus {
+  position: static;
+  width: auto;
+  height: auto;
+}
+
+
+.filterDropdown {
+  transform-origin: 26px 26px;
+  transition: transform 300ms var(--animStyle);
+}
+
+.expandedIcon .filterDropdown {
+  transform: rotate(180deg);
+}
+
+.baseBtn {
+  cursor: pointer;
+}
+
+.baseBtn, .btnLike {
+  appearance: none;
+  text-decoration: none;
+  background: none;
+  border: none;
+  transition: background var(--animSpeed) var(--animStyle),
+  box-shadow var(--animSpeed) var(--animStyle),
+  border-color var(--animSpeed) var(--animStyle);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  border-radius: var(--cardRadius);
+  line-height: 16px;
+  font-size: 16px;
+  padding: 4px 8px;
+  color: var(--darkPrimary)
+}
+
+.baseBtn:hover {
+  background: var(--cardActiveBackground);
+  border-color: transparent;
+  box-shadow: var(--cardActiveBoxShadow);
+}
+
+.baseBtn svg, .btnLike svg {
+  height: 30px;
+  width: 30px;
+  flex-shrink: 0;
+}
+
+.baseBtn.prependIcon svg, .btnLike.prependIcon svg {
+  margin-right: 10px;
+}
+
+.baseBtn.appendIcon svg, .btnLike.appendIcon svg {
+  margin-left: 10px;
+}
+
+.post-body {
+  margin-bottom: 40px;
+  max-width: 576px;
+}
+
+.post-lower-area {
+  max-width: 920px;
+}

src/pages/404.js

@@ -1,8 +1,8 @@
 import React from "react"
 import { graphql } from "gatsby"
 
-import Layout from "../components/layout"
+import { Layout } from "../components/layout"
-import SEO from "../components/seo"
+import { SEO } from "../components/seo"
 
 class NotFoundPage extends React.Component {
   render() {

src/pages/index.js

@@ -1,9 +1,9 @@
 import React from "react"
 import { graphql } from "gatsby"
-import Layout from "../components/layout"
+import Layout from "../components/layout/layout"
-import SEO from "../components/seo"
+import { SEO } from "../components/seo"
-import PostList from "../components/post-card-list"
+import { PostList } from "../components/post-card-list"
-import PicTitleHeader from "../components/pic-title-header"
+import { PicTitleHeader } from "../components/pic-title-header"
 
 class BlogIndex extends React.Component {
   render() {
@@ -13,14 +13,14 @@ class BlogIndex extends React.Component {
 
     return (
       <Layout location={this.props.location} title={siteTitle}>
-        <SEO title="All posts"/>
+        <SEO title="All posts" />
         <div>
           <PicTitleHeader
             image={data.file.childImageSharp.fixed}
             title="Unicorn Utterances"
             description="A software development blog focused on the kinds of things they don’t teach you. Curated by Corbin Crutchley."
           />
-          <PostList posts={posts}/>
+          <PostList posts={posts} />
         </div>
       </Layout>
     )

src/templates/blog-author.js

@@ -1,9 +1,9 @@
 import React from "react"
 import { graphql } from "gatsby"
-import Layout from "../../components/layout"
+import { Layout } from "../components/layout"
-import SEO from "../../components/seo"
+import { SEO } from "../components/seo"
-import PostList from "../../components/post-card-list"
+import { PostList } from "../components/post-card-list"
-import PicTitleHeader from "../../components/pic-title-header"
+import { PicTitleHeader } from "../components/pic-title-header"
 
 class BlogAuthor extends React.Component {
   render() {
@@ -13,17 +13,18 @@ class BlogAuthor extends React.Component {
     const posts = slugData.allMarkdownRemark.edges
     return (
       <Layout location={this.props.location} title={siteTitle}>
-        <SEO
+        <SEO title={authorData.name} description={authorData.description} />
-          title={authorData.name}
-          description={authorData.description}
-        />
         <PicTitleHeader
           image={authorData.profileImg.childImageSharp.bigPic}
           title={authorData.name}
           description={authorData.description}
           author={true}
         />
-        <PostList posts={posts} overwriteAuthorInfo={authorData} showWordCount={true}/>
+        <PostList
+          posts={posts}
+          overwriteAuthorInfo={authorData}
+          showWordCount={true}
+        />
       </Layout>
     )
   }
@@ -38,10 +39,12 @@ export const pageQuery = graphql`
         title
       }
     }
-    authorsJson(id: {eq: $slug}) {
+    authorsJson(id: { eq: $slug }) {
       ...AuthorInfo
     }
-    allMarkdownRemark(filter: {frontmatter: {author: {id: {eq: $slug}}}}) {
+    allMarkdownRemark(
+      filter: { frontmatter: { author: { id: { eq: $slug } } } }
+    ) {
       totalCount
       edges {
         node {

src/templates/blog-post.js

@@ -1,21 +1,20 @@
 import React from "react"
 import { graphql } from "gatsby"
-import GitHubIcon from "../../assets/icons/github.svg"
+import GitHubIcon from "../assets/icons/github.svg"
-import ShareIcon from "../../assets/icons/share.svg"
+import ShareIcon from "../assets/icons/share.svg"
-import CommentsIcon from "../../assets/icons/message.svg"
+import CommentsIcon from "../assets/icons/message.svg"
 import Disqus from "disqus-react"
 
-import Layout from "../../components/layout"
+import { Layout } from "../components/layout"
-import SEO from "../../components/seo"
+import { SEO } from "../components/seo"
-import PostMetadata from "../../components/post-view/post-metadata"
+import { PostMetadata, PostTitleHeader } from "../components/post-view"
-import PostTitleHeader from "../../components/post-view/post-title-header"
 
 class BlogPostTemplate extends React.Component {
   render() {
     const post = this.props.data.markdownRemark
     const siteData = this.props.data.site.siteMetadata
     const siteTitle = siteData.title
-    const slug = post.fields.slug;
+    const slug = post.fields.slug
 
     const disqusConfig = {
       url: `${siteData.siteUrl}posts/${slug}`,
@@ -23,7 +22,9 @@ class BlogPostTemplate extends React.Component {
       title: post.frontmatter.title,
     }
 
-    const GHLink = `https://github.com/${siteData.repoPath}/tree/master${siteData.relativeToPosts}${slug}index.md`;
+    const GHLink = `https://github.com/${siteData.repoPath}/tree/master${
+      siteData.relativeToPosts
+    }${slug}index.md`
 
     return (
       <Layout location={this.props.location} title={siteTitle}>
@@ -31,29 +32,37 @@ class BlogPostTemplate extends React.Component {
           title={post.frontmatter.title}
           description={post.frontmatter.description || post.excerpt}
         />
-        <PostTitleHeader post={post}/>
+        <PostTitleHeader post={post} />
-        <PostMetadata post={post}/>
+        <PostMetadata post={post} />
-        <div className="post-body" dangerouslySetInnerHTML={{ __html: post.html }}/>
+        <div
+          className="post-body"
+          dangerouslySetInnerHTML={{ __html: post.html }}
+        />
         <div className="post-lower-area">
-          <div style={{
+          <div
-            display: "flex",
+            style={{
-            justifyContent: "space-between",
+              display: "flex",
-          }}>
+              justifyContent: "space-between",
+            }}
+          >
             <a className="baseBtn prependIcon" href={GHLink}>
-              <GitHubIcon/>
+              <GitHubIcon />
               View on GitHub
             </a>
 
             <button className="baseBtn appendIcon">
               Share this Post
-              <ShareIcon/>
+              <ShareIcon />
             </button>
           </div>
           <div className="btnLike prependIcon">
-            <CommentsIcon/>
+            <CommentsIcon />
             <p>Comments</p>
           </div>
-          <Disqus.DiscussionEmbed shortname={siteData.disqusShortname} config={disqusConfig}/>
+          <Disqus.DiscussionEmbed
+            shortname={siteData.disqusShortname}
+            config={disqusConfig}
+          />
         </div>
       </Layout>
     )

src/utils/a11y/useSelectRef.js

@@ -2,7 +2,7 @@
  * I need to cleanup this code and also add:
  *
  */
-import { useMemo, useState, useRef, useEffect } from "react"
+import { useEffect, useMemo, useRef, useState } from "react"
 import { useOutsideClick } from "../useOutsideClick"
 
 // Make new export in @reach-ui/auto-id
@@ -53,7 +53,7 @@ export const useSelectRef = (arrVal, enableSelect, onSel) => {
         newVal.selected = false
       }
 
-      return newVal;
+      return newVal
     })
 
     setInternalArr(newArr)
@@ -93,10 +93,10 @@ export const useSelectRef = (arrVal, enableSelect, onSel) => {
       let compareFunc = (i) => i === index
 
       // New index is before, we want to save all items before or equal
-      if (index < active.index) {
+      if (index < active.layout) {
-        compareFunc = (i) => i <= active.index && i >= index
+        compareFunc = (i) => i <= active.layout && i >= index
       } else {
-        compareFunc = (i) => i >= active.index && i <= index
+        compareFunc = (i) => i >= active.layout && i <= index
       }
 
       // Set the internal array with a new array with right items selected
@@ -140,18 +140,18 @@ export const useSelectRef = (arrVal, enableSelect, onSel) => {
         let isSelecting
         if (event.key === "ArrowDown") {
           event.preventDefault()
-          _newIndex = active.index + 1
+          _newIndex = active.layout + 1
           isSelecting = event.shiftKey
         } else if (event.key === "ArrowUp") {
           event.preventDefault()
-          _newIndex = active.index - 1
+          _newIndex = active.layout - 1
           isSelecting = event.shiftKey
-        } else if (enableSelect && event.key === " " || event.key === "Spacebar") {
+        } else if (enableSelect && (event.key === " " || event.key === "Spacebar")) {
           event.preventDefault()
-          _newIndex = active.index
+          _newIndex = active.layout
           isSelecting = "single"
-        } else if (!enableSelect && event.key === 'Enter') {
+        } else if (!enableSelect && event.key === "Enter") {
-          onSel(active.index)
+          onSel(active.layout)
         } else if (event.key === "Home") {
           event.preventDefault()
           _newIndex = 0

src/utils/useAfterInit.js

@@ -3,5 +3,5 @@ import { useEffect, useState } from "react"
 export const useAfterInit = () => {
   const [afterInit, setAfterInit] = useState(false)
   useEffect(() => setAfterInit(true), [])
-  return afterInit;
+  return afterInit
 }

src/utils/useOutsideClick.js

@@ -1,27 +1,27 @@
-import {useEffect, useRef} from 'react';
+import { useEffect, useRef } from "react"
 
 export const useOutsideClick = (enable, onOutsideClick, parentRef) => {
   const elRef = parentRef || useRef()
   const handleClickOutside = e => {
     if (elRef.current.contains(e.target)) {
       // inside click
-      return;
+      return
     }
     // outside click
-    onOutsideClick();
+    onOutsideClick()
-  };
+  }
 
   useEffect(() => {
     if (enable) {
-      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("mousedown", handleClickOutside)
     } else {
-      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("mousedown", handleClickOutside)
     }
 
     return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("mousedown", handleClickOutside)
-    };
+    }
-  }, [enable]);
+  }, [enable])
 
-  return elRef;
+  return elRef
 }

src/utils/useRefBoundingBox.js

@@ -2,7 +2,7 @@ import { useMemo, useRef } from "react"
 import { useAfterInit } from "./useAfterInit"
 import { useWindowSize } from "./useWindowSize"
 
-const getFromBoundClient = (rect) => ({
+const getFromBoundClient = rect => ({
   x: rect.x,
   y: rect.y,
   bottom: rect.bottom,
@@ -10,7 +10,7 @@ const getFromBoundClient = (rect) => ({
   left: rect.left,
   right: rect.right,
   top: rect.top,
-  width: rect.width
+  width: rect.width,
 })
 
 const emptyVal = {
@@ -24,29 +24,28 @@ const emptyVal = {
   width: 0,
 }
 
-export const useElementBoundingBox = (changeItem, changeFunc = a => a, debounceMs = 150) => {
+export const useElementBoundingBox = (
+  changeItem,
+  changeFunc = a => a,
+  debounceMs = 150
+) => {
   // Get the initial element size
   const afterInit = useAfterInit()
   const windowSize = useWindowSize(debounceMs)
   const ref = useRef()
 
   const boundingObj = useMemo(() => {
-    if (!ref.current) return {
+    if (!ref.current)
-      ...changeFunc(emptyVal),
+      return {
-      ref,
+        ...changeFunc(emptyVal),
-    }
+        ref,
+      }
     const bounding = ref.current.getBoundingClientRect()
     return {
       ref,
       ...changeFunc(getFromBoundClient(bounding)),
     }
-  }, [
+  }, [ref, afterInit, windowSize, changeItem, changeFunc])
-    ref,
-    afterInit,
-    windowSize,
-    changeItem,
-    changeFunc
-  ])
 
   return boundingObj
 }

src/utils/useWindowSize.js

@@ -2,7 +2,7 @@
  * Code migrated from this PR to use ES6 imports:
  * @see https://github.com/rehooks/window-size/pull/4
  */
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from "react"
 
 function getSize() {
   return {
@@ -10,30 +10,30 @@ function getSize() {
     innerWidth: window.innerWidth,
     outerHeight: window.outerHeight,
     outerWidth: window.outerWidth,
-  };
+  }
-};
+}
 
-export const useWindowSize = (debounceMs) => {
+export const useWindowSize = debounceMs => {
-  let [windowSize, setWindowSize] = useState(getSize());
+  let [windowSize, setWindowSize] = useState(getSize())
 
-  let timeoutId;
+  let timeoutId
 
   function handleResize() {
     if (timeoutId) {
-      clearTimeout(timeoutId);
+      clearTimeout(timeoutId)
     }
 
     timeoutId = setTimeout(function() {
-      setWindowSize(getSize());
+      setWindowSize(getSize())
-    }, debounceMs);
+    }, debounceMs)
   }
 
   useEffect(() => {
-    window.addEventListener('resize', handleResize);
+    window.addEventListener("resize", handleResize)
     return () => {
-      window.removeEventListener('resize', handleResize);
+      window.removeEventListener("resize", handleResize)
-    };
+    }
-  }, []);
+  }, [])
 
-  return windowSize;
+  return windowSize
 }