Improve Dashboard Site Homepage (#817)

* commit01

* commit2

* commit03

* Run prettier command

* fixed Errors in home.test.js

* fixed the responsiveness of dashboard

* fixed the font weight of description and title

* fixed the dashboard buttons design

Author: Nikhil-Kumar1

__tests__/home/home.test.js

@@ -348,7 +348,10 @@ describe('Home Page', () => {
       discordUsersButton,
     );
     const trimmedDiscordUsersButtonText = discordUsersButtonText.trim();
-    expect(trimmedDiscordUsersButtonText).toBe('Discord Users');
+
+    expect(trimmedDiscordUsersButtonText).toBe(
+      'Discord Users\n\nManage Discord user roles and activities.',
+    );
   });
 
   it('should display the User Management anchor button', async () => {
@@ -529,7 +532,10 @@ describe('Home Page', () => {
       applicationButton,
     );
     const trimmedApplicationButtonText = applicationButtonText.trim();
-    expect(trimmedApplicationButtonText).toBe('Applications');
+
+    expect(trimmedApplicationButtonText).toBe(
+      'Applications\n\nManage and review submitted applications.',
+    );
   });
 
   it('should close hamburger menu on clicking anywhere on the screen except the menu', async () => {

index.html

@@ -78,21 +78,30 @@
     </section>
 
     <section class="buttonSection">
-      <a
-        class="action-button element-display-remove"
-        href="/goal/index.html"
-        id="create-goal"
-      >
-        Create Goals
+      <a class="card" href="/goal/index.html" id="create-goal">
+        <h5 class="card__title">Create Goals</h5>
+        <p class="card__description">
+          Set and track goals to align efforts and measure progress.
+        </p>
       </a>
-      <a class="action-button" href="/task/index.html"> Create Tasks </a>
-      <a class="action-button" href="/profile/index.html"> Profile </a>
-      <a
-        id="discord-user-link"
-        class="action-button"
-        href="/users/discord/index.html"
-      >
-        Discord Users
+
+      <a class="card" href="/task/index.html">
+        <h5 class="card__title">Create Tasks</h5>
+        <p class="card__description">
+          Define the tasks, create new tasks and track the progress.
+        </p>
+      </a>
+      <a class="card" href="/profile/index.html">
+        <h5 class="card__title">Profile</h5>
+        <p class="card__description">
+          View and edit your personal profile information.
+        </p>
+      </a>
+      <a id="discord-user-link" class="card" href="/users/discord/index.html">
+        <h5 class="card__title">Discord Users</h5>
+        <p class="card__description">
+          Manage Discord user roles and activities.
+        </p>
       </a>
       <a
         id="user-management-link"
@@ -103,9 +112,12 @@
       </a>
       <a
         id="requests-link"
-        class="action-button element-display-remove"
+        class="card element-display-remove"
         href="/requests/index.html"
-        >Requests
+        ><h5 class="card__title">Requests</h5>
+        <p class="card__description">
+          Manage requests for various resources and services.
+        </p>
       </a>
       <a
         id="extension-requests-link"
@@ -121,28 +133,49 @@
       >
         Task Requests
       </a>
-      <a href="/online-members/online-members.html" class="action-button">
-        Online Members
+      <a href="/online-members/online-members.html" class="card">
+        <h5 class="card__title">Online Members</h5>
+        <p class="card__description">
+          View the list of currently online members.
+        </p>
+      </a>
+      <a class="card" href="/groups/index.html">
+        <h5 class="card__title">Discord Groups</h5>
+        <p class="card__description">Manage Discord group memberships.</p>
+      </a>
+      <a class="card" href="/standup/index.html">
+        <h5 class="card__title">Standup Updates</h5>
+
+        <p class="card__description">Post and view daily standup updates.</p>
+      </a>
+      <a class="card" href="/identity-service-logs/index.html"
+        ><h5 class="card__title">Identity Service Logs</h5>
+
+        <p class="card__description">
+          Review logs related to identity services.
+        </p>
       </a>
-      <a class="action-button" href="/groups/index.html"> Discord Groups </a>
-      <a class="action-button" href="/standup/index.html"> Standup Updates</a>
-      <a class="action-button" href="/identity-service-logs/index.html"
-        >Identity Service Logs</a
-      >
       <a
-        class="action-button element-display-remove"
+        class="card element-display-remove"
         href="/feed/index.html"
         id="create-activity-feed"
       >
-        Activity Feed</a
+        <h5 class="card__title">Activity Feed</h5>
+        <p class="card__description">
+          View updates on activities and project progress.
+        </p></a
       >
-      <a id="application-button" href="/applications" class="action-button">
-        Applications
+      <a id="application-button" href="/applications" class="card">
+        <h5 class="card__title">Applications</h5>
+        <p class="card__description">
+          Manage and review submitted applications.
+        </p>
       </a>
       <div class="button-container element-display-remove" id="sync-repo-div">
-        <button id="repo-sync-button" class="action-button">
+        <button id="repo-sync-button" class="card">
           <span class="spinner"></span>
-          Sync Repo
+          <h5 class="card__title">Sync Repo</h5>
+          <p class="card__description">Sync repository to update the changes</p>
         </button>
         <div class="status" id="sync-repo-status-update"></div>
         <div id="toast" class="hidden">

style.css

@@ -30,6 +30,7 @@ body {
 }
 
 .buttonSection {
+  margin-top: 10px;
   height: 80vh;
   display: flex;
   justify-content: center;
@@ -99,9 +100,10 @@ footer {
 }
 
 .action-button {
+  width: 350px;
   color: var(--black-color);
-  font-weight: 500;
-  font-size: larger;
+  font-weight: 600;
+  font-size: 1.1rem;
   background-color: var(--white-color);
   border: 2px solid var(--black-color);
   border-radius: 5px;
@@ -112,13 +114,50 @@ footer {
   text-decoration: none;
 }
 
+.card {
+  background-color: white;
+  text-decoration: none;
+  padding: 20px;
+  width: 280px;
+  border-radius: 15px;
+  border: 1px solid hsla(0, 0%, 92%, 1);
+  box-shadow: 1px 2px 4px 0px hsla(0, 0%, 0%, 0.1);
+}
+
+.card:hover {
+  background-color: rgb(215, 230, 241);
+  transition: 0.5s ease;
+}
+
+.card__title {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: hsla(0, 0%, 21%, 1);
+}
+
+.card__description {
+  margin-top: 0.6rem;
+  color: hsla(0, 0%, 21%, 0.75);
+  font-weight: 400;
+  font-size: 0.8rem;
+  line-height: 18px;
+}
+
 .action-button:hover,
 .action-button:focus {
   color: var(--white-color);
   background-color: var(--blue-color);
   border-color: var(--blue-color);
 }
 
+.description {
+  margin-top: 0.6rem;
+  font-weight: 400;
+  font-size: 0.8rem;
+  line-height: 18px;
+}
+
 #sync-buttons.element-display-remove {
   display: none;
 }
@@ -236,11 +275,16 @@ footer {
   display: none !important;
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 1200px) {
   .buttonSection {
     flex-direction: column;
+    height: auto;
+    padding: 15px;
   }
   .action-button {
     text-align: center;
+    width: 100%;
+    padding: 10px;
+    font-size: medium;
   }
 }