fix: use less grid (safari performance) (#2618)

tolgee · Oct 23, 2024 · eb35e76 · eb35e76
1 parent 623bf06
commit eb35e76
Show file tree

Hide file tree

Showing 12 changed files with 105 additions and 290 deletions.
diff --git a/.gitignore b/.gitignore
@@ -22,6 +22,7 @@ e2e/cypress/downloads
 e2e/node_modules
 e2e/cypress/integration/examples/
 .gradle
+.kotlin
 
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 

diff --git a/file b/file
diff --git a/pluralTest.json b/pluralTest.json
diff --git a/slack-error.txt b/slack-error.txt
diff --git a/webapp/src/component/billing/Plan/ContactUsButton.tsx b/webapp/src/component/billing/Plan/ContactUsButton.tsx
@@ -7,7 +7,7 @@ export const ContactUsButton = () => {
       size="medium"
       variant="outlined"
       color="primary"
-      sx={{ justifySelf: 'center' }}
+      sx={{ alignSelf: 'center' }}
       href="mailto:[email protected]"
     >
       <T keyName="billing_plan_contact_us" />

diff --git a/webapp/src/component/billing/Plan/IncludedFeatures.tsx b/webapp/src/component/billing/Plan/IncludedFeatures.tsx
@@ -7,7 +7,8 @@ import { PlanFeature } from 'tg.component/billing/PlanFeature';
 type Features = components['schemas']['EeSubscriptionModel']['enabledFeatures'];
 
 const StyledListWrapper = styled(Box)`
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: 4px 8px;
   align-content: start;
 `;

diff --git a/webapp/src/component/billing/Plan/IncludedUsage.tsx b/webapp/src/component/billing/Plan/IncludedUsage.tsx
@@ -23,7 +23,12 @@ export const IncludedUsage = ({
   className,
 }: Props) => {
   return (
-    <Box display="grid" justifySelf="center" {...{ sx, className }}>
+    <Box
+      display="flex"
+      flexDirection="column"
+      justifySelf="center"
+      {...{ sx, className }}
+    >
       {isLegacy ? (
         <IncludedStringSlots
           className="strings"

diff --git a/webapp/src/component/billing/Plan/Plan.tsx b/webapp/src/component/billing/Plan/Plan.tsx
@@ -58,19 +58,29 @@ export const Plan: FC<Props> = ({
           {plan.name}
         </PlanTitle>
 
-        <PlanFeaturesBox sx={{ gap: '18px' }}>
-          <IncludedFeatures
-            sx={{ minHeight: featuresMinHeight }}
-            features={filteredFeatures}
-            topFeature={topFeature}
-          />
-          {plan.public && <ShowAllFeaturesLink />}
-          <IncludedUsage
-            includedUsage={plan.includedUsage}
-            isLegacy={isPlanLegacy(plan)}
-            highlightColor={highlightColor}
-          />
-        </PlanFeaturesBox>
+        <Box
+          display="flex"
+          flexDirection="column"
+          alignItems="stretch"
+          flexGrow={1}
+        >
+          <PlanFeaturesBox sx={{ gap: '18px' }}>
+            <IncludedFeatures
+              sx={{ minHeight: featuresMinHeight }}
+              features={filteredFeatures}
+              topFeature={topFeature}
+            />
+            {plan.public && (
+              <ShowAllFeaturesLink sx={{ alignSelf: 'center' }} />
+            )}
+            <IncludedUsage
+              includedUsage={plan.includedUsage}
+              isLegacy={isPlanLegacy(plan)}
+              highlightColor={highlightColor}
+              sx={{ alignSelf: 'center' }}
+            />
+          </PlanFeaturesBox>
+        </Box>
 
         {plan.prices && (
           <PlanPrice
@@ -82,7 +92,7 @@ export const Plan: FC<Props> = ({
           />
         )}
 
-        <Box sx={{ paddingTop: '20px', justifySelf: 'center' }}>
+        <Box sx={{ paddingTop: '20px', alignSelf: 'center' }}>
           {plan.type === 'CONTACT_US' ? <ContactUsButton /> : action}
         </Box>
       </PlanContent>

diff --git a/webapp/src/component/billing/Plan/PlanStyles.tsx b/webapp/src/component/billing/Plan/PlanStyles.tsx
@@ -1,7 +1,9 @@
 import { Box, styled } from '@mui/material';
 
 export const PlanContainer = styled('div')`
-  display: grid;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
   position: relative;
   border: 1px solid ${({ theme }) => theme.palette.background.paper};
   background: ${({ theme }) => theme.palette.background.paper};
@@ -21,13 +23,14 @@ export const PlanContainer = styled('div')`
 
 export const PlanContent = styled('div')`
   padding: 32px 24px;
-  display: grid;
-  grid-template-rows: auto 1fr;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
   height: 100%;
 `;
 
 export const PlanTitle = styled('div')`
-  justify-self: center;
+  align-self: center;
   font-size: 24px;
 `;
 
@@ -45,9 +48,10 @@ export const PlanSubtitle = styled('div')`
 `;
 
 export const PlanFeaturesBox = styled(Box)`
-  display: grid;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
   border-radius: 20px;
   padding: 24px 20px;
   background: ${({ theme }) => theme.palette.tokens.background['paper-3']};
-  align-self: start;
 `;
diff --git a/webapp/src/component/layout/BaseSettingsView/BaseSettingsView.tsx b/webapp/src/component/layout/BaseSettingsView/BaseSettingsView.tsx
@@ -9,27 +9,25 @@ import { SettingsMenu, SettingsMenuItem } from './SettingsMenu';
 import { BaseViewAddButton } from '../BaseViewAddButton';
 
 const StyledWrapper = styled('div')`
-  display: grid;
-  grid-template: auto / auto 1fr;
+  display: flex;
   gap: 32px;
   @container main-container (max-width: 800px) {
-    grid-template: auto auto / auto;
+    flex-direction: column;
   }
 `;
 
 const StyledContainer = styled(Container)`
-  display: grid;
+  display: flex;
   padding: 0px !important;
   container: main-container / inline-size;
-  grid-template-rows: auto 1fr;
 `;
 
 const StyledMenu = styled('div')`
   min-width: 200px;
 `;
 
 const StyledContent = styled(Box)`
-  display: grid;
+  flex-grow: 1;
 `;
 
 type Props = BaseViewProps & {

diff --git a/webapp/src/ee/billing/Subscriptions/cloud/PlansCloudList.tsx b/webapp/src/ee/billing/Subscriptions/cloud/PlansCloudList.tsx
@@ -14,13 +14,8 @@ import { PlanAction } from './CloudPlanAction';
 
 type CloudSubscriptionModel = components['schemas']['CloudSubscriptionModel'];
 
-const StyledPlanWrapper = styled('div')`
-  display: grid;
-`;
-
 const StyledFreePlanWrapper = styled('div')`
   grid-column: 1 / -1;
-  display: grid;
 `;
 
 type BillingPlansProps = {
@@ -118,36 +113,35 @@ export const PlansCloudList: React.FC<BillingPlansProps> = ({
 
         const parentPlan = previousPlanName;
         return (
-          <StyledPlanWrapper key={plan.id}>
-            {activeSubscription && (
-              <Plan
-                plan={plan}
-                active={isActive(plan)}
-                ended={isEnded(plan)}
-                onPeriodChange={onPeriodChange}
-                period={period}
-                filteredFeatures={filteredFeatures}
-                featuresMinHeight="155px"
-                custom={custom}
-                topFeature={
-                  parentPlan && <AllFromPlanFeature planName={parentPlan} />
-                }
-                action={
-                  <PlanAction
-                    active={isActive(plan)}
-                    ended={isEnded(plan)}
-                    custom={custom}
-                    show={!plan.free}
-                    organizationHasSomeSubscription={
-                      !activeSubscription.plan.free
-                    }
-                    period={period}
-                    planId={plan.id}
-                  />
-                }
-              />
-            )}
-          </StyledPlanWrapper>
+          activeSubscription && (
+            <Plan
+              key={plan.id}
+              plan={plan}
+              active={isActive(plan)}
+              ended={isEnded(plan)}
+              onPeriodChange={onPeriodChange}
+              period={period}
+              filteredFeatures={filteredFeatures}
+              featuresMinHeight="155px"
+              custom={custom}
+              topFeature={
+                parentPlan && <AllFromPlanFeature planName={parentPlan} />
+              }
+              action={
+                <PlanAction
+                  active={isActive(plan)}
+                  ended={isEnded(plan)}
+                  custom={custom}
+                  show={!plan.free}
+                  organizationHasSomeSubscription={
+                    !activeSubscription.plan.free
+                  }
+                  period={period}
+                  planId={plan.id}
+                />
+              }
+            />
+          )
         );
       })}
     </>

diff --git a/webapp/src/ee/billing/Subscriptions/selfHosted/PlansSelfHostedList.tsx b/webapp/src/ee/billing/Subscriptions/selfHosted/PlansSelfHostedList.tsx
@@ -1,4 +1,3 @@
-import { styled } from '@mui/material';
 import { useTranslate } from '@tolgee/react';
 import { PlanFeature } from 'tg.component/billing/PlanFeature';
 import { BillingPeriodType } from 'tg.component/billing/Price/PeriodSwitch';
@@ -9,10 +8,6 @@ import { AllFromPlanFeature } from 'tg.component/billing/Plan/AllFromPlanFeature
 
 import { SelfHostedPlanAction } from './SelfHostedPlanAction';
 
-const StyledPlanWrapper = styled('div')`
-  display: grid;
-`;
-
 type BillingPlansProps = {
   plans: PlanType[];
   period: BillingPeriodType;
@@ -82,36 +77,35 @@ export const PlansSelfHostedList: React.FC<BillingPlansProps> = ({
         const { filteredFeatures, previousPlanName, custom, plan } = info;
 
         return (
-          <StyledPlanWrapper key={plan.id}>
-            <Plan
-              plan={plan}
-              active={false}
-              ended={false}
-              custom={custom}
-              onPeriodChange={onPeriodChange}
-              period={period}
-              filteredFeatures={filteredFeatures}
-              featuresMinHeight="210px"
-              topFeature={
-                previousPlanName ? (
-                  <AllFromPlanFeature planName={previousPlanName} />
-                ) : (
-                  <PlanFeature
-                    bold
-                    link="https://tolgee.io/pricing/self-hosted#features-table"
-                    name={t('billing_subscriptions_all_essentials')}
-                  />
-                )
-              }
-              action={
-                <SelfHostedPlanAction
-                  plan={plan}
-                  period={period}
-                  custom={custom}
+          <Plan
+            key={plan.id}
+            plan={plan}
+            active={false}
+            ended={false}
+            custom={custom}
+            onPeriodChange={onPeriodChange}
+            period={period}
+            filteredFeatures={filteredFeatures}
+            featuresMinHeight="210px"
+            topFeature={
+              previousPlanName ? (
+                <AllFromPlanFeature planName={previousPlanName} />
+              ) : (
+                <PlanFeature
+                  bold
+                  link="https://tolgee.io/pricing/self-hosted#features-table"
+                  name={t('billing_subscriptions_all_essentials')}
                 />
-              }
-            />
-          </StyledPlanWrapper>
+              )
+            }
+            action={
+              <SelfHostedPlanAction
+                plan={plan}
+                period={period}
+                custom={custom}
+              />
+            }
+          />
         );
       })}
     </>