Merge branch 'develop' of https://github.com/Real-Dev-Squad/website-d…

…ashboard into enhancement/extension-card
Real-Dev-Squad · Jul 13, 2023 · c092977 · c092977
2 parents 92980d0 + 0561320
commit c092977
Show file tree

Hide file tree

Showing 18 changed files with 1,000 additions and 75 deletions.
diff --git a/discord-groups/index.html b/discord-groups/index.html
@@ -18,8 +18,8 @@ <h3 class="not-verified-tag hidden">
     <div class="container">
       <div class="loader hidden"></div>
       <nav class="groups-tab">
-        <div class="manage-groups-tab active-tab">Manage Groups</div>
-        <div class="create-groups-tab">Create Groups</div>
+        <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">

diff --git a/discord-groups/style.css b/discord-groups/style.css
@@ -3,19 +3,20 @@
   padding: 0;
 }
 :root {
-  --color-groups-tab-background: #65656542;
-  --color-groups-tab-box-shadow: #65656542;
-  --color-active-tabs-background: #636363a1;
+  --color-groups-tab-background: #1d1283;
+  --color-active-tabs-color: #87d870;
   --color-active-groups-background: #337ad7b0;
+  --color-buttons-background: #041187;
   --color-loader-border: #f3f3f3;
   --color-loader-border-top: #3498db;
 }
 .container {
-  margin: 1rem;
+  font-family: 'Roboto', sans-serif;
 }
 
 .btn {
-  padding: 0.5rem 2rem;
+  padding: 0.6rem 2rem;
+  border-radius: 0.4rem;
 }
 
 /*
@@ -26,18 +27,24 @@
   width: 100%;
   display: flex;
   justify-content: start;
-  gap: 1rem;
+  gap: 1.2rem;
   flex-direction: row;
-  box-shadow: 4px 4px 5px var(--color-groups-tab-box-shadow);
   background-color: var(--color-groups-tab-background);
 }
-.groups-tab div {
+.tab {
   font-size: larger;
+  font-weight: bolder;
+  color: #fff;
   cursor: pointer;
-  padding: 1rem;
+  margin: 1.6rem;
+  padding-bottom: 0.4rem;
 }
 .active-tab {
-  background-color: var(--color-active-tabs-background);
+  color: var(--color-active-tabs-color);
+  border-bottom: 4px solid var(--color-active-tabs-color);
+}
+.tab:hover {
+  color: var(--color-active-tabs-color);
 }
 
 .active-group {
@@ -61,21 +68,30 @@
 .groups {
   overflow: scroll;
 }
+.groups::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.groups::-webkit-scrollbar-thumb {
+  background: var(--color-buttons-background);
+  border-radius: 1.2rem;
+}
 .groups-list {
-  padding: 1rem;
+  padding: 0.8rem;
   list-style: none;
-  overflow: scroll;
   height: 80vh;
 }
 .groups-list li {
-  padding: 1rem;
-  border: thin solid black;
+  padding: 0.8rem;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  margin-bottom: 0.6rem;
+  border-radius: 0.6rem;
 }
 .group-name {
   font-size: larger;
 }
 .create-by {
-  opacity: 0.8;
+  opacity: 0.6;
 }
 .groups button {
   align-self: center;
@@ -87,42 +103,35 @@
 .group-fields {
   display: flex;
   flex-direction: column;
-  margin: 1rem;
+  margin: 1.2rem;
   padding-block: 2rem;
   align-items: center;
-  gap: 1rem;
-}
-
-.group-fields-column {
-  display: flex;
-  flex-direction: column;
-  margin-right: 10px;
+  gap: 1.2rem;
 }
 
 .group-input-container {
   display: flex;
   align-items: center;
 }
 
-.create-group-button-container {
-  display: flex;
-  justify-content: center;
-}
-
-.group-fields-column:last-child {
-  margin-right: 0;
-}
-
 .hidden {
   display: none;
 }
 
 .label-for-new-group {
   font-size: larger;
+  text-align: center;
 }
 
 .input-field {
-  padding: 0.5rem;
+  padding: 0.6rem;
+}
+
+.btn-add-role:not([disabled]),
+.btn-create-group {
+  background: var(--color-buttons-background);
+  color: #fff;
+  border: none;
 }
 
 /*
@@ -132,18 +141,18 @@
 */
 
 .loader {
-  border: 8px solid var(--color-loader-border);
-  border-top: 8px solid var(--color-loader-border-top);
+  border: 6px solid var(--color-loader-border);
+  border-top: 6px solid var(--color-loader-border-top);
   border-radius: 50%;
   position: fixed;
   top: 0;
   bottom: 0;
   right: 0;
   left: 0;
-  width: 60px;
-  height: 60px;
+  width: 4rem;
+  height: 4rem;
   animation: spin 1s linear infinite;
-  margin: 20px auto;
+  margin: 1.2rem auto;
 }
 
 @keyframes spin {
@@ -154,10 +163,26 @@
     transform: rotate(360deg);
   }
 }
+
 /*
 NOT VERIFIED TEXT ABOVE
 */
+
 .not-verified-tag {
   color: red;
   text-align: center;
 }
+
+@media (max-width: 650px) {
+  .manage-groups {
+    flex-direction: column-reverse;
+    padding: 1.2rem;
+    gap: 1.2rem;
+  }
+  .groups-list {
+    height: 60vh;
+  }
+  .group-name {
+    font-size: large;
+  }
+}
diff --git a/extension-requests/script.js b/extension-requests/script.js
@@ -22,6 +22,7 @@ const render = async () => {
   try {
     addLoader(container);
     const extensionRequests = await getExtensionRequests();
+
     const allExtensionRequests = extensionRequests.allExtensionRequests;
     allExtensionRequests.forEach((data) => {
       extensionRequestsContainer.appendChild(
@@ -105,8 +106,12 @@ function createExtensionRequestCard(data, dataHeadings) {
 
   const main = createTable(dataHeadings, data, 'extension-request');
 
-  main.appendChild(moreInfoBtn);
-  main.appendChild(updateRequestBtn);
+  const wrapperDiv = createElement({ type: 'div' });
+
+  wrapperDiv.appendChild(moreInfoBtn);
+  wrapperDiv.appendChild(updateRequestBtn);
+
+  main.appendChild(wrapperDiv);
   return main;
 }
 render();

diff --git a/extension-requests/style.css b/extension-requests/style.css
@@ -40,7 +40,7 @@ body {
 .container {
   width: 100%;
   text-align: center;
-  padding: 10px;
+  padding: 2.5rem;
 }
 
 .header {
@@ -52,6 +52,7 @@ body {
 .extension-requests-modal-parent {
   display: none;
 }
+
 .extension-requests-modal-parent.visible {
   z-index: 1;
   position: fixed;
@@ -137,10 +138,12 @@ body {
   border: none;
   border-bottom: 1px solid var(--gray);
 }
+
 .extension-requests-form input:focus {
   outline: none;
   border-bottom: 1px solid var(--gray);
 }
+
 .extension-requests-form button {
   background-color: var(--button-proceed);
   border: none;
@@ -168,10 +171,12 @@ body {
   border: none;
   border-bottom: 1px solid var(--gray);
 }
+
 .extension-requests-status-form input:focus {
   outline: none;
   border-bottom: 1px solid var(--gray);
 }
+
 .extension-requests-status-form button {
   background-color: var(--button-proceed);
   border: none;
@@ -187,42 +192,52 @@ body {
 
 .extension-requests {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 22rem));
+  grid-auto-rows: 26rem;
   flex-wrap: wrap;
+  justify-content: center;
+  gap: 1.25rem;
 }
 
 .extension-request {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: auto;
   text-align: left;
   border: 2px solid var(--black-transparent);
   padding: 1.25rem;
-  margin: 10px;
   color: var(--black);
   border-radius: 5px;
+  border-spacing: 0px 10px;
 }
 
 .extension-request tr th {
   width: 50%;
 }
 
-.extension-request .more,
-.extension-request .update_request {
+.extension-request > div {
+  display: flex;
+  justify-content: space-between;
+}
+.extension-request > div .more,
+.extension-request > div .update_request {
   background-color: var(--button-proceed);
   border: none;
   color: var(--white);
-  width: 40%;
-  min-width: max-content;
+  width: 48%;
   padding: 0.5rem 1rem;
-  font-size: medium;
+  font-size: 0.85rem;
   font-weight: bold;
   border-radius: 5px;
-  margin: 10px 10px 0px 0px;
 }
 
 /* Loader Container */
 .loader-text {
   text-align: center;
   font-size: 2rem;
 }
+
 .loader {
   margin: auto auto;
 }
@@ -236,6 +251,7 @@ body {
 .error {
   display: none;
 }
+
 .error-visible {
   display: block;
 }
@@ -254,6 +270,7 @@ body {
     left: 10%;
     right: 10%;
   }
+
   .extension-requests-form {
     left: 10%;
     right: 10%;

diff --git a/index.html b/index.html
@@ -46,8 +46,9 @@
         Online Members
       </a>
       <a class="action-button" href="/discord-groups/index.html">
-        Discord Groups</a
-      >
+        Discord Groups
+      </a>
+      <a class="action-button" href="/standup/index.html"> Standup Updates</a>
     </section>
 
     <footer>

diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
     "jsdom": "^21.1.1",
     "pre-commit": "^1.2.2",
     "prettier": "2.3.1",
-    "puppeteer": "^19.9.0",
+    "puppeteer": "^20.2.1",
     "puppeteer-core": "^19.9.0"
   },
   "volta": {

diff --git a/profile/utils.js b/profile/utils.js
@@ -331,7 +331,7 @@ async function getSelfUser() {
 }
 
 async function getUser(userId) {
-  const userResponse = await fetch(`${API_BASE_URL}/users/userId/${userId}`, {
+  const userResponse = await fetch(`${API_BASE_URL}/users?id=${userId}`, {
     method: 'GET',
     credentials: 'include',
     headers: {

diff --git a/standup/constants.js b/standup/constants.js
@@ -0,0 +1,2 @@
+const RDS_API_USERS = `${API_BASE_URL}/users`;
+const RDS_API_STANDUP = `${API_BASE_URL}/progresses?userId=`;