Skip to content

Commit

Permalink
feat: [M3-6968] styling adjustment
Browse files Browse the repository at this point in the history
  • Loading branch information
abailly-akamai committed Aug 21, 2023
1 parent 0fd3ffa commit af4306b
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 11 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,8 @@ export const ConfigureForm = React.memo((props: Props) => {
const country =
regions?.find((thisRegion) => thisRegion.id == currentRegion)?.country ??
'us';
const hasSelectedRegionDynamicPricing = Boolean(
selectedRegion && priceIncreaseMap[selectedRegion]
const shouldDisplayPriceComparison = Boolean(
dcSpecificPricing && selectedRegion && priceIncreaseMap[selectedRegion]
);

const calculateNewPrice = React.useCallback(
Expand Down Expand Up @@ -104,7 +104,11 @@ export const ConfigureForm = React.memo((props: Props) => {
currentActualRegion?.label ?? currentRegion
}`}</Typography>
</StyledDiv>
{shouldDisplayPriceComparison && (
<MigrationPricing {...currentPrice} />
)}
</StyledMigrationBox>

<StyledMigrationBox>
<RegionSelect
regions={
Expand All @@ -127,14 +131,9 @@ export const ConfigureForm = React.memo((props: Props) => {
menuPlacement="top"
selectedID={selectedRegion}
/>
{shouldDisplayPriceComparison && <MigrationPricing {...newPrice} />}
</StyledMigrationBox>
</StyledMigrationContainer>
{dcSpecificPricing && hasSelectedRegionDynamicPricing && (
<StyledMigrationContainer>
<MigrationPricing {...currentPrice} />
<MigrationPricing {...newPrice} />
</StyledMigrationContainer>
)}
</StyledPaper>
);
});
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { styled } from '@mui/material/styles';
import { useTheme } from '@mui/styles';
import * as React from 'react';

import { Box } from 'src/components/Box';
import { DisplayPrice } from 'src/components/DisplayPrice';
import { Typography } from 'src/components/Typography';

import { StyledFormLabel, StyledMigrationBox } from './ConfigureForm.styles';
import { StyledFormLabel } from './ConfigureForm.styles';

export interface MigrationPricingProps {
backups: null | number | undefined;
Expand All @@ -22,7 +23,7 @@ export const MigrationPricing = (props: MigrationPricingProps) => {
const priceFontSize = `${theme.typography.body1.fontSize}`;

return monthly && hourly && backups ? (
<StyledMigrationBox>
<StyledMigrationPricingContainer panelType={panelType}>
<StyledFormLabel htmlFor={`${panelType}-price`}>
{currentPanel ? 'Current' : 'New'} Price
</StyledFormLabel>
Expand All @@ -48,6 +49,19 @@ export const MigrationPricing = (props: MigrationPricingProps) => {
price={backups}
/>
</Box>
</StyledMigrationBox>
</StyledMigrationPricingContainer>
) : null;
};

const StyledMigrationPricingContainer = styled(Box, {
label: 'MigrationPricingContainer',
})<{ panelType: MigrationPricingProps['panelType'] }>(
({ panelType, theme }) => ({
marginBottom: theme.spacing(2),
...(panelType === 'current' && {
[theme.breakpoints.up('md')]: {
marginTop: 26,
},
}),
})
);

0 comments on commit af4306b

Please sign in to comment.