From 57b15678dd182c45b46c14b36f57a9dc7bb869e0 Mon Sep 17 00:00:00 2001
From: Kristina <7614497+khjrtbrg@users.noreply.github.com>
Date: Mon, 17 Feb 2025 10:45:49 +0100
Subject: [PATCH] [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
---
 .../components/edit-member.tsx                | 50 +++++++++++--------
 .../share-project-modal-content.tsx           |  2 +-
 .../stylesheets/app/editor/share.less         |  2 +-
 .../bootstrap-5/pages/editor/share.scss       | 18 ++++++-
 4 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/services/web/frontend/js/features/share-project-modal/components/edit-member.tsx b/services/web/frontend/js/features/share-project-modal/components/edit-member.tsx
index 545a2172a9..80a3eb48fb 100644
--- a/services/web/frontend/js/features/share-project-modal/components/edit-member.tsx
+++ b/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}>
-          {privileges !== member.privileges && privilegeChangePending && (
+        <OLCol xs={5} className="project-member-actions">
+          {confirmRemoval && (
             <ChangePrivilegesActions
               handleReset={() => setPrivileges(member.privileges)}
             />
           )}
-        </OLCol>
 
-        <OLCol xs={3} className="project-member-select">
-          {hasBeenDowngraded && (
-            <BootstrapVersionSwitcher
-              bs3={<Icon type="warning" fw />}
-              bs5={<MaterialIcon type="warning" className="text-warning" />}
+          <div className="project-member-select">
+            {hasBeenDowngraded && !confirmRemoval && (
+              <BootstrapVersionSwitcher
+                bs3={<Icon type="warning" fw />}
+                bs5={
+                  <MaterialIcon
+                    type="warning"
+                    className="project-member-warning"
+                  />
+                }
+              />
+            )}
+
+            <SelectPrivilege
+              value={privileges}
+              handleChange={value => {
+                if (value) {
+                  handlePrivilegeChange(value.key)
+                }
+              }}
+              hasBeenDowngraded={hasBeenDowngraded && !confirmRemoval}
+              canAddCollaborators={canAddCollaborators}
             />
-          )}
-
-          <SelectPrivilege
-            value={privileges}
-            handleChange={value => {
-              if (value) {
-                handlePrivilegeChange(value.key)
-              }
-            }}
-            hasBeenDowngraded={hasBeenDowngraded}
-            canAddCollaborators={canAddCollaborators}
-          />
+          </div>
         </OLCol>
       </OLFormGroup>
     </form>
diff --git a/services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.tsx b/services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.tsx
index 7a9656e61c..5db4ac0afe 100644
--- a/services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.tsx
+++ b/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 ? (
diff --git a/services/web/frontend/stylesheets/app/editor/share.less b/services/web/frontend/stylesheets/app/editor/share.less
index d39d56bbce..0252352b50 100644
--- a/services/web/frontend/stylesheets/app/editor/share.less
+++ b/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;
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/share.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/share.scss
index a4be6fc70f..0d6694c141 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/share.scss
+++ b/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;
+    }
   }
 }