Adds styling for unauthenticated app

__mocks__/styleMock.js

@@ -0,0 +1,3 @@
+// __mocks__/styleMock.js
+
+module.exports = {};

package.json

@@ -26,7 +26,10 @@
 			"<rootDir>/src/**/*.jsx",
 			"!<rootDir>/src/**/*.test.jsx"
 		],
-		"coverageProvider": "babel"
+		"coverageProvider": "babel",
+		"moduleNameMapper": {
+			"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
+		}
 	},
 	"private": "true",
 	"license": "ISC",

src/App.css

@@ -9,6 +9,6 @@
 }
 
 body {
-	background-color: rgb(240, 240, 240);
+	background-color: rgb(250, 245, 242);
 	color: rgb(50, 50, 50);
 }

src/components/UnauthenticatedApp.css

@@ -0,0 +1,15 @@
+.UnauthenticatedApp button {
+	padding: 10px 15px;
+	border: 0px;
+	margin: 10px;
+	background-color: rgb(70, 90, 200);
+	color: rgb(255, 255, 255);
+}
+
+.UnauthenticatedApp .chooseLogin {
+}
+
+.UnauthenticatedApp .chooseRegister {
+	background-color: rgb(200, 200, 200);
+	color: rgb(50, 50, 50);
+}

src/components/UnauthenticatedApp.jsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { useAuth } from "../context/AuthContext";
 import Login from "./Login";
 import Register from "./Register";
+import "./UnauthenticatedApp.css";
 
 function UnauthenticatedApp() {
 	const { login, register } = useAuth();
@@ -19,14 +20,14 @@ function UnauthenticatedApp() {
 				<button
 					type="submit"
 					onClick={() => setShowRegister(false)}
-					className="login"
+					className="chooseLogin"
 				>
 					Login
 				</button>
 				<button
 					type="submit"
 					onClick={() => setShowRegister(true)}
-					className="register"
+					className="chooseRegister"
 				>
 					Register
 				</button>

src/components/UnauthenticatedApp.test.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import { render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import UnauthenticatedApp from "./UnauthenticatedApp";
-import '@testing-library/jest-dom/extend-expect';
+import "@testing-library/jest-dom/extend-expect";
 import { AuthContext } from "../context/AuthContext";
 
 test("Login inputs", () => {
@@ -20,9 +20,10 @@ test("Login inputs", () => {
 	const chooseRegisterButton = app.getByRole("button", { name: /Register/i });
 
 	userEvent.click(chooseLoginButton);
-	expect(app.getByRole('heading')).toHaveTextContent('Please Log In')
+	expect(app.getByRole("heading")).toHaveTextContent("Please Log In");
 
 	userEvent.click(chooseRegisterButton);
-	expect(app.getByRole('heading')).toHaveTextContent('Enter your data to register.')
-
+	expect(app.getByRole("heading")).toHaveTextContent(
+		"Enter your data to register."
+	);
 });

src/components/__snapshots__/UnauthenticatedApp-snapshot.test.jsx.snap

@@ -8,14 +8,14 @@ exports[`UnauthenticatedApp Snapshot 1`] = `
     className="loginRegisterButtonsWrapper"
   >
     <button
-      className="login"
+      className="chooseLogin"
       onClick={[Function]}
       type="submit"
     >
       Login
     </button>
     <button
-      className="register"
+      className="chooseRegister"
       onClick={[Function]}
       type="submit"
     >