Merge pull request #19047 from overleaf/mf-new-plans-group-member-picker

Group member picker for desktop view on the new plans page

GitOrigin-RevId: ffbbdea404366b647d68167b943cf14565cd12eb

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

@@ -18,6 +18,8 @@
 
 @nondiscounted-price-element-height: var(--line-height-02);
 
+@group-member-picker-height: 24px;
+
 .plans-new-design {
   padding-top: calc(var(--spacing-16) + var(--header-height));
 
@@ -134,9 +136,7 @@
 
         // tab navigation focus style
         &:focus-visible {
-          // https://stackoverflow.com/a/38571103
-          outline: auto 2px Highlight; // firefox
-          outline: auto 5px -webkit-focus-ring-color;
+          &:extend(.input-focus-style);
           background-color: white;
         }
 
@@ -414,6 +414,106 @@
     }
   }
 
+  .plans-new-group-member-picker-container {
+    .plans-new-group-member-picker-text {
+      font-size: var(--font-size-02);
+      line-height: var(--line-height-02);
+      font-weight: 600;
+      margin-bottom: var(--spacing-02);
+    }
+
+    .plans-new-group-member-picker {
+      position: relative;
+
+      .plans-new-group-member-picker-button {
+        width: 100%;
+        background-color: white;
+        border-radius: var(--border-radius-base-new);
+        border: 1px solid var(--neutral-60);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--spacing-01) var(--spacing-03);
+        margin-bottom: var(--spacing-04);
+        height: @group-member-picker-height;
+        font-size: var(--font-size-02);
+        line-height: var(--line-height-02);
+      }
+
+      ul.plans-new-group-member-picker-list {
+        list-style-type: none;
+        margin-bottom: 0;
+        overflow: auto; // to enable box-shadow
+        box-shadow: 0px 2px 4px 0px rgba(30, 37, 48, 0.16);
+        padding: var(--spacing-02);
+        position: absolute;
+        top: @group-member-picker-height;
+        background-color: white;
+        width: 100%;
+        margin-top: var(--spacing-01);
+      }
+
+      li {
+        position: relative;
+        border-radius: var(--border-radius-base-new);
+
+        &:not(:last-child) {
+          margin-bottom: var(--spacing-02);
+        }
+
+        &:hover {
+          background-color: var(--neutral-10);
+        }
+
+        input[type='radio'] {
+          position: absolute;
+          opacity: 0;
+          cursor: pointer;
+
+          &:focus + label {
+            &:extend(.input-focus-style);
+          }
+        }
+
+        input[type='radio']:checked + label {
+          background-color: var(--green-10);
+          color: var(--green-70);
+          position: relative;
+          word-wrap: break-word;
+
+          &::after {
+            content: url(../../../../public/img/material-icons/check-green-20.svg);
+            position: absolute;
+            right: 12px;
+            top: 50%;
+            transform: translateY(-50%);
+
+            @media (max-width: @screen-sm-max) {
+              right: var(--spacing-04);
+            }
+          }
+        }
+
+        label {
+          width: 100%;
+          font-size: var(--font-size-02);
+          line-height: var(--line-height-02);
+          padding: var(--spacing-05) var(--spacing-08) var(--spacing-05)
+            var(--spacing-04);
+          margin-bottom: var(--spacing-00);
+          font-weight: 400;
+          cursor: pointer;
+          border-radius: var(--border-radius-base-new);
+
+          .list-item-footer {
+            font-size: var(--font-size-01);
+            line-height: var(--line-height-01);
+          }
+        }
+      }
+    }
+  }
+
   .plans-new-table-body:last-of-type {
     .plans-new-table-feature-row:last-of-type {
       .plans-new-table-feature-td.plans-new-table-highlighted-cell {

services/web/locales/en.json

@@ -878,6 +878,7 @@
   "hotkey_undo": "Undo",
   "hotkeys": "Hotkeys",
   "how_it_works": "How it works",
+  "how_many_users_do_you_need": "How many users do you need?",
   "how_to_create_tables": "How to create tables",
   "how_to_insert_images": "How to insert images",
   "how_we_use_your_data": "How we use your data",
@@ -1224,6 +1225,7 @@
   "n_more_updates_above_plural": "__count__ more updates above",
   "n_more_updates_below": "__count__ more update below",
   "n_more_updates_below_plural": "__count__ more updates below",
+  "n_users": "__userCount__ users",
   "name": "Name",
   "name_usage_explanation": "Your name will be displayed to your collaborators (so they know who they’re working with).",
   "native": "Native",
@@ -1693,6 +1695,7 @@
   "save_20_percent_by_paying_annually": "Save 20% by paying annually",
   "save_30_percent_or_more": "save 30% or more",
   "save_30_percent_or_more_uppercase": "Save 30% or more",
+  "save_n_percent": "Save __percentage__%",
   "save_or_cancel-cancel": "Cancel",
   "save_or_cancel-or": "or",
   "save_or_cancel-save": "Save",

services/web/public/img/material-icons/check-green-20.svg

@@ -0,0 +1,4 @@
+<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3.22917 5.9375L8.72917 0.458333C8.88194 0.305555 9.05556 0.23611 9.25 0.249999C9.44445 0.249999 9.61806 0.326388 9.77083 0.479166C9.92361 0.631943 10 0.805555 10 0.999999C10 1.19444 9.92361 1.36806 9.77083 1.52083L3.77083 7.52083C3.61806 7.67361 3.4375 7.75 3.22917 7.75C3.03472 7.75 2.86111 7.67361 2.70833 7.52083L0.229167 5.04167C0.0763889 4.88889 0 4.71528 0 4.52083C0 4.32639 0.0763889 4.15278 0.229167 4C0.381945 3.84722 0.555556 3.77083 0.75 3.77083C0.944445 3.77083 1.11806 3.84722 1.27083 4L3.22917 5.9375Z" fill="#1F5919"/>
+</svg>
+