diff --git a/.kotlin/sessions/kotlin-compiler-10167436309493278633.salive b/.kotlin/sessions/kotlin-compiler-10167436309493278633.salive
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/webapp/src/component/billing/Plan/ContactUsButton.tsx b/webapp/src/component/billing/Plan/ContactUsButton.tsx
index 8a9f9b23c8..8b24c37a05 100644
--- 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:info@tolgee.io"
>
diff --git a/webapp/src/component/billing/Plan/IncludedFeatures.tsx b/webapp/src/component/billing/Plan/IncludedFeatures.tsx
index 85f13f1166..fc83bb5314 100644
--- 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
index 1a4b9cee9b..7f2a70227a 100644
--- 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 (
-
+
{isLegacy ? (
= ({
{plan.name}
-
-
- {plan.public && }
-
-
+
+
+
+ {plan.public && (
+
+ )}
+
+
+
{plan.prices && (
= ({
/>
)}
-
+
{plan.type === 'CONTACT_US' ? : action}
diff --git a/webapp/src/component/billing/Plan/PlanStyles.tsx b/webapp/src/component/billing/Plan/PlanStyles.tsx
index b8b51563d2..72dcf0e9d0 100644
--- 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
index 59aa50d867..463e918fe4 100644
--- a/webapp/src/component/layout/BaseSettingsView/BaseSettingsView.tsx
+++ b/webapp/src/component/layout/BaseSettingsView/BaseSettingsView.tsx
@@ -9,19 +9,17 @@ 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')`
@@ -29,7 +27,7 @@ const StyledMenu = styled('div')`
`;
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
index d7e69472d7..5623322208 100644
--- 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 = ({
const parentPlan = previousPlanName;
return (
-
- {activeSubscription && (
-
- }
- action={
-
- }
- />
- )}
-
+ activeSubscription && (
+
+ }
+ action={
+
+ }
+ />
+ )
);
})}
>
diff --git a/webapp/src/ee/billing/Subscriptions/selfHosted/PlansSelfHostedList.tsx b/webapp/src/ee/billing/Subscriptions/selfHosted/PlansSelfHostedList.tsx
index 4a5ea0eb49..e1e53f79b5 100644
--- 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 = ({
const { filteredFeatures, previousPlanName, custom, plan } = info;
return (
-
-
- ) : (
-
- )
- }
- action={
-
+ ) : (
+
- }
- />
-
+ )
+ }
+ action={
+
+ }
+ />
);
})}
>