Make reject button smaller and fix modal action buttons state on /applications page (#806)

* Make accept button bigger and handle action buttons status wise

* Add/remove application status message through js

Author: samarpan1738

applications/index.html

@@ -77,8 +77,8 @@ <h2>Status</h2>
         </button>
         <div class="application-details-main"></div>
         <div class="application-details-actions">
-          <button class="application-details-reject">Reject</button>
           <button class="application-details-accept">Accept</button>
+          <p class="application-details-reject">Reject</p>
         </div>
       </div>
       <main class="application-container"></main>

applications/script.js

@@ -33,6 +33,10 @@ const applicationContainer = document.querySelector('.application-container');
 const clearButton = document.getElementById('clear-button');
 const lastElementContainer = document.getElementById('page_bottom_element');
 
+const applicationDetailsActionsContainer = document.querySelector(
+  '.application-details-actions',
+);
+
 const urlParams = new URLSearchParams(window.location.search);
 let applicationId = urlParams.get('id');
 
@@ -81,6 +85,18 @@ function closeApplicationDetails() {
   applicationDetailsModal.classList.add('hidden');
   backDropBlur.style.display = 'none';
   document.body.style.overflow = 'auto';
+  const applicationAcceptedMsg = document.querySelector(
+    '.application-details-accepted-msg',
+  );
+  const applicationRejectedMsg = document.querySelector(
+    '.application-details-rejected-msg',
+  );
+  if (applicationAcceptedMsg) {
+    applicationAcceptedMsg.remove();
+  }
+  if (applicationRejectedMsg) {
+    applicationRejectedMsg.remove();
+  }
   removeQueryParamInUrl('id');
 }
 
@@ -187,18 +203,34 @@ function openApplicationDetails(application) {
   applicationDetailsMain.appendChild(applicationSection);
 
   if (application.status === 'rejected') {
-    applicationRejectButton.disabled = true;
-    applicationRejectButton.style.cursor = 'not-allowed';
-    applicationRejectButton.classList.add('disable-button');
+    applicationAcceptButton.classList.add('hidden');
+    applicationRejectButton.classList.add('hidden');
+    const applicationDetailsRejectedMsg = createElement({
+      type: 'p',
+      attributes: {
+        class: 'application-details-rejected-msg',
+      },
+      innerText: 'Application is already rejected',
+    });
+    applicationDetailsActionsContainer.append(applicationDetailsRejectedMsg);
   } else if (application.status === 'accepted') {
-    applicationAcceptButton.disabled = true;
-    applicationAcceptButton.style.cursor = 'not-allowed';
-    applicationAcceptButton.classList.add('disable-button');
+    applicationAcceptButton.classList.add('hidden');
+    applicationRejectButton.classList.add('hidden');
+    const applicationDetailsAcceptedMsg = createElement({
+      type: 'p',
+      attributes: {
+        class: 'application-details-accepted-msg',
+      },
+      innerText: 'Application was already accepted',
+    });
+    applicationDetailsActionsContainer.append(applicationDetailsAcceptedMsg);
   } else {
     applicationRejectButton.disabled = false;
     applicationRejectButton.style.cursor = 'pointer';
     applicationRejectButton.classList.remove('disable-button');
+    applicationRejectButton.classList.remove('hidden');
 
+    applicationAcceptButton.classList.remove('hidden');
     applicationAcceptButton.disabled = false;
     applicationAcceptButton.style.cursor = 'pointer';
     applicationAcceptButton.classList.remove('disable-button');

applications/style.css

@@ -343,14 +343,15 @@ body {
   display: flex;
   align-items: flex-start;
   height: 8%;
-  justify-content: space-around;
+  align-items: center;
   padding: 10px;
   padding-bottom: 16px;
+  padding-left: 30px;
+  padding-right: 30px;
 }
 
 .application-details .application-details-actions .application-details-reject,
 .application-details .application-details-actions .application-details-accept {
-  width: 44%;
   cursor: pointer;
   border: none;
   height: 95%;
@@ -362,11 +363,37 @@ body {
 }
 
 .application-details .application-details-actions .application-details-reject {
-  background: var(--red-color);
+  color: var(--red-color);
+  height: auto;
+  background-color: white;
+  margin-left: auto;
+  margin-right: auto;
+  text-decoration: underline;
 }
 
 .application-details .application-details-actions .application-details-accept {
   background: var(--color-primary);
+  width: 50%;
+}
+
+.application-details-actions .hidden {
+  display: none;
+}
+
+.application-details-accepted-msg,
+.application-details-rejected-msg {
+  font-weight: bold;
+  font-size: 18px;
+  width: 100%;
+  text-align: center;
+}
+
+.application-details-accepted-msg {
+  color: var(--color-green);
+}
+
+.application-details-rejected-msg {
+  color: var(--red-color);
 }
 
 .unauthorized-text {