Skip to content

Commit 05178f7

Browse files
onkarj-47onkarj-47
committed
style: fix tagConfig bottom corners
1 parent 57def9d commit 05178f7

9 files changed

Lines changed: 66 additions & 28 deletions

File tree

‎src/pages/sidepanel/SidePanel.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,15 @@ const SidePanel: React.FC<SidePanelProps> = ({ key, isEnabled }) => {
114114
</Box>
115115
) : (
116116
<>
117-
<Box justifyContent={'center'} alignItems={'flex-start'} display="flex" flexDirection="column">
117+
<Box
118+
justifyContent={'center'}
119+
alignItems={'flex-start'}
120+
display="flex"
121+
flexDirection="column"
122+
sx={{
123+
height: 'calc(100vh - 160px)', // Full height minus top navigation (~90px) and bottom navigation (70px)
124+
overflow: 'hidden',
125+
}}>
118126
<Routes>
119127
<Route path="/settings" element={<Configuration />} />
120128
<Route

‎src/pages/sidepanel/components/BottomNavigation.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,13 @@ const StyledBottomNavigation = styled(BottomNavigation)(({ theme }) => ({
2020
position: 'fixed',
2121
bottom: 0,
2222
width: '100%',
23-
height: '4.375rem', // 70px
23+
height: '4.375rem', // 70px (Figma spec)
2424
display: 'flex',
2525
justifyContent: 'space-between',
2626
alignItems: 'center',
27-
gap: '0.625rem', // 10px
28-
padding: '0.75rem 1rem', // 12px 16px
27+
gap: '0.625rem', // 10px (Figma spec)
28+
padding: '0.75rem 1rem', // 12px top/bottom, 16px left/right (Figma spec)
2929
backgroundColor: theme.palette.background.default,
30-
opacity: 0.72,
3130
backdropFilter: 'blur(0.83125rem)', // 13.3px - Figma blur value
3231
WebkitBackdropFilter: 'blur(0.83125rem)', // Safari support
3332
cursor: 'default',

‎src/pages/sidepanel/components/CustomTabPanel.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ interface TabPanelProps {
88
value: number;
99
}
1010

11-
const TabPanelContainer = styled(Box)(() => ({
12-
padding: '0.625rem', // 10px padding between outer frame and inner content
13-
height: 'calc(100vh - 185px)',
14-
overflow: 'auto',
11+
const TabPanelContainer = styled(Box)(({ theme }) => ({
12+
padding: theme.spacing(1.25), // 10px padding
13+
paddingBottom: theme.spacing(12), // 96px bottom space to clear bottom navigation + buttons
14+
boxSizing: 'border-box',
1515
}));
1616

1717
const CustomTabPanel = (props: TabPanelProps): JSX.Element => {

‎src/pages/sidepanel/sections/Debugger.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,14 @@ const Debugger: React.FC<DebuggerProps> = ({ tagIsInstalled, tagConfig, getter,
1919
};
2020

2121
return (
22-
<Stack alignItems={'flex-start'} justifyContent={'center'} height={'100%'} width={'100%'}>
23-
<Box borderBottom={1} borderColor={'divider'} width={'100%'}>
22+
<Stack alignItems={'flex-start'} justifyContent={'flex-start'} height={'100%'} width={'100%'}>
23+
<Box borderBottom={1} borderColor={'divider'} width={'100%'} flexShrink={0}>
2424
<Tabs value={getter} onChange={handleSetTab} textColor="secondary" indicatorColor="secondary">
2525
<Tab id="configuration" disabled={!tagIsInstalled} label="Configuration" />
2626
<Tab id="activity" disabled={!tagIsInstalled} label="Activity" />
2727
</Tabs>
2828
</Box>
29-
<Box flexGrow={1} width={'100%'} overflow={'auto'}>
29+
<Box flexGrow={1} width={'100%'} overflow={'auto'} sx={{ height: 0 }}>
3030
<CustomTabPanel value={getter} index={0}>
3131
<TagConfig tagConfig={tagConfig} />
3232
</CustomTabPanel>

‎src/pages/sidepanel/sections/Personalization.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,14 +46,14 @@ const Personalization: React.FC<PersonalizationProps> = ({ candidates, getter, s
4646
};
4747

4848
return (
49-
<Stack alignItems={'flex-start'} justifyContent={'center'} height={'100%'} width={'100%'}>
50-
<Box borderBottom={1} borderColor={'divider'} width={'100%'}>
49+
<Stack alignItems={'flex-start'} justifyContent={'flex-start'} height={'100%'} width={'100%'}>
50+
<Box borderBottom={1} borderColor={'divider'} width={'100%'} flexShrink={0}>
5151
<Tabs value={getter} onChange={handleSetTab} textColor="secondary" indicatorColor="secondary">
5252
<Tab id="experiences" label="Experiences" />
5353
<Tab id="legacy" disabled={false} label="Legacy Campaigns" />
5454
</Tabs>
5555
</Box>
56-
<Box flexGrow={1} width={'100%'} overflow={'auto'}>
56+
<Box flexGrow={1} width={'100%'} overflow={'auto'} sx={{ height: 0 }}>
5757
<CustomTabPanel value={getter} index={0}>
5858
{candidates?.experiences.length > 0 ? (
5959
<TabDetails items={candidates?.experiences} />

‎src/pages/sidepanel/sections/Profile.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,14 @@ const Profile: React.FC<ProfileTabProps> = ({ profileIsLoading, profile, getter,
1717
};
1818

1919
return (
20-
<Stack alignItems={'flex-start'} justifyContent={'center'} height={'100vh'} width={'100%'} overflow={'hidden'}>
21-
<Box borderBottom={1} borderColor={'divider'} width={'100%'}>
20+
<Stack alignItems={'flex-start'} justifyContent={'flex-start'} height={'100%'} width={'100%'}>
21+
<Box borderBottom={1} borderColor={'divider'} width={'100%'} flexShrink={0}>
2222
<Tabs value={getter} onChange={handleSetTab} textColor="secondary" indicatorColor="secondary">
2323
<Tab id="summary" label="Summary" />
2424
<Tab id="raw" disabled={profileIsLoading} label="Details" />
2525
</Tabs>
2626
</Box>
27-
<Box flexGrow={1} width={'100%'} overflow={'auto'}>
27+
<Box flexGrow={1} width={'100%'} overflow={'auto'} sx={{ height: 0 }}>
2828
<CustomTabPanel value={getter} index={0}>
2929
{profileIsLoading ? (
3030
<Box m={2}>

‎src/pages/sidepanel/sections/ProfileDetail.tsx‎

Lines changed: 37 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
2-
import { Box } from '@mui/material';
2+
import { Box, Button, Stack } from '@mui/material';
33
import { styled } from '@mui/material/styles';
4+
import { FileDownload } from '@mui/icons-material';
45
import { appColors } from '@root/src/theme/palette';
56
import TreeDisplay from '@root/src/pages/sidepanel/components/TreeDisplay';
67

@@ -11,7 +12,7 @@ interface ProfileDetailTabProps {
1112
const StyledPanel = styled(Box)(({ theme }) => ({
1213
width: '100%',
1314
backgroundColor: appColors.common.darkPanel,
14-
borderRadius: `${theme.spacing(1)} ${theme.spacing(1)} 0 0`, // 8px top corners, 0px bottom corners (top-left, top-right, bottom-right, bottom-left)
15+
borderRadius: theme.spacing(1), // 8px all corners
1516
padding: '0.625rem',
1617
cursor: 'default',
1718
transition: 'none',
@@ -21,11 +22,42 @@ const StyledPanel = styled(Box)(({ theme }) => ({
2122
},
2223
}));
2324

25+
const ExportButton = styled(Button)(({ theme }) => ({
26+
width: '100%',
27+
padding: theme.spacing(1.5),
28+
backgroundColor: appColors.common.white,
29+
color: appColors.neutral[900],
30+
fontWeight: appColors.common.fontWeight.semiBold,
31+
fontSize: appColors.common.fontSize.base,
32+
textTransform: 'none',
33+
borderRadius: theme.spacing(1),
34+
border: `1px solid ${appColors.neutral[200]}`,
35+
'&:hover': {
36+
backgroundColor: appColors.neutral[50],
37+
},
38+
}));
39+
2440
const ProfileDetail: React.FC<ProfileDetailTabProps> = ({ profile }) => {
41+
const handleExport = () => {
42+
const dataStr = JSON.stringify(profile?.data, null, 2);
43+
const dataBlob = new Blob([dataStr], { type: 'application/json' });
44+
const url = URL.createObjectURL(dataBlob);
45+
const link = document.createElement('a');
46+
link.href = url;
47+
link.download = `profile-${Date.now()}.json`;
48+
link.click();
49+
URL.revokeObjectURL(url);
50+
};
51+
2552
return (
26-
<StyledPanel>
27-
<TreeDisplay data={profile?.data} collapsed={2} />
28-
</StyledPanel>
53+
<Stack spacing={2} width="100%">
54+
<StyledPanel>
55+
<TreeDisplay data={profile?.data} collapsed={2} />
56+
</StyledPanel>
57+
<ExportButton startIcon={<FileDownload />} onClick={handleExport}>
58+
Export Profile JSON
59+
</ExportButton>
60+
</Stack>
2961
);
3062
};
3163

‎src/pages/sidepanel/sections/TagConfig.test.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,13 @@ describe('TagConfig', () => {
4848
expect(panel).toHaveStyle({ backgroundColor: '#272728' });
4949
});
5050

51-
it('should render with rounded top corners', () => {
51+
it('should render with rounded corners', () => {
5252
const { container } = renderWithTheme(<TagConfig tagConfig={mockTagConfig} />);
5353

5454
const panel = container.querySelector('.MuiBox-root');
5555
expect(panel).toBeInTheDocument();
56-
// Top corners are rounded (8px), bottom corners are sharp (0px)
57-
// Check for borderRadius property (works better in JSDOM than individual corner properties)
58-
expect(panel).toHaveStyle({ borderRadius: '8px 8px 0 0' });
56+
// All corners are rounded (8px)
57+
expect(panel).toHaveStyle({ borderRadius: '8px' });
5958
});
6059

6160
it('should handle empty tagConfig', () => {

‎src/pages/sidepanel/sections/TagConfig.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ interface ConfigTabProps {
1212
const StyledPanel = styled(Box)(({ theme }) => ({
1313
width: '100%',
1414
backgroundColor: appColors.common.darkPanel,
15-
borderRadius: `${theme.spacing(1)} ${theme.spacing(1)} 0 0`, // 8px top corners, 0px bottom corners (top-left, top-right, bottom-right, bottom-left)
15+
borderRadius: theme.spacing(1), // 8px all corners
1616
padding: '0.625rem', // 10px inner padding
1717
cursor: 'default',
1818
transition: 'none',

0 commit comments

Comments
 (0)