From 79ec853c4a17a64fdf4f8b13750d08af64abd8cb Mon Sep 17 00:00:00 2001 From: Davinder Singh Date: Wed, 10 Jul 2024 10:26:02 +0100 Subject: [PATCH] Website Redesign - Adding the features table section (#19167) * adding features table header * adding the table body mixin * adding margin bottom * adding alternative colors to rows * adding section heading in the table * adding spacing in the rows by adding an extra div * adding correct styling to section heading * removing extra styling * renaming class * adding an extra row for row heading because it was interferring with the natural flow of row and cells when added to the same row as other cells * adding code into mixins * renaming the mixin * fixing the margin bottom of table header * adding 4n factor alternative styling for rows * removing unused width * Implement alternate color for all tbody on the mobile feature table * adding padding top to plans-features-table-row-section-heading-content-mobile to match the figma design * adding a translation and a comment * renaming a few classnames and removing some comments * removing extra comments * replacing hex code with variable * cleaning some CSS * using a shade of neutral variables * replacing colors with variables in less file * adding font size for plans-features-table-header-item-price-mobile * adding class .icon-md * removing TODO comment * adding css var on remaining variables --------- Co-authored-by: M Fahru GitOrigin-RevId: 89cf0fa35722b887c9d787a9a3442fbe758caafb --- .../app/plans/plans-new-design.less | 132 ++++++++++++++++++ services/web/locales/en.json | 1 + 2 files changed, 133 insertions(+) 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 7478497de3..8679d5230f 100644 --- a/services/web/frontend/stylesheets/app/plans/plans-new-design.less +++ b/services/web/frontend/stylesheets/app/plans/plans-new-design.less @@ -610,6 +610,138 @@ } } } + + .plans-features-table-section-container-mobile { + margin-top: var(--spacing-13); + .plans-features-section-heading-mobile { + font-size: var(--font-size-06); + font-weight: 600; + line-height: var(--line-height-05); + color: var(--neutral-90); + text-align: center; + margin-bottom: var(--spacing-08); + } + + .plans-features-table-mobile { + width: 100%; + .plans-features-table-header { + margin-bottom: var(--space-08); + } + + .plans-features-table-header-container-mobile { + margin: var(--spacing-08) auto; + border-bottom: unset; + width: 100%; + max-width: 544px; + + .plans-features-table-header-item-mobile { + width: 33%; + min-width: 114px; + + .plans-features-table-header-item-content-mobile { + margin-bottom: var(--spacing-08); + padding: var(--spacing-04); + text-align: center; + background-color: var(--neutral-10); + } + + .plans-features-table-header-item-title-mobile { + color: var(--neutral-90); + line-height: var(--line-height-03); + font-weight: 600; + } + + .plans-features-table-header-item-price-mobile { + font-weight: 400; + color: var(--neutral-70); + line-height: var(--line-height-01); + font-size: var(--spacing-05); + } + } + + .plans-features-table-header-item-content-mobile.active { + background-color: var(--neutral-80); + .plans-features-table-header-item-title-mobile { + color: var(--white); + } + + .plans-features-table-header-item-price-mobile { + color: var(--white); + } + } + } + + .plans-features-table-body-container-mobile { + .plans-features-table-row-heading-mobile { + font-weight: 600; + text-align: center; + line-height: var(--line-height-03); + .plans-features-table-row-section-heading-content-mobile { + padding-top: var(--spacing-08); + padding-bottom: var(--spacing-05); + font-size: var(--font-size-04); + color: var(--neutral-90); + } + } + + // .plans-features-table-row-title-mobile and .plans-features-table-row-mobile are combined together to make one row visually, so we are using factors of 4 to alternatively color their backgrounds. + .plans-features-table-row-title-mobile { + &.plans-features-table-row-title-mobile-without-heading { + &:nth-child(4n - 3) { + background-color: var(--neutral-10); + } + + &:nth-child(4n - 1) { + background-color: var(--white); + } + } + + &:nth-child(4n - 2) { + background-color: var(--neutral-10); + } + + &:nth-child(4n) { + background-color: var(--white); + } + + .plans-features-table-row-title-content-mobile { + display: flex; + justify-content: center; + align-items: center; + padding-top: var(--spacing-06); + font-weight: 600; + line-height: var(--line-height-03); + } + } + + .plans-features-table-row-mobile { + &.plans-features-table-row-mobile-without-heading { + &:nth-child(4n - 2) { + background-color: var(--neutral-10); + } + + &:nth-child(4n) { + background-color: var(--white); + } + } + + &:nth-child(4n - 3) { + background-color: var(--white); + } + + &:nth-child(4n - 1) { + background-color: var(--neutral-10); + } + + .plans-features-table-cell-content-mobile { + text-align: center; + padding-top: var(--spacing-05); + padding-bottom: var(--spacing-06); + } + } + } + } + } } .plans-faq { diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 3fe89f0063..00bc333c84 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -293,6 +293,7 @@ "compact": "Compact", "company_name": "Company Name", "compare": "Compare", + "compare_features": "Compare features", "comparing_from_x_to_y": "Comparing from <0>__startTime__ to <0>__endTime__", "compile_error_entry_description": "An error which prevented this project from compiling", "compile_error_handling": "Compile Error Handling",