From 821b9b55a4cb59c9702c9a8f7ced4a9ca24b7161 Mon Sep 17 00:00:00 2001
From: Shubham Sharma <shbh541@gmail.com>
Date: Wed, 3 Jan 2024 22:07:51 +0530
Subject: [PATCH 1/8] Revamped the UI of groups page

---
 groups/index.html | 115 ++++++++++++++++++++++++++------
 groups/script.js  |  39 +++++++++--
 groups/style.css  | 166 +++++++++++++++++++++++++++++++++++++++-------
 3 files changed, 268 insertions(+), 52 deletions(-)
diff --git a/groups/index.html b/groups/index.html
index 578cb88c..1b18ca6a 100644
--- a/groups/index.html
+++ b/groups/index.html
@@ -6,12 +6,46 @@
     <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="/style.css" />
     <link rel="stylesheet" href="/global.css" />
     <link rel="stylesheet" href="/groups/style.css" />
     <script src="/constants.js"></script>
     <script type="module" src="/groups/script.js" defer></script>
   </head>
   <body>
+    <nav id="tasksNav">
+      <div class="logo">
+        <a href="/index.html">
+          <img src="/images/Real-Dev-Squad@1x.png" alt="logo" />
+        </a>
+      </div>
+      <div class="nav-links">
+        <div class="hamburger">
+          <div class="line"></div>
+          <div class="line"></div>
+          <div class="line"></div>
+        </div>
+        <div class="links">
+          <a href="https://welcome.realdevsquad.com/">Welcome</a>
+          <a href="https://www.realdevsquad.com/events">Events</a>
+          <a href="https://members.realdevsquad.com/">Members</a>
+          <a href="https://status.realdevsquad.com/tasks">Status</a>
+        </div>
+      </div>
+      <div class="sign-in-btn">
+        <button id="github_auth">
+          Sign In <span>With GitHub</span>
+          <img src="/images/github.png" class="user-avatar" />
+        </button>
+      </div>
+      <div class="user-info">
+        <span id="user-name"></span>
+        <span>
+          <img id="user-img" src="" alt="" />
+        </span>
+      </div>
+      <div id="dropdown"></div>
+    </nav>
     <h3 class="not-verified-tag hidden">
       Cannot use RDS Discord features as you are not verified
     </h3>
@@ -19,37 +53,74 @@ <h3 class="not-verified-tag hidden">
       <div class="backdrop hidden">
         <div class="loader"></div>
       </div>
-      <nav class="groups-tab">
-        <div class="manage-groups-tab active-tab tab">Manage Groups</div>
-        <div class="create-groups-tab tab">Create Groups</div>
-      </nav>
-      <div class="manage-groups">
-        <aside class="groups">
-          <div class="groups-search">
+      <div style="margin: 0 2rem">
+        <div class="Header_header__NLhag">
+          <a
+            ><button
+              type="button"
+              tabindex="0"
+              class="
+                Header_link Header_link__vertical
+                Header_active
+                manage-groups-tab
+              "
+            >
+              Manage Groups
+            </button></a
+          >
+          <a
+            ><button
+              type="button"
+              tabindex="0"
+              class="Header_link create-groups-tab"
+            >
+              Create Groups
+            </button></a
+          >
+        </div>
+        <div class="groups_container manage-groups">
+          <div class="search_container">
+            <div class="filter_ccontainer hidden" id="dropdown_container">
+              <div class="tasksearch_filter-button__Lr_GZ" id="sortby_text">
+                Sort by
+              </div>
+              <div id="dropdown_main" class="dropdown-content">
+                <a data-list="1">Popular within dev</a>
+                <a data-list="2">Recently created</a>
+                <a data-list="3">Recently used</a>
+              </div>
+            </div>
             <input
-              type="text"
-              class="groups-search-input"
+              class="groups-search-input groups-search-input"
               id="search-groups"
+              data-testid="search-input"
+              type="text"
               placeholder="Search for groups"
+              spellcheck="false"
             />
           </div>
-          <ul class="groups-list"></ul>
-        </aside>
-        <main>
-          <div class="dropdown hidden" id="dropdown_container">
-            <button class="task_filter-button" id="sortby_text">Sort by</button>
-            <div id="dropdown_main" class="dropdown-content">
-              <a data-list="1">Popular within dev</a>
-              <a data-list="2">Recently created</a>
-              <a data-list="3">Recently used</a>
-            </div>
+
+          <div>
+            <aside class="groups">
+              <div class="groups-search hidden">
+                <input
+                  type="text"
+                  id="search-groups"
+                  placeholder="Search for groups"
+                />
+              </div>
+              <ul class="groups-list"></ul>
+            </aside>
+            <main class="hidden">
+              <h2 id="no-results-message">No results found.</h2>
+            </main>
           </div>
-          <button class="btn btn-add-role" disabled>
+          <button class="btn btn-add-role container_width" disabled>
             Add me to this group
           </button>
-          <h2 id="no-results-message">No results found.</h2>
-        </main>
+        </div>
       </div>
+
       <div class="toaster-container">
         <div id="toaster" class="toaster-message hidden"></div>
       </div>
diff --git a/groups/script.js b/groups/script.js
index 3597a8d8..52236604 100644
--- a/groups/script.js
+++ b/groups/script.js
@@ -16,7 +16,7 @@ import {
   getSearchValueFromURL,
 } from './utils.js';
 const groupTabs = document.querySelector('.groups-tab');
-const tabs = document.querySelectorAll('.groups-tab div');
+const tabs = document.querySelectorAll('.Header_link');
 const sections = document.querySelectorAll('.manage-groups, .create-group');
 const loader = document.querySelector('.backdrop');
 const userIsNotVerifiedText = document.querySelector('.not-verified-tag');
@@ -24,7 +24,27 @@ const params = new URLSearchParams(window.location.search);
 const searchValue = getSearchValueFromURL();
 const isDev = params.get(DEV_FEATURE_FLAG) === 'true';
 const dropdownContainer = document.getElementById('dropdown_container');
+const githubAuth = document.getElementById('github_auth');
+function goToAuthPage() {
+  const authUrl = `https://github.com/login/oauth/authorize?client_id=23c78f66ab7964e5ef97&}&state=${window.location.href}`;
 
+  window.open(authUrl, '_self');
+}
+
+const hamburgerDiv = document.querySelector('.hamburger');
+const navLinks = document.querySelector('.links');
+let toggle = true;
+
+hamburgerDiv.addEventListener('click', function () {
+  if (toggle) {
+    navLinks.classList.add('active');
+    toggle = false;
+  } else {
+    navLinks.classList.remove('active');
+    toggle = true;
+  }
+});
+githubAuth.addEventListener('click', goToAuthPage);
 //Dropdown
 const dropdownMain = document.getElementById('dropdown_main');
 const dropdownTxt = document.getElementById('sortby_text');
@@ -45,6 +65,10 @@ if (searchValue) {
 }
 //User Data
 const userSelfData = await getUserSelf();
+if (userSelfData) {
+  const signInButton = document.querySelector('.sign-in-btn');
+  signInButton.style.display = 'none';
+}
 let UserGroupData = await getUserGroupRoles();
 
 /**
@@ -190,6 +214,13 @@ tabs?.forEach((tab, index) => {
     sections.forEach((section) => {
       section.classList.add('hidden');
     });
+    tabs.forEach((t) => {
+      if (t.classList.contains('Header_active')) {
+        t.classList.remove('Header_active');
+      } else {
+        t.classList.add('Header_active');
+      }
+    });
     sections[index].classList.remove('hidden');
   });
 });
@@ -197,12 +228,6 @@ tabs?.forEach((tab, index) => {
 /**
  * FOR CHANGING TABS
  */
-groupTabs.addEventListener('click', (e) => {
-  tabs.forEach((tab) => {
-    tab.classList?.remove('active-tab');
-  });
-  if (e.target.nodeName !== 'NAV') e.target?.classList?.add('active-tab');
-});
 function isRoleIdInData(data, targetRoleId) {
   // Use the some() method to check if any element in data.groups has a matching roleId
   return data.groups.some((group) => group.roleId === targetRoleId);
diff --git a/groups/style.css b/groups/style.css
index ad007913..6d8001ba 100644
--- a/groups/style.css
+++ b/groups/style.css
@@ -1,3 +1,7 @@
+:root {
+  --toastify-text-color-light: #757575;
+}
+
 * {
   margin: 0;
   padding: 0;
@@ -123,15 +127,10 @@
   align-items: center;
   justify-content: center;
 }
-.groups-search-input {
-  height: 2rem;
-  width: 90%;
-  padding-left: 2px;
-}
 .groups-list {
   padding: 0.8rem;
   list-style: none;
-  height: 66vh;
+  height: 74vh;
   overflow-y: scroll;
 }
 .groups-list::-webkit-scrollbar {
@@ -147,7 +146,7 @@
   border: 1px solid var(--color-list-border);
   margin-bottom: 0.6rem;
   border-radius: 0.6rem;
-  min-width: 12rem;
+  min-width: 40rem;
 }
 .groups-list li:hover {
   cursor: pointer;
@@ -286,11 +285,6 @@ NOT VERIFIED TEXT ABOVE
   text-align: center;
 }
 
-.dropdown {
-  position: relative;
-  display: inline-block;
-}
-
 .dropdown-content {
   display: none;
   position: absolute;
@@ -299,6 +293,7 @@ NOT VERIFIED TEXT ABOVE
   overflow: auto;
   border: 1px solid var(--color-group-dropdown-border-color);
   z-index: 1;
+  text-align: justify;
 }
 
 .dropdown-content a {
@@ -307,10 +302,6 @@ NOT VERIFIED TEXT ABOVE
   display: block;
 }
 
-.dropdown a:hover {
-  background-color: var(--color-group-dropdown-border-color);
-}
-
 .show_filter {
   display: block;
 }
@@ -319,7 +310,7 @@ NOT VERIFIED TEXT ABOVE
   cursor: pointer;
 }
 
-.task_filter-button {
+.filter-button {
   width: 5rem;
   height: 2rem;
   border-radius: 0.27rem 0 0 0.27rem;
@@ -335,7 +326,7 @@ NOT VERIFIED TEXT ABOVE
   border: 1px solid var(--color-group-dropdown-border-color);
 }
 
-.task_filter-button:after {
+.filter-button:after {
   content: '';
   border-left: 0.3rem solid transparent;
   border-right: 0.3rem solid transparent;
@@ -343,23 +334,152 @@ NOT VERIFIED TEXT ABOVE
   margin-left: 0.5rem;
 }
 
+.container_width {
+  min-width: 40rem;
+}
+
+.Header_header__NLhag {
+  padding-top: 0.6rem;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  align-items: center;
+  border-bottom: 1px solid var(--toastify-text-color-light);
+}
+
+.Header_link {
+  padding: 0.6rem;
+  text-decoration: none;
+  font-weight: 700;
+  color: #041484;
+  cursor: pointer;
+  background: none;
+  border: none;
+  position: relative;
+  width: auto;
+}
+
+.Header_link__vertical:after {
+  content: '';
+  position: absolute;
+  height: 1rem;
+  width: 2px;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.467);
+}
+
+.Header_active {
+  color: #e30464;
+}
+
+.groups_container {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  flex-wrap: nowrap;
+  align-items: center;
+  width: 100%;
+}
+
+.search_container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin: 1rem 0;
+  min-width: 40rem;
+  height: 2.5rem;
+  border-radius: 5px;
+  border: 1px solid #d0d7de;
+  position: relative;
+}
+
+.tasksearch_search-button-container__sk3_F {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 10rem;
+}
+
+.tasksearch_search-button__EfOo7 {
+  width: 100%;
+  height: 2rem;
+  border-radius: 5px;
+  background-color: #fff;
+  color: #000;
+  font-weight: 700;
+  cursor: pointer;
+  border: 1px solid gray;
+  outline: none;
+}
+
+.tasksearch_filter-button__Lr_GZ {
+  height: 2rem;
+  position: relative;
+  border-radius: 5px 0 0 5px;
+  background-color: #fff;
+  color: #000;
+  font-weight: 700;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-left: 5px;
+}
+
+.filter_ccontainer {
+  width: 8rem;
+}
+
+.groups-search-input {
+  width: 100%;
+  height: 2rem;
+  border-radius: 0 5px 5px 0;
+  outline: none;
+  background-image: url(https://img.icons8.com/ios-filled/16/000000/search.png);
+  background-repeat: no-repeat;
+  background-position: 0.5rem;
+  padding: 0.5rem 0.5rem 0.5rem 2rem;
+  background-color: #fff;
+  border: none;
+  border-left: 1px solid #d0d7de;
+}
+
+.tasksearch_filter-button__Lr_GZ:after {
+  content: '';
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 5px solid #000;
+  margin-left: 0.5rem;
+}
+
 @media (max-width: 650px) {
   .btn-add-role {
     position: static;
   }
-  .manage-groups {
-    flex-direction: column-reverse;
-    padding: 1.2rem;
-  }
   .manage-groups main {
     padding: unset;
     text-align: center;
   }
 
   .groups-list {
-    height: 54vh;
+    height: 75vh;
   }
+
   .group-name {
     font-size: large;
   }
+  .groups-list li {
+    min-width: auto;
+  }
+  .container_width {
+    min-width: 20rem;
+  }
+  .search_container {
+    min-width: 92%;
+  }
 }

From ad941e97f248b52629e98609885b9cebb598bc9e Mon Sep 17 00:00:00 2001
From: Shubham Sharma <shbh541@gmail.com>
Date: Wed, 3 Jan 2024 22:24:46 +0530
Subject: [PATCH 2/8] Fix github signin rendering

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

diff --git a/groups/script.js b/groups/script.js
index 52236604..ae930223 100644
--- a/groups/script.js
+++ b/groups/script.js
@@ -65,10 +65,7 @@ if (searchValue) {
 }
 //User Data
 const userSelfData = await getUserSelf();
-if (userSelfData) {
-  const signInButton = document.querySelector('.sign-in-btn');
-  signInButton.style.display = 'none';
-}
+
 let UserGroupData = await getUserGroupRoles();
 
 /**
@@ -101,9 +98,13 @@ const createAuthorDetailsDOM = (firstName, lastName, imageUrl) => {
  * GET SELF DATA
  */
 const IsUserVerified = !!userSelfData.discordId;
-const IsUserArchived = userSelfData.roles.archived;
-if (!IsUserVerified || IsUserArchived) {
-  userIsNotVerifiedText.classList.remove('hidden');
+const IsUserArchived = userSelfData?.roles?.archived;
+if (userSelfData.statusCode !== 401) {
+  const signInButton = document.querySelector('.sign-in-btn');
+  signInButton.style.display = 'none';
+  if (!IsUserVerified || IsUserArchived) {
+    userIsNotVerifiedText.classList.remove('hidden');
+  }
 }
 const memberAddRoleBody = {
   userid: userSelfData?.discordId,

From bba69e0f3ac472875a1ef76205253b308cb39d60 Mon Sep 17 00:00:00 2001
From: Shubham Sharma <shbh541@gmail.com>
Date: Wed, 3 Jan 2024 23:03:16 +0530
Subject: [PATCH 3/8] Remove extra class

---
 groups/index.html |  2 +-
 groups/style.css  | 10 +++-------
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/groups/index.html b/groups/index.html
index 1b18ca6a..76a1373c 100644
--- a/groups/index.html
+++ b/groups/index.html
@@ -115,7 +115,7 @@ <h3 class="not-verified-tag hidden">
               <h2 id="no-results-message">No results found.</h2>
             </main>
           </div>
-          <button class="btn btn-add-role container_width" disabled>
+          <button class="btn btn-add-role" disabled>
             Add me to this group
           </button>
         </div>
diff --git a/groups/style.css b/groups/style.css
index 6d8001ba..256825df 100644
--- a/groups/style.css
+++ b/groups/style.css
@@ -228,6 +228,7 @@
 
 .btn-add-role {
   margin: 5px;
+  min-width: 40rem;
 }
 
 #no-results-message {
@@ -334,10 +335,6 @@ NOT VERIFIED TEXT ABOVE
   margin-left: 0.5rem;
 }
 
-.container_width {
-  min-width: 40rem;
-}
-
 .Header_header__NLhag {
   padding-top: 0.6rem;
   display: flex;
@@ -460,6 +457,7 @@ NOT VERIFIED TEXT ABOVE
 @media (max-width: 650px) {
   .btn-add-role {
     position: static;
+    min-width: 20rem;
   }
   .manage-groups main {
     padding: unset;
@@ -476,9 +474,7 @@ NOT VERIFIED TEXT ABOVE
   .groups-list li {
     min-width: auto;
   }
-  .container_width {
-    min-width: 20rem;
-  }
+
   .search_container {
     min-width: 92%;
   }

From 764143db649b1da3eb71e77af40d9c7a2160a676 Mon Sep 17 00:00:00 2001
From: Shubham Sharma <shbh541@gmail.com>
Date: Wed, 3 Jan 2024 23:10:54 +0530
Subject: [PATCH 4/8] Removed the style in html

---
 groups/index.html | 116 ++++++++++++++++++++++------------------------
 groups/style.css  |   3 +-
 2 files changed, 58 insertions(+), 61 deletions(-)

diff --git a/groups/index.html b/groups/index.html
index 76a1373c..e6ead204 100644
--- a/groups/index.html
+++ b/groups/index.html
@@ -53,72 +53,68 @@ <h3 class="not-verified-tag hidden">
       <div class="backdrop hidden">
         <div class="loader"></div>
       </div>
-      <div style="margin: 0 2rem">
-        <div class="Header_header__NLhag">
-          <a
-            ><button
-              type="button"
-              tabindex="0"
-              class="
-                Header_link Header_link__vertical
-                Header_active
-                manage-groups-tab
-              "
-            >
-              Manage Groups
-            </button></a
+      <div class="sub_menu">
+        <a
+          ><button
+            type="button"
+            tabindex="0"
+            class="
+              Header_link Header_link__vertical
+              Header_active
+              manage-groups-tab
+            "
           >
-          <a
-            ><button
-              type="button"
-              tabindex="0"
-              class="Header_link create-groups-tab"
-            >
-              Create Groups
-            </button></a
+            Manage Groups
+          </button></a
+        >
+        <a
+          ><button
+            type="button"
+            tabindex="0"
+            class="Header_link create-groups-tab"
           >
-        </div>
-        <div class="groups_container manage-groups">
-          <div class="search_container">
-            <div class="filter_ccontainer hidden" id="dropdown_container">
-              <div class="tasksearch_filter-button__Lr_GZ" id="sortby_text">
-                Sort by
-              </div>
-              <div id="dropdown_main" class="dropdown-content">
-                <a data-list="1">Popular within dev</a>
-                <a data-list="2">Recently created</a>
-                <a data-list="3">Recently used</a>
-              </div>
+            Create Groups
+          </button></a
+        >
+      </div>
+      <div class="groups_container manage-groups">
+        <div class="search_container">
+          <div class="filter_ccontainer hidden" id="dropdown_container">
+            <div class="tasksearch_filter-button__Lr_GZ" id="sortby_text">
+              Sort by
+            </div>
+            <div id="dropdown_main" class="dropdown-content">
+              <a data-list="1">Popular within dev</a>
+              <a data-list="2">Recently created</a>
+              <a data-list="3">Recently used</a>
             </div>
-            <input
-              class="groups-search-input groups-search-input"
-              id="search-groups"
-              data-testid="search-input"
-              type="text"
-              placeholder="Search for groups"
-              spellcheck="false"
-            />
           </div>
+          <input
+            class="groups-search-input groups-search-input"
+            id="search-groups"
+            data-testid="search-input"
+            type="text"
+            placeholder="Search for groups"
+            spellcheck="false"
+          />
+        </div>
 
-          <div>
-            <aside class="groups">
-              <div class="groups-search hidden">
-                <input
-                  type="text"
-                  id="search-groups"
-                  placeholder="Search for groups"
-                />
-              </div>
-              <ul class="groups-list"></ul>
-            </aside>
-            <main class="hidden">
-              <h2 id="no-results-message">No results found.</h2>
-            </main>
-          </div>
-          <button class="btn btn-add-role" disabled>
-            Add me to this group
-          </button>
+        <div>
+          <aside class="groups">
+            <div class="groups-search hidden">
+              <input
+                type="text"
+                id="search-groups"
+                placeholder="Search for groups"
+              />
+            </div>
+            <ul class="groups-list"></ul>
+          </aside>
+          <main class="hidden">
+            <h2 id="no-results-message">No results found.</h2>
+          </main>
         </div>
+        <button class="btn btn-add-role" disabled>Add me to this group</button>
       </div>
 
       <div class="toaster-container">
diff --git a/groups/style.css b/groups/style.css
index 256825df..074aa9be 100644
--- a/groups/style.css
+++ b/groups/style.css
@@ -335,12 +335,13 @@ NOT VERIFIED TEXT ABOVE
   margin-left: 0.5rem;
 }
 
-.Header_header__NLhag {
+.sub_menu {
   padding-top: 0.6rem;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   align-items: center;
+  margin: 0 2rem;
   border-bottom: 1px solid var(--toastify-text-color-light);
 }
 

From 584cecdf848578f4ad850edcf131ab5b6992dd93 Mon Sep 17 00:00:00 2001
From: Shubham Sharma <shbh541@gmail.com>
Date: Wed, 3 Jan 2024 23:12:22 +0530
Subject: [PATCH 5/8] Changed the class name

---
 groups/index.html | 2 +-
 groups/style.css  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/groups/index.html b/groups/index.html
index e6ead204..dbcb01aa 100644
--- a/groups/index.html
+++ b/groups/index.html
@@ -79,7 +79,7 @@ <h3 class="not-verified-tag hidden">
       </div>
       <div class="groups_container manage-groups">
         <div class="search_container">
-          <div class="filter_ccontainer hidden" id="dropdown_container">
+          <div class="filter_container hidden" id="dropdown_container">
             <div class="tasksearch_filter-button__Lr_GZ" id="sortby_text">
               Sort by
             </div>
diff --git a/groups/style.css b/groups/style.css
index 074aa9be..3bac69bd 100644
--- a/groups/style.css
+++ b/groups/style.css
@@ -429,7 +429,7 @@ NOT VERIFIED TEXT ABOVE
   padding-left: 5px;
 }
 
-.filter_ccontainer {
+.filter_container {
   width: 8rem;
 }
 

From bc914e18953c78cfd015a998dd8a7a8c78c48584 Mon Sep 17 00:00:00 2001
From: Shubham Sharma <shbh541@gmail.com>
Date: Wed, 3 Jan 2024 23:32:11 +0530
Subject: [PATCH 6/8] removed extra class

---
 groups/style.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/groups/style.css b/groups/style.css
index 3bac69bd..c0c40f28 100644
--- a/groups/style.css
+++ b/groups/style.css
@@ -413,7 +413,7 @@ NOT VERIFIED TEXT ABOVE
   outline: none;
 }
 
-.tasksearch_filter-button__Lr_GZ {
+#sortby_text {
   height: 2rem;
   position: relative;
   border-radius: 5px 0 0 5px;
@@ -447,7 +447,7 @@ NOT VERIFIED TEXT ABOVE
   border-left: 1px solid #d0d7de;
 }
 
-.tasksearch_filter-button__Lr_GZ:after {
+#sortby_text:after {
   content: '';
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;

From 004ee1c70cf955feba39e2fc7a1de16ff95ebcb9 Mon Sep 17 00:00:00 2001
From: Shubham Sharma <shbh541@gmail.com>
Date: Wed, 3 Jan 2024 23:48:32 +0530
Subject: [PATCH 7/8] Removed extra class

---
 groups/index.html | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/groups/index.html b/groups/index.html
index dbcb01aa..5576fae8 100644
--- a/groups/index.html
+++ b/groups/index.html
@@ -80,9 +80,7 @@ <h3 class="not-verified-tag hidden">
       <div class="groups_container manage-groups">
         <div class="search_container">
           <div class="filter_container hidden" id="dropdown_container">
-            <div class="tasksearch_filter-button__Lr_GZ" id="sortby_text">
-              Sort by
-            </div>
+            <div id="sortby_text">Sort by</div>
             <div id="dropdown_main" class="dropdown-content">
               <a data-list="1">Popular within dev</a>
               <a data-list="2">Recently created</a>

From b9ada46560a3fef7c525d70923196f551b1ce18f Mon Sep 17 00:00:00 2001
From: Shubham Sharma <shbh541@gmail.com>
Date: Thu, 4 Jan 2024 00:24:07 +0530
Subject: [PATCH 8/8] Removed redundant code

---
 groups/index.html | 16 +++++-----------
 groups/script.js  |  2 --
 groups/style.css  |  4 ++--
 3 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/groups/index.html b/groups/index.html
index 5576fae8..ec6806ea 100644
--- a/groups/index.html
+++ b/groups/index.html
@@ -12,6 +12,7 @@
     <script src="/constants.js"></script>
     <script type="module" src="/groups/script.js" defer></script>
   </head>
+
   <body>
     <nav id="tasksNav">
       <div class="logo">
@@ -98,19 +99,12 @@ <h3 class="not-verified-tag hidden">
         </div>
 
         <div>
-          <aside class="groups">
-            <div class="groups-search hidden">
-              <input
-                type="text"
-                id="search-groups"
-                placeholder="Search for groups"
-              />
-            </div>
+          <main class="groups">
             <ul class="groups-list"></ul>
-          </aside>
-          <main class="hidden">
-            <h2 id="no-results-message">No results found.</h2>
           </main>
+          <div>
+            <h2 id="no-results-message">No results found.</h2>
+          </div>
         </div>
         <button class="btn btn-add-role" disabled>Add me to this group</button>
       </div>
diff --git a/groups/script.js b/groups/script.js
index ae930223..eda96790 100644
--- a/groups/script.js
+++ b/groups/script.js
@@ -15,7 +15,6 @@ import {
   getUserGroupRoles,
   getSearchValueFromURL,
 } from './utils.js';
-const groupTabs = document.querySelector('.groups-tab');
 const tabs = document.querySelectorAll('.Header_link');
 const sections = document.querySelectorAll('.manage-groups, .create-group');
 const loader = document.querySelector('.backdrop');
@@ -127,7 +126,6 @@ const renderGroups = () => {
     const formattedRoleName = removeGroupKeywordFromDiscordRoleName(
       item.rolename,
     );
-
     //If searchValue present, filter out the list
     if (searchValue) {
       group.style.display = formattedRoleName
diff --git a/groups/style.css b/groups/style.css
index c0c40f28..678c6827 100644
--- a/groups/style.css
+++ b/groups/style.css
@@ -458,7 +458,7 @@ NOT VERIFIED TEXT ABOVE
 @media (max-width: 650px) {
   .btn-add-role {
     position: static;
-    min-width: 20rem;
+    min-width: 21rem;
   }
   .manage-groups main {
     padding: unset;
@@ -477,6 +477,6 @@ NOT VERIFIED TEXT ABOVE
   }
 
   .search_container {
-    min-width: 92%;
+    min-width: 80%;
   }
 }
