Zw/feature/tool tip summary

cypress/e2e/spec_Dashboard.cy.ts

@@ -6,7 +6,7 @@ describe('Dashboard Page Tests', () => {
             body: {
                 data: {
                     "username": "[email protected]",
-                    "passsword": "kim123"
+                    "password": "kim123"
                 }
             }
         })

cypress/e2e/spec_ShortenLinkPage.cy.ts

@@ -6,10 +6,10 @@ describe('Login Page Tests', () => {
             body: {
                 data: {
                     "username": "[email protected]",
-                    "passsword": "kim123"
+                    "password": "kim123"
                 }
             }
-        })
+        }).as('loginRequest')
         cy.intercept('GET', 'https://turlink-be-53ba7254a7c1.herokuapp.com/api/v1/top_links', {
             statusCode: 200,
             fixture: 'topfivelinks'
@@ -21,14 +21,15 @@ describe('Login Page Tests', () => {
         cy.intercept("POST", "https://turlink-be-53ba7254a7c1.herokuapp.com/api/v1/users/undefined/links?link=www.example.com%2FCypressExample", {
             statusCode: 200,
             fixture: 'shortenlink.json'  
-          })
+          }).as('shortenLinkRequest')
         cy.intercept("POST", "https://turlink-be-53ba7254a7c1.herokuapp.com/api/v1/users/undefined/links?link=www.example.com%2FCypressSecondExample", {
             statusCode: 200,
             fixture: 'shortenlink2.json'  
-          })
+          }).as('shortenSecondLinkRequest')
         cy.get('.email-input').type('[email protected]')
         cy.get('.password-input').type('kim123')
         cy.get('.login-button').click()
+        cy.wait('@loginRequest')
         cy.url().should('include', 'dashboard')
         cy.get('.dashboard-header').should('contain', 'Dashboard')
     })
@@ -47,13 +48,15 @@ describe('Login Page Tests', () => {
         cy.get('[href="/shortenlink"]').click()
         cy.get('.shorten-link-input').type('www.example.com/CypressExample')
         cy.get('.shorten-link-button').click()
+        cy.wait('@shortenLinkRequest')
         cy.get('.shortened-link-input').should('have.value', 'tur.link/4a7c204baeacaf2c')
     })
     it('should submit a second original link and return a second shortened link', () => {
         cy.get('.navbar')
         cy.get('[href="/shortenlink"]').click()
         cy.get('.shorten-link-input').type('www.example.com/CypressSecondExample')
         cy.get('.shorten-link-button').click()
+        cy.wait('@shortenSecondLinkRequest')
         cy.get('.shortened-link-input').should('have.value', 'tur.link/0970e271')
     })
     it('should be able to copy the shortened link', () => {

src/Components/Dashboard/Dashboard.css

@@ -127,7 +127,7 @@ footer {
     border-radius: 12px;
     padding: 5px 10px;
     font-size: 0.9em;
-    color: #333;
+    color: #3C4040;
     margin-right: 1em;
     margin-bottom: 1em; 
 }
@@ -143,4 +143,60 @@ footer {
 
 .current {
     text-decoration: underline;
+}
+
+.tooltip {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+}
+
+.tooltip .tooltiptext {
+    visibility: hidden;
+    width: 120px;
+    background-color: white;
+    color: #3C4040;
+    font-family: Arial, sans-serif; 
+    text-align: center;
+    padding: 5px 0;
+    border-radius: 4px;
+    border: 1px solid #2BC2D1; 
+    position: absolute;
+    z-index: 1;
+    top: -0.5em;
+    left: 125%;
+    transform: translateY(-20%);
+  }
+
+  .tooltip:hover .tooltiptext {
+    visibility: visible;
+  }
+
+  .tooltip .tooltiptext::before {
+    content: " ";
+    position: absolute;
+    top: 50%;
+    right: 100%; 
+    margin-top: -7px;
+    border-width: 7px 26px;
+    border-style: solid;
+    border-color: transparent #2BC2D1 transparent transparent; 
+  }
+
+  .tooltip .tooltiptext::after {
+    content: " ";
+    position: absolute;
+    top: 50%;
+    right: 98%;
+    margin-top: -5px; 
+    margin-right: 2px; 
+    border-width: 5px 24px; 
+    border-style: solid;
+    border-color: transparent white transparent transparent; 
+}
+
+#tooltip-instructions {
+    font-size: 0.9em; 
+    font-weight: normal;
+    color: #2BC2D1;
 }

src/Components/Dashboard/Dashboard.tsx

@@ -78,15 +78,20 @@ const Dashboard: React.FC = () => {
                 {!error && (
                     <div className="links-table">
                         <div className="table-header">
-                            <div className="header-item"></div>
+                            <div className="header-item" id='tooltip-instructions'>✨ Hover over links for a summary of content</div>
                             <div className="header-item">Click Count</div>
                             <div className="header-item">Tags</div>
                         </div>
                         {links.length > 0 ? (
                             links.map((link, index) => (
                                 <div key={index} className="table-row">
                                     <div className="table-item link-name">
-                                        <a onClick={(event: React.MouseEvent<HTMLAnchorElement>) => handleClick(link.name, event)} href={link.name}>{link.name}</a>
+                                        <div className="tooltip">
+                                            <a onClick={(event: React.MouseEvent<HTMLAnchorElement>) => handleClick(link.name, event)} href={link.name}>{link.name}</a>
+                                            <span className="tooltiptext">
+                                            ✨ More info about this link
+                                            </span>
+                                        </div>    
                                     </div>
                                     <div className="table-item click-count">{link.clickCount}</div>
                                     <div className="table-item tags">