[frontend] feat: Adding github info (#54)

frontend/src/App.css

@@ -78,7 +78,7 @@ body::before {
   width: 260px;
   height: 350px;
   padding: 10px;
-  backdrop-filter: blur(5px);
+  backdrop-filter: blur(50px);
 
 }
 
@@ -207,14 +207,32 @@ textarea {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin: 0px 20px 20px 20px;
   padding: 10px;
   width: 300px;
-  height: 200px;
+  height: 320px;
   border-radius: 20px;
   border: 2px solid white;
   margin: 10px;
-  backdrop-filter: blur(10px);
+  backdrop-filter: blur(80px);
+  text-align: center;
+}
+
+.registration-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.github-info-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+}
+
+.github-image {
+  width: 40px;
 }
 
 .registration-link {
@@ -273,7 +291,7 @@ textarea {
   border-radius: 20px;
   border: 2px solid white;
   padding: 30px;
-  backdrop-filter: blur(10px);
+  backdrop-filter: blur(80px);
 }
 
 .edit-buttons {

frontend/src/App.test.tsx

@@ -53,10 +53,9 @@ describe('App', () => {
 
     expect(localStorage.getItem('token')).toBeNull();
 
-    waitFor(() => { 
+    await waitFor(() => {
       expect(screen.queryByTestId('note-app')).not.toBeInTheDocument();
-    }
-    );
+    });
     expect(await screen.findByText('Login')).toBeInTheDocument();
   });
 });

frontend/src/components/RegistrationForm.test.tsx

@@ -21,7 +21,7 @@ describe('RegistrationForm', () => {
     userEvent.type(screen.getByPlaceholderText('Confirm Password'), 'passwor');
     userEvent.click(screen.getByText('Register'));
     expect(
-      await screen.findByText('Error: Passwords do not match')
+      await screen.findByText('Error: Passwords do not match'),
     ).toBeInTheDocument();
   });
   it('should throw error message on failed registration', async () => {
@@ -34,26 +34,26 @@ describe('RegistrationForm', () => {
 
     await waitFor(() => {
       expect(
-        screen.getByText('Error: An error occurred. Please retry')
+        screen.getByText('Error: An error occurred. Please retry'),
       ).toBeInTheDocument();
     });
   });
   it('should register new user', async () => {
     render(<RegistrationForm {...props} />);
     userEvent.type(
       screen.getByPlaceholderText('Username'),
-      `test${Date.now()}`
+      `test${Date.now()}`,
     );
     userEvent.type(
       screen.getByPlaceholderText('Email'),
-      `test${Date.now()}@email.com`
+      `test${Date.now()}@email.com`,
     );
     userEvent.type(screen.getByPlaceholderText('Password'), 'pass');
     userEvent.type(screen.getByPlaceholderText('Confirm Password'), 'pass');
     userEvent.click(screen.getByText('Register'));
     await waitFor(() => {
       expect(
-        screen.getByText('Account created successfully!')
+        screen.getByText('Account created successfully!'),
       ).toBeInTheDocument();
     });
   });

frontend/src/components/RegistrationLink.test.tsx

@@ -4,11 +4,21 @@ import RegistrationLink from './RegistrationLink';
 describe('RegistrationLink', () => {
   it('should render the registration link', () => {
     render(<RegistrationLink onRegister={false} />);
-    expect(screen.getByText('Welcome to the e-notes app')).toBeInTheDocument();
     expect(
-      screen.getByText('Sign up for your free account'),
+      screen.getByText(
+        'This is a simple app to demonstrate different automated testing techniques.',
+      ),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText('Sign up for your free e-notes account.'),
     ).toBeInTheDocument();
     expect(screen.getByText('Sign up')).toBeInTheDocument();
+
+    expect(
+      screen.getByText('View the source code on GitHub.'),
+    ).toBeInTheDocument();
+
+    expect(screen.getByAltText('Github link')).toBeInTheDocument();
   });
 
   it('should render the registration link with account created successfully message', () => {

frontend/src/components/RegistrationLink.tsx

@@ -1,13 +1,30 @@
+/* eslint-disable prettier/prettier */
 const RegistrationLink = (props: { onRegister: boolean }) => {
   return (
-    <div>
-      <div className="registration-link">
-        <h1>e-notes</h1>
-      </div>
+    <div className="registration-container">
       {!props.onRegister ? (
         <div className="registration-link-container">
-          <p>Welcome to the e-notes app</p>
-          <p>Sign up for your free account</p>
+          <div className="github-info-container">
+            <p>
+              This is a simple app to demonstrate different automated testing
+              techniques. 
+            </p>
+            <p>
+            View the source code on GitHub.
+            </p>
+            <a
+              href="https://github.com/helloitsdave/notes-app-full-stack-testing"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <img
+                className="github-image"
+                src="github-mark.svg"
+                alt="Github link"
+              />
+            </a>
+          </div>
+          <p>Sign up for your free e-notes account.</p>
           <a className="nav-link" href="/register">
             Sign up
           </a>