fix(add-project-summary): Ui fixes in add project summary page

src/components/AddAdditionalRoles.tsx

@@ -8,7 +8,9 @@
 // License-Filename: LICENSE
 
 import React, { useState } from 'react'
+import Image from 'next/image';
 import styles from "@/css/AddKeyValue.module.css"
+import deleteIcon from '@/assets/icons/trash.svg'
 
 interface Input {
  role: string;
@@ -38,7 +40,7 @@ export default function AddAdditionalRolesComponent() {
 
  return(
  <>
- <div className={`${styles["header"]} mb-2`}>
+ <div className={`${styles["header"]}`}>
  <p className="fw-bold mt-3">Additional Roles</p>
  </div>
  <div className="row">
@@ -47,7 +49,10 @@ export default function AddAdditionalRolesComponent() {
  return (
  <div className="row mb-2" key ="">
  <div className="col-lg-5">
- <select className="form-select" key ="" name="role" value={elem.role} aria-label="additional role" defaultValue={"Stakeholder"} onChange={e => handleInputChange(e, j)}>
+ <select className="form-select" key ="" name="role"
+ value={elem.role} aria-label="additional role"
+ defaultValue={"Stakeholder"}
+ onChange={e => handleInputChange(e, j)}>
  <option value="Stakeholder">Stakeholder</option>
  <option value="Analyst">Analyst</option>
  <option value="Contributor">Contributor</option>
@@ -60,17 +65,26 @@ export default function AddAdditionalRolesComponent() {
  </select>
  </div>
  <div className="col-lg-5">
- <input name="email" value={elem.email} type="email" onChange={e => handleInputChange(e, j)} className="form-control" placeholder={`Enter email`} aria-describedby={`Email`} />
+ <input name="email" value={elem.email} type="email"
+ onChange={e => handleInputChange(e, j)}
+ className="form-control"
+ placeholder={`Enter email`}
+ aria-describedby={`Email`} />
  </div>
  <div className="col-lg-2">
- <button type="button" onClick={() => handleRemoveClick(j)} className={`fw-bold btn btn-light ${styles['button-plain']}`}><i className="bi bi-trash3-fill"></i></button>
+ <button type="button" onClick={() => handleRemoveClick(j)}
+ className={`fw-bold btn btn-light ${styles['button-plain']}`}>
+ <Image src={deleteIcon} alt='Delete Icon'/>
+ </button>
  </div>
  </div>
  )
  })
  }
  <div className="col-lg-3">
- <button type="button" onClick={() => handleAddClick()} className={`fw-bold btn btn-light ${styles['button-plain']}`}>Click to add row to Additional Roles</button>
+ <button type="button" onClick={() => handleAddClick()}
+ className={`fw-bold btn btn-light ${styles['button-plain']} mx-1`}>
+ Click to add row to Additional Roles</button>
  </div>
  </div>
  </>

src/components/AddKeyValue.tsx

@@ -8,8 +8,10 @@
 // License-Filename: LICENSE
 
 import React from 'react'
-import styles from "@/css/AddKeyValue.module.css"
+import Image from 'next/image';
 import { useState } from 'react';
+import styles from "@/css/AddKeyValue.module.css"
+import deleteIcon from '@/assets/icons/trash.svg'
 
 interface Props {
  header: string;
@@ -44,7 +46,7 @@ export default function AddKeyValueComponent(props: Props) {
 
  return(
  <>
- <div className={`${styles["header"]} mb-2`}>
+ <div className={`${styles["header"]} mb-4 mx-3`}>
  <p className="fw-bold mt-3">{props.header}</p>
  </div>
  <div className="row">
@@ -53,20 +55,35 @@ export default function AddKeyValueComponent(props: Props) {
  return (
  <div className="row mb-2" key ="">
  <div className="col-lg-5">
- <input name="key" value={elem.key} type="text" onChange={e => handleInputChange(e, j)} className="form-control" placeholder={`Enter ${props.keyName.toLowerCase()} key`} aria-describedby={`${props.keyName.toLowerCase()} key`} />
+ <input name="key" value={elem.key} type="text"
+ onChange={e => handleInputChange(e, j)}
+ className="form-control"
+ placeholder={`Enter ${props.keyName.toLowerCase()} key`}
+ aria-describedby={`${props.keyName.toLowerCase()} key`} />
  </div>
  <div className="col-lg-5">
- <input name="value" value={elem.value} type="text" onChange={e => handleInputChange(e, j)} className="form-control" placeholder={`Enter ${props.keyName.toLowerCase()} value`} aria-describedby={`${props.keyName.toLowerCase()} value`} />
+ <input name="value" value={elem.value} type="text"
+ onChange={e => handleInputChange(e, j)}
+ className="form-control"
+ placeholder={`Enter ${props.keyName.toLowerCase()} value`}
+ aria-describedby={`${props.keyName.toLowerCase()} value`} />
  </div>
  <div className="col-lg-2">
- <button type="button" onClick={() => handleRemoveClick(j)} className={`fw-bold btn btn-light ${styles['button-plain']}`}><i className="bi bi-trash3-fill"></i></button>
+ <button type="button" onClick={() => handleRemoveClick(j)}
+ className={`fw-bold btn btn-light ${styles['button-plain']}`}>
+ <Image src={deleteIcon} alt='Delete Icon'/>
+ </button>
  </div>
  </div>
  )
  })
  }
  <div className="col-lg-3">
- <button type="button" onClick={() => handleAddClick()} className={`fw-bold btn btn-light ${styles['button-plain']}`}>{`Click to add row to ${props.keyName.split(" ").map((elem) => elem[0].toUpperCase() + elem.substring(1)).join(" ")}`}</button>
+ <button type="button" onClick={() => handleAddClick()}
+ className={`fw-bold btn btn-light ${styles['button-plain']} mx-2`}>
+ {`Click to add row to ${props.keyName.split(" ").map((elem) =>
+ elem[0].toUpperCase() + elem.substring(1)).join(" ")}`}
+ </button>
  </div>
  </div>
  </>

src/css/AddKeyValue.module.css

@@ -25,4 +25,7 @@
 .header {
  background-color: #5D8EA9;
  color: white;
+ margin-top: 10px;
+ margin-bottom: 20px;
+ margin-left: 12px;
 }

src/css/AddProjects.module.css

@@ -43,6 +43,8 @@
 .header {
  background-color: #5D8EA9;
  color: white;
+ margin-top: 10px;
+ margin-left: 12px;
 }
 
 .list-group-item-action {
@@ -58,6 +60,6 @@
 
 .sidebar-active {
  border-color: #dbdce4 !important;
- color: #6b6c7e !important;
+ color: #000000 !important;
  background-color: #e89734 !important;
 }