The race conditions and hanging tab (which was due to a strange bug i…

…f you use a html form tag without a submit in React). Uses viewerAccessRights to determine admin like rights. There is a new "Create Account for Someone Else" button for users with admin like rights, that allows them to create a person, but not verify their emails. When that new user logs in with the credentials that they were sent, they will have to verify their email at that time. There might be some edge cases, but it is ready to go.
wevote · Mar 4, 2025 · 487f297 · 487f297
1 parent f0a7b84
commit 487f297
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 33 deletions.
diff --git a/docs/images/WelcomeToWebStorm.png b/docs/images/WelcomeToWebStorm.png
diff --git a/src/js/components/Person/PersonSummaryHeader.jsx b/src/js/components/Person/PersonSummaryHeader.jsx
@@ -9,17 +9,17 @@ const PersonSummaryHeader = () => {
   return (
     <OnePersonHeader>
       {/* Width (below) of this PersonHeaderCell comes from the combined widths of the first x columns in PersonMemberList */}
-      <PersonHeaderCell $largefont $titleCell cellwidth={200}>
+      <PersonHeaderCell $largefont $titleCell $cellwidth={200}>
         &nbsp;
       </PersonHeaderCell>
-      <PersonHeaderCell cellwidth={300}>
+      <PersonHeaderCell $cellwidth={300}>
         Location
       </PersonHeaderCell>
-      <PersonHeaderCell cellwidth={190}>
+      <PersonHeaderCell $cellwidth={190}>
         Title / Volunteering Love
       </PersonHeaderCell>
       {/* Edit icon */}
-      <PersonHeaderCell cellwidth={20} />
+      <PersonHeaderCell $cellwidth={20} />
     </OnePersonHeader>
   );
 };
@@ -37,9 +37,9 @@ const PersonHeaderCell = styled.div`
   height: 22px;
   font-size: ${(props) => (props?.$largefont ? '1.1em;' : '.8em;')};
   font-weight: ${(props) => (props?.$titleCell ? ';' : '550;')}
-  min-width: ${(props) => (props.cellwidth ? `${props.cellwidth}px;` : ';')};
-  max-width: ${(props) => (props.cellwidth ? `${props.cellwidth}px;` : ';')};
-  width: ${(props) => (props.cellwidth ? `${props.cellwidth}px;` : ';')};
+  min-width: ${(props) => (props.$cellwidth ? `${props.$cellwidth}px;` : ';')};
+  max-width: ${(props) => (props.$cellwidth ? `${props.$cellwidth}px;` : ';')};
+  width: ${(props) => (props.$cellwidth ? `${props.$cellwidth}px;` : ';')};
   overflow: hidden;
   white-space: nowrap;
 `;

diff --git a/src/js/components/Person/PersonSummaryRow.jsx b/src/js/components/Person/PersonSummaryRow.jsx
@@ -54,7 +54,7 @@ const PersonSummaryRow = ({ person, rowNumberForDisplay, teamId }) => {
       {rowNumberForDisplay && (
         <PersonCell
           id={`index-personId-${person.personId}`}
-          cellwidth={15}
+          $cellwidth={15}
         >
           <GraySpan>
             {rowNumberForDisplay}
@@ -69,23 +69,22 @@ const PersonSummaryRow = ({ person, rowNumberForDisplay, teamId }) => {
           textDecoration: 'underline',
           color: DesignTokenColors.primary500,
         }}
-        // cellwidth="200"
-        cellwidth={200}
+        $cellwidth={200}
       >
         {/* {`${person.firstName} ${person.lastName}`} */}
         {getFullNamePreferredPerson(person)} {/* 2/6/25 currently if you save a first name preferred, it shows up here, but will not be searchable on add team member If you */}
       </PersonCell>
       <PersonCell
         id={`location-personId-${person.personId}`}
-        cellwidth={300}
-        $smallfont             // Fixed: $smallfont gets rid of error message, but doesn't get passed to PersonCell styled div
+        $cellwidth={300}
+        $smallfont
       >
         {person.location}
       </PersonCell>
       <PersonCell
         id={`jobTitle-personId-${person.personId}`}
-        cellwidth={225}
-        $smallestfont     // Fixed: $smallestfont gets rid of error message, but doesn't get passed to PersonCell styled div
+        $cellwidth={225}
+        $smallestfont
       >
         {person.jobTitle}
       </PersonCell>
@@ -94,15 +93,13 @@ const PersonSummaryRow = ({ person, rowNumberForDisplay, teamId }) => {
           id={`editPerson-personId-${person.personId}`}
           onClick={() => editPersonClick(hasEditRights)}
           style={{ cursor: 'pointer' }}
-          // cellwidth="20"
-          cellwidth={20}
+          $cellwidth={20}
         >
           <EditStyled />
         </PersonCell>
       ) : (
         <PersonCell
-          // cellwidth="20"
-          cellwidth={20}
+          $cellwidth={20}
         >
           &nbsp;
         </PersonCell>
@@ -114,14 +111,13 @@ const PersonSummaryRow = ({ person, rowNumberForDisplay, teamId }) => {
               id={`removeMember-personId-${person.personId}`}
               onClick={() => removeTeamMemberClick(person)}
               style={{ cursor: 'pointer' }}
-              cellwidth={20}
+              $cellwidth={20}
             >
               <DeleteStyled />
             </PersonCell>
           ) : (
             <PersonCell
-              // cellwidth="20"
-              cellwidth={20}
+              $cellwidth={20}
             >
               &nbsp;
             </PersonCell>
@@ -167,17 +163,15 @@ const fontSz = (smallfont, smallestfont) => {
   }
   return ';';
 };
-// ${(smallfont && !smallestfont) ? 'font-size: .9em;' : ''}
-// ${(smallestfont && !smallfont) ? 'font-size: .8em;' : ''}
 
 const PersonCell = styled.div`
   align-content: center;
   border-bottom: 1px solid #ccc;
   font-size: ${(props) => (fontSz(props?.$smallfont, props?.$smallestfont))}
   height: 22px;
-  min-width: ${(props) => (props.cellwidth ? `${props.cellwidth}px;` : ';')};
-  max-width: ${(props) => (props.cellwidth ? `${props.cellwidth}px;` : ';;')};
-  width: ${(props) => (props.cellwidth ? `${props.cellwidth}px;` : ';')};
+  min-width: ${(props) => (props.$cellwidth ? `${props.$cellwidth}px;` : ';')};
+  max-width: ${(props) => (props.$cellwidth ? `${props.$cellwidth}px;` : ';;')};
+  width: ${(props) => (props.$cellwidth ? `${props.$cellwidth}px;` : ';')};
   overflow: hidden;
   white-space: nowrap;
 `;

diff --git a/src/js/components/Team/TeamHeader.jsx b/src/js/components/Team/TeamHeader.jsx
@@ -30,24 +30,24 @@ const TeamHeader = ({ showHeaderLabels, showIcons, team }) => {
   return (
     <OneTeamHeader>
       {/* Width (below) of this TeamHeaderCell comes from the combined widths of the first x columns in TeamMemberList */}
-      <TeamHeaderCell cellwidth={215} $largefont $titlecell>
+      <TeamHeaderCell $cellwidth={215} $largefont $titlecell>
         {teamLocal && (
           <Link to={`/team-home/${teamLocal.id}`}>
             {teamLocal.teamName}
           </Link>
         )}
       </TeamHeaderCell>
-      <TeamHeaderCell cellwidth={300}>
+      <TeamHeaderCell $cellwidth={300}>
         {showHeaderLabels ? 'Location' : ''}
       </TeamHeaderCell>
-      <TeamHeaderCell cellwidth={225}>
+      <TeamHeaderCell $cellwidth={225}>
         {showHeaderLabels ? 'Title / Volunteering Love' : ''}
       </TeamHeaderCell>
       {/* Edit icon */}
       {showIcons && (
         <>
           {viewerCanSeeOrDo('canEditTeamAnyTeam', viewerAccessRights) && (
-            <TeamHeaderCell cellwidth={20} onClick={editTeamClick}>
+            <TeamHeaderCell $cellwidth={20} onClick={editTeamClick}>
               <EditStyled />
             </TeamHeaderCell>
           )}
@@ -91,9 +91,9 @@ const TeamHeaderCell = styled.div`
   font-size: ${(props) => (props?.$largefont ? '1.1em;' : '.8em;')};
   font-weight: ${(props) => (props?.$titleCell ? ';' : '550;')}
   height: 22px;
-  max-width: ${(props) => (props.cellwidth ? `${props.cellwidth}px;` : ';')};
-  min-width: ${(props) => (props.cellwidth ? `${props.cellwidth}px;` : ';')};
-  width: ${(props) => (props.cellwidth ? `${props.cellwidth}px;` : ';')};
+  max-width: ${(props) => (props.$cellwidth ? `${ props.$cellwidth}px;` : ';')};
+  min-width: ${(props) => (props.$cellwidth ? `${ props.$cellwidth}px;` : ';')};
+  width: ${(props) => (props.$cellwidth ? `${ props.$cellwidth}px;` : ';')};
   overflow: hidden;
   white-space: nowrap;
 `;