From ed8b8d306c3db9c9c4b4b91f77c73bbc97132e6e Mon Sep 17 00:00:00 2001
From: Surendar Singh <surendarkunn@gmail.com>
Date: Mon, 9 Sep 2024 03:18:02 +0530
Subject: [PATCH 01/16] feat: add multiple discord groups sharable link

---
 groups/script.js | 21 ++++++++++++++++-----
 groups/utils.js  | 44 ++++++++++++++++++++++++++++++++------------
 2 files changed, 48 insertions(+), 17 deletions(-)

diff --git a/groups/script.js b/groups/script.js
index 7605080c..bffca3cd 100644
--- a/groups/script.js
+++ b/groups/script.js
@@ -18,8 +18,13 @@ import {
   getUserGroupRoles,
   getUserSelf,
   removeRoleFromMember,
+  getDiscordGroupIdsFromSearch,
+  getParamValueFromURL,
+  setParamValueInURL,
 } from './utils.js';
 
+const groupSearchParamsKey = 'name';
+
 const handler = {
   set: (obj, prop, value) => {
     switch (prop) {
@@ -53,16 +58,17 @@ const handler = {
         });
         break;
       case 'search':
+        setParamValueInURL(groupSearchParamsKey, value);
         if (value === '') {
           if (dataStore.groups == null) break;
           dataStore.filteredGroupsIds = Object.values(dataStore.groups).map(
             (group) => group.id,
           );
         } else {
-          const search = value.toLowerCase();
-          dataStore.filteredGroupsIds = Object.values(dataStore.groups)
-            .filter((group) => group.title.toLowerCase().includes(search))
-            .map((group) => group.id);
+          dataStore.filteredGroupsIds = getDiscordGroupIdsFromSearch(
+            Object.values(dataStore.groups),
+            value,
+          );
         }
         obj[prop] = value;
         break;
@@ -107,7 +113,7 @@ const dataStore = new Proxy(
     userSelf: null,
     groups: null,
     filteredGroupsIds: null,
-    search: '',
+    search: getParamValueFromURL(groupSearchParamsKey),
     discordId: null,
     isCreateGroupModalOpen: false,
   },
@@ -171,6 +177,10 @@ const afterAuthentication = async () => {
         };
         return acc;
       }, {});
+      dataStore.filteredGroupsIds = getDiscordGroupIdsFromSearch(
+        Object.values(dataStore.groups),
+        dataStore.search,
+      );
       dataStore.discordId = roleData.userId;
     },
   );
@@ -188,6 +198,7 @@ const bindGroupCreationButton = () => {
 
 const bindSearchInput = () => {
   const searchInput = document.querySelector('.search__input');
+  searchInput.value = dataStore.search;
   searchInput.addEventListener('input', (e) => {
     dataStore.search = e.target.value;
   });
diff --git a/groups/utils.js b/groups/utils.js
index 6eebcae8..f0223de3 100644
--- a/groups/utils.js
+++ b/groups/utils.js
@@ -126,20 +126,38 @@ function removeGroupKeywordFromDiscordRoleName(groupName) {
   return groupName;
 }
 
-//Function to parse only search value from URL
-function getSearchValueFromURL() {
-  const params = new URLSearchParams(window.location.search);
+function getDiscordGroupIdsFromSearch(groups, multipleGroupSearch) {
+  if (!multipleGroupSearch) return groups.map((group) => group.id);
+  const multipleGroupSearchSeparator = ',';
+  const searchGroups = multipleGroupSearch
+    .split(multipleGroupSearchSeparator)
+    .map((group) => group.trim().toLowerCase());
+  const matchGroups = groups.filter((group) =>
+    searchGroups.some((searchGroup) =>
+      group.title.toLowerCase().includes(searchGroup),
+    ),
+  );
+  return matchGroups.map((group) => group.id);
+}
 
-  let searchValue = null;
+// Function to return the a parameter value from the URL
+function getParamValueFromURL(paramKey) {
+  const params = new URLSearchParams(window.location.search);
+  return params.get(paramKey);
+}
 
-  for (const [key, value] of params.entries()) {
-    if (value === '') {
-      searchValue = key;
-      break;
-    }
-  }
-  return searchValue;
+// Function to set a parameter value in the URL
+function setParamValueInURL(paramKey, paramValue) {
+  const params = new URLSearchParams(window.location.search);
+  if (paramValue === '') params.delete(paramKey);
+  else params.set(paramKey, paramValue);
+  window.history.replaceState(
+    {},
+    '',
+    window.location.pathname + (params.toString() && `?${params}`),
+  );
 }
+
 export {
   getUserGroupRoles,
   getMembers,
@@ -149,5 +167,7 @@ export {
   addGroupRoleToMember,
   removeRoleFromMember,
   removeGroupKeywordFromDiscordRoleName,
-  getSearchValueFromURL,
+  getDiscordGroupIdsFromSearch,
+  getParamValueFromURL,
+  setParamValueInURL,
 };

From d2151969752b5344ebdd662e75be9e62622a3927 Mon Sep 17 00:00:00 2001
From: Surendar Singh <surendarkunn@gmail.com>
Date: Mon, 9 Sep 2024 04:07:05 +0530
Subject: [PATCH 02/16] chore: remove additional value empty check

---
 groups/script.js | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/groups/script.js b/groups/script.js
index bffca3cd..af683231 100644
--- a/groups/script.js
+++ b/groups/script.js
@@ -59,17 +59,10 @@ const handler = {
         break;
       case 'search':
         setParamValueInURL(groupSearchParamsKey, value);
-        if (value === '') {
-          if (dataStore.groups == null) break;
-          dataStore.filteredGroupsIds = Object.values(dataStore.groups).map(
-            (group) => group.id,
-          );
-        } else {
-          dataStore.filteredGroupsIds = getDiscordGroupIdsFromSearch(
-            Object.values(dataStore.groups),
-            value,
-          );
-        }
+        dataStore.filteredGroupsIds = getDiscordGroupIdsFromSearch(
+          Object.values(dataStore.groups),
+          value,
+        );
         obj[prop] = value;
         break;
       case 'isGroupCreationModalOpen':

From 859a54b1f378cc608268969a0c40c8275e0c2f3a Mon Sep 17 00:00:00 2001
From: Surendar Singh <surendarkunn@gmail.com>
Date: Thu, 12 Sep 2024 02:49:31 +0530
Subject: [PATCH 03/16] fix: add feature flag and test case for multiple group
 sharable link

---
 __tests__/groups/group.test.js | 16 +++++++++++
 groups/script.js               | 52 ++++++++++++++++++++++++++--------
 groups/utils.js                |  6 ++--
 3 files changed, 58 insertions(+), 16 deletions(-)

diff --git a/__tests__/groups/group.test.js b/__tests__/groups/group.test.js
index 35aa444d..a4a727cb 100644
--- a/__tests__/groups/group.test.js
+++ b/__tests__/groups/group.test.js
@@ -243,4 +243,20 @@ describe('Discord Groups Page', () => {
 
     expect(groupCreationModalClosed).toBeFalsy();
   });
+
+  test('Should display only specified groups when dev=true and name=<group-name> with different case', async () => {
+    const groupNames = 'fIrSt,DSA+COdInG';
+    await page.goto(`${PAGE_URL}/groups?dev=true&name=${groupNames}`);
+    await page.waitForNetworkIdle();
+
+    const displayedGroups = await page.evaluate(() => {
+      return Array.from(document.querySelectorAll('.card__title')).map(
+        (el) => el.textContent,
+      );
+    });
+
+    console.log('displayedGroups', displayedGroups);
+
+    expect(displayedGroups).toEqual(['First Daaa', 'DSA Coding Group']);
+  });
 });
diff --git a/groups/script.js b/groups/script.js
index af683231..76427755 100644
--- a/groups/script.js
+++ b/groups/script.js
@@ -23,7 +23,15 @@ import {
   setParamValueInURL,
 } from './utils.js';
 
-const groupSearchParamsKey = 'name';
+const QUERY_PARAM_KEY = {
+  DEV_FEATURE_FLAG: 'dev',
+  GROUP_SEARCH: 'name',
+};
+
+const featureFlags = {
+  isMultipleGroupSharingEnabled:
+    getParamValueFromURL(QUERY_PARAM_KEY.DEV_FEATURE_FLAG) === 'true',
+};
 
 const handler = {
   set: (obj, prop, value) => {
@@ -58,11 +66,25 @@ const handler = {
         });
         break;
       case 'search':
-        setParamValueInURL(groupSearchParamsKey, value);
-        dataStore.filteredGroupsIds = getDiscordGroupIdsFromSearch(
-          Object.values(dataStore.groups),
-          value,
-        );
+        if (featureFlags.isMultipleGroupSharingEnabled) {
+          setParamValueInURL(QUERY_PARAM_KEY.GROUP_SEARCH, value);
+          dataStore.filteredGroupsIds = getDiscordGroupIdsFromSearch(
+            Object.values(dataStore.groups),
+            value,
+          );
+        } else {
+          if (value === '') {
+            if (dataStore.groups == null) break;
+            dataStore.filteredGroupsIds = Object.values(dataStore.groups).map(
+              (group) => group.id,
+            );
+          } else {
+            const search = value.toLowerCase();
+            dataStore.filteredGroupsIds = Object.values(dataStore.groups)
+              .filter((group) => group.title.toLowerCase().includes(search))
+              .map((group) => group.id);
+          }
+        }
         obj[prop] = value;
         break;
       case 'isGroupCreationModalOpen':
@@ -106,7 +128,9 @@ const dataStore = new Proxy(
     userSelf: null,
     groups: null,
     filteredGroupsIds: null,
-    search: getParamValueFromURL(groupSearchParamsKey),
+    search: featureFlags.isMultipleGroupSharingEnabled
+      ? getParamValueFromURL(QUERY_PARAM_KEY.GROUP_SEARCH)
+      : '',
     discordId: null,
     isCreateGroupModalOpen: false,
   },
@@ -170,10 +194,12 @@ const afterAuthentication = async () => {
         };
         return acc;
       }, {});
-      dataStore.filteredGroupsIds = getDiscordGroupIdsFromSearch(
-        Object.values(dataStore.groups),
-        dataStore.search,
-      );
+      if (featureFlags.isMultipleGroupSharingEnabled) {
+        dataStore.filteredGroupsIds = getDiscordGroupIdsFromSearch(
+          Object.values(dataStore.groups),
+          dataStore.search,
+        );
+      }
       dataStore.discordId = roleData.userId;
     },
   );
@@ -191,7 +217,9 @@ const bindGroupCreationButton = () => {
 
 const bindSearchInput = () => {
   const searchInput = document.querySelector('.search__input');
-  searchInput.value = dataStore.search;
+  if (featureFlags.isMultipleGroupSharingEnabled) {
+    searchInput.value = dataStore.search;
+  }
   searchInput.addEventListener('input', (e) => {
     dataStore.search = e.target.value;
   });
diff --git a/groups/utils.js b/groups/utils.js
index f0223de3..bcdad495 100644
--- a/groups/utils.js
+++ b/groups/utils.js
@@ -128,9 +128,9 @@ function removeGroupKeywordFromDiscordRoleName(groupName) {
 
 function getDiscordGroupIdsFromSearch(groups, multipleGroupSearch) {
   if (!multipleGroupSearch) return groups.map((group) => group.id);
-  const multipleGroupSearchSeparator = ',';
+  const GROUP_SEARCH_SEPARATOR = ',';
   const searchGroups = multipleGroupSearch
-    .split(multipleGroupSearchSeparator)
+    .split(GROUP_SEARCH_SEPARATOR)
     .map((group) => group.trim().toLowerCase());
   const matchGroups = groups.filter((group) =>
     searchGroups.some((searchGroup) =>
@@ -140,13 +140,11 @@ function getDiscordGroupIdsFromSearch(groups, multipleGroupSearch) {
   return matchGroups.map((group) => group.id);
 }
 
-// Function to return the a parameter value from the URL
 function getParamValueFromURL(paramKey) {
   const params = new URLSearchParams(window.location.search);
   return params.get(paramKey);
 }
 
-// Function to set a parameter value in the URL
 function setParamValueInURL(paramKey, paramValue) {
   const params = new URLSearchParams(window.location.search);
   if (paramValue === '') params.delete(paramKey);

From 6090ab9f82db72d083cd0d6eeebc94069ad417f2 Mon Sep 17 00:00:00 2001
From: Surendar Singh <surendarkunn@gmail.com>
Date: Thu, 12 Sep 2024 03:20:24 +0530
Subject: [PATCH 04/16] chore: remove console log

---
 __tests__/groups/group.test.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/__tests__/groups/group.test.js b/__tests__/groups/group.test.js
index a4a727cb..252b6a07 100644
--- a/__tests__/groups/group.test.js
+++ b/__tests__/groups/group.test.js
@@ -254,9 +254,7 @@ describe('Discord Groups Page', () => {
         (el) => el.textContent,
       );
     });
-
-    console.log('displayedGroups', displayedGroups);
-
+    
     expect(displayedGroups).toEqual(['First Daaa', 'DSA Coding Group']);
   });
 });

From 7317167446321bbfc0144bae2282cd202f4db6c2 Mon Sep 17 00:00:00 2001
From: Surendar Singh <surendarkunn@gmail.com>
Date: Thu, 12 Sep 2024 03:31:34 +0530
Subject: [PATCH 05/16] chore: change text grp to Group

---
 groups/index.html | 93 +++++++++++++++++++++++------------------------
 1 file changed, 46 insertions(+), 47 deletions(-)

diff --git a/groups/index.html b/groups/index.html
index b5de5219..34277a69 100644
--- a/groups/index.html
+++ b/groups/index.html
@@ -1,51 +1,50 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="/images/index.ico" type="image/x-icon" />
-    <title>Discord Groups | Real Dev Squad</title>
-    <link rel="stylesheet" href="/global.css" />
-    <link rel="stylesheet" href="/groups/style.css" />
-    <script src="/helpers/loadENV.js"></script>
-    <script src="/constants.js"></script>
-    <script type="module" src="/groups/script.js" defer></script>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
-      rel="stylesheet"
-    />
-  </head>
 
-  <body>
-    <nav class="navbar">
-      <div class="navbar__container">
-        <a class="back" href="/">
-          <img src="assets/left-arrow.svg" class="back__icon" alt="Back" />
-        </a>
-        <div class="navbar__spacer"></div>
-        <div class="navbar__profile"></div>
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="icon" href="/images/index.ico" type="image/x-icon" />
+  <title>Discord Groups | Real Dev Squad</title>
+  <link rel="stylesheet" href="/global.css" />
+  <link rel="stylesheet" href="/groups/style.css" />
+  <script src="/helpers/loadENV.js"></script>
+  <script src="/constants.js"></script>
+  <script type="module" src="/groups/script.js" defer></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet" />
+</head>
+
+<body>
+  <nav class="navbar">
+    <div class="navbar__container">
+      <a class="back" href="/">
+        <img src="assets/left-arrow.svg" class="back__icon" alt="Back" />
+      </a>
+      <div class="navbar__spacer"></div>
+      <div class="navbar__profile"></div>
+    </div>
+  </nav>
+  <main class="container">
+    <section class="group-header">
+      <div class="search">
+        <img class="search__icon" src="assets/search.svg" alt="search" />
+        <input class="search__input" placeholder="Serach for group" />
+      </div>
+      <div class="create-group">
+        <button class="button">
+          <span class="button__text">Create Group</span>
+          <img src="assets/plus.svg" class="button__icon" />
+        </button>
       </div>
-    </nav>
-    <main class="container">
-      <section class="group-header">
-        <div class="search">
-          <img class="search__icon" src="assets/search.svg" alt="search" />
-          <input class="search__input" placeholder="Serach for group" />
-        </div>
-        <div class="create-group">
-          <button class="button">
-            <span class="button__text">Create grp</span>
-            <img src="assets/plus.svg" class="button__icon" />
-          </button>
-        </div>
-      </section>
-      <div class="group-container"></div>
-    </main>
-  </body>
-  <div class="toast">
-    <div class="toast__message"></div>
-  </div>
-</html>
+    </section>
+    <div class="group-container"></div>
+  </main>
+</body>
+<div class="toast">
+  <div class="toast__message"></div>
+</div>
+
+</html>
\ No newline at end of file

From 63bb1ced52b08fc7fde93f0ce61118db4c62cc4f Mon Sep 17 00:00:00 2001
From: Surendar Singh <surendarkunn@gmail.com>
Date: Thu, 12 Sep 2024 03:59:42 +0530
Subject: [PATCH 06/16] chore: prettier update removed

---
 groups/index.html | 93 ++++++++++++++++++++++++-----------------------
 1 file changed, 47 insertions(+), 46 deletions(-)

diff --git a/groups/index.html b/groups/index.html
index 34277a69..e354491b 100644
--- a/groups/index.html
+++ b/groups/index.html
@@ -1,50 +1,51 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/images/index.ico" type="image/x-icon" />
+    <title>Discord Groups | Real Dev Squad</title>
+    <link rel="stylesheet" href="/global.css" />
+    <link rel="stylesheet" href="/groups/style.css" />
+    <script src="/helpers/loadENV.js"></script>
+    <script src="/constants.js"></script>
+    <script type="module" src="/groups/script.js" defer></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
+      rel="stylesheet"
+    />
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="icon" href="/images/index.ico" type="image/x-icon" />
-  <title>Discord Groups | Real Dev Squad</title>
-  <link rel="stylesheet" href="/global.css" />
-  <link rel="stylesheet" href="/groups/style.css" />
-  <script src="/helpers/loadENV.js"></script>
-  <script src="/constants.js"></script>
-  <script type="module" src="/groups/script.js" defer></script>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet" />
-</head>
-
-<body>
-  <nav class="navbar">
-    <div class="navbar__container">
-      <a class="back" href="/">
-        <img src="assets/left-arrow.svg" class="back__icon" alt="Back" />
-      </a>
-      <div class="navbar__spacer"></div>
-      <div class="navbar__profile"></div>
-    </div>
-  </nav>
-  <main class="container">
-    <section class="group-header">
-      <div class="search">
-        <img class="search__icon" src="assets/search.svg" alt="search" />
-        <input class="search__input" placeholder="Serach for group" />
-      </div>
-      <div class="create-group">
-        <button class="button">
-          <span class="button__text">Create Group</span>
-          <img src="assets/plus.svg" class="button__icon" />
-        </button>
+  <body>
+    <nav class="navbar">
+      <div class="navbar__container">
+        <a class="back" href="/">
+          <img src="assets/left-arrow.svg" class="back__icon" alt="Back" />
+        </a>
+        <div class="navbar__spacer"></div>
+        <div class="navbar__profile"></div>
       </div>
-    </section>
-    <div class="group-container"></div>
-  </main>
-</body>
-<div class="toast">
-  <div class="toast__message"></div>
-</div>
-
-</html>
\ No newline at end of file
+    </nav>
+    <main class="container">
+      <section class="group-header">
+        <div class="search">
+          <img class="search__icon" src="assets/search.svg" alt="search" />
+          <input class="search__input" placeholder="Serach for group" />
+        </div>
+        <div class="create-group">
+          <button class="button">
+            <span class="button__text">Create Group</span>
+            <img src="assets/plus.svg" class="button__icon" />
+          </button>
+        </div>
+      </section>
+      <div class="group-container"></div>
+    </main>
+  </body>
+  <div class="toast">
+    <div class="toast__message"></div>
+  </div>
+</html>

From d554d64172d8f815eda75b38319eaa39180d6210 Mon Sep 17 00:00:00 2001
From: Surendar Singh <surendarkunn@gmail.com>
Date: Thu, 12 Sep 2024 11:41:26 +0530
Subject: [PATCH 07/16] chore: run prettier on group test file

---
 __tests__/groups/group.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/__tests__/groups/group.test.js b/__tests__/groups/group.test.js
index 252b6a07..84eb8885 100644
--- a/__tests__/groups/group.test.js
+++ b/__tests__/groups/group.test.js
@@ -254,7 +254,7 @@ describe('Discord Groups Page', () => {
         (el) => el.textContent,
       );
     });
-    
+
     expect(displayedGroups).toEqual(['First Daaa', 'DSA Coding Group']);
   });
 });

From 39b206b9321066fd94e6e1061459ecdc93fdcba4 Mon Sep 17 00:00:00 2001
From: Surendar Singh <surendarkunn@gmail.com>
Date: Fri, 13 Sep 2024 02:44:19 +0530
Subject: [PATCH 08/16] fix: test username due to update in usernames

---
 __tests__/user-details/task-duedate-hover.test.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/__tests__/user-details/task-duedate-hover.test.js b/__tests__/user-details/task-duedate-hover.test.js
index 7b4349e2..4044b036 100644
--- a/__tests__/user-details/task-duedate-hover.test.js
+++ b/__tests__/user-details/task-duedate-hover.test.js
@@ -182,7 +182,7 @@ describe('Tasks On User Management Page', () => {
 
   it('Scroll of task should work', async () => {
     await page.goto(
-      'http://localhost:8000/users/details/index.html?username=ajeyakrishna',
+      'http://localhost:8000/users/details/index.html?username=sunny-s',
     );
     await page.waitForNetworkIdle();
     const taskDiv = await page.$$('.accordion-tasks');
@@ -213,12 +213,12 @@ describe('Tasks On User Management Page', () => {
     await page.waitForNetworkIdle();
 
     let renderedTasks = await userTasksDevDiv.$$('.user-task');
-    expect(Array.from(renderedTasks).length).toBe(12);
+    expect(Array.from(renderedTasks).length).toBe(15);
   });
 
   it('New task card should have all the detail fields', async () => {
     await page.goto(
-      'http://localhost:8000/users/details/index.html?username=ajeyakrishna',
+      'http://localhost:8000/users/details/index.html?username=sunny-s',
     );
     await page.waitForNetworkIdle();
     const taskDiv = await page.$$('.accordion-tasks');
@@ -287,7 +287,7 @@ describe('Tasks On User Management Page', () => {
     );
 
     expect(fourthTaskHTML).toContain('<div class="task-title">');
-    expect(fourthTaskHTML).toContain('<progress');
+    expect(fourthTaskHTML).not.toContain('<progress');
     expect(fourthTaskHTML).toContain('<div class="detail-block eta">');
     expect(fourthTaskHTML).toContain('<div class="detail-block status">');
     expect(fourthTaskHTML).toContain('<div class="detail-block startedOn">');

From e72f68162cbd6b23612bd14cf70f2772a2868c78 Mon Sep 17 00:00:00 2001
From: Surendar Singh <surendarkunn@gmail.com>
Date: Fri, 13 Sep 2024 03:05:45 +0530
Subject: [PATCH 09/16] chore: replace username with ankush

---
 __tests__/user-details/task-duedate-hover.test.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/__tests__/user-details/task-duedate-hover.test.js b/__tests__/user-details/task-duedate-hover.test.js
index 4044b036..63dc393e 100644
--- a/__tests__/user-details/task-duedate-hover.test.js
+++ b/__tests__/user-details/task-duedate-hover.test.js
@@ -182,7 +182,7 @@ describe('Tasks On User Management Page', () => {
 
   it('Scroll of task should work', async () => {
     await page.goto(
-      'http://localhost:8000/users/details/index.html?username=sunny-s',
+      'http://localhost:8000/users/details/index.html?username=ankush',
     );
     await page.waitForNetworkIdle();
     const taskDiv = await page.$$('.accordion-tasks');
@@ -218,7 +218,7 @@ describe('Tasks On User Management Page', () => {
 
   it('New task card should have all the detail fields', async () => {
     await page.goto(
-      'http://localhost:8000/users/details/index.html?username=sunny-s',
+      'http://localhost:8000/users/details/index.html?username=ankush',
     );
     await page.waitForNetworkIdle();
     const taskDiv = await page.$$('.accordion-tasks');
@@ -236,7 +236,7 @@ describe('Tasks On User Management Page', () => {
     );
 
     expect(firstTaskHTML).toContain('<div class="task-title">');
-    expect(firstTaskHTML).not.toContain('<progress');
+    expect(firstTaskHTML).toContain('<progress');
     expect(firstTaskHTML).toContain('<div class="detail-block eta">');
     expect(firstTaskHTML).toContain('<div class="detail-block status">');
     expect(firstTaskHTML).toContain('<div class="detail-block startedOn">');
@@ -251,7 +251,7 @@ describe('Tasks On User Management Page', () => {
     );
 
     expect(secondTaskHTML).toContain('<div class="task-title">');
-    expect(secondTaskHTML).not.toContain('<progress');
+    expect(secondTaskHTML).toContain('<progress');
     expect(secondTaskHTML).toContain('<div class="detail-block eta">');
     expect(secondTaskHTML).toContain('<div class="detail-block status">');
     expect(secondTaskHTML).toContain('<div class="detail-block startedOn">');
@@ -266,7 +266,7 @@ describe('Tasks On User Management Page', () => {
     );
 
     expect(thirdTaskHTML).toContain('<div class="task-title">');
-    expect(thirdTaskHTML).not.toContain('<progress');
+    expect(thirdTaskHTML).toContain('<progress');
     expect(thirdTaskHTML).toContain('<div class="detail-block eta">');
     expect(thirdTaskHTML).toContain('<div class="detail-block status">');
     expect(thirdTaskHTML).toContain('<div class="detail-block startedOn">');
@@ -287,7 +287,7 @@ describe('Tasks On User Management Page', () => {
     );
 
     expect(fourthTaskHTML).toContain('<div class="task-title">');
-    expect(fourthTaskHTML).not.toContain('<progress');
+    expect(fourthTaskHTML).toContain('<progress');
     expect(fourthTaskHTML).toContain('<div class="detail-block eta">');
     expect(fourthTaskHTML).toContain('<div class="detail-block status">');
     expect(fourthTaskHTML).toContain('<div class="detail-block startedOn">');

From 47964668b4c43d1475841a26a33ecbb3a5676862 Mon Sep 17 00:00:00 2001
From: Surendar Singh <surendarkunn@gmail.com>
Date: Fri, 13 Sep 2024 13:45:35 +0530
Subject: [PATCH 10/16] chore: add comment for feature flag removal

---
 groups/script.js | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/groups/script.js b/groups/script.js
index 76427755..265e6d1b 100644
--- a/groups/script.js
+++ b/groups/script.js
@@ -72,19 +72,20 @@ const handler = {
             Object.values(dataStore.groups),
             value,
           );
+        }
+        // Start: Remove this code if removing Feature Flag for isMultipleGroupSharingEnabled
+        else if (value === '') {
+          if (dataStore.groups == null) break;
+          dataStore.filteredGroupsIds = Object.values(dataStore.groups).map(
+            (group) => group.id,
+          );
         } else {
-          if (value === '') {
-            if (dataStore.groups == null) break;
-            dataStore.filteredGroupsIds = Object.values(dataStore.groups).map(
-              (group) => group.id,
-            );
-          } else {
-            const search = value.toLowerCase();
-            dataStore.filteredGroupsIds = Object.values(dataStore.groups)
-              .filter((group) => group.title.toLowerCase().includes(search))
-              .map((group) => group.id);
-          }
+          const search = value.toLowerCase();
+          dataStore.filteredGroupsIds = Object.values(dataStore.groups)
+            .filter((group) => group.title.toLowerCase().includes(search))
+            .map((group) => group.id);
         }
+        // End: Remove this code if removing Feature Flag for isMultipleGroupSharingEnabled
         obj[prop] = value;
         break;
       case 'isGroupCreationModalOpen':

From b0ce9d7448190a7522dfc61b943e9fa4a65fce41 Mon Sep 17 00:00:00 2001
From: Surendar Singh <surendarkunn@gmail.com>
Date: Fri, 13 Sep 2024 14:20:34 +0530
Subject: [PATCH 11/16] refactor: simplify isDev feature flag

---
 groups/script.js | 23 ++++++-----------------
 1 file changed, 6 insertions(+), 17 deletions(-)

diff --git a/groups/script.js b/groups/script.js
index 265e6d1b..9115b5b9 100644
--- a/groups/script.js
+++ b/groups/script.js
@@ -27,11 +27,7 @@ const QUERY_PARAM_KEY = {
   DEV_FEATURE_FLAG: 'dev',
   GROUP_SEARCH: 'name',
 };
-
-const featureFlags = {
-  isMultipleGroupSharingEnabled:
-    getParamValueFromURL(QUERY_PARAM_KEY.DEV_FEATURE_FLAG) === 'true',
-};
+const isDev = getParamValueFromURL(QUERY_PARAM_KEY.DEV_FEATURE_FLAG) === 'true';
 
 const handler = {
   set: (obj, prop, value) => {
@@ -66,15 +62,13 @@ const handler = {
         });
         break;
       case 'search':
-        if (featureFlags.isMultipleGroupSharingEnabled) {
+        if (isDev) {
           setParamValueInURL(QUERY_PARAM_KEY.GROUP_SEARCH, value);
           dataStore.filteredGroupsIds = getDiscordGroupIdsFromSearch(
             Object.values(dataStore.groups),
             value,
           );
-        }
-        // Start: Remove this code if removing Feature Flag for isMultipleGroupSharingEnabled
-        else if (value === '') {
+        } else if (value === '') {
           if (dataStore.groups == null) break;
           dataStore.filteredGroupsIds = Object.values(dataStore.groups).map(
             (group) => group.id,
@@ -85,7 +79,6 @@ const handler = {
             .filter((group) => group.title.toLowerCase().includes(search))
             .map((group) => group.id);
         }
-        // End: Remove this code if removing Feature Flag for isMultipleGroupSharingEnabled
         obj[prop] = value;
         break;
       case 'isGroupCreationModalOpen':
@@ -129,9 +122,7 @@ const dataStore = new Proxy(
     userSelf: null,
     groups: null,
     filteredGroupsIds: null,
-    search: featureFlags.isMultipleGroupSharingEnabled
-      ? getParamValueFromURL(QUERY_PARAM_KEY.GROUP_SEARCH)
-      : '',
+    search: isDev ? getParamValueFromURL(QUERY_PARAM_KEY.GROUP_SEARCH) : '',
     discordId: null,
     isCreateGroupModalOpen: false,
   },
@@ -195,7 +186,7 @@ const afterAuthentication = async () => {
         };
         return acc;
       }, {});
-      if (featureFlags.isMultipleGroupSharingEnabled) {
+      if (isDev) {
         dataStore.filteredGroupsIds = getDiscordGroupIdsFromSearch(
           Object.values(dataStore.groups),
           dataStore.search,
@@ -218,9 +209,7 @@ const bindGroupCreationButton = () => {
 
 const bindSearchInput = () => {
   const searchInput = document.querySelector('.search__input');
-  if (featureFlags.isMultipleGroupSharingEnabled) {
-    searchInput.value = dataStore.search;
-  }
+  if (isDev) searchInput.value = dataStore.search;
   searchInput.addEventListener('input', (e) => {
     dataStore.search = e.target.value;
   });

From b49b579164feb94025d14cd5f3f53e39a063aa5d Mon Sep 17 00:00:00 2001
From: Suvidh-kaushik <127885995+Suvidh-kaushik@users.noreply.github.com>
Date: Sun, 15 Sep 2024 11:43:06 +0530
Subject: [PATCH 12/16] fix: change the order of extension-requests in the
 extension request page (#820)

* fix: change the order of extensions request page

* changed tests of extension-requests according to newest first(descending order)

* chore:update username in test file due to recent changes
---
 .../extension-requests.test.js                | 40 +++++++++----------
 .../user-details/task-duedate-hover.test.js   | 12 +++---
 extension-requests/script.js                  |  4 +-
 mock-data/extension-requests/index.js         | 38 +++++++++---------
 4 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/__tests__/extension-requests/extension-requests.test.js b/__tests__/extension-requests/extension-requests.test.js
index e18d1f39..e09a893b 100644
--- a/__tests__/extension-requests/extension-requests.test.js
+++ b/__tests__/extension-requests/extension-requests.test.js
@@ -4,7 +4,7 @@ const {
   extensionRequestsListPending,
   extensionRequestsListApproved,
   extensionRequestResponse,
-  extensionRequestsListPendingDescending,
+  extensionRequestsListPendingAscending,
   extensionRequestsListUserSearch,
   extensionRequestListForAuditLogs,
 } = require('../../mock-data/extension-requests');
@@ -46,9 +46,9 @@ describe('Tests the Extension Requests Screen', () => {
       const url = interceptedRequest.url();
       if (
         url ===
-          'https://api.realdevsquad.com/extension-requests?order=asc&size=5&q=status%3APENDING' ||
+          'https://api.realdevsquad.com/extension-requests?order=desc&size=5&q=status%3APENDING' ||
         url ===
-          'https://api.realdevsquad.com/extension-requests?dev=true&order=asc'
+          'https://api.realdevsquad.com/extension-requests?dev=true&order=desc'
       ) {
         interceptedRequest.respond({
           status: 200,
@@ -86,7 +86,7 @@ describe('Tests the Extension Requests Screen', () => {
         });
       } else if (
         url ===
-        'https://api.realdevsquad.com/extension-requests?order=desc&size=5&q=status%3APENDING'
+        'https://api.realdevsquad.com/extension-requests?order=asc&size=5&q=status%3APENDING'
       ) {
         interceptedRequest.respond({
           status: 200,
@@ -96,7 +96,7 @@ describe('Tests the Extension Requests Screen', () => {
             'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
             'Access-Control-Allow-Headers': 'Content-Type, Authorization',
           },
-          body: JSON.stringify(extensionRequestsListPendingDescending),
+          body: JSON.stringify(extensionRequestsListPendingAscending),
         });
       } else if (
         url === 'https://api.realdevsquad.com/users?search=sunny&size=1'
@@ -196,7 +196,7 @@ describe('Tests the Extension Requests Screen', () => {
         });
       } else if (
         url ===
-        'https://api.realdevsquad.com/extension-requests?order=asc&size=5&q=status%3APENDING%2Cassignee%3AiODXB6gfsjaZB9p0XlBw'
+        'https://api.realdevsquad.com/extension-requests?order=desc&size=5&q=status%3APENDING%2Cassignee%3AiODXB6gfsjaZB9p0XlBw'
       ) {
         interceptedRequest.respond({
           status: 200,
@@ -210,7 +210,7 @@ describe('Tests the Extension Requests Screen', () => {
         });
       } else if (
         url ===
-        'https://api.realdevsquad.com/extension-requests?order=asc&size=5&q=status%3APENDING%2Cassignee%3AiODXB6gfsjaZB9p0XlBw%2B7yzVDl8s1ORNCtH9Ps7K'
+        'https://api.realdevsquad.com/extension-requests?order=desc&size=5&q=status%3APENDING%2Cassignee%3AiODXB6gfsjaZB9p0XlBw%2B7yzVDl8s1ORNCtH9Ps7K'
       ) {
         interceptedRequest.respond({
           status: 200,
@@ -278,9 +278,9 @@ describe('Tests the Extension Requests Screen', () => {
         });
       } else if (
         url ===
-          'https://api.realdevsquad.com/extension-requests?order=asc&size=5&q=status%3AAPPROVED%2BPENDING%2BDENIED' ||
+          'https://api.realdevsquad.com/extension-requests?order=desc&size=5&q=status%3AAPPROVED%2BPENDING%2BDENIED' ||
         url ===
-          'https://api.realdevsquad.com/extension-requests?dev=true&order=asc&q=status%3AAPPROVED%2BDENIED'
+          'https://api.realdevsquad.com/extension-requests?dev=true&order=desc&q=status%3AAPPROVED%2BDENIED'
       ) {
         interceptedRequest.respond({
           status: 200,
@@ -346,7 +346,7 @@ describe('Tests the Extension Requests Screen', () => {
         });
       } else if (
         url ===
-        'https://api.realdevsquad.com/extension-requests?order=asc&size=5&q=status%3AAPPROVED%2Cassignee%3AiODXB6gfsjaZB9p0XlBw%2B7yzVDl8s1ORNCtH9Ps7K'
+        'https://api.realdevsquad.com/extension-requests?order=desc&size=5&q=status%3AAPPROVED%2Cassignee%3AiODXB6gfsjaZB9p0XlBw%2B7yzVDl8s1ORNCtH9Ps7K'
       ) {
         interceptedRequest.respond({
           status: 200,
@@ -360,7 +360,7 @@ describe('Tests the Extension Requests Screen', () => {
         });
       } else if (
         url ===
-        'https://api.realdevsquad.com/extension-requests?order=asc&size=1&q=status%3APENDING'
+        'https://api.realdevsquad.com/extension-requests?order=desc&size=1&q=status%3APENDING'
       ) {
         interceptedRequest.respond({
           status: 200,
@@ -677,11 +677,11 @@ describe('Tests the Extension Requests Screen', () => {
 
     const sortedRequestDaysArray = requestDaysArray
       .slice()
-      .sort((a, b) => a - b);
+      .sort((a, b) => b - a);
     expect(requestDaysArray).toEqual(sortedRequestDaysArray);
   });
 
-  it('Checks whether the cards displayed in descending order when sort icon is clicked', async () => {
+  it('Checks whether the cards displayed in ascending order when sort icon is clicked', async () => {
     const sortButton = await page.$('.sort-button');
 
     await sortButton.click();
@@ -697,7 +697,7 @@ describe('Tests the Extension Requests Screen', () => {
       requestDaysArray.push(requestedDays.slice(5));
     }
 
-    const sortedRequestDaysArray = [...requestDaysArray].sort().reverse();
+    const sortedRequestDaysArray = [...requestDaysArray].sort();
 
     expect(requestDaysArray).toEqual(sortedRequestDaysArray);
   });
@@ -916,12 +916,12 @@ describe('Tests the Extension Requests Screen', () => {
     await page.waitForNetworkIdle();
     const url = page.url();
     expect(url).toBe(
-      `${baseUrl}?order=asc&size=5&q=status%3AAPPROVED%2Cassignee%3Asunny%2Brandhir`,
+      `${baseUrl}?order=desc&size=5&q=status%3AAPPROVED%2Cassignee%3Asunny%2Brandhir`,
     );
   });
   it('Should have UI elements in sync with url', async () => {
     await page.goto(
-      `${baseUrl}/?order=asc&size=5&q=status%3AAPPROVED%2Cassignee%3Asunny%2Brandhir`,
+      `${baseUrl}/?order=desc&size=5&q=status%3AAPPROVED%2Cassignee%3Asunny%2Brandhir`,
     );
     const filterButton = await page.$('#filter-button');
     await filterButton.click();
@@ -936,15 +936,15 @@ describe('Tests the Extension Requests Screen', () => {
     );
     expect(searchText).toBe('sunny,randhir');
     await page.waitForSelector('.sort-button');
-    const ascSortIconDisplayStyle = await page.$eval(
-      '#asc-sort-icon',
+    const descSortIconDisplayStyle = await page.$eval(
+      '#desc-sort-icon',
       (icon) => window.getComputedStyle(icon).display,
     );
-    expect(ascSortIconDisplayStyle).toBe('block');
+    expect(descSortIconDisplayStyle).toBe('block');
   });
 
   it('Should show empty message if all extension requests have been addressed', async () => {
-    await page.goto(`${baseUrl}/?order=asc&size=1&q=status%3APENDING`);
+    await page.goto(`${baseUrl}/?order=desc&size=1&q=status%3APENDING`);
     await page.waitForNetworkIdle();
 
     extensionRequestsElement = await page.$('.extension-requests');
diff --git a/__tests__/user-details/task-duedate-hover.test.js b/__tests__/user-details/task-duedate-hover.test.js
index 7b4349e2..63dc393e 100644
--- a/__tests__/user-details/task-duedate-hover.test.js
+++ b/__tests__/user-details/task-duedate-hover.test.js
@@ -182,7 +182,7 @@ describe('Tasks On User Management Page', () => {
 
   it('Scroll of task should work', async () => {
     await page.goto(
-      'http://localhost:8000/users/details/index.html?username=ajeyakrishna',
+      'http://localhost:8000/users/details/index.html?username=ankush',
     );
     await page.waitForNetworkIdle();
     const taskDiv = await page.$$('.accordion-tasks');
@@ -213,12 +213,12 @@ describe('Tasks On User Management Page', () => {
     await page.waitForNetworkIdle();
 
     let renderedTasks = await userTasksDevDiv.$$('.user-task');
-    expect(Array.from(renderedTasks).length).toBe(12);
+    expect(Array.from(renderedTasks).length).toBe(15);
   });
 
   it('New task card should have all the detail fields', async () => {
     await page.goto(
-      'http://localhost:8000/users/details/index.html?username=ajeyakrishna',
+      'http://localhost:8000/users/details/index.html?username=ankush',
     );
     await page.waitForNetworkIdle();
     const taskDiv = await page.$$('.accordion-tasks');
@@ -236,7 +236,7 @@ describe('Tasks On User Management Page', () => {
     );
 
     expect(firstTaskHTML).toContain('<div class="task-title">');
-    expect(firstTaskHTML).not.toContain('<progress');
+    expect(firstTaskHTML).toContain('<progress');
     expect(firstTaskHTML).toContain('<div class="detail-block eta">');
     expect(firstTaskHTML).toContain('<div class="detail-block status">');
     expect(firstTaskHTML).toContain('<div class="detail-block startedOn">');
@@ -251,7 +251,7 @@ describe('Tasks On User Management Page', () => {
     );
 
     expect(secondTaskHTML).toContain('<div class="task-title">');
-    expect(secondTaskHTML).not.toContain('<progress');
+    expect(secondTaskHTML).toContain('<progress');
     expect(secondTaskHTML).toContain('<div class="detail-block eta">');
     expect(secondTaskHTML).toContain('<div class="detail-block status">');
     expect(secondTaskHTML).toContain('<div class="detail-block startedOn">');
@@ -266,7 +266,7 @@ describe('Tasks On User Management Page', () => {
     );
 
     expect(thirdTaskHTML).toContain('<div class="task-title">');
-    expect(thirdTaskHTML).not.toContain('<progress');
+    expect(thirdTaskHTML).toContain('<progress');
     expect(thirdTaskHTML).toContain('<div class="detail-block eta">');
     expect(thirdTaskHTML).toContain('<div class="detail-block status">');
     expect(thirdTaskHTML).toContain('<div class="detail-block startedOn">');
diff --git a/extension-requests/script.js b/extension-requests/script.js
index cd468fff..c2b5f3a8 100644
--- a/extension-requests/script.js
+++ b/extension-requests/script.js
@@ -133,11 +133,11 @@ const render = async () => {
     const assigneeFilterState = userIdList.length ? userIdList : '';
     filterStates.assignee = assigneeFilterState;
     if (!filterStates.order) {
-      filterStates.order = Order.ASCENDING;
+      filterStates.order = Order.DESCENDING;
     }
   } else {
     filterStates.status = Status.PENDING;
-    filterStates.order = Order.ASCENDING;
+    filterStates.order = Order.DESCENDING;
     filterStates.size = DEFAULT_PAGE_SIZE;
   }
   updateUIBasedOnFilterStates();
diff --git a/mock-data/extension-requests/index.js b/mock-data/extension-requests/index.js
index 663ae7b0..0b20591f 100644
--- a/mock-data/extension-requests/index.js
+++ b/mock-data/extension-requests/index.js
@@ -24,55 +24,55 @@ const extensionRequestsList = {
       title: 'A new title',
     },
   ],
-  next: '/extension-requests&size=5&order=asc',
+  next: '/extension-requests&size=5&order=desc',
 };
 
-const extensionRequestsListPendingDescending = {
+const extensionRequestsListPendingAscending = {
   message: 'Extension Requests returned successfully!',
   allExtensionRequests: [
     {
-      assignee: 'randhir',
-      id: 'QISvF7kAmnD9vXHwwIs8',
+      assignee: 'sunny',
+      id: 'lGQ3AjUlgNB6Jd8jXaEC',
       newEndsOn: 1690528980,
       oldEndsOn: 1689954609.948,
-      reason: 'b',
+      reason: 'test reason',
       status: 'PENDING',
       taskId: 'PYj79ki2agB0q5JN3kUf',
-      timestamp: 1691993520.03,
-      title: 'A new title',
+      timestamp: 1691734400.045, // Oldest timestamp
+      title: 'A title',
     },
     {
       assignee: 'randhir',
-      id: 'QISvF7kAmnD9vXHwwIs7',
+      id: 'QISvF7kAmnD9vXHwwIsG',
       newEndsOn: 1690528980,
       oldEndsOn: 1689954609.948,
       reason: 'b',
       status: 'PENDING',
       taskId: 'PYj79ki2agB0q5JN3kUf',
-      timestamp: 1691907153.157,
+      timestamp: 1691820785.341,
       title: 'A new title',
     },
     {
       assignee: 'randhir',
-      id: 'QISvF7kAmnD9vXHwwIsG',
+      id: 'QISvF7kAmnD9vXHwwIs7',
       newEndsOn: 1690528980,
       oldEndsOn: 1689954609.948,
       reason: 'b',
       status: 'PENDING',
       taskId: 'PYj79ki2agB0q5JN3kUf',
-      timestamp: 1691820785.341,
+      timestamp: 1691907153.157,
       title: 'A new title',
     },
     {
-      assignee: 'sunny',
-      id: 'lGQ3AjUlgNB6Jd8jXaEC',
+      assignee: 'randhir',
+      id: 'QISvF7kAmnD9vXHwwIs8',
       newEndsOn: 1690528980,
       oldEndsOn: 1689954609.948,
-      reason: 'test reason',
+      reason: 'b',
       status: 'PENDING',
       taskId: 'PYj79ki2agB0q5JN3kUf',
-      timestamp: 1691734400.045,
-      title: 'A title',
+      timestamp: 1691993520.03, // Most recent timestamp
+      title: 'A new title',
     },
   ],
   next: '/extension-requests?order=desc&size=5&q=status%3APENDING',
@@ -143,7 +143,7 @@ const extensionRequestsListPending = {
       title: 'A different title 2',
     },
   ],
-  next: '/extension-requests?order=asc&size=5&q=status%3APENDING',
+  next: '/extension-requests?order=desc&size=5&q=status%3APENDING',
 };
 
 const extensionRequestsListApproved = {
@@ -172,7 +172,7 @@ const extensionRequestsListApproved = {
       title: 'test title',
     },
   ],
-  next: '/extension-requests?q=status%3AAPPROVED&size=5&order=asc',
+  next: '/extension-requests?q=status%3AAPPROVED&size=5&order=desc',
 };
 
 const extensionRequestResponse = {
@@ -223,7 +223,7 @@ module.exports = {
   extensionRequestsListApproved,
   extensionRequestsListPending,
   extensionRequestResponse,
-  extensionRequestsListPendingDescending,
+  extensionRequestsListPendingAscending,
   extensionRequestsListUserSearch,
   extensionRequestListForAuditLogs,
 };

From 22305a591914068d264540b44bf5fa64167872c9 Mon Sep 17 00:00:00 2001
From: surendar <surendarkunn@gmail.com>
Date: Fri, 20 Sep 2024 00:21:24 +0530
Subject: [PATCH 13/16] feat: add no group found and search with prefix name
 (#835)

---
 __tests__/groups/group.test.js |  9 +++++++
 groups/createElements.js       | 17 +++++++++++++
 groups/render.js               | 10 ++++++++
 groups/script.js               |  2 ++
 groups/style.css               | 45 ++++++++++++++++++++++++++++++++++
 groups/utils.js                |  2 +-
 6 files changed, 84 insertions(+), 1 deletion(-)

diff --git a/__tests__/groups/group.test.js b/__tests__/groups/group.test.js
index 84eb8885..4400450f 100644
--- a/__tests__/groups/group.test.js
+++ b/__tests__/groups/group.test.js
@@ -257,4 +257,13 @@ describe('Discord Groups Page', () => {
 
     expect(displayedGroups).toEqual(['First Daaa', 'DSA Coding Group']);
   });
+
+  test('Should display no group found div when no group is present', async () => {
+    await page.goto(`${PAGE_URL}/groups?dev=true&name=no-group-present`);
+    await page.waitForNetworkIdle();
+
+    const noGroupDiv = await page.$('.no-group-container');
+
+    expect(noGroupDiv).toBeTruthy();
+  });
 });
diff --git a/groups/createElements.js b/groups/createElements.js
index f8b13814..44254e8a 100644
--- a/groups/createElements.js
+++ b/groups/createElements.js
@@ -55,6 +55,22 @@ const createLoadingCard = () => {
   return cardElement;
 };
 
+const createNoGroupFound = () => {
+  const noGroupFound = document.createElement('div');
+  noGroupFound.classList.add('no-group');
+  noGroupFound.innerHTML = `
+        <svg class="icon" fill=currentColor viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
+        </svg>
+        <div class="message">
+            <h2>No groups found</h2>
+            <p>Please try a different search input</p>
+        </div>
+    `;
+
+  return noGroupFound;
+};
+
 const createNavbarProfile = (profile) => {
   const profileElement = document.createElement('div');
   profileElement.className = 'profile';
@@ -201,6 +217,7 @@ const createGroupCreationModal = (onClose = () => {}, onSubmit = () => {}) => {
 export {
   createCard,
   createLoadingCard,
+  createNoGroupFound,
   createNavbarProfile,
   createNavbarProfileLoading,
   createNavbarProfileSignin,
diff --git a/groups/render.js b/groups/render.js
index 287ba033..c8513b2a 100644
--- a/groups/render.js
+++ b/groups/render.js
@@ -2,6 +2,7 @@ import {
   createCard,
   createGroupCreationModal,
   createLoadingCard,
+  createNoGroupFound,
   createNavbarProfile,
   createNavbarProfileLoading,
   createNavbarProfileSignin,
@@ -96,6 +97,14 @@ const renderGroupById = ({ group, cardOnClick = () => {} }) => {
   }
 };
 
+const renderNoGroupFound = () => {
+  const mainContainer = document.querySelector('.group-container');
+  const noGroupContainer = document.createElement('div');
+  noGroupContainer.className = 'no-group-container';
+  noGroupContainer.append(createNoGroupFound());
+  mainContainer.append(noGroupContainer);
+};
+
 export {
   renderNotAuthenticatedPage,
   renderGroupCreationModal,
@@ -107,4 +116,5 @@ export {
   renderLoadingCards,
   removeLoadingCards,
   renderGroupById,
+  renderNoGroupFound,
 };
diff --git a/groups/script.js b/groups/script.js
index 9115b5b9..f7edcfa7 100644
--- a/groups/script.js
+++ b/groups/script.js
@@ -6,6 +6,7 @@ import {
   renderGroupById,
   renderGroupCreationModal,
   renderLoadingCards,
+  renderNoGroupFound,
   renderLoadingNavbarProfile,
   renderNavbarProfile,
   renderNavbarProfileSignin,
@@ -60,6 +61,7 @@ const handler = {
         renderAllGroups({
           cardOnClick: groupCardOnAction,
         });
+        if (isDev && (!value || value.length == 0)) renderNoGroupFound();
         break;
       case 'search':
         if (isDev) {
diff --git a/groups/style.css b/groups/style.css
index defbead0..054e47b4 100644
--- a/groups/style.css
+++ b/groups/style.css
@@ -404,6 +404,51 @@ body {
   width: 3rem;
 }
 
+.no-group-container {
+  grid-column-start: 1;
+  grid-column-end: 6;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.no-group {
+  display: flex;
+  align-items: flex-start;
+  max-width: 400px;
+  width: 100%;
+  padding: 1.5rem;
+  background-color: var(--color-secondary-invert);
+  border-left: 4px solid var(--color-secondary);
+  border-radius: 4px;
+  box-shadow: 0 2px 4px var(--color-list-border);
+
+  .icon {
+    flex-shrink: 0;
+    margin-right: 1rem;
+    width: 24px;
+    height: 24px;
+    color: var(--color-secondary);
+  }
+
+  .message {
+    flex-grow: 1;
+  }
+
+  .message h2 {
+    margin: 0 0 0.5rem 0;
+    font-size: 1.25rem;
+    color: var(--color-secondary);
+  }
+
+  .message p {
+    margin: 0;
+    font-size: 1rem;
+    color: var(--color-secondary);
+  }
+}
+
 /*
     FOR Navbar
 */
diff --git a/groups/utils.js b/groups/utils.js
index bcdad495..4dfeff83 100644
--- a/groups/utils.js
+++ b/groups/utils.js
@@ -134,7 +134,7 @@ function getDiscordGroupIdsFromSearch(groups, multipleGroupSearch) {
     .map((group) => group.trim().toLowerCase());
   const matchGroups = groups.filter((group) =>
     searchGroups.some((searchGroup) =>
-      group.title.toLowerCase().includes(searchGroup),
+      group.title.toLowerCase().startsWith(searchGroup),
     ),
   );
   return matchGroups.map((group) => group.id);

From 11823608b42751950ae70b4c37e8bed978b82a12 Mon Sep 17 00:00:00 2001
From: Nikhil-Kumar1 <138611430+Nikhil-Kumar1@users.noreply.github.com>
Date: Sat, 21 Sep 2024 15:10:20 +0530
Subject: [PATCH 14/16] 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
---
 __tests__/home/home.test.js | 10 +++-
 index.html                  | 91 +++++++++++++++++++++++++------------
 style.css                   | 50 ++++++++++++++++++--
 3 files changed, 117 insertions(+), 34 deletions(-)

diff --git a/__tests__/home/home.test.js b/__tests__/home/home.test.js
index 76333d73..e8896f7b 100644
--- a/__tests__/home/home.test.js
+++ b/__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 () => {
diff --git a/index.html b/index.html
index aea4c8e4..2e665c7e 100644
--- a/index.html
+++ b/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">
diff --git a/style.css b/style.css
index 96022dea..00eec7ff 100644
--- a/style.css
+++ b/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,6 +114,36 @@ 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);
@@ -119,6 +151,13 @@ footer {
   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;
   }
 }

From cfdd3014e5b9abfbc7db7f94fb44830a2a20acb3 Mon Sep 17 00:00:00 2001
From: Anubhav <159301654+DeltaDynamo@users.noreply.github.com>
Date: Sun, 22 Sep 2024 23:20:45 +0530
Subject: [PATCH 15/16] Enhancement : Application cards and Accept/Reject
 button (#826)

* Make Application Cards responsive on small screen size & Add Click/Hover Action for Accept/Reject Buttons

* Prettier Run Fix

* Add :is pseduo class for combining :hover and :active states to reduce lines of code

* Resolve change requests
---
 applications/index.html | 14 ++++++-
 applications/style.css  | 90 +++++++++++++++++++++++++++++++++++------
 2 files changed, 90 insertions(+), 14 deletions(-)

diff --git a/applications/index.html b/applications/index.html
index c865bcec..ee83fb65 100644
--- a/applications/index.html
+++ b/applications/index.html
@@ -77,8 +77,18 @@ <h2>Status</h2>
         </button>
         <div class="application-details-main"></div>
         <div class="application-details-actions">
-          <button class="application-details-accept">Accept</button>
-          <p class="application-details-reject">Reject</p>
+          <button
+            class="application-details-accept"
+            aria-label="Accept Application"
+          >
+            Accept
+          </button>
+          <button
+            class="application-details-reject"
+            aria-label="Reject Application"
+          >
+            Reject
+          </button>
         </div>
       </div>
       <main class="application-container"></main>
diff --git a/applications/style.css b/applications/style.css
index 107a199c..e555584b 100644
--- a/applications/style.css
+++ b/applications/style.css
@@ -2,6 +2,7 @@
   font-family: 'Inter', sans-serif;
   --color-primary: #1d1283;
   --color-primary-hover: #11085c;
+  --color-button-hover: #2c1bc6;
   --white: #fff;
   --color-gray: #666;
   --black-color: black;
@@ -48,7 +49,7 @@ body {
 .container {
   max-width: 1100px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 1rem;
   overflow-y: auto;
 }
 
@@ -145,7 +146,6 @@ body {
 .application-container {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
   padding-bottom: 10px;
   padding-top: 32px;
   gap: 25px;
@@ -159,7 +159,10 @@ body {
   border-radius: 15px;
   box-shadow: var(--elevation-1);
   padding: 24px;
-  width: 44%;
+  width: 85%;
+  max-width: 800px;
+  box-sizing: border-box;
+  margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 2px;
@@ -364,16 +367,57 @@ body {
 
 .application-details .application-details-actions .application-details-reject {
   color: var(--red-color);
-  height: auto;
   background-color: white;
-  margin-left: auto;
-  margin-right: auto;
-  text-decoration: underline;
+  margin: 0 auto;
+  width: 40%;
+  border: 2px solid var(--red-color);
+}
+
+.application-details
+  .application-details-actions
+  .application-details-reject:is(:hover, :active, :focus-visible) {
+  background: var(--red-color);
+  color: var(--white);
+  transition: transform 0.2s ease;
+  will-change: transform;
+}
+
+.application-details
+  .application-details-actions
+  .application-details-reject:hover {
+  transform: scale(1.05);
+}
+
+.application-details
+  .application-details-actions
+  .application-details-reject:active {
+  animation: bounceBackAnimation 0.4s ease forwards;
 }
 
 .application-details .application-details-actions .application-details-accept {
   background: var(--color-primary);
-  width: 50%;
+  margin: 0 auto;
+  width: 40%;
+}
+
+.application-details
+  .application-details-actions
+  .application-details-accept:is(:hover, :active, :focus-visible) {
+  background: var(--color-button-hover);
+  transition: transform 0.2s ease;
+  will-change: transform;
+}
+
+.application-details
+  .application-details-actions
+  .application-details-accept:hover {
+  transform: scale(1.05);
+}
+
+.application-details
+  .application-details-actions
+  .application-details-accept:active {
+  animation: bounceBackAnimation 0.4s ease forwards;
 }
 
 .application-details-actions .hidden {
@@ -442,6 +486,28 @@ body {
   opacity: 0.2;
 }
 
+@keyframes bounceBackAnimation {
+  0% {
+    transform: scale(1);
+  }
+
+  25% {
+    transform: scale(0.9);
+  }
+
+  55% {
+    transform: scale(1.1);
+  }
+
+  75% {
+    transform: scale(0.9);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
 @keyframes slideIn {
   from {
     right: -300px;
@@ -463,10 +529,6 @@ body {
 }
 
 @media screen and (max-width: 850px) {
-  .application-card {
-    width: 100%;
-  }
-
   .container {
     padding: 1rem;
   }
@@ -478,4 +540,8 @@ body {
     height: 100%;
     border-radius: 0;
   }
+
+  .application-card {
+    width: 90%;
+  }
 }

From 7533e96fbac0ac5a13007beaa1f6939bc944127d Mon Sep 17 00:00:00 2001
From: Vinit khandal <111434418+vinit717@users.noreply.github.com>
Date: Mon, 23 Sep 2024 00:22:10 +0530
Subject: [PATCH 16/16] Revert "Improve Dashboard Site Homepage" (#840)

Revert "Improve Dashboard Site Homepage (#817)"

This reverts commit 11823608b42751950ae70b4c37e8bed978b82a12.
---
 __tests__/home/home.test.js | 10 +---
 index.html                  | 91 ++++++++++++-------------------------
 style.css                   | 50 ++------------------
 3 files changed, 34 insertions(+), 117 deletions(-)

diff --git a/__tests__/home/home.test.js b/__tests__/home/home.test.js
index e8896f7b..76333d73 100644
--- a/__tests__/home/home.test.js
+++ b/__tests__/home/home.test.js
@@ -348,10 +348,7 @@ describe('Home Page', () => {
       discordUsersButton,
     );
     const trimmedDiscordUsersButtonText = discordUsersButtonText.trim();
-
-    expect(trimmedDiscordUsersButtonText).toBe(
-      'Discord Users\n\nManage Discord user roles and activities.',
-    );
+    expect(trimmedDiscordUsersButtonText).toBe('Discord Users');
   });
 
   it('should display the User Management anchor button', async () => {
@@ -532,10 +529,7 @@ describe('Home Page', () => {
       applicationButton,
     );
     const trimmedApplicationButtonText = applicationButtonText.trim();
-
-    expect(trimmedApplicationButtonText).toBe(
-      'Applications\n\nManage and review submitted applications.',
-    );
+    expect(trimmedApplicationButtonText).toBe('Applications');
   });
 
   it('should close hamburger menu on clicking anywhere on the screen except the menu', async () => {
diff --git a/index.html b/index.html
index 2e665c7e..aea4c8e4 100644
--- a/index.html
+++ b/index.html
@@ -78,30 +78,21 @@
     </section>
 
     <section class="buttonSection">
-      <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="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
+        class="action-button element-display-remove"
+        href="/goal/index.html"
+        id="create-goal"
+      >
+        Create Goals
       </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 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>
       <a
         id="user-management-link"
@@ -112,12 +103,9 @@ <h5 class="card__title">Discord Users</h5>
       </a>
       <a
         id="requests-link"
-        class="card element-display-remove"
+        class="action-button element-display-remove"
         href="/requests/index.html"
-        ><h5 class="card__title">Requests</h5>
-        <p class="card__description">
-          Manage requests for various resources and services.
-        </p>
+        >Requests
       </a>
       <a
         id="extension-requests-link"
@@ -133,49 +121,28 @@ <h5 class="card__title">Discord Users</h5>
       >
         Task Requests
       </a>
-      <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 href="/online-members/online-members.html" class="action-button">
+        Online Members
       </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="card element-display-remove"
+        class="action-button element-display-remove"
         href="/feed/index.html"
         id="create-activity-feed"
       >
-        <h5 class="card__title">Activity Feed</h5>
-        <p class="card__description">
-          View updates on activities and project progress.
-        </p></a
+        Activity Feed</a
       >
-      <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 id="application-button" href="/applications" class="action-button">
+        Applications
       </a>
       <div class="button-container element-display-remove" id="sync-repo-div">
-        <button id="repo-sync-button" class="card">
+        <button id="repo-sync-button" class="action-button">
           <span class="spinner"></span>
-          <h5 class="card__title">Sync Repo</h5>
-          <p class="card__description">Sync repository to update the changes</p>
+          Sync Repo
         </button>
         <div class="status" id="sync-repo-status-update"></div>
         <div id="toast" class="hidden">
diff --git a/style.css b/style.css
index 00eec7ff..96022dea 100644
--- a/style.css
+++ b/style.css
@@ -30,7 +30,6 @@ body {
 }
 
 .buttonSection {
-  margin-top: 10px;
   height: 80vh;
   display: flex;
   justify-content: center;
@@ -100,10 +99,9 @@ footer {
 }
 
 .action-button {
-  width: 350px;
   color: var(--black-color);
-  font-weight: 600;
-  font-size: 1.1rem;
+  font-weight: 500;
+  font-size: larger;
   background-color: var(--white-color);
   border: 2px solid var(--black-color);
   border-radius: 5px;
@@ -114,36 +112,6 @@ 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);
@@ -151,13 +119,6 @@ footer {
   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;
 }
@@ -275,16 +236,11 @@ footer {
   display: none !important;
 }
 
-@media only screen and (max-width: 1200px) {
+@media only screen and (max-width: 600px) {
   .buttonSection {
     flex-direction: column;
-    height: auto;
-    padding: 15px;
   }
   .action-button {
     text-align: center;
-    width: 100%;
-    padding: 10px;
-    font-size: medium;
   }
 }