updated styling

agiledev-students-fall2023 · Dec 7, 2023 · 2a71244 · 2a71244
1 parent 047ed59
commit 2a71244
Show file tree

Hide file tree

Showing 10 changed files with 93 additions and 70 deletions.
diff --git a/front-end/src/components/admin/CommentBox/CommentBox.css b/front-end/src/components/admin/CommentBox/CommentBox.css
@@ -1,41 +1,53 @@
-
-
 .admin-comment-box textarea {
-    min-height: 80px;
-    width: 97%;
-    resize: vertical;
-    padding: 10px;
-    font-family: var(--primary-font);
-    border-radius: 3px;
-    border: 1px solid var(--primary);
-    font-size: 17px;
-  }
-
+  min-height: 90px;
+  resize: vertical;
+  padding: 10px;
+  font-family: var(--primary-font);
+  border-radius: 3px;
+  border: 1px solid var(--primary);
+  font-size: 17px;
+  width: calc(100% - 20px);
+  padding-right: 50px;
+}
+
 .admin-comment-box button {
-    background-color: var(--primary);
-    color: #fff;
-    border: none;
-    border-radius: 6px;
-    padding: 10px 20px;
-    cursor: pointer;
+  background-color: var(--primary);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  padding: 10px 20px;
+  cursor: pointer;
+  margin-left: 10px;
+  margin-bottom: 10px;
+  position: absolute;
+  right: 10px;
+}
 
-  }
-
 .admin-comments-list {
-    margin-top: 20px;
-
-  }
-
+  margin-top: 20px;
+}
+
 .admin-comment {
-    background-color: var(--secondary);
-    border: 1px solid #ccc;
-    border-radius: 6px;
-    padding: 10px;
-    margin-bottom: 10px;
-  }
+  background-color: var(--secondary);
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  padding: 10px;
+  margin-bottom: 10px;
+}
+
+.admin-comment-box>h3 {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.admin-comment-box form {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: space-between;
+}
 
-  .admin-comment-box > h3 {
-    margin-top: 10px;
-    margin-bottom: 10px;
-  }
-
+.admin-comment-box {
+  position: relative;
+  margin-bottom: 20px;
+}
diff --git a/front-end/src/components/admin/CommentBox/CommentBox.js b/front-end/src/components/admin/CommentBox/CommentBox.js
@@ -43,7 +43,7 @@ function CommentBox({ index, setUpdateBoxes, updateBoxes, currentDepartment, cur
           onChange={handleTextChange}
           value={textAreaValue}
         ></textarea>
-        <button type="submit"><strong> Submit</strong></button>
+        <button type="submit"><strong> Add </strong></button>
       </form>
 
     </div>

diff --git a/front-end/src/components/admin/DepartmentSelection/DepartmentSelection.css b/front-end/src/components/admin/DepartmentSelection/DepartmentSelection.css
@@ -1,15 +1,18 @@
 @import url("../../../assets/styles.css");
+
 .department-selection {
   background-color: var(--background);
   border-radius: 8px;
   width: 250px;
   margin-bottom: 50px;
 }
+
 .department-selection .tag-sidebar-header {
   display: flex;
   justify-content: space-between;
 }
-.department-selection .tag-sidebar-header select{
+
+.department-selection .tag-sidebar-header select {
   width: 45%;
   font-size: 12px;
   margin-right: 8px;
@@ -18,34 +21,34 @@
   color: var(--accent);
   cursor: pointer;
 }
-  
+
 .department-selection ul {
   list-style-type: none;
   margin-left: 0;
   padding: 0;
-  
+
 }
 
 .department-selection h3 {
   margin: 0;
 }
 
 .department-selection .plus-button {
-    background-color: #007BFF;
-    color: white;
-    border: none;
-    padding: 5px 10px;
-    font-size: 12px;
-    cursor: pointer;
-    margin-left: 70px;
+  background-color: #007BFF;
+  color: white;
+  border: none;
+  padding: 5px 10px;
+  font-size: 12px;
+  cursor: pointer;
+  margin-left: 70px;
 }
 
 .department-selection .plus-button:hover {
-    background-color: #0056b3;
+  background-color: #0056b3;
 }
 
 .department-selection .plus-button:focus {
-    outline: none;
+  outline: none;
 }
 
 .department-selection .tag-sidebar-header {
@@ -54,9 +57,9 @@
 }
 
 .department-selection .round-tag {
-  width: 80%;
+  width: 85%;
   height: 80%;
-  background-color:#e6dbf9;
+  background-color: #e6dbf9;
   border-radius: 16px;
   padding: 5px 5px;
   color: #845dd0;
@@ -81,8 +84,6 @@
   border-radius: 0 20px 20px 0;
 }
 
-.department-selection  .tag-close-button:hover {
+.department-selection .tag-close-button:hover {
   background-color: rgba(0, 0, 0, 0.1);
-}
-
-
+}
diff --git a/front-end/src/components/admin/DepartmentSelection/DepartmentSelection.js b/front-end/src/components/admin/DepartmentSelection/DepartmentSelection.js
@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react';
 import axios from 'axios';
 
 const BASE_URL = process.env.REACT_APP_BACKEND_URL;
-function DepartmentSelection({ index, name, tags, setUpdateBoxes, updateBoxes, currentDepartment }) {
+function DepartmentSelection({ index, name, tags, setUpdateBoxes, updateBoxes, currentDepartment, currentUser }) {
   const [departmentTags, setdepartmentTags] = useState([]);
 
   const departmentOptions = [
@@ -28,7 +28,11 @@ function DepartmentSelection({ index, name, tags, setUpdateBoxes, updateBoxes, c
 
   const postDepartmentTags = async (param) => {
     const lastdepartmentString = param[0];
-    const statusUpdate = `Admin added new department tag [${lastdepartmentString}]`;
+    const newDepartmentObject = departmentOptions.find(option => option.value === lastdepartmentString);
+    const newDepartmentLabel = newDepartmentObject ? newDepartmentObject.label : lastdepartmentString;
+    const currentDepartmentObject = departmentOptions.find(option => option.value === currentDepartment);
+    const currentDepartmentLabel = currentDepartmentObject ? currentDepartmentObject.label : currentDepartment;
+    const statusUpdate = `${currentUser} (${currentDepartmentLabel}) added the ${newDepartmentLabel} department`;
     setUpdateBoxes([statusUpdate, ...updateBoxes]); // Updates the update boxes locally in the parent
     try {
       await axios.post(`${BASE_URL}/api/actions/admin/${currentDepartment}/${index}`, { commentbox: statusUpdate, issueDepartmentTags: param });
@@ -41,9 +45,13 @@ function DepartmentSelection({ index, name, tags, setUpdateBoxes, updateBoxes, c
     return async () => {
       if (departmentTags.length > 1) {
         const modifiedDepartmentTags = departmentTags.filter(item => item !== param);
+        const newDepartmentObject = departmentOptions.find(option => option.value === param);
+        const newDepartmentLabel = newDepartmentObject ? newDepartmentObject.label : param;
         setdepartmentTags(modifiedDepartmentTags);
         setUpdateBoxes(modifiedDepartmentTags);
-        const statusUpdate = `Admin removed a department tag [${param}]`;
+        const currentDepartmentObject = departmentOptions.find(option => option.value === currentDepartment);
+        const currentDepartmentLabel = currentDepartmentObject ? currentDepartmentObject.label : currentDepartment;
+        const statusUpdate = `${currentUser} (${currentDepartmentLabel}) removed the ${newDepartmentLabel} department`;
         setUpdateBoxes([statusUpdate, ...updateBoxes]); // Updates the update boxes locally in the parent
         try {
           await axios.post(`${BASE_URL}/api/actions/admin/${currentDepartment}/${index}`, { commentbox: statusUpdate, issueDepartmentTags: modifiedDepartmentTags });

diff --git a/front-end/src/components/admin/PriorityDropDown/PriorityDropdown.css b/front-end/src/components/admin/PriorityDropDown/PriorityDropdown.css
@@ -1,3 +1,4 @@
 .admin-priority-dropdown {
-  width: 15%;
+  width: 16%;
+  margin-bottom: 7px;
 }
diff --git a/front-end/src/components/admin/PriorityDropDown/PriorityDropdown.js b/front-end/src/components/admin/PriorityDropDown/PriorityDropdown.js
@@ -36,14 +36,16 @@ const PriorityDropdown = ({ index, currentState, setUpdateBoxes, updateBoxes, cu
       ...base,
       backgroundColor: selectedOption.color,
       color: 'blue',
-      borderRadius: '0px'
+      borderRadius: '3px'
     }),
     option: (provided, state) => ({
       ...provided,
       borderRadius: '0px',
       backgroundColor: state.data.color,
       color: state.data.textColor,
-      fontWeight: state.data.isBold ? 'bold' : 'normal'
+      fontWeight: state.data.isBold ? 'bold' : 'normal',
+      marginTop: state.data.value === 'High Priority' ? '-4px' : '0px',
+      marginBottom: state.data.value === 'Reopened' ? '-4px' : '0px'
     }),
     singleValue: provided => ({
       ...provided,

diff --git a/front-end/src/components/admin/ProgressionDropdown/ProgressionDropdown.css b/front-end/src/components/admin/ProgressionDropdown/ProgressionDropdown.css
@@ -1,5 +1,5 @@
 .admin-progress-dropdown {
     font-size: 16;
-    margin-bottom: 2px;
+    margin-bottom: 20px;
     height: 10%;
-}
+}
diff --git a/front-end/src/components/admin/ProgressionDropdown/ProgressionDropdown.js b/front-end/src/components/admin/ProgressionDropdown/ProgressionDropdown.js
@@ -21,8 +21,6 @@ const handleOptionChange = (newselectedOption) => {
 };
 
 const postCurrentProgression = async (param) => {
-  // const statusUpdate = `Admin Changed the current priority of the issue to ${param}`;
-  // setUpdateBoxes([statusUpdate, ...updateBoxes]); // Updates the update boxes locally in the parent
   try {
     await axios.post(`${BASE_URL}/api/actions/admin/${currentDepartment}/${index}`, { issueStatus: param });
   } catch (error) {
@@ -40,7 +38,9 @@ const customStyles = {
     ...provided,
     backgroundColor: state.data.color,
     color: state.data.textColor,
-    fontWeight: state.data.isBold ? 'bold' : 'normal'
+    fontWeight: state.data.isBold ? 'bold' : 'normal',
+    marginTop: state.data.value === 'Open' ? '-4px' : '0px',
+    marginBottom: state.data.value === 'Action Required' ? '-4px' : '0px'
   }),
   singleValue: provided => ({
     ...provided,

diff --git a/front-end/src/layouts/AdminIssueDetails/AdminIssueDetails.css b/front-end/src/layouts/AdminIssueDetails/AdminIssueDetails.css
@@ -34,16 +34,16 @@
   margin-bottom: 0;
 }
 
-.admin-issue .admin-close{
+.admin-issue .admin-close {
   background-color: var(--primary);
   position: absolute;
   top: 18px;
   right: 20px;
-  font-size: 25px; /* Adjust as needed */
+  font-size: 25px;
   cursor: pointer;
   font-weight: 1;
   border-radius: 10px;
-  color:white;
+  color: white;
 }
 
 
@@ -70,5 +70,4 @@
   border-radius: 8px;
   align-items: center;
   background-color: rgb(245, 248, 250)
-
 }
diff --git a/front-end/src/layouts/AdminIssueDetails/AdminIssueDetails.js b/front-end/src/layouts/AdminIssueDetails/AdminIssueDetails.js
@@ -95,7 +95,7 @@ const AdminIssueDetails = () => {
             </div>
             <div className="right-bar">
                 <StudentDetails props={specificIssue}/>
-                <DepartmentSelection index = { index }name="Departments" tags = {specificIssue.departments} setUpdateBoxes={setUpdateBoxes} updateBoxes={updateBoxes} currentDepartment={currentDepartment} />
+                <DepartmentSelection index = { index }name="Departments" tags = {specificIssue.departments} setUpdateBoxes={setUpdateBoxes} updateBoxes={updateBoxes} currentDepartment={currentDepartment} currentUser={userName} />
                 <AttachmentBar index = { index } name="Attachments" tags = {specificIssue.attachments} fileNames={selectedFilesname} currentDepartment={currentDepartment} isAdmin={true}/>
                 {
                   (specificIssue.currentStatus !== "Resolved" && specificIssue.isProposed === false) &&