improved_layout

frontend/package.json

@@ -12,7 +12,9 @@
   "dependencies": {
     "axios": "^1.4.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "sweetalert2": "^11.7.26",
+    "typeface-roboto": "^1.1.13"
   },
   "devDependencies": {
     "@types/react": "^18.0.37",

frontend/src/App.css

@@ -4,16 +4,15 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  /*height: 100vh;*/
 }
 
 #app-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 10px;
-  flex-grow: 2;
-  /*overflow-y: scroll;*/
+  margin-top: 110px;
+  margin-bottom: 20px;
 }
 
 #app-content h2 {
@@ -83,7 +82,7 @@
   padding: 10px;
   border-radius: 10px;
   border: none;
-  background-color: #325780;
+  background-color: #1d568d;
   color: #fff;
   font-weight: bold;
   font-size: 16px;
@@ -97,11 +96,12 @@
 }
 
 #text-no-plans p{
-  background-color: #fdebf2;
+  background-color: #fdf7eb;
   padding: 7px 10px;
   margin: 0;
   width:300px;
-  border: 2px solid #f83182;
-  color: #cc133e;
+  border: 2px solid #e79604;
+  border-radius: 5px;
+  color: #eca53a;
   font-size: 1.25rem;
 }

frontend/src/App.tsx

@@ -4,6 +4,7 @@ import axios from "axios";
 import './index.css'
 import PlanListContainer from "./PlanListContainer.tsx";
 import {Plan} from "./Plan.ts";
+import Swal from 'sweetalert2'
 
 export default function App() {
     const[planInput, setPlanInput] = useState<string>("");
@@ -26,10 +27,18 @@ export default function App() {
                     console.log(error);
                 });
             setIsHidden(true);
-            alert("plan successfully added");
+            Swal.fire({
+                icon: 'success',
+                title: 'Success!',
+                text: 'Your entry was saved!',
+            })
             setText("");
         }else {
-            alert("please enter a name for the plan")
+            Swal.fire({
+                icon: 'error',
+                title: 'Oops...',
+                text: 'You need to enter a name!',
+            })
         }
         setPlanInput("");
     }
@@ -61,7 +70,11 @@ export default function App() {
                     console.log("plan not found");
                 });
         } else {
-            alert("please enter a name for the plan");
+            Swal.fire({
+                icon: 'error',
+                title: 'Oops...',
+                text: 'You need to enter a name!',
+            })
         }
     }
 

frontend/src/Footer.css

@@ -1,16 +1,48 @@
 .footer{
-  background-color: #3384d2;
+  background-color: #1d568d;
   height: 100px;
   width: 100%;
   position: fixed;
   bottom: 0;
+  z-index: 10;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  font-size: 1rem;
+  box-sizing: border-box;
 }
 
-.footer p{
+.footer-box p{
   margin: 0;
   padding: 1rem;
   text-align: center;
   color: #fff;
+
+}
+
+.orange{
+  color: #fc7f36;
 }
 
+.yellow{
+  color: #ffea00;
+  font-weight: bold;
+}
+
+.new-line{
+  display: none;
+}
+
+@media (max-width: 600px){
+  .footer{
+    font-size: 0.9rem;
+  }
+  .new-line{
+    display: inline;
+  }
+}
+
+
+
 

frontend/src/Footer.tsx

@@ -2,10 +2,26 @@ import './Footer.css'
 
 export default function Footer() {
 
+    const myName = "Alexander Leonidas Guenzel"
+    const company = "Neue Fische GmbH"
+    const year = new Date().getFullYear();
+    const course = "Java Fullstack Bootcamp";
+
   return (
     <>
         <div className="footer">
-        <p>Author: Alexander Leonidas Guenzel</p>
+            <div className="footer-box">
+                <p>
+                    <span className="orange"> ©{year} </span>
+                    <span className="yellow"> | </span>
+                    <span> {myName.toUpperCase()} </span>
+                    <span className="yellow"> | </span>
+                    <span className="new-line"><br></br></span>
+                    <span className="orange">{company.toUpperCase()}</span>
+                    <span className="yellow"> | </span>
+                    <span> {course.toUpperCase()} </span>
+                </p>
+            </div>
         </div >
     </>
   )

frontend/src/Header.css

@@ -1,13 +1,47 @@
 .header{
   background-color: #3384d2;
-  height: 90px;
+  height: 120px;
+  width: 100%;
+  min-width: 300px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  box-sizing: border-box;
+  position: fixed;
+  padding: 5px 0;
+}
+
+.header-text-box{
+  display: flex;
+  flex-direction: column;
+  width: 300px;
+  background-color: rgba(97, 156, 236, 0.66);
+  padding: 10px 15px;
+  border-bottom-right-radius: 20px;
+  border-top-right-radius: 20px;
+  box-sizing: border-box;
+  border: solid 1px rgba(190, 215, 252, 0.66);
+  border-left: none;
 }
 
 .header h1{
   margin: 0;
-  padding: 1rem;
-  text-align: center;
-  color: #fff;
+  padding: 0;
+  color: #f1f2f6;
+  text-shadow: 2px 1px 3px #46659a;
+  font-size: 2.6rem;
+  z-index: 3;
+  align-self: flex-start;
+}
+
+.header p{
+  margin: 0;
+  padding: 0;
+  color: #30517e;
+  align-self: center;
+  font-size: 1.4rem;
+  font-family: "Roboto Light", sans-serif;
 }
 
 
+

frontend/src/Header.tsx

@@ -5,7 +5,10 @@ export default function Header() {
   return (
     <>
         <div className="header">
-        <h1>EasyPlan</h1>
+            <div className="header-text-box">
+                <h1>EasyPlan</h1>
+                <p>Smart scheduling</p>
+            </div>
         </div >
     </>
   )

frontend/src/PlanCard.css

@@ -9,7 +9,6 @@
     max-width: 400px;
     background-color: #fff;
     border-radius: 8px;
-    /*box-shadow: 0 0 10px rgba(0,0,0,0.1);*/
     box-sizing: border-box;
     text-align: left;
     color: #0d2f6e;

frontend/src/index.css

@@ -1,5 +1,5 @@
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, Roboto, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
@@ -19,6 +19,7 @@ body {
   min-width: 320px;
   min-height: 100vh;
   background-color: #d8ebfd;
+  font-family: Roboto, sans-serif;
 }
 
 h1 {

frontend/src/main.tsx

@@ -4,6 +4,8 @@ import App from './App.tsx'
 import './index.css'
 import Header from "./Header.tsx";
 import Footer from "./Footer.tsx";
+import 'typeface-roboto'
+
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>