fix visuals / styles

larinam · Aug 24, 2024 · fb09f3a · fb09f3a
1 parent 70b15c1
commit fb09f3a
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 14 deletions.
diff --git a/frontend/src/components/CalendarComponent.jsx b/frontend/src/components/CalendarComponent.jsx
@@ -5,11 +5,12 @@ import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {
   faChevronDown,
   faChevronRight,
+  faEdit,
   faEye,
   faGripVertical,
   faInfoCircle,
-  faPencilAlt,
-  faSave
+  faSave,
+  faTrashAlt
 } from '@fortawesome/free-solid-svg-icons';
 import './CalendarComponent.css';
 import MonthSelector from './MonthSelector';
@@ -558,14 +559,16 @@ const CalendarComponent = ({serverTeamData, holidays, dayTypes, updateTeamData})
                           <FontAwesomeIcon icon={faEye}/>
                       </span>
                       {team.name}
-                      {team.team_members.length === 0 && (
-                        <span className="delete-icon" onClick={() => deleteTeam(team._id)}>🗑️</span>
-                      )}
                       <span className="add-icon" onClick={() => handleAddMemberIconClick(team._id)}
                             title="Add team member">➕</span>
                       <span className="edit-icon" onClick={() => handleEditTeamClick(team._id)}>
-                          <FontAwesomeIcon icon={faPencilAlt}/>
+                          <FontAwesomeIcon icon={faEdit}/>
                       </span>
+                      {team.team_members.length === 0 && (
+                        <span className="delete-icon" onClick={() => deleteTeam(team._id)}>
+                          <FontAwesomeIcon icon={faTrashAlt}/>
+                        </span>
+                      )}
                     </td>
                     {daysHeader.map(({date}, idx) => {
                       return (<td
@@ -596,9 +599,11 @@ const CalendarComponent = ({serverTeamData, holidays, dayTypes, updateTeamData})
                               <FontAwesomeIcon icon={faGripVertical}/>
                           </span>
                         <span className="edit-icon" onClick={() => handleEditMemberClick(team._id, member.uid)}>
-                            <FontAwesomeIcon icon={faPencilAlt}/>
+                            <FontAwesomeIcon icon={faEdit}/>
+                        </span>
+                        <span className="delete-icon" onClick={() => deleteTeamMember(team._id, member.uid)}>
+                          <FontAwesomeIcon icon={faTrashAlt}/>
                         </span>
-                        <span className="delete-icon" onClick={() => deleteTeamMember(team._id, member.uid)}>🗑️</span>
                       </td>
                       {daysHeader.map(({date}, idx) => {
                         const dateStr = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;

diff --git a/frontend/src/components/settings/DayTypes.jsx b/frontend/src/components/settings/DayTypes.jsx
@@ -75,8 +75,13 @@ const DayTypes = () => {
                               {dayType.color}
                           </td>
                           <td>
-                              <FontAwesomeIcon icon={faEdit} onClick={() => editDayType(dayType)}/>
-                              <FontAwesomeIcon icon={faTrashAlt} onClick={() => deleteDayType(dayType._id)}/>
+                              <FontAwesomeIcon icon={faEdit} onClick={() => editDayType(dayType)}
+                                               className="firstActionIcon"
+                              />
+                              <FontAwesomeIcon icon={faTrashAlt}
+                                               onClick={() => deleteDayType(dayType._id)}
+                                               className="actionIcon"
+                              />
                           </td>
                       </tr>
                     ))}

diff --git a/frontend/src/components/settings/InviteManagement.jsx b/frontend/src/components/settings/InviteManagement.jsx
@@ -58,6 +58,7 @@ const InviteManagement = ({ refreshTrigger }) => {
                         <FontAwesomeIcon
                           icon={faTrashAlt}
                           onClick={() => handleWithdrawInvite(invite._id, invite.email)}
+                          className="firstActionIcon"
                         />
                     </td>
                 </tr>

diff --git a/frontend/src/components/settings/SettingsComponent.css b/frontend/src/components/settings/SettingsComponent.css
@@ -35,6 +35,15 @@
     margin: 10px 0 10px 0;
 }
 
+.firstActionIcon {
+    cursor: pointer;
+}
+
+.actionIcon {
+    margin-left: 10px;
+    cursor: pointer;
+}
+
 /*Table styles*/
 .settingsTable {
     width: 100%;

diff --git a/frontend/src/components/settings/UserManagement.jsx b/frontend/src/components/settings/UserManagement.jsx
@@ -43,6 +43,7 @@ const UserManagement = () => {
     const handleModalClose = () => {
         setShowUserModal(false);
         setShowInviteModal(false);
+        fetchUsers();
         setRefreshInvites(!refreshInvites); // Trigger refresh of invites
     };
 
@@ -87,13 +88,21 @@ const UserManagement = () => {
                     <td>{u.name}</td>
                     <td>{u.email}</td>
                     <td>{u.username}</td>
-                    <td>{u.telegram_username || 'N/A'}</td>
+                    <td>{u.telegram_username}</td>
                     <td>{u.disabled ? 'Disabled' : 'Active'}</td>
                     <td>
-                        <FontAwesomeIcon icon={faEdit} onClick={() => handleEditUserClick(u)}/>
-                        <FontAwesomeIcon icon={faTrashAlt} onClick={() => handleDeleteUser(u._id, u.name)}/>
+                        <FontAwesomeIcon icon={faEdit}
+                                         onClick={() => handleEditUserClick(u)}
+                                         className="firstActionIcon"
+                        />
+                        <FontAwesomeIcon icon={faTrashAlt}
+                                         onClick={() => handleDeleteUser(u._id, u.name)}
+                                         className="actionIcon"/>
                         {u._id === user._id && (
-                          <FontAwesomeIcon icon={faKey} onClick={() => handlePasswordChangeClick(u)}/>
+                          <FontAwesomeIcon icon={faKey}
+                                           onClick={() => handlePasswordChangeClick(u)}
+                                           className="actionIcon"
+                          />
                         )}
                     </td>
                 </tr>