[web] fix UI regressions on share modal (#23542)

* restore `yellow-40` to the warning label
* adjust actions layout so dropdown always stays readable

GitOrigin-RevId: 60886cd71e7041976fe2467cf7ab946a6ef90be6

services/web/frontend/js/features/share-project-modal/components/edit-member.tsx

@@ -130,6 +130,9 @@ export default function EditMember({
     )
   }
 
+  const confirmRemoval =
+    privileges !== member.privileges && privilegeChangePending
+
   return (
     <form
       className={bsVersion({ bs3: 'form-horizontal' })}
@@ -166,7 +169,7 @@ export default function EditMember({
                   }
                   className={
                     shouldWarnMember() || member.pendingEditor
-                      ? 'text-warning'
+                      ? 'project-member-warning'
                       : undefined
                   }
                 />
@@ -188,32 +191,37 @@ export default function EditMember({
           </div>
         </OLCol>
 
-        <OLCol xs={2}>
+        <OLCol xs={5} className="project-member-actions">
-          {privileges !== member.privileges && privilegeChangePending && (
+          {confirmRemoval && (
             <ChangePrivilegesActions
               handleReset={() => setPrivileges(member.privileges)}
             />
           )}
-        </OLCol>
 
-        <OLCol xs={3} className="project-member-select">
+          <div className="project-member-select">
-          {hasBeenDowngraded && (
+            {hasBeenDowngraded && !confirmRemoval && (
-            <BootstrapVersionSwitcher
+              <BootstrapVersionSwitcher
-              bs3={<Icon type="warning" fw />}
+                bs3={<Icon type="warning" fw />}
-              bs5={<MaterialIcon type="warning" className="text-warning" />}
+                bs5={
+                  <MaterialIcon
+                    type="warning"
+                    className="project-member-warning"
+                  />
+                }
+              />
+            )}
+
+            <SelectPrivilege
+              value={privileges}
+              handleChange={value => {
+                if (value) {
+                  handlePrivilegeChange(value.key)
+                }
+              }}
+              hasBeenDowngraded={hasBeenDowngraded && !confirmRemoval}
+              canAddCollaborators={canAddCollaborators}
             />
-          )}
+          </div>
-
-          <SelectPrivilege
-            value={privileges}
-            handleChange={value => {
-              if (value) {
-                handlePrivilegeChange(value.key)
-              }
-            }}
-            hasBeenDowngraded={hasBeenDowngraded}
-            canAddCollaborators={canAddCollaborators}
-          />
         </OLCol>
       </OLFormGroup>
     </form>

services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.tsx

@@ -50,7 +50,7 @@ export default function ShareProjectModalContent({
         <OLModalTitle>{t('share_project')}</OLModalTitle>
       </OLModalHeader>
 
-      <OLModalBody className="modal-body-share modal-link-share-new">
+      <OLModalBody className="modal-body-share modal-link-share">
         <div className="container-fluid">
           <Suspense fallback={<FullSizeLoadingSpinner minHeight="15rem" />}>
             {isRestrictedTokenMember ? (

services/web/frontend/stylesheets/app/editor/share.less

@@ -172,7 +172,7 @@
   outline: none;
 }
 
-.modal-link-share-new {
+.modal-link-share {
   .invite-controls {
     padding: 0;
     background-color: transparent;

services/web/frontend/stylesheets/bootstrap-5/pages/editor/share.scss

@@ -106,6 +106,10 @@
         font-size: $font-size-sm;
       }
     }
+
+    .project-member-warning {
+      color: var(--content-warning-dark);
+    }
   }
 
   .project-member .text-left,
@@ -165,7 +169,7 @@
   outline: none;
 }
 
-.modal-link-share-new {
+.modal-link-share {
   .invite-controls {
     padding: 0;
     background-color: transparent;
@@ -180,9 +184,19 @@
     margin-bottom: calc(var(--line-height-03) / 2);
   }
 
+  .project-member-actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0;
+  }
+
   .project-member-select {
     display: flex;
     align-items: center;
-    padding: 0;
+
+    .select-wrapper {
+      max-width: 175px;
+    }
   }
 }