From 2141f1eed9936fc91a693c9740b521fb1e2eab3f Mon Sep 17 00:00:00 2001
From: Jacob <92279567+Oia20@users.noreply.github.com>
Date: Tue, 23 Apr 2024 14:20:55 -0500
Subject: [PATCH] Nav now respects other divs, added prompt component.

---
 CropSQL/Pages/Components/Header.razor.css     |  2 +-
 CropSQL/Pages/Components/Home.razor           |  7 +++----
 CropSQL/Pages/Components/Home.razor.css       |  6 ++++--
 CropSQL/Pages/Components/Prompt.razor         |  4 ++++
 CropSQL/Pages/Components/Prompt.razor.css     | 13 +++++++++++++
 CropSQL/Pages/Components/SideBarNav.razor.css |  7 +++++--
 CropSQL/wwwroot/css/app.css                   |  3 ++-
 7 files changed, 32 insertions(+), 10 deletions(-)
 create mode 100644 CropSQL/Pages/Components/Prompt.razor
 create mode 100644 CropSQL/Pages/Components/Prompt.razor.css

diff --git a/CropSQL/Pages/Components/Header.razor.css b/CropSQL/Pages/Components/Header.razor.css
index b222085..57eca94 100644
--- a/CropSQL/Pages/Components/Header.razor.css
+++ b/CropSQL/Pages/Components/Header.razor.css
@@ -3,7 +3,7 @@
     width: 100%;
     height: 75px;
     background-image: linear-gradient(140deg, #5e8d61,#5e8d61 );
-    border-bottom: 1px solid;
+    border-bottom: 2px solid;
     border-color: #302910;
 }
 
diff --git a/CropSQL/Pages/Components/Home.razor b/CropSQL/Pages/Components/Home.razor
index 40ca6a6..24565c4 100644
--- a/CropSQL/Pages/Components/Home.razor
+++ b/CropSQL/Pages/Components/Home.razor
@@ -4,8 +4,7 @@
 <PageTitle>CropSQL</PageTitle>
 <WelcomeModal />
 <Header />
+<div class="container123">
 <SideBarNav />
-<h1 class="content1">Hello, world!</h1>
-<p class="content1">   
-Welcome to crop sql!
-</p>
+<Prompt />
+</div>
diff --git a/CropSQL/Pages/Components/Home.razor.css b/CropSQL/Pages/Components/Home.razor.css
index d11ecc7..dce3ab0 100644
--- a/CropSQL/Pages/Components/Home.razor.css
+++ b/CropSQL/Pages/Components/Home.razor.css
@@ -1,3 +1,5 @@
-.content1 {
-    width: fit-content;
+.container123 {
+    display: flex;
+    flex-direction: row;
+    width: 100%
 }
\ No newline at end of file
diff --git a/CropSQL/Pages/Components/Prompt.razor b/CropSQL/Pages/Components/Prompt.razor
new file mode 100644
index 0000000..6ea5e65
--- /dev/null
+++ b/CropSQL/Pages/Components/Prompt.razor
@@ -0,0 +1,4 @@
+<div class="prompt">
+    <p>Let's start by creating your farm with "CREATE DATABASE" followed by the name of your farm.
+        ex: CREATE DATABASE myFarm; don't forget the semi-colon, this is how sql knows where your command ends.</p>
+</div>
\ No newline at end of file
diff --git a/CropSQL/Pages/Components/Prompt.razor.css b/CropSQL/Pages/Components/Prompt.razor.css
new file mode 100644
index 0000000..e462c7c
--- /dev/null
+++ b/CropSQL/Pages/Components/Prompt.razor.css
@@ -0,0 +1,13 @@
+.prompt {
+    background-image: linear-gradient(140deg, #a2b780, #5e8d61);
+    padding: 20px;
+    border-radius: 12px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Increased shadow */
+    border: 2px solid #5e8d61; /* Solid border */
+    margin: 5px;
+    width:80%;
+    height:fit-content;
+    margin:auto;
+    margin-top: 5px;
+    margin-bottom:5px;
+}
\ No newline at end of file
diff --git a/CropSQL/Pages/Components/SideBarNav.razor.css b/CropSQL/Pages/Components/SideBarNav.razor.css
index 1a31455..97b8437 100644
--- a/CropSQL/Pages/Components/SideBarNav.razor.css
+++ b/CropSQL/Pages/Components/SideBarNav.razor.css
@@ -2,11 +2,14 @@
 .sidebar {
     position:relative;
     left: 0;
-    height:90vh;
+    top:0;
+    height:100vh;
     width: 200px;
-    background-color: #333;
+    background-color: #5e8d61;
     color: #fff;
     padding-top: 20px;
+    border-right: 2px solid;
+    border-color: #302910;
 }
 
 .sidebar ul {
diff --git a/CropSQL/wwwroot/css/app.css b/CropSQL/wwwroot/css/app.css
index 9a0de67..86443f5 100644
--- a/CropSQL/wwwroot/css/app.css
+++ b/CropSQL/wwwroot/css/app.css
@@ -2,8 +2,9 @@
 
 html, body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    height:100vh;
+    height:auto;
     background-image: linear-gradient(180deg, #a2b780, #5e8d61);
+    width:100%
 
 }