Skip to content

Commit 7544195

Browse files
onkarj-47onkarj-47
authored
Merge branch 'main' into issue/fix_scroll_issue
2 parents 2d7ee47 + ce65211 commit 7544195

File tree

10 files changed

+101
-60
lines changed

10 files changed

+101
-60
lines changed

‎src/pages/sidepanel/assets/svg/ConfigDomainFound.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from 'react';
2+
3+
export const ConfigDomainFound = () => (
4+
<svg width="75" height="60" viewBox="0 0 75 60" fill="none" xmlns="http://www.w3.org/2000/svg">
5+
<path
6+
d="M4.62598 1.33984H70.374C71.882 1.33994 73.1044 2.56232 73.1045 4.07031V50.2529C73.1045 51.761 71.882 52.9833 70.374 52.9834H4.62598C3.11793 52.9833 1.89551 51.761 1.89551 50.2529V4.07031C1.89558 2.5623 3.11797 1.33991 4.62598 1.33984Z"
7+
fill="white"
8+
/>
9+
<path
10+
d="M4.62598 1.33984H70.374C71.882 1.33994 73.1044 2.56232 73.1045 4.07031V50.2529C73.1045 51.761 71.882 52.9833 70.374 52.9834H4.62598C3.11793 52.9833 1.89551 51.761 1.89551 50.2529V4.07031C1.89558 2.5623 3.11797 1.33991 4.62598 1.33984Z"
11+
stroke="#C7C7C8"
12+
strokeWidth="2.16"
13+
/>
14+
<rect x="24" y="6.45898" width="44.28" height="3.24" rx="1.62" fill="#C7C7C8" />
15+
<rect x="5.89606" y="6.22959" width="3.46939" height="3.46939" rx="1.7347" fill="#C7C7C8" />
16+
<rect x="10.7533" y="6.22959" width="3.46939" height="3.46939" rx="1.7347" fill="#C7C7C8" />
17+
<rect x="15.6102" y="6.22959" width="3.46939" height="3.46939" rx="1.7347" fill="#C7C7C8" />
18+
<foreignObject x="13.2" y="18.2" width="47.6" height="47.6">
19+
<div
20+
style={{
21+
backdropFilter: 'blur(2.9px)',
22+
clipPath: 'url(#bgblur_0_53_390_clip_path)',
23+
height: '100%',
24+
width: '100%',
25+
}}></div>
26+
</foreignObject>
27+
<circle data-figma-bg-blur-radius="5.8" cx="37" cy="42" r="18" fill="#8848F9" fillOpacity="0.12" />
28+
{/* ✅ Right tick instead of exclamation */}
29+
<path d="M29 42L35 48L45 36" stroke="#8848F9" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round" />
30+
<defs>
31+
<clipPath id="bgblur_0_53_390_clip_path" transform="translate(-13.2 -18.2)">
32+
<circle cx="37" cy="42" r="18" />
33+
</clipPath>
34+
</defs>
35+
</svg>
36+
);

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

Lines changed: 29 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22

33
import { AutoFixHighOutlined, MonitorHeart, Person, PestControlOutlined } from '@mui/icons-material';
4-
import { BottomNavigation, BottomNavigationAction } from '@mui/material';
4+
import { BottomNavigation, BottomNavigationAction, Tooltip } from '@mui/material';
55
import { styled } from '@mui/material/styles';
66
import { appColors } from '@root/src/theme/palette';
77

@@ -16,7 +16,7 @@ interface NavigationSection {
1616
ariaLabel: string;
1717
}
1818

19-
const StyledBottomNavigation = styled(BottomNavigation)(({ theme }) => ({
19+
const StyledBottomNavigation = styled(BottomNavigation)(() => ({
2020
position: 'fixed',
2121
bottom: 0,
2222
width: '100%',
@@ -26,13 +26,25 @@ const StyledBottomNavigation = styled(BottomNavigation)(({ theme }) => ({
2626
alignItems: 'center',
2727
gap: '0.625rem', // 10px (Figma spec)
2828
padding: '0.75rem 1rem', // 12px top/bottom, 16px left/right (Figma spec)
29-
backgroundColor: theme.palette.background.default,
30-
backdropFilter: 'blur(13.3px)', // 13.3px - Figma blur value
31-
WebkitBackdropFilter: 'blur(13.3px)', // Safari support
29+
backgroundColor: 'transparent', // Transparent to show blur behind
30+
borderTop: '1px solid rgba(255, 255, 255, 0.5)',
31+
boxShadow: '0 -4px 20px rgba(0, 0, 0, 0.08)',
3232
cursor: 'pointer',
3333
transition: 'none',
34+
zIndex: 1000,
35+
isolation: 'isolate', // Create stacking context
36+
// Blur background using pseudo-element
37+
'&::before': {
38+
content: '""',
39+
position: 'absolute',
40+
inset: 0,
41+
backgroundColor: 'rgba(233, 232, 237, 0.4)',
42+
backdropFilter: 'blur(80px) saturate(200%)',
43+
WebkitBackdropFilter: 'blur(80px) saturate(200%)',
44+
zIndex: -1,
45+
},
3446
'&:hover': {
35-
boxShadow: 'none',
47+
boxShadow: '0 -4px 20px rgba(0, 0, 0, 0.08)',
3648
transform: 'none',
3749
},
3850
}));
@@ -45,10 +57,12 @@ const StyledBottomNavigationAction = styled(BottomNavigationAction)<{
4557
paddingBlock: theme.spacing(1.5),
4658
backgroundColor: isSelected ? appColors.common.colors.accent : 'transparent',
4759
borderRadius: theme.spacing(0.5),
48-
transition: 'none',
4960
'&.Mui-selected': {
5061
color: appColors.common.white,
5162
},
63+
'&:hover': {
64+
backgroundColor: isSelected ? 'appColors.common.colors.accent' : 'rgba(136, 72, 249, 0.1)', // Light accent color on hover
65+
},
5266
}));
5367

5468
const navigationSections: NavigationSection[] = [
@@ -80,13 +94,14 @@ export const BottomNav = ({ value, onChange }: BottomNavProps): JSX.Element => {
8094
{navigationSections.map(section => {
8195
const isSelected = value === section.route;
8296
return (
83-
<StyledBottomNavigationAction
84-
key={section.route}
85-
value={section.route}
86-
icon={section.icon}
87-
isSelected={isSelected}
88-
aria-label={section.ariaLabel}
89-
/>
97+
<Tooltip key={section.route} title={section.ariaLabel} placement="top" arrow>
98+
<StyledBottomNavigationAction
99+
value={section.route}
100+
icon={section.icon}
101+
isSelected={isSelected}
102+
aria-label={section.ariaLabel}
103+
/>
104+
</Tooltip>
90105
);
91106
})}
92107
</StyledBottomNavigation>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import { Button, Typography } from '@mui/material';
33
import { ConfigDomain } from '../assets/svg/ConfigDomain';
4+
import { ConfigDomainFound } from '../assets/svg/ConfigDomainFound';
45
import { styled } from '@mui/material/styles';
56
import { appColors } from '@root/src/theme/palette';
67
import { appContent } from '@root/src/shared/content/appContent';
@@ -90,7 +91,7 @@ export const EnabledState = ({
9091
return (
9192
<Container>
9293
<OuterCard>
93-
<ConfigDomain />
94+
<ConfigDomainFound />
9495
<Title variant="h6" align="center">
9596
{textContent.title}
9697
</Title>

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

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -72,17 +72,16 @@ const TagActivity = ({ textContent = appContent.tagActivity }: TagActivityProps)
7272
fontSize: appColors.common.fontSize.small,
7373
}));
7474

75+
const StyledButton = styled(Button)(() => ({
76+
color: appColors.common.colors.accent,
77+
}));
78+
7579
return (
7680
<Box fontSize={12}>
7781
<Box textAlign={'right'} m={1}>
78-
<Button
79-
size={'small'}
80-
variant={'text'}
81-
color={'secondary'}
82-
onClick={handleClearActivity}
83-
startIcon={<Delete />}>
82+
<StyledButton size={'small'} variant={'text'} onClick={handleClearActivity} startIcon={<Delete />}>
8483
{textContent.clearLogsLabel}
85-
</Button>
84+
</StyledButton>
8685
</Box>
8786
{tagActivity.length === 0 ? (
8887
<Box mt={6}>

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

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -128,17 +128,5 @@ describe('TagStatus', () => {
128128
expect(screen.getByText('Searching for Lytics JavaScript SDK')).toBeInTheDocument();
129129
expect(screen.getByTestId('ErrorIcon')).toBeInTheDocument();
130130
});
131-
132-
it('shows installation instructions with documentation link', () => {
133-
renderWithTheme(<TagStatus tagIsInstalled={false} tagConfig={mockTagConfig} tagActivity={emptyTagActivity} />);
134-
135-
expect(screen.getByText(/We have not been able to find the Lytics JavaScript SDK/)).toBeInTheDocument();
136-
137-
const docLink = screen.getByRole('link', { name: 'Lytics JavaScript SDK documentation' });
138-
expect(docLink).toBeInTheDocument();
139-
expect(docLink).toHaveAttribute('href', 'https://docs.lytics.com/docs/lytics-javascript-tag#installation');
140-
expect(docLink).toHaveAttribute('target', '_blank');
141-
expect(docLink).toHaveAttribute('rel', 'noreferrer');
142-
});
143131
});
144132
});

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

Lines changed: 15 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -89,10 +89,14 @@ const StyledTableContainer = styled(Box)(({ theme }) => ({
8989
marginTop: theme.spacing(2),
9090
}));
9191

92+
const StyledCircularProgress = styled(CircularProgress)(() => ({
93+
color: appColors.common.colors.accent,
94+
}));
95+
9296
const StyledSearchingCard = styled(Stack)(({ theme }) => ({
93-
background: 'linear-gradient(white, white) padding-box, linear-gradient(to right, #FCC504, #E80339) border-box',
97+
background: 'linear-gradient(white, white) padding-box, #8848F9 border-box',
9498
borderRadius: theme.spacing(1),
95-
border: '4px solid transparent',
99+
border: '2px solid transparent',
96100
padding: theme.spacing(1),
97101
marginTop: theme.spacing(1),
98102
marginBottom: theme.spacing(1),
@@ -104,11 +108,6 @@ const StyledLoadingContainer = styled(Box)(({ theme }) => ({
104108
textAlign: 'center',
105109
}));
106110

107-
const StyledDescriptionTypography = styled(Typography)(({ theme }) => ({
108-
textAlign: 'center',
109-
padding: theme.spacing(1),
110-
}));
111-
112111
const TagStatus: React.FC<TagStatusProps> = ({
113112
tagIsInstalled,
114113
tagConfig,
@@ -186,24 +185,18 @@ const TagStatus: React.FC<TagStatusProps> = ({
186185
) : (
187186
<Stack>
188187
<StyledLoadingContainer>
189-
<CircularProgress color="secondary" />
188+
<StyledCircularProgress />
190189
</StyledLoadingContainer>
191-
<StyledSearchingCard direction="row" spacing={2} display="flex" alignItems="center" justifyContent="center">
192-
<Error style={{ fontSize: 26, color: appColors.warning.main }} />
190+
<StyledSearchingCard
191+
direction="row"
192+
spacing={2}
193+
display="flex"
194+
alignItems="center"
195+
justifyContent="center"
196+
color={appColors.common.colors.accent}>
197+
<Error style={{ fontSize: 26, color: appColors.common.colors.accent }} />
193198
<Typography variant="body2">{textContent.searchingForSdk}</Typography>
194199
</StyledSearchingCard>
195-
<Box>
196-
<StyledDescriptionTypography variant="body2">
197-
{textContent.notFoundMessage}{' '}
198-
<a
199-
href="https://docs.lytics.com/docs/lytics-javascript-tag#installation"
200-
target="_blank"
201-
rel="noreferrer">
202-
{textContent.documentationLinkText}
203-
</a>
204-
.
205-
</StyledDescriptionTypography>
206-
</Box>
207200
</Stack>
208201
)}
209202
</StyledContainer>

‎src/pages/sidepanel/sections/profile/ProfileMetadata.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const FieldLabel = styled(Typography)(() => ({
3939
font: '700 0.875rem/1 SF Pro, -apple-system, BlinkMacSystemFont, sans-serif', // Bold 14px, line-height 100%
4040
letterSpacing: '-0.03125rem', // -0.5px
4141
color: appColors.neutral[600], // #383838
42-
width: '6.25rem', // Fixed width to force wrap - 100px
42+
width: '8.25rem', // Fixed width to force wrap - 100px
4343
wordWrap: 'break-word',
4444
}));
4545

@@ -51,7 +51,6 @@ const FieldValue = styled(Typography)(() => ({
5151
overflow: 'hidden',
5252
textOverflow: 'ellipsis',
5353
whiteSpace: 'nowrap',
54-
textAlign: 'center',
5554
alignSelf: 'center',
5655
flex: 1,
5756
}));

‎src/pages/tagLink/tagLink.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ class TagLinkInternal {
3333
this.emitLog('tag', 'get experiences');
3434
break;
3535
default:
36-
this.emitLog('tag', `invalid action: ${event.data.action}`);
36+
// this.emitLog('tag', `invalid action: ${event.data.action}`);
3737
break;
3838
}
3939
}

‎src/shared/content/appContent.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const appContent = {
1919
// EnabledState Component
2020
enabledState: {
2121
title: 'Lytics SDK detected',
22-
buttonText: 'Analyze domains',
22+
buttonText: 'Configure domain',
2323
pinnedUrlText: {
2424
prefix: 'Wait a minute! You are currently analyzing ',
2525
suffix: ". If you'd like to analyze this domain instead pin it below.",

‎src/theme/components.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,4 +142,14 @@ export const components: Components<Omit<Theme, 'components'>> = {
142142
},
143143
},
144144
},
145+
146+
// Accordion customizations
147+
MuiAccordionSummary: {
148+
styleOverrides: {
149+
content: {
150+
marginTop: '1rem', // 16px
151+
marginBottom: '1rem', // 16px
152+
},
153+
},
154+
},
145155
};

0 commit comments

Comments
 (0)