styling for authenticated app

src/App.jsx

@@ -10,7 +10,7 @@ function App() {
 	console.log(user);
 	return (
 		<div className="app">
-			<h1>Frontend</h1>
+			<h1 className="main-title">GOG</h1>
 			{user ? <AuthenticatedApp /> : <UnauthenticatedApp />}
 		</div>
 	);

src/App.scss

@@ -11,3 +11,7 @@ body {
 	background-color: colours.$background-color;
 	color: colours.$text-color;
 }
+
+.main-title {
+	font-style: italic;
+}

src/components/AuthenticatedApp.jsx

@@ -1,15 +1,20 @@
 import React from "react";
 import { useAuth } from "../context/AuthContext";
+import "./AuthenticatedApp.scss";
 
 function AuthenticatedApp() {
 	const { logout, user } = useAuth();
 
 	return (
-		<div>
-			<p>Howdy partner. Your name looks like it&apos;s {user.display_name}.</p>
+		<div className="authenticated-app-outer">
 			<button type="button" onClick={logout}>
 				Logout
 			</button>
+			<div className="authenticated-app">
+				<p>
+					Howdy partner. Your name looks like it&apos;s {user.display_name}.
+				</p>
+			</div>
 		</div>
 	);
 }

src/components/AuthenticatedApp.scss

@@ -0,0 +1,17 @@
+@use '../common_styles/colours';
+@use '../common_styles/typography';
+
+.authenticated-app-outer {
+	.authenticated-app {
+		padding: 1em;
+		margin: 1em;
+	}
+	button {
+		background-color: colours.$accent-color;
+		border: 0;
+		color: colours.$inverted-text-color;
+		font: typography.$stack;
+		margin: 10px;
+		padding: 10px 15px;
+	}
+}

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

@@ -1,17 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AuthenticatedApp Snapshot 1`] = `
-<div>
-  <p>
-    Howdy partner. Your name looks like it's 
-    Ted
-    .
-  </p>
+<div
+  className="authenticated-app-outer"
+>
   <button
     onClick={[MockFunction]}
     type="button"
   >
     Logout
   </button>
+  <div
+    className="authenticated-app"
+  >
+    <p>
+      Howdy partner. Your name looks like it's 
+      Ted
+      .
+    </p>
+  </div>
 </div>
 `;