Styling

client/package.json

@@ -13,6 +13,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.9.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^5.3.9",
     "stream-http": "^3.2.0",
     "url": "^0.11.0",
     "web-vitals": "^2.1.4"

client/src/components/App.css

@@ -1,15 +1,54 @@
+@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap');
+
+.button {
+  position: absolute;
+  width: 306px;
+  height: 191px;
+  /*left: 413px;
+  top: 1381px; */
+
+  background: #FFFFFF;
+  box-shadow: 0px 15px 40px #A2C3C7;
+  border-radius: 60px;
+}
+/* .Link {
+  font-family: 'Comfortaa';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 40px;
+  line-height: 45px;
+  text-align: center;
+
+color: #7FA3C0;
+} */
+
 .App {
   text-align: center;
-  font-family: "Courier New", monospace;
+  font-family: 'Comfortaa', cursive;
+  background: #D7EDF0;
   width: 100%;
+  height: 100%
+}
+
+body {
+  text-align: center;
+  font-family: 'Comfortaa', cursive;
+  background: #D7EDF0;
+  width: 100%;
+  height: 100%
+}
+
+
+ul {
+  list-style-type: none;
 }
 
 h1 {
-  font-weight: normal;
+  font-weight: bold;
   font-size: 42px;
 }
 
-.passwords {
+/* .passwords {
   list-style: none;
   padding: 0;
   font-size: 32px;
@@ -18,7 +57,7 @@ h1 {
 
 .more {
   font-size: 32px;
-  font-family: "Courier New", monospace;
+  font-family: 'Comfortaa', cursive;
   border: 2px solid #000;
   background-color: #fff;
   padding: 10px 25px;
@@ -28,4 +67,4 @@ h1 {
 }
 .more:active {
   background-color: #FFEFA9;
-}
+} */

client/src/components/Header.js

@@ -1,19 +1,38 @@
 import { Link } from "react-router-dom";
 import './App.css';
+import styled from 'styled-components';
+
+const Button = styled.button`
+
+  width: 100px;
+  height: 70px;
+  font-family: 'Comfortaa', cursive;
+  background: #FFFFFF;
+  box-shadow: 0px 5px 20px #A2C3C7;
+  border-radius: 30px;
+`
 
 const Layout = () => {
   return (
     <>
     <div className="App">
-    <h1>Welcome to Geode</h1>
+    {/* <h1>geode</h1> */}
       <nav>
 
         <ul>
           <li>
-            <Link to="/">Home</Link>
+            <Link to="/">
+              <Button>
+                Home
+              </Button>
+            </Link>
           </li>
           <li>
-            <Link to="/journal">Journal</Link>
+            <Link to="/journal">
+              <Button>
+                Journal
+              </Button>
+            </Link>
           </li>
           {/* <li>
             <Link to="/contact">Contact</Link>

client/src/components/Journal.js

@@ -55,15 +55,15 @@ class Journal extends Component {
 
     return (
       <div className="App">
-        <Header />
+        <h1>journaling</h1>
          {/* header */}
         <div>
-          <h1>Geode Journaling</h1>
+
           <ul>
             <li>Made for HooHacks 2023</li>
             <li>Madelyn K., Catherine X., Megan K.</li>
           </ul>
-          <h2>Write a journal entry below:</h2><br></br>
+          <h2>Write your journal entry below:</h2><br></br>
         </div>
 
         { !finished ? (
@@ -141,7 +141,9 @@ class Journal extends Component {
 
 
           </div>
+
         )}
+        <Header />
       </div>
     );
   }

client/src/components/Layout.js

@@ -1,11 +1,16 @@
 import { Link } from "react-router-dom";
 import './App.css';
+import Header from './Header';
 
 const Layout = () => {
   return (
     <>
     <div className="App">
-        <h1>Welcome to Geode</h1>
+      <h1>geode</h1>
+      <div>
+        <Header />
+      </div>
+        {/* <h1>geode</h1>
       <nav>
         <ul>
           <li>
@@ -17,8 +22,8 @@ const Layout = () => {
           {/* <li>
             <Link to="/contact">Contact</Link>
           </li> */}
-        </ul>
-      </nav>
+        {/* </ul>
+      </nav> */}
 
       {/* <h2>Welcome to React Router Tutorial</h2>
           <nav className="navbar navbar-expand-lg navbar-light bg-light">