fix tailwind colors

src/PF2CharacterBuilder/_components/FeatsSection.js

@@ -147,7 +147,7 @@ const FeatsSection = () => {
           label=""
           feat={{}}
           addFeat={() => openFeatSelection("misc_" + numMiscFeats)}
-        />{" "}
+        />
       </div>
       <Modal
         show={showFeatSelection}

src/PF2CharacterBuilder/_components/SubNav.js

@@ -39,18 +39,18 @@ class SubNav extends React.Component {
     return (
       <div className="fixed w-full bg-navy-700 text-white z-10 shadow-md">
         <div className="max-w-5xl mx-auto px-8 py-2 flex">
-          <h1 className="m-0 mr-8 text-2xl leading-tight">
+          <h1 className="flex-1 m-0 mr-8 text-2xl leading-tight">
             Character Builder
           </h1>
 
-          <NavButton color="navy-700" onClick={this.props.reset}>
+          <NavButton color="navy" onClick={this.props.reset}>
             {this.context.currentUser ? "New" : "Clear Sheet"}
           </NavButton>
 
           {this.context.currentUser && (
             <React.Fragment>
               <NavButton
-                color="navy-700"
+                color="navy"
                 onClick={() => {
                   if (this.props.character.name) {
                     firebase.savePF2Character(this.props.character)
@@ -62,7 +62,7 @@ class SubNav extends React.Component {
                 Save
               </NavButton>
 
-              <NavButton color="navy-700" onClick={this.getCharacters}>
+              <NavButton color="navy" onClick={this.getCharacters}>
                 Open
               </NavButton>
             </React.Fragment>

src/PF2CharacterBuilder/_modals/RedesignAnnounceModal.js

@@ -30,7 +30,6 @@ export const RedesignAnnounceModal = () => {
       show={show}
       title=""
       closeFunction={onClose}
-      color="slate-500"
     >
       <div className="text-base md:text-lg leading-normal px-8 py-6 md:px-16 md:py-8">
         <h3 className={headingClasses}>RPGWorkshop has a new look!</h3>

src/StatblockGenerator/FormSections/FeatureForm.js

@@ -18,7 +18,7 @@ export const FeatureForm = () => {
           />
         )
       })}
-      <NavButton color="red-900 mt-2" onClick={addFeature}>
+      <NavButton color="red mt-2" onClick={addFeature}>
         <i className="fa fa-plus mr-2" />
         Feature
       </NavButton>

src/StatblockGenerator/FormSections/LegendaryActionsForm.js

@@ -41,7 +41,7 @@ export const LegendaryActionsForm = () => {
       })}
 
       <NavButton
-        color="red-900"
+        color="red"
         className="mr-2 mt-2"
         onClick={() => addAction("General")}
       >

src/StatblockGenerator/StatBlockForm.js

@@ -10,7 +10,7 @@ import { BasicsForm } from "./FormSections/BasicsForm"
 
 const StatBlockForm = (props) => {
   return (
-    <div id="StatBlockForm" className="w-11/12 mx-auto text-sm">
+    <div id="StatBlockForm" className="w-11/12 text-sm">
       <Accordion title="Basic Details" open>
         <BasicsForm />
       </Accordion>

src/StatblockGenerator/_components/Actions.js

@@ -34,7 +34,7 @@ export const Actions = ({ legendary }) => {
       })}
       <div className="mt-4">
         <NavButton
-          color="red-900"
+          color="red"
           className="mr-2"
           onClick={() => addAction("General")}
         >
@@ -42,7 +42,7 @@ export const Actions = ({ legendary }) => {
           Action
         </NavButton>
         <NavButton
-          color="red-900"
+          color="red"
           className="mr-2"
           onClick={() => addAction("Melee")}
         >
@@ -50,7 +50,7 @@ export const Actions = ({ legendary }) => {
           Melee Attack
         </NavButton>
         <NavButton
-          color="red-900"
+          color="red"
           className=""
           onClick={() => addAction("Ranged")}
         >

src/StatblockGenerator/_components/GeneratorNav.js

@@ -52,14 +52,14 @@ export class GeneratorNav extends React.Component {
             Statblock Generator
           </h1>
 
-          <NavButton color="red-900" onClick={this.props.reset}>
+          <NavButton color="red" onClick={this.props.reset}>
             New
           </NavButton>
 
           {this.context.currentUser && !this.props.exportView && (
             <React.Fragment>
               <NavButton
-                color="red-900"
+                color="red"
                 onClick={() => {
                   this.saveStatblock(this.props.statblock)
                 }}
@@ -67,19 +67,19 @@ export class GeneratorNav extends React.Component {
                 Save
               </NavButton>
 
-              <NavButton color="red-900" onClick={this.getCharacters}>
+              <NavButton color="red" onClick={this.getCharacters}>
                 Open
               </NavButton>
             </React.Fragment>
           )}
-          <NavButton color="red-900" onClick={this.props.toggleExportView}>
+          <NavButton color="red" onClick={this.props.toggleExportView}>
             {this.props.exportView ? "Generator" : "Export"}
           </NavButton>
 
           <Modal
             show={this.state.showOpenModal}
             title="Choose a Statblock"
-            color="red-900"
+            color="bg-red-900"
             closeFunction={this.closeModal}
           >
             {this.state.statblocks.map((statblock, i) => {

src/_globalComponents/Modal.js

@@ -5,7 +5,7 @@ import cn from "classnames"
 const Modal = ({
   show,
   large,
-  color = "navy-700",
+  color = "bg-slate-500",
   closeFunction,
   title,
   children,
@@ -54,7 +54,7 @@ const Modal = ({
       <FocusTrap>
         <div className={containerClasses}>
           <h2
-            className={`pl-8 text-white text-2xl flex justify-between items-center bg-${color}`}
+            className={`pl-8 text-white text-2xl flex justify-between items-center ${color}`}
           >
             <span>{title}</span>
             <button

src/_globalComponents/NavButton.js

@@ -5,14 +5,21 @@ const NavButton = ({
   children,
   onClick,
   color = "",
-  hoverColor = "",
 }) => {
+  let bg, bgHover
+  if (color === "red") {
+    bg = "bg-red-900"
+    bgHover = "hover:bg-red-500"
+  }
+  if (color === "navy") {
+    bg = "bg-navy-700"
+    bgHover = "hover:bg-navy-500"
+  }
   return (
     <button
       className={
-        `px-4 py-2 rounded-sm bg-${color} hover:bg-${
-          hoverColor || color.split("-")[0]
-        }-500 transition-colors text-white ` + className
+        `px-4 py-2 rounded-sm ${bg} ${bgHover} transition-colors text-white ` +
+        className
       }
       onClick={onClick}
     >

src/_globalComponents/TopBar/TopBar.js

@@ -40,7 +40,7 @@ const TopBar = (props) => {
             {showMenu && (
               <div
                 // style={{ width: "110%" }}
-                className="shadow-xl leading-snug z-50 right-0 left-0 absolute bg-slate-700 transition-colors text-white top-12 shadow-md"
+                className="shadow-xl leading-snug z-20 right-0 left-0 absolute bg-slate-700 transition-colors text-white top-12 shadow-md"
                 onClick={() => setShowMenu(false)}
               >
                 <button

src/views/Home.js

@@ -6,7 +6,8 @@ import castle_png from "_assets/img/castle.png"
 const Home = () => {
   return (
     <div
-      className={"flex flex-wrap justify-around mt-6 max-w-5xl mx-auto"}
+      className={"flex flex-wrap justify-around max-w-5xl mx-auto"}
+      style={{ marginTop: "5%" }}
     >
       <AppCard
         buttonTextColor="text-red-900"

src/views/StatblockGenerator.js

@@ -394,7 +394,7 @@ class StatblockGenerator extends Component {
             history={this.props.history}
           />
           <div
-            className="max-w-5xl mx-auto"
+            className="max-w-5xl mx-auto px-8"
             style={{ position: "relative" }}
           >
             {this.state.exportView && (
@@ -418,7 +418,7 @@ class StatblockGenerator extends Component {
             {!this.state.exportView && (
               <div className="flex flex-wrap mt-12">
                 <div
-                  className="flex-1 mt-8 "
+                  className="flex-1 mt-8"
                   style={{ minWidth: "410px" }}
                 >
                   <StatBlockForm
@@ -437,7 +437,7 @@ class StatblockGenerator extends Component {
                     addLegendaryAction={this.addLegendaryAction}
                   />
                 </div>
-                <div className="flex-1" style={{ minWidth: "300px" }}>
+                <div className="flex-1" style={{ minWidth: "" }}>
                   <div className="statblock-container">
                     <div className="statblock-container__inner">
                       <StatBlockDisplay stats={this.state} />