Finish dashboard and link creation

4 files changed, 19 insertions, 4 deletions

diff --git a/app/src/components/Dashboard.tsx b/app/src/components/Dashboard.tsx
index 1b728d1..d2bca9e 100644
--- a/app/src/components/Dashboard.tsx
+++ b/app/src/components/Dashboard.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import styles from '../styles/Dashboard.module.css';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, Link } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import Navbar from './Navbar';
@@ -149,7 +149,11 @@ function Dashboard() {
               <tr>
                 <td colSpan={4}>
                   <div className={styles.noLinks}>
-                    You do not have any shortened links - try creating one.
+                    You do not have any shortened links -{' '}
+                    <Link to="/create" className={styles.noLinksLink}>
+                      create one here
+                    </Link>
+                    .
                   </div>
                 </td>
               </tr>
diff --git a/app/src/styles/Auth.module.css b/app/src/styles/Auth.module.css
index ad54c5a..841665a 100644
--- a/app/src/styles/Auth.module.css
+++ b/app/src/styles/Auth.module.css
@@ -8,6 +8,7 @@ body {
 .container {
   font-size: 17px;
   position: absolute;
+  max-width: 500px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
diff --git a/app/src/styles/Create.module.css b/app/src/styles/Create.module.css
index 2d21514..d8dbcb7 100644
--- a/app/src/styles/Create.module.css
+++ b/app/src/styles/Create.module.css
@@ -1,7 +1,7 @@
 .createInput {
   display: block;
   margin: 10px auto;
-  width: 500px;
+  width: 470px;
   border-radius: 5px;
   padding: 15px;
   color: #ccc;
diff --git a/app/src/styles/Dashboard.module.css b/app/src/styles/Dashboard.module.css
index 7f332c7..bfc852e 100644
--- a/app/src/styles/Dashboard.module.css
+++ b/app/src/styles/Dashboard.module.css
@@ -56,7 +56,7 @@ table td {
 
 .mainTable {
     position: absolute;
-    top: 100px;
+    top: 150px;
     left: 50%;
     transform: translateX(-50%);
 }
@@ -101,4 +101,14 @@ table td {
 
 .trashBin:active {
     transform: scale(0.95);
+}
+
+.noLinksLink {
+    color: #ccc;
+    text-decoration: underline;
+}
+
+.noLinksLink:hover {
+    color: #415eac;
+    text-decoration: none;
 }
\ No newline at end of file