export and package cleanup

jsconfig.json

 {
   "compilerOptions": {
-    "baseUrl": "."
+    "baseUrl": "src"
   },
   "include": ["src/**/*"]
 }

package.json

@@ -15,30 +15,30 @@
     "scss": "node-sass src/_assets/scss/main.scss src/_assets/css/main.css",
     "scss:watch": "npm run scss && node-sass --watch src/_assets/scss/main.scss --output-style compressed --source-map true --output src/_assets/css",
     "start": "craco start",
-    "test:cover": "npm run test -- --coverage --watchAll=false --onlyChanged=false",
+    "test:cover": "npm run test:all -- --coverage",
     "test:watch-cover": "npm run test -- --coverage --onlyChanged=false",
-    "test": "craco test --env=jest-environment-jsdom-sixteen",
-    "test:all": "craco test --env=jest-environment-jsdom-sixteen --watchAll=false",
+    "test": "craco test",
+    "test:all": "craco test --watchAll=false --onlyChanged=false",
     "regress": "testcafe chrome ./testing/main.spec.js -r spec"
   },
   "author": "Joe Ziemba",
   "license": "ISC",
   "dependencies": {
     "@craco/craco": "^6.3.0",
+    "@tailwindcss/postcss7-compat": "^2.2.16",
     "firebase": "^8.10.0",
-    "focus-trap-react": "^8.7.1",
+    "focus-trap-react": "^8.8.1",
     "lodash": "^4.17.21",
     "normalize.css": "^8.0.1",
     "react": "^17.0.2",
     "react-bootstrap-typeahead": "^5.2.0",
     "react-dom": "^17.0.2",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
+    "react-router": "^5.2.1",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "^4.0.3",
     "react-toastify": "^7.0.0",
     "react-transition-group": "^4.4.2",
-    "reactstrap": "^8.9.0",
-    "sass": "^1.38.0"
+    "sass": "^1.42.1"
   },
   "browserslist": [
     ">0.2%",
@@ -49,18 +49,18 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
-    "autoprefixer": "^9.8.6",
+    "autoprefixer": "^9.8.7",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jest": "^24.4.0",
+    "eslint-plugin-jest": "^24.5.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react": "^7.26.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest-environment-jsdom-sixteen": "^2.0.0",
     "node-sass": "^4.14.1",
-    "postcss": "^7.0.36",
-    "prettier": "^2.3.2",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.14",
+    "postcss": "^7.0.38",
+    "prettier": "^2.4.1",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.16",
     "testcafe": "^1.16.0"
   },
   "jest": {

src/App.css

-@import url("//fonts.googleapis.com/css?family=Lato:100,200,300,400,500,600,700,800,900|Vollkorn:400,600,700");
-
-html,
-body,
-#root {
-  font-family: "Lato", Helvetica, sans-serif;
-  min-height: 100vh;
-  position: relative;
-  line-height: 125%;
-}
-
-body {
-  overflow: overlay;
-  overflow-x: hidden;
-}
-
-body::-webkit-scrollbar {
-  width: 8px;
-  /* background-color: #f3f4f6; */
-}
-
-body::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.5);
-  border-radius: 20px;
-}
-
-.scroller {
-  overflow-y: overlay;
-}
-
-.scroller::-webkit-scrollbar {
-  width: 8px;
-}
-
-.scroller::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.5);
-  border-radius: 20px;
-}
-
-.fancy-font {
-  font-family: "Vollkorn", Georgia, Times, serif;
-}
-
-option {
-  /* text-align: left; */
-  background-color: white;
-  color: black;
-}
-
-@import "./StatblockGenerator/StatblockGenerator.css";
-@import "./_styles/animations.css";

src/App.js

-import React, { Component, useEffect, useState } from "react"
+import React, { useEffect, useState } from "react"
 import { Route } from "react-router-dom"
 import { ToastContainer } from "react-toastify"
 import "react-toastify/dist/ReactToastify.css"
 
-import "./App.css"
-import "./_assets/css/main.css"
-import { UserContext } from "./context"
+import { UserContext } from "context"
 
-import { StatblockGenerator } from "./StatblockGenerator"
-import Home from "./views/Home"
-import CharacterBuilder from "./views/pf2/CharacterBuilder"
+import { CharacterBuilder, Home, StatblockGenerator } from "views"
 
-import { TopBar } from "./_globalComponents"
+import { TopBar } from "_globalComponents"
+import { firebase } from "services/Firebase"
+import { RedesignAnnounceModal } from "PF2CharacterBuilder/_modals/RedesignAnnounceModal"
 
-import { firebase } from "./Firebase"
-import { RedesignAnnounceModal } from "./PF2CharacterBuilder/_modals/RedesignAnnounceModal"
-
-const App = (props) => {
+const App = () => {
   const [currentUser, setUser] = useState(null)
 
   useEffect(() => {

src/PF2CharacterBuilder/_components/AbilityScoresSection.js

 import React from "react"
 import _ from "lodash"
-import { Abilities } from "../../_data/abilities"
+import { Abilities } from "_data/abilities"
 import { Card } from "./Card"
 import { Select } from "./Select"
 import { SubHeading } from "./SubHeading"

src/PF2CharacterBuilder/_components/CharacterBasics.js

 import React from "react"
-import { PF2CharacterContext } from "../../context"
+import { PF2CharacterContext } from "context"
 import { SaveRow } from "./SaveRow"
 import Statbox from "./Statbox"
 import TEMLbuttons from "./TEMLbuttons"
@@ -192,7 +192,7 @@ const AC = ({ character }) => {
   function calculateAC(character) {
     let ac = 10
     ac += character.abilityMods.Dexterity
-    // TODO this Will: need to be refactored to enable proficiencies with armor
+    // TODO this will need to be refactored to enable proficiencies with armor
 
     if (
       character.class.defenses &&

src/PF2CharacterBuilder/_components/FeatSelection.js

 import React, { useState, useEffect, useCallback } from "react"
 import _ from "lodash"
-import FEATS from "src/_data/feats/allFeats.json"
+import FEATS from "_data/feats/allFeats.json"
 
 const FeatSelection = ({ featKey, character, selectFeat }) => {
   const [query, setQuery] = useState("")

src/PF2CharacterBuilder/_components/FeatsSection.js

 import React, { useState, useEffect, useContext } from "react"
 import FeatEntry from "./FeatEntry"
 import FeatSelection from "./FeatSelection"
-import { Modal } from "../../_globalComponents"
+import { Modal } from "_globalComponents"
 import { Card } from "./Card"
 import { SubHeading } from "./SubHeading"
 import { PlaceholderText } from "./PlaceholderText"
-import { PF2CharacterContext } from "src/context"
+import { PF2CharacterContext } from "context"
 
 const FeatsSection = () => {
   const { character, selectFeat, deleteFeat } = useContext(

src/PF2CharacterBuilder/_components/FreeSkillBoosts.js

 import React, { useContext } from "react"
-import { PF2CharacterContext } from "../../context"
-import { Skills } from "../../_data/skills"
+import { PF2CharacterContext } from "context"
+import { Skills } from "_data/skills"
 import { Select } from "./Select"
 
 export const FreeSkillBoosts = ({ boostSource, boostLevel }) => {

src/PF2CharacterBuilder/_components/SkillsTable2.js

 import React, { useContext } from "react"
 import Statbox from "./Statbox"
-import { Abilities } from "../../_data/abilities"
+import { Abilities } from "_data/abilities"
 import TEMLbuttons from "./TEMLbuttons"
 import { Card } from "./Card"
 import { FreeSkillBoosts } from "./FreeSkillBoosts"
 import { SubHeading } from "./SubHeading"
-import { PF2CharacterContext } from "../../context"
+import { PF2CharacterContext } from "context"
 
 const SkillsTable = () => {
   const { character } = useContext(PF2CharacterContext)

src/PF2CharacterBuilder/_components/SubNav.js

 import React from "react"
 import { Link } from "react-router-dom"
-import { UserContext } from "../../context"
-import { firebase } from "../../Firebase"
+import { UserContext } from "context"
+import { firebase } from "services/Firebase"
 import { toast } from "react-toastify"
-import NavButton from "../../_globalComponents/NavButton"
-import { Modal } from "src/_globalComponents"
+import NavButton from "_globalComponents/NavButton"
+import { Modal } from "_globalComponents"
 
 class SubNav extends React.Component {
   constructor(props) {

src/PF2CharacterBuilder/_components/teml.scss

-@import "../../_assets/scss/variables";
+@import "_assets/scss/variables";
 
 .c-teml {
   display: flex;

src/PF2CharacterBuilder/_modals/NewFeatureModal.js

 import React, { useEffect, useState } from "react"
-import { Modal } from "../../_globalComponents"
+import { Modal } from "_globalComponents"
 
 const NewFeatureModal = () => {
   const [show, setShow] = useState(false)
@@ -14,7 +14,7 @@ const NewFeatureModal = () => {
   }, [])
   return (
     <Modal
-      show={false}
+      show={show}
       title="Version 1.1 is here!"
       closeFunction={onClose}
     >

src/PF2CharacterBuilder/_modals/RedesignAnnounceModal.js

 import React, { useLayoutEffect, useState } from "react"
-import { Modal } from "../../_globalComponents"
+import { Modal } from "_globalComponents"
 import cn from "classnames"
 
 export const RedesignAnnounceModal = () => {

src/PF2CharacterBuilder/_services/ancestry.js

 import { cloneDeep } from "lodash"
-import { Ancestries } from "../../_data/ancestries"
+import { Ancestries } from "_data/ancestries"
 
 export function applyNewAncestry(characterToUpdate, ancestryId) {
   // Make a clone to prevent side effect.

src/StatblockGenerator/FormSections/AbilityScoresForm.js

 import React, { useContext } from "react"
-import { Column, Row, SelectField } from "src/_globalComponents"
-import { StatblockContext } from "../StatblockGenerator"
+import { SelectField } from "_globalComponents"
+import { StatblockContext } from "context"
 
 export const AbilityScoresForm = () => {
   const abilities = ["str", "dex", "con", "int", "wis", "cha"]

src/StatblockGenerator/FormSections/BasicsForm.js

 import React, { useContext } from "react"
-import { Column, Input, Row, SelectField } from "src/_globalComponents"
-import { StatblockContext } from "../StatblockGenerator"
+import { Column, Input, Row, SelectField } from "_globalComponents"
+import { StatblockContext } from "context"
 
 export const BasicsForm = () => {
   const { stats, updateState, updateAC, updateHP } =

src/StatblockGenerator/FormSections/FeatureForm.js

 import React, { useContext } from "react"
-import { StatblockContext } from "../StatblockGenerator"
+import { StatblockContext } from "context"
 import { FeatureBlock } from "../_components/FeatureBlock"
-import NavButton from "src/_globalComponents/NavButton"
+import NavButton from "_globalComponents/NavButton"
 
 export const FeatureForm = () => {
   const { updateFeature, deleteFeature, addFeature, stats } =

src/StatblockGenerator/FormSections/LegendaryActionsForm.js

 import React, { useContext } from "react"
-import NavButton from "src/_globalComponents/NavButton"
-import { Input } from "src/_globalComponents"
-import { InputFlat } from "../../_globalComponents"
-import { StatblockContext } from "../StatblockGenerator"
-import { FeatureBlock } from "src/StatblockGenerator/_components/FeatureBlock"
+import NavButton from "_globalComponents/NavButton"
+import { Input } from "_globalComponents"
+import { StatblockContext } from "context"
+import { FeatureBlock } from "StatblockGenerator/_components/FeatureBlock"
 
 export const LegendaryActionsForm = () => {
   const { stats, updateAction, deleteAction, updateState, addAction } =
@@ -12,7 +11,10 @@ export const LegendaryActionsForm = () => {
   return (
     <>
       <div className="mb-4">
-        <label className="col-span-2 mb-0 mr-4" htmlFor="legendaryActPerRound">
+        <label
+          className="col-span-2 mb-0 mr-4"
+          htmlFor="legendaryActPerRound"
+        >
           Legendary Actions Per Round:
         </label>
         <Input