diff --git a/services/web/frontend/stylesheets/app/plans/plans-new-design.less b/services/web/frontend/stylesheets/app/plans/plans-new-design.less index 25129f1098..8053643567 100644 --- a/services/web/frontend/stylesheets/app/plans/plans-new-design.less +++ b/services/web/frontend/stylesheets/app/plans/plans-new-design.less @@ -418,7 +418,7 @@ } } - .plans-new-group-member-picker-container { + .plans-new-group-member-picker { .plans-new-group-member-picker-text { font-size: var(--font-size-02); line-height: var(--line-height-02); @@ -426,7 +426,7 @@ margin-bottom: var(--spacing-02); } - .plans-new-group-member-picker { + .plans-new-group-member-picker-form { position: relative; .plans-new-group-member-picker-button { @@ -486,14 +486,15 @@ li { position: relative; - border-radius: var(--border-radius-base-new); &:not(:last-child) { margin-bottom: var(--spacing-02); } &:not(.plans-new-group-member-picker-footer):hover { - background-color: var(--neutral-10); + input[type='radio']:not(:checked) + p { + background-color: var(--neutral-10); + } } input[type='radio'] { @@ -501,12 +502,19 @@ opacity: 0; cursor: pointer; - &:focus + label { + &:focus + p { &:extend(.input-focus-style); } + + + p { + padding: var(--spacing-05) var(--spacing-08) var(--spacing-05) + var(--spacing-04); + margin-bottom: 0; + border-radius: var(--border-radius-base-new); + } } - input[type='radio']:checked + label { + input[type='radio']:checked + p { background-color: var(--green-10); color: var(--green-70); position: relative; @@ -529,8 +537,6 @@ 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; @@ -542,6 +548,39 @@ } } } + + .plans-new-edu-discount { + display: flex; + align-items: flex-start; + gap: var(--spacing-04); + margin-bottom: var(--spacing-06); + font-weight: 400; + + input[type='checkbox'] { + margin: var(--spacing-02); + accent-color: var(--green-50); + + &:focus-visible { + .box-shadow-button-input(); + } + } + + .plans-new-edu-discount-content { + display: flex; + flex-direction: column; + + span { + line-height: var(--line-height-03); + color: var(--neutral-90); + } + + small { + color: var(--neutral-70); + font-size: var(--font-size-01); + line-height: var(--line-height-01); + } + } + } } } @@ -773,11 +812,6 @@ margin-top: var(--spacing-08); line-height: var(--line-height-03); } - .group-plans-card-cta-buy-now-mobile { - width: 100%; - margin-top: var(--spacing-04); - line-height: var(--line-height-03); - } } } } diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 947b168466..31355891a1 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -133,6 +133,7 @@ "app_on_x": "__appName__ on __social__", "apply_educational_discount": "Apply educational discount", "apply_educational_discount_info": "Overleaf offers a 40% educational discount for groups of 10 or more. Applies to students or faculty using Overleaf for teaching.", + "apply_educational_discount_info_new": "40% discount for groups of 10 or more using __appName__ for teaching", "apply_suggestion": "Apply suggestion", "april": "April", "archive": "Archive",