Skip to content

Commit bc38c82

Browse files
AhsanKhan7AhsanKhan7
committed
UI updates
1 parent 98d01ce commit bc38c82

File tree

6 files changed

+161
-133
lines changed

6 files changed

+161
-133
lines changed

‎src/redux/reducers/projectsReducer.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,9 @@ const projectsReducer = (
4949
switch (action.type) {
5050
case projectActionTypes.getMyProjects.success: {
5151
const projects: Projects[] = camelCaseArray(
52-
action.payload as ProjectsPayload,
52+
action.payload.items as ProjectsPayload,
5353
);
54-
54+
5555
const myProjectIds: TId[] = projects.map(
5656
(project: Projects) => project.id,
5757
);
@@ -83,7 +83,7 @@ const projectsReducer = (
8383

8484
case projectActionTypes.getMyProjectStats.success: {
8585
// const { projectStats } = action.payload as any;
86-
const projectStats = action.payload;
86+
const projectStats = action.payload.items;
8787

8888
return { ...newState(state, projectStats) };
8989
}

‎src/ui/layouts/common/Popup/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const Dimmer: React.FC = () => <Box className={styles.dimmer}></Box>;
99

1010
export const Popup: React.FC<{ onClose: () => void }> = ({
1111
children,
12-
onClose,
12+
onClose,
1313
}) => (
1414
<>
1515
<Dimmer />

‎src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedHeader.tsx‎

Lines changed: 28 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,9 @@ import {
3939
} from '../../../../../redux/actions';
4040
import { routePaths } from '../../../../../routes/routePaths';
4141
import { ProjectPopup } from './ProjectPopup';
42-
import CookieConsent from 'react-cookie-consent';
43-
import cookieImage from '../../../../assets/cookie.svg'
42+
import ReactTooltip from 'react-tooltip';
43+
import { CookiePopup } from './CookiePopup'
44+
4445
// import { endpoints } from '../../../../../api/endpoints';
4546

4647
export const AuthenticatedHeader: React.FC<{
@@ -53,8 +54,8 @@ export const AuthenticatedHeader: React.FC<{
5354
const history = useHistory();
5455
const [popupOpen, setPopupOpen] = useState<boolean>(false);
5556
const [createPopupOpen, setCreatePopupOpen] = useState<boolean>(false);
56-
const [showProjects, setShowProjects] = useState<boolean>(false);
57-
57+
const [showCookiePopup, setShowCookiePopup] = useState<any>(localStorage.getItem('showCookie'));
58+
5859
const dispatch = useDispatch();
5960
const { push } = usePushRoute();
6061
const locationPath = useLocationPath();
@@ -155,6 +156,11 @@ export const AuthenticatedHeader: React.FC<{
155156
await dispatch(projectsActions.getMy({ selectDefault: false, selectedProject }))
156157
};
157158

159+
160+
const selected = projects.some((project) => project['name'] === locationPath.split('/')[2])
161+
? locationPath.split('/')[2].substring(0, 10)
162+
: DEFAULT_PROJECT_NAME.substring(0, 10)
163+
158164
return (
159165
<>
160166
{createPopupOpen && <ProjectPopup setPopupOpen={setCreatePopupOpen} />}
@@ -215,32 +221,26 @@ export const AuthenticatedHeader: React.FC<{
215221

216222
<Box marginHorizontal='md'><Separator.LightNew /></Box>
217223
<Box marginTop='sm' marginHorizontal="md" ><Paragraph color='grey' style={{ fontSize: '14px' }} >Your workspaces</Paragraph></Box>
218-
<Box marginVertical='sm' marginHorizontal='md' className="d-none d-md-block">
219-
<LinkBox onClick={() => setShowProjects(!showProjects)}>
220-
<FlexBox alignItems="center">
221-
<FlexBox style={{ width: '100%' }} alignItems="center" justifyContent='space-between' className="d-none d-md-flex">
222-
<Box paddingRight="md">
223-
<Paragraph>{projects.some((project) => project['name'] === locationPath.split('/')[2])
224-
? locationPath.split('/')[2].substring(0, 10)
225-
: DEFAULT_PROJECT_NAME.substring(0, 10)}</Paragraph>
226-
</Box>
227-
<Box>
228-
{showProjects ? <icons.chevronUpLight size={iconSizes.xs} color={iconColors.black} /> : <icons.chevronDownLight size={iconSizes.xs} color={iconColors.black} />}
229-
</Box>
230-
</FlexBox>
231-
</FlexBox>
232-
</LinkBox>
233-
234-
{showProjects &&
235-
<Box marginTop='md'>
236-
<Paragraph color='grey'>Select Project</Paragraph>
237-
{projects.slice(0, 10).map((option, index) => (
224+
225+
<Box marginVertical='sm' marginLeft='md' className="d-none d-md-block">
226+
<Box marginTop='sm' style={{ maxHeight: '290px', overflow: projects?.length > 10 ? 'auto' :'hidden' }} >
227+
{projects.map((option, index) => (
238228
<Box marginTop='sm' onClick={() => onChange(option) } key={index} >
239-
<Paragraph style={{ fontSize: '16px', color: '#424240', cursor: 'pointer' }} >{option.name.substring(0, 10)}</Paragraph>
229+
<div data-tip data-for={option.name}>
230+
<Paragraph style={{ fontSize: '16px', color: '#443E99', cursor: 'pointer', fontWeight: selected === option.name ? 'bold' : 'normal' }} >
231+
{option.name.substring(0, 10)} {selected === option.name && <>&#x2022;</>}
232+
</Paragraph>
233+
</div>
234+
235+
<ReactTooltip id={option.name} place="top" effect="solid">
236+
<Paragraph color="white">{option.name}</Paragraph>
237+
</ReactTooltip>
238+
240239
</Box>
241240
))}
242-
</Box>}
241+
</Box>
243242
</Box>
243+
244244
<Box marginHorizontal='md'><Separator.LightNew /></Box>
245245

246246
{process.env.REACT_APP_DEMO_SETUP === 'true' ? null : (
@@ -272,107 +272,7 @@ export const AuthenticatedHeader: React.FC<{
272272
</If>
273273
</FlexBox>
274274

275-
<CookieConsent
276-
buttonText="Accept"
277-
cookieName="My Cookie"
278-
style={{
279-
background: '#fff',
280-
borderRadius: '15px',
281-
border: '1px solid #8045FF',
282-
color: '#424240',
283-
fontFamily: 'Rubik',
284-
fontSize: '1.6rem',
285-
fontWeight: 'bold',
286-
maxWidth: `300px`,
287-
maxHeight: '300px',
288-
289-
display: 'flex',
290-
justifyContent: 'center',
291-
position: 'absolute',
292-
margin: '0 auto 0 auto',
293-
top: '30%',
294-
left: '42%'
295-
}}
296-
buttonStyle={{
297-
backgroundColor: '#fff',
298-
color: '#8045FF',
299-
fontFamily: 'Rubik',
300-
fontSize: '1.6rem',
301-
fontWeight: 'bold',
302-
borderRadius: '4px',
303-
padding: '0 3.2rem'
304-
}}
305-
expires={120}
306-
>
307-
<FlexBox
308-
alignItems="center"
309-
justifyContent="space-between"
310-
flexDirection='column'
311-
>
312-
<Box style={{ height: '130px', width: '130px' }} >
313-
<img src={cookieImage} alt='cookie' />
314-
</Box>
315-
<Box marginTop='sm' style={{ maxWidth: '180px' }}>
316-
<Paragraph size="small">
317-
This website uses cookies
318-
to ensure you get the best
319-
experience on our website.
320-
</Paragraph>
321-
</Box>
322-
</FlexBox>
323-
</CookieConsent>
275+
{showCookiePopup !== 'false' && <CookiePopup setShowCookie={setShowCookiePopup} />}
324276
</>
325277
);
326-
};
327-
328-
329-
// {!window.location.href?.includes('settings') && (
330-
// <Box marginLeft="md" className="d-none d-md-block">
331-
// <select
332-
// onClick={() =>
333-
// dispatch(
334-
// projectsActions.getMy({
335-
// selectDefault: false,
336-
// selectedProject,
337-
// }),
338-
// )
339-
// }
340-
// onChange={(e: any) => onChange(e)}
341-
// defaultValue={
342-
// projects.some(
343-
// (project) =>
344-
// project['name'] === locationPath.split('/')[2],
345-
// )
346-
// ? locationPath.split('/')[2]
347-
// : DEFAULT_PROJECT_NAME
348-
// }
349-
// value={
350-
// projects.some(
351-
// (project) =>
352-
// project['name'] === locationPath.split('/')[2],
353-
// )
354-
// ? locationPath.split('/')[2]
355-
// : DEFAULT_PROJECT_NAME
356-
// }
357-
// placeholder={'Projects'}
358-
// className={cn(css.input)}
359-
// style={{
360-
// border: 'none',
361-
// outline: 'none',
362-
// width: '146px',
363-
// fontSize: '16px',
364-
// fontWeight: 'bold',
365-
// color: '#424240',
366-
// }}
367-
// >
368-
// <option selected disabled value="">
369-
// {'Select Project'}
370-
// </option>
371-
// {projects.map((option, index) => (
372-
// <option key={index} value={option.name}>
373-
// {option.name}
374-
// </option>
375-
// ))}
376-
// </select>
377-
// </Box>
378-
// )}
278+
};

‎src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ export const SideFooter: React.FC = () => {
1111
<Box marginHorizontal="md" paddingBottom="md">
1212
<Separator.LightNew />
1313
</Box>
14-
14+
15+
<div style={{ marginBottom: '-11px' }} >
1516
<MenuItemExternal
1617
id="documentation"
1718
Icon={() => <icons.docs color={iconColors.white} size={iconSizes.md} />}
@@ -32,6 +33,7 @@ export const SideFooter: React.FC = () => {
3233
to="https://github.com/zenml-io/zenml-dashboard/issues/new/choose"
3334
text="Report Issue"
3435
/>
36+
</div>
3537
<MenuItem
3638
id="settings"
3739
Icon={() => (

‎src/ui/layouts/common/layouts/AuthenticatedLayout/CookiePopup/index.module.scss‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
@import '../../../../../globalStyles.scss';
2+
3+
.dimmer {
4+
position: fixed;
5+
background: #424240;
6+
opacity: 0.5;
7+
height: 100vh;
8+
width: 100vw;
9+
top: 0;
10+
left: 0;
11+
z-index: 9999;
12+
}
13+
14+
.popup {
15+
background: #ffffff;
16+
border-radius: 4px;
17+
position: fixed;
18+
max-height: 70vh;
19+
min-height: 200px;
20+
min-width: 700px;
21+
overflow-x: auto;
22+
}
23+
24+
@media (max-width: $md-breakpoint) {
25+
.popup {
26+
max-width: 80vw;
27+
min-width: 0;
28+
}
29+
}
30+
31+
.popupContainer {
32+
position: fixed;
33+
height: 100vh;
34+
width: 100vw;
35+
top: 0;
36+
left: 0;
37+
z-index: 99999;
38+
}
39+
40+
.popupClose {
41+
position: absolute;
42+
top: 1.5em;
43+
right: 1.5rem;
44+
}

‎src/ui/layouts/common/layouts/AuthenticatedLayout/CookiePopup/index.tsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import React from 'react';
2+
import { Box, FlexBox, icons, LinkBox } from '../../../../../components';
3+
4+
import styles from './index.module.scss';
5+
import CookieConsent from 'react-cookie-consent';
6+
import cookieImage from '../../../../../assets/cookie.svg'
7+
8+
9+
const Dimmer: React.FC = () => <Box className={styles.dimmer}></Box>;
10+
11+
export const CookiePopup: React.FC<{ setShowCookie: any }> = ({ setShowCookie }) => {
12+
13+
const onClose = () => {
14+
setShowCookie('false')
15+
localStorage.setItem('showCookie', 'false')
16+
}
17+
18+
return (
19+
<>
20+
<Dimmer />
21+
22+
<CookieConsent
23+
buttonText="Accept"
24+
cookieName="My Cookie"
25+
onAccept={onClose}
26+
style={{
27+
background: '#fff',
28+
borderRadius: '15px',
29+
color: '#424240',
30+
fontFamily: 'Rubik',
31+
fontSize: '1.6rem',
32+
fontWeight: 'bold',
33+
maxWidth: `336px`,
34+
maxHeight: '385px',
35+
36+
display: 'flex',
37+
justifyContent: 'center',
38+
position: 'absolute',
39+
margin: '0 auto 0 auto',
40+
top: '30%',
41+
left: '42%',
42+
zIndex: 9999
43+
}}
44+
buttonStyle={{
45+
backgroundColor: '#fff',
46+
color: '#8045FF',
47+
fontFamily: 'Rubik',
48+
fontSize: '20px',
49+
fontWeight: 'bold',
50+
borderRadius: '4px',
51+
padding: '0 3.2rem',
52+
marginTop: '-40px'
53+
}}
54+
expires={120}
55+
>
56+
<>
57+
<LinkBox style={{ position: 'absolute', top: '10px', left: '10px' }} onClick={onClose}>
58+
<icons.closeWithBorder />
59+
</LinkBox>
60+
</>
61+
62+
<FlexBox
63+
marginTop='xxl'
64+
alignItems="center"
65+
justifyContent="space-between"
66+
flexDirection='column'
67+
>
68+
<Box style={{ height: '130px', width: '130px' }} >
69+
<img src={cookieImage} alt='cookie' />
70+
</Box>
71+
<Box marginTop='md' style={{ width: '250px' }}>
72+
<p style={{ fontSize: '20px', fontWeight: 'lighter', fontFamily: 'Rubik', textAlign: 'center', lineHeight: '26px', color: '#424240' }} >
73+
This website uses cookies
74+
to ensure you get the best
75+
experience on our website.
76+
</p>
77+
</Box>
78+
</FlexBox>
79+
</CookieConsent>
80+
</>
81+
)
82+
};

0 commit comments

Comments
 (0)