Merge pull request #19760 from overleaf/mf-more-than-50-group-member-picker

[web] Create group member picker footer with a link that opens contact sales modal on new plans page

GitOrigin-RevId: 1dc1dce726cc0222bbbef911a016f1eb6a881aeb

services/web/app/views/subscriptions/plans-light-design.pug

@@ -52,3 +52,5 @@ block content
 				include ./plans/_faq_new
 
 	include ./plans/_group_plan_modal
+
+	!= moduleIncludes("contactModalGeneral-marketing", locals)

services/web/app/views/subscriptions/plans/_faq_new.pug

@@ -63,5 +63,3 @@ include ../../_mixins/eyebrow
 		button(data-ol-open-contact-form-modal="general")
 			span(style="margin-right: 4px") #{translate('contact_support')}
 			img.icon-md(src="/img/website-redesign/material-symbols-arrow-right.svg", aria-hidden="true")
-
-	!= moduleIncludes("contactModalGeneral-marketing", locals)

services/web/frontend/stylesheets/app/plans/plans-new-design.less

@@ -439,6 +439,19 @@
         height: @group-member-picker-height;
         font-size: var(--font-size-02);
         line-height: var(--line-height-02);
+
+        &[aria-expanded='true'] {
+          i {
+            transform: rotate(180deg);
+            transition: transform 0.35s ease;
+          }
+        }
+
+        &[aria-expanded='false'] {
+          i {
+            transition: transform 0.35s ease;
+          }
+        }
       }
 
       ul.plans-new-group-member-picker-list {
@@ -455,6 +468,19 @@
         z-index: @z-index-group-member-picker-list;
       }
 
+      li.plans-new-group-member-picker-footer {
+        font-size: var(--font-size-02);
+        line-height: var(--line-height-02);
+        padding: var(--spacing-05) var(--spacing-04);
+
+        button {
+          font-weight: 400;
+          padding: 0;
+          font-size: var(--font-size-02);
+          line-height: var(--line-height-02);
+        }
+      }
+
       li {
         position: relative;
         border-radius: var(--border-radius-base-new);
@@ -463,7 +489,7 @@
           margin-bottom: var(--spacing-02);
         }
 
-        &:hover {
+        &:not(.plans-new-group-member-picker-footer):hover {
           background-color: var(--neutral-10);
         }
 

services/web/frontend/stylesheets/app/website-redesign.less

@@ -974,10 +974,8 @@
       color: var(--green-60);
     }
 
-    // for accessibility with keyboard navigation
     &:focus {
-      outline: 2px solid var(--green-50);
-      outline-offset: 1px;
+      &:extend(.input-focus-style);
     }
   }
 

services/web/locales/en.json

@@ -1236,6 +1236,7 @@
   "need_anything_contact_us_at": "If there is anything you ever need please feel free to contact us directly at",
   "need_contact_group_admin_to_make_changes": "You’ll need to contact your group admin if you want to make certain changes to your account. <0>Read more about managed users.</0>",
   "need_make_changes": "You need to make some changes",
+  "need_more_than_50_users": "Need more than 50 users?",
   "need_more_than_to_licenses_get_in_touch": "Need more than 50 licenses? Please get in touch",
   "need_more_than_x_licenses": "Need more than __x__ licenses?",
   "need_to_add_new_primary_before_remove": "You’ll need to add a new primary email address before you can remove this one.",