From 7786c14dd8e5cf1c3930f0cd9346f5613a5d9726 Mon Sep 17 00:00:00 2001
From: Dave <43282177+helloitsdave@users.noreply.github.com>
Date: Sat, 15 Jun 2024 14:17:19 +0100
Subject: [PATCH] [frontend] feat: Adding github info (#54)

---
 frontend/public/github-mark.svg               |  1 +
 frontend/src/App.css                          | 28 ++++++++++++++----
 frontend/src/App.test.tsx                     |  5 ++--
 .../src/components/RegistrationForm.test.tsx  | 10 +++----
 .../src/components/RegistrationLink.test.tsx  | 14 +++++++--
 frontend/src/components/RegistrationLink.tsx  | 29 +++++++++++++++----
 6 files changed, 66 insertions(+), 21 deletions(-)
 create mode 100644 frontend/public/github-mark.svg

diff --git a/frontend/public/github-mark.svg b/frontend/public/github-mark.svg
new file mode 100644
index 00000000..37fa923d
--- /dev/null
+++ b/frontend/public/github-mark.svg
@@ -0,0 +1 @@
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>
\ No newline at end of file
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 2165c093..d57d2476 100644
--- a/frontend/src/App.css
+++ b/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 {
diff --git a/frontend/src/App.test.tsx b/frontend/src/App.test.tsx
index cdb56678..39f04971 100644
--- a/frontend/src/App.test.tsx
+++ b/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();
   });
 });
diff --git a/frontend/src/components/RegistrationForm.test.tsx b/frontend/src/components/RegistrationForm.test.tsx
index 8cf87758..233177f1 100644
--- a/frontend/src/components/RegistrationForm.test.tsx
+++ b/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,7 +34,7 @@ describe('RegistrationForm', () => {
 
     await waitFor(() => {
       expect(
-        screen.getByText('Error: An error occurred. Please retry')
+        screen.getByText('Error: An error occurred. Please retry'),
       ).toBeInTheDocument();
     });
   });
@@ -42,18 +42,18 @@ describe('RegistrationForm', () => {
     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();
     });
   });
diff --git a/frontend/src/components/RegistrationLink.test.tsx b/frontend/src/components/RegistrationLink.test.tsx
index d420bd91..873f2903 100644
--- a/frontend/src/components/RegistrationLink.test.tsx
+++ b/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', () => {
diff --git a/frontend/src/components/RegistrationLink.tsx b/frontend/src/components/RegistrationLink.tsx
index 3e565179..6dfaab90 100644
--- a/frontend/src/components/RegistrationLink.tsx
+++ b/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>