intuitive team template download procedure

Author: shema-surge

src/components/BulkRatingModal.tsx

@@ -144,10 +144,10 @@ const BulkRatingModal = ({ bulkRateModal, setBulkRateModal }: BulkRatingModalPro
                     <hr className="w-full my-3 border-b bg-primary" />
                 </div>
                 <div>
-                    <form data-testid="bulk-rating-form" className="flex flex-col gap-5" onSubmit={saveRatings}>
-                        <div className="flex flex-col gap-1">
+                    <form data-testid="bulk-rating-form" className="flex flex-col gap-2" onSubmit={saveRatings}>
+                        <div className="flex flex-col">
                             <label>Choose a cohort</label>
-                            <select data-testid="select-cohort" className="p-2 text-black dark:text-white rounded-lg bg-white dark:bg-dark border-2 border-primary"
+                            <select data-testid="select-cohort" className="p-2 my-2 text-sm text-black dark:text-white rounded-lg bg-white dark:bg-dark border-2 border-primary"
                             defaultValue={""}
                             onChange={selectCohort}
                             >
@@ -170,7 +170,7 @@ const BulkRatingModal = ({ bulkRateModal, setBulkRateModal }: BulkRatingModalPro
                                 }
                             </select>
                             <label>Choose a sprint</label>
-                            <select data-testid="select-sprint" className="p-2 text-black dark:text-white rounded-lg bg-white dark:bg-dark border-2 border-primary"
+                            <select data-testid="select-sprint" className="p-2 my-2 text-sm text-black dark:text-white rounded-lg bg-white dark:bg-dark border-2 border-primary"
                                 defaultValue={""}
                                 onChange={(e) => {
                                     e.preventDefault()
@@ -207,10 +207,11 @@ const BulkRatingModal = ({ bulkRateModal, setBulkRateModal }: BulkRatingModalPro
                                 }
                             </select>
                         </div>
-                        <div className="flex items-center justify-between">
+                        <div>
+                            <label>Upload a rating file (.xlsx or .xlx):</label>
                             <input
                                 data-testid="file-input"
-                                className="w-1/2 h-full bg-gray-600 rounded-md"
+                                className="w-full mt-2 mb-5 bg-gray-600 rounded-md"
                                 type="file"
                                 ref={fileUploadRef}
                                 onChange={(e) => {
@@ -220,8 +221,10 @@ const BulkRatingModal = ({ bulkRateModal, setBulkRateModal }: BulkRatingModalPro
                                 accept=".xlsx, .xls"
                             >
                             </input>
-                            <div className="flex gap-2">
-                                    <select data-testid="select-team" className="p-2 text-sm text-black dark:text-white rounded-lg bg-white dark:bg-dark border-2 border-primary" defaultValue={""} onChange={(e)=>setSelectedTeam(e.target.value)}>
+                            <div className="flex flex-col gap-3 p-3 rounded-md text-sm bg-neutral-700">
+                                <p className="">Would you like to download team template for easier rating?</p>
+                                <div className="flex gap-2">
+                                    <select data-testid="select-team" className="p-1 text-sm text-black dark:text-white rounded-lg bg-white dark:bg-dark border-2 border-primary" defaultValue={""} onChange={(e)=>setSelectedTeam(e.target.value)}>
                                         <option data-testid="team-default-option">Choose a team</option>
                                         {
                                             teams && teams.getTeamsByCohort.length > 0 ?
@@ -239,7 +242,8 @@ const BulkRatingModal = ({ bulkRateModal, setBulkRateModal }: BulkRatingModalPro
                                             : ''
                                         }
                                     </select>
-                                    <button data-testid="download-button" type="button" onClick={downloadTeamFile} className="p-3 text-white rounded-lg bg-green-500 text-sm font-serif font-semibold">Download</button>
+                                    <button data-testid="download-button" type="button" onClick={downloadTeamFile} className="py-1 px-2 text-white rounded-lg bg-green-700 text-sm font-serif font-semibold">Download</button>
+                                </div>
                             </div>
                         </div>