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 8679d5230f..af0070f0e5 100644 --- a/services/web/frontend/stylesheets/app/plans/plans-new-design.less +++ b/services/web/frontend/stylesheets/app/plans/plans-new-design.less @@ -1,4 +1,22 @@ -@import './plans-new-variables.less'; +@z-index-plans-new-tabs: 1; +@z-index-plans-new-tabs-content: 0; + +@highlighted-heading-line-height: (@line-height-03 / 1rem) * 16px; // convert to px +@highlighted-heading-padding-vertical: @spacing-02; +@highlighted-heading-height: ( + @highlighted-heading-line-height + (2 * @highlighted-heading-padding-vertical) +); + +@switcher-container-width: 270px; +@switcher-container-height: 44px; +@switcher-container-border-radius: @switcher-container-height / 2; +@switcher-container-padding: 6px; +@switcher-container-margin-bottom: @highlighted-heading-height + @spacing-10; +@switcher-padding-vertical: 2px; +@switcher-height: @switcher-container-height - 2 * @switcher-container-padding; +@switcher-border-radius: @switcher-height / 2; + +@nondiscounted-price-element-height: var(--line-height-02); .plans-new-design { padding-top: calc(var(--spacing-16) + var(--header-height)); @@ -337,60 +355,43 @@ } .plans-new-table-header-grid-container { - display: grid; - grid-column-gap: var(--spacing-04); - // priceUnitTotal is an optional row - grid-template: - 'nonDiscountedPrice price .' 2fr - 'priceUnit priceUnit priceUnit' 1fr - 'priceUnitTotal priceUnitTotal priceUnitTotal' auto / 1fr 1fr 1fr; + display: flex; + flex-direction: column; + align-items: center; + + s { + font-size: var(--font-size-02); + line-height: @nondiscounted-price-element-height; + color: var(--neutral-40); + font-weight: 600; + } .plans-new-table-header-price { - grid-area: price; - justify-self: center; - font-size: var(--font-size-08); font-weight: 600; line-height: var(--line-height-07); color: var(--neutral-90); + + // will affect the element if header does not have nondiscounted price + &:first-child { + margin-top: @nondiscounted-price-element-height; + } } .plans-new-table-header-price-unit { - grid-area: priceUnit; - justify-self: center; - font-size: var(--font-size-02); line-height: var(--line-height-02); } .plans-new-table-header-price-unit-total { - grid-area: priceUnitTotal; - justify-self: center; - font-size: var(--font-size-01); line-height: var(--line-height-01); } - .plans-new-table-header-nondiscounted-price { - grid-area: nonDiscountedPrice; - justify-self: end; - align-self: end; - - font-size: var(--font-size-04); - line-height: var(--line-height-05); - color: var(--neutral-40); - font-weight: 600; - } - .plans-new-table-header-icon { - // this element should only be placed in the grid - // where it's the only element in the grid - // the grid-area below will make sure that it covers the whole grid - grid-area: ~'span 2 / span 3'; - justify-self: center; - font-size: 56px; color: var(--neutral-90); + margin-top: @nondiscounted-price-element-height; } } diff --git a/services/web/frontend/stylesheets/app/plans/plans-new-variables.less b/services/web/frontend/stylesheets/app/plans/plans-new-variables.less deleted file mode 100644 index 8e43ca0c59..0000000000 --- a/services/web/frontend/stylesheets/app/plans/plans-new-variables.less +++ /dev/null @@ -1,17 +0,0 @@ -@z-index-plans-new-tabs: 1; -@z-index-plans-new-tabs-content: 0; - -@highlighted-heading-line-height: (@line-height-03 / 1rem) * 16px; // convert to px -@highlighted-heading-padding-vertical: @spacing-02; -@highlighted-heading-height: ( - @highlighted-heading-line-height + (2 * @highlighted-heading-padding-vertical) -); - -@switcher-container-width: 270px; -@switcher-container-height: 44px; -@switcher-container-border-radius: @switcher-container-height / 2; -@switcher-container-padding: 6px; -@switcher-container-margin-bottom: @highlighted-heading-height + @spacing-10; -@switcher-padding-vertical: 2px; -@switcher-height: @switcher-container-height - 2 * @switcher-container-padding; -@switcher-border-radius: @switcher-height / 2; diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 47d63cf13d..7e4fa34d4e 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -372,6 +372,7 @@ "currency": "Currency", "current_file": "Current file", "current_password": "Current Password", + "current_price": "Current price", "current_session": "Current Session", "currently_seeing_only_24_hrs_history": "You’re currently seeing the last 24 hours of changes in this project.", "currently_signed_in_as_x": "Currently signed in as <0>__userEmail__.", @@ -1327,6 +1328,7 @@ "organization_or_company_name": "Organization or company name", "organization_or_company_type": "Organization or company type", "organize_projects": "Organize Projects", + "original_price": "Original price", "other": "Other", "other_actions": "Other Actions", "other_logs_and_files": "Other logs and files",