[frontend] feat: Adding css tweak

frontend/src/App.css

@@ -11,6 +11,7 @@ body {
   background-image: url('../public/hero.jpg');
   background-size: cover;
   background-position: center;
+  background-attachment: fixed  ;
 }
 
 @media (min-width: 600px) {
@@ -40,6 +41,7 @@ body {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  margin-bottom: 20px;
 }
 
 .login-register {
@@ -207,8 +209,7 @@ textarea {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin: auto;
-
+  margin: 10px;
 }
 
 .nav-link {
@@ -251,6 +252,17 @@ textarea {
   cursor: pointer;
 }
 
+.notes-grid-welcome {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 20px;
+  border: 2px solid white;
+  padding: 30px;
+  backdrop-filter: blur(10px);
+}
+
 .edit-buttons {
   display: flex;
   justify-content: space-evenly;

frontend/src/components/Login.tsx

@@ -43,8 +43,8 @@ const Login: React.FC<LoginProps> = ({ onLogin }) => {
     <div className="login-page">
       <div className="login-page-form">
         <form onSubmit={handleSubmit}>
-          <h3>Existing users</h3>
-          {errorText !== "" && <span>{errorText}</span>}
+          <h3>Existing user login</h3>
+          {errorText !== "" && <span className='registration-form-error'>{errorText}</span>}
           <input
             type="text"
             placeholder="Username"

frontend/src/components/NoteGrid.tsx

@@ -13,8 +13,14 @@ const NoteGrid: React.FC<NotesListProps> = ({
   deleteNote,
 }) => {
   return (
-    <div className='notes-list'>
+    <div className="notes-list">
       <div className="notes-grid">
+        {notes.length === 0 && (
+          <div className="notes-grid-welcome">
+            <h2>Welcome to e-notes!</h2>
+            <p>Click above to add your first note</p>
+          </div>
+        )}
         {notes.map((note) => (
           <Note
             key={note.id}