Replace instances of class with className

client/views/404.jsx

@@ -6,7 +6,7 @@ export default function Index() {
     <Layout>
       <div className="jumbotron">
         <h1 className="display-4">404</h1>
-        <p class="lead">This page was not found.</p>
+        <p className="lead">This page was not found.</p>
       </div>
     </Layout>
   );

client/views/Index.jsx

@@ -6,8 +6,8 @@ export default function Index({ user }) {
     <Layout user={user}>
       <div className="jumbotron">
         <h1 className="display-4">Welcome back, {user.name?.split(" ")[0]}!</h1>
-        <p class="lead">Thanks for testing out the Ωmega alpha.</p>
-        <hr class="my-4"></hr>
+        <p className="lead">Thanks for testing out the Ωmega alpha.</p>
+        <hr className="my-4"></hr>
         <div className="d-flex flex-column">
           <a
             className="btn btn-light btn-sm mb-2"

client/views/Landing.jsx

@@ -6,8 +6,8 @@ export default function Index() {
     <Layout>
       <div className="jumbotron">
         <h1 className="display-4">Ωmega</h1>
-        <p class="lead">The last CRM you will ever need.</p>
-        <hr class="my-4"></hr>
+        <p className="lead">The last CRM you will ever need.</p>
+        <hr className="my-4"></hr>
         <div className="d-flex flex-column">
           <a
             className="btn btn-primary btn-sm mb-2"

client/views/clients/Detail.jsx

@@ -14,7 +14,7 @@ export default function Detail({ client, user }) {
               <h5 className="card-title text-capitalize">
                 {event.eventType.replace("_", " ")}
               </h5>
-              <h6 class="card-subtitle mb-2 text-muted">
+              <h6 className="card-subtitle mb-2 text-muted">
                 {moment(event.createdAt).fromNow()}
               </h6>
               <p className="card-text text-capitalize">
@@ -30,7 +30,7 @@ export default function Detail({ client, user }) {
     <Layout user={user}>
       <h4 className="display-4">
         {client.name}{" "}
-        <span class="badge badge-pill badge-dark text-capitalize">
+        <span className="badge badge-pill badge-dark text-capitalize">
           {client.status.replace("_", " ")}
         </span>
       </h4>

client/views/clients/Index.jsx

@@ -8,13 +8,13 @@ export default function Clients({ clients, user }) {
         href={"/clients/" + client.id}
         className="list-group-item list-group-item-action"
       >
-        <div class="d-flex w-100 justify-content-between">
-          <h5 class="mb-1">{client.name}</h5>
+        <div className="d-flex w-100 justify-content-between">
+          <h5 className="mb-1">{client.name}</h5>
           <small className="text-capitalize">
             {client.status.replace("_", " ")}
           </small>
         </div>
-        <p class="mb-1">{client.email}</p>
+        <p className="mb-1">{client.email}</p>
       </a>
     );
   });

client/views/clients/New.jsx

@@ -40,9 +40,9 @@ export default function Clients({ user }) {
                 id="email"
               />
             </div>
-            <div class="form-group">
+            <div className="form-group">
               <label for="status">Current Status</label>
-              <select class="form-control" id="status" name="status">
+              <select className="form-control" id="status" name="status">
                 <option value="potential">Potential</option>
                 <option value="active">Active</option>
                 <option value="on_hold">On Hold</option>

client/views/layouts/Header.jsx

@@ -5,12 +5,12 @@ export default function Head() {
   const user = useContext(UserContext);
 
   return (
-    <nav class="navbar navbar-expand-lg navbar-light container">
-      <a class="navbar-brand" href="/">
+    <nav className="navbar navbar-expand-lg navbar-light container">
+      <a className="navbar-brand" href="/">
         Ωmega
       </a>
       <button
-        class="navbar-toggler"
+        className="navbar-toggler"
         type="button"
         data-toggle="collapse"
         data-target="#navbarNav"
@@ -18,34 +18,34 @@ export default function Head() {
         aria-expanded="false"
         aria-label="Toggle navigation"
       >
-        <span class="navbar-toggler-icon"></span>
+        <span className="navbar-toggler-icon"></span>
       </button>
-      <div class="collapse navbar-collapse" id="navbarNav">
-        <ul class="navbar-nav">
-          <li class="nav-item active">
-            <a class="nav-link" href="/clients">
-              Clients <span class="sr-only">(current)</span>
+      <div className="collapse navbar-collapse" id="navbarNav">
+        <ul className="navbar-nav">
+          <li className="nav-item active">
+            <a className="nav-link" href="/clients">
+              Clients <span className="sr-only">(current)</span>
             </a>
           </li>
         </ul>
-        <ul class="navbar-nav ml-auto">
+        <ul className="navbar-nav ml-auto">
           {user ? (
-            <li class="nav-item">
-              <a class="nav-link" href="/auth/logout">
+            <li className="nav-item">
+              <a className="nav-link" href="/auth/logout">
                 Logged in as {user.name} - Log Out{" "}
-                <span class="sr-only">(current)</span>
+                <span className="sr-only">(current)</span>
               </a>
             </li>
           ) : (
             <>
-              <li class="nav-item">
-                <a class="nav-link" href="/auth/login">
-                  Login <span class="sr-only">(current)</span>
+              <li className="nav-item">
+                <a className="nav-link" href="/auth/login">
+                  Login <span className="sr-only">(current)</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="/auth/register">
-                  Register <span class="sr-only">(current)</span>
+              <li className="nav-item">
+                <a className="nav-link" href="/auth/register">
+                  Register <span className="sr-only">(current)</span>
                 </a>
               </li>
             </>