Skip to content

Commit 98602ed

Browse files
danialraza03danialraza03
authored
Merge pull request #89 from zenml-io/feat/ahsan-v2
Feat/ahsan v2
2 parents 76314fc + 5be709e commit 98602ed

File tree

7 files changed

+62
-42
lines changed

7 files changed

+62
-42
lines changed

‎src/ui/components/icons/assets/Close.svg‎

Lines changed: 4 additions & 3 deletions
Loading

‎src/ui/layouts/common/Table/index.module.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,13 +44,13 @@
4444
vertical-align: middle;
4545
color: #424240 !important;
4646
font-size: 14px !important;
47-
font-weight: 400
47+
font-weight: 400;
4848
}
4949

5050

5151
.tableTd {
5252
vertical-align: middle;
53-
height: 53px !important
53+
height: 53px !important;
5454
}
5555

5656
.lastTable tbody tr:last-child {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -262,7 +262,7 @@ export const Table: React.FC<TableProps> = ({
262262
key={index}
263263
>
264264
<Box style={{ backgroundColor: '#f6f67' }} paddingVertical={showHeader ? 'sm' : null} paddingLeft="lg">
265-
{headerCol.render && headerCol.render()}
265+
{headerCol.render && headerCol.render()}
266266
</Box>
267267
</th>
268268
))}
@@ -295,7 +295,7 @@ export const Table: React.FC<TableProps> = ({
295295
>
296296
<Box paddingVertical="sm" paddingLeft="lg">
297297
<Truncate maxLines={1}>
298-
{headerCol.renderRow(headerRow)}
298+
{headerCol.renderRow(headerRow)}
299299
</Truncate>
300300
</Box>
301301
</td>

‎src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedHeader.module.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@
77
width: 100% !important;
88
}
99

10+
.selectedProject {
11+
font-size: 10px;
12+
font-weight: 400;
13+
line-height: 12px;
14+
}
15+
1016
$activeBgColor: #fbfbfb;
1117
$boxShadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
1218
$width: 15rem;

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

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -185,24 +185,25 @@ const selected = projects.some((project) => project['name'] === locationPath.sp
185185
<If condition={!!userFullName}>
186186
{() => (
187187
<Box style={{ position: 'relative' }}>
188-
<LinkBox onClick={() => setPopupOpen(true)}>
188+
<LinkBox onClick={() => setPopupOpen(!popupOpen)}>
189189
<FlexBox alignItems="center">
190190
<FlexBox alignItems="center" className="d-none d-md-flex">
191-
<Box paddingRight="sm">
191+
<Box paddingRight="sm" style={{ textAlign: 'end' }} >
192192
<Paragraph>{userFullName}</Paragraph>
193-
</Box>
194-
<Box>
195-
<icons.chevronDownLight
196-
size={iconSizes.xs}
197-
color={iconColors.black}
198-
/>
193+
<span className={styles.selectedProject} >{selected}</span>
199194
</Box>
200195
</FlexBox>
201-
<Box marginLeft="md">
196+
<Box marginRight="sm">
202197
<ColoredCircle size="md" color="secondary">
203198
{userInitials}
204199
</ColoredCircle>
205200
</Box>
201+
<Box>
202+
<icons.chevronDownLight
203+
size={iconSizes.xs}
204+
color={iconColors.black}
205+
/>
206+
</Box>
206207
</FlexBox>
207208
</LinkBox>
208209
<If condition={popupOpen}>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export const CookiePopup: React.FC<{ setShowCookie: any }> = ({ setShowCookie })
5555
>
5656
<>
5757
<LinkBox style={{ position: 'absolute', top: '10px', left: '10px' }} onClick={onClose}>
58-
<icons.closeWithBorder />
58+
<icons.close />
5959
</LinkBox>
6060
</>
6161

‎src/ui/layouts/stackComponents/Component.tsx‎

Lines changed: 37 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ const Component = () => {
1414
const stackComponentsTypes: any[] = useSelector(
1515
stackComponentSelectors.stackComponentTypes,
1616
);
17-
18-
const [selectedComp, setSelectedComp] = useState(stackComponentsTypes ? stackComponentsTypes[0] : '')
17+
18+
const [selectedComp, setSelectedComp] = useState(window.location.href.split('/')[6])
1919
const [search, setSearch] = useState('')
2020

2121
useEffect(() => {
@@ -38,6 +38,18 @@ const Component = () => {
3838
return searchFil()
3939
})
4040

41+
const formatText = (text: string) => {
42+
return text.charAt(0).toUpperCase() + text.slice(1).replace('_', ' ')
43+
}
44+
45+
const formatSectionColor = (text: string) => {
46+
return selectedComp === text ? '#443E99' : '#fff'
47+
}
48+
49+
const formatTextColor = (text: string) => {
50+
return selectedComp === text ? '#fff' : '#443E99'
51+
}
52+
4153
return (
4254
<Box style={{ borderRight: '1px solid #A8A8A8', padding: '0 50px 0 33px', marginTop: '12rem' }} >
4355

@@ -49,70 +61,70 @@ const Component = () => {
4961
{stacks?.map((item: any, index: number) => (
5062
<Box key={index}>
5163
{item === 'artifact_store' && (
52-
<FlexBox onClick={() => selectSection(item)} style={{ ...sectionStyle, backgroundColor: selectedComp === item ? '#443E99' : '#fff' }} marginTop='sm' >
64+
<FlexBox onClick={() => selectSection(item)} style={{ ...sectionStyle, backgroundColor: formatSectionColor(item) }} marginTop='sm' >
5365
<Box><icons.artifact_store color={selectedComp === item ? iconColors.white : iconColors.primary} size={iconSizes.md} /></Box>
54-
<Box><Paragraph style={{ color: selectedComp === item ? '#fff' : '#443E99', ...textStyle }} >{item.replace('_', ' ')}</Paragraph></Box>
66+
<Box><Paragraph style={{ color: formatTextColor(item), ...textStyle }}>{formatText(item)}</Paragraph></Box>
5567
</FlexBox>
5668
)}
5769
{item === 'alerter' && (
58-
<FlexBox onClick={() => selectSection(item)} style={{ ...sectionStyle, background: selectedComp === item ? '#443E99' : '#fff' }} marginTop='sm' >
70+
<FlexBox onClick={() => selectSection(item)} style={{ ...sectionStyle, background: formatSectionColor(item) }} marginTop='sm' >
5971
<Box><icons.alerter color={selectedComp === item ? iconColors.white : iconColors.primary} size={iconSizes.md} /></Box>
60-
<Box><Paragraph style={{ color: selectedComp === item ? '#fff' : '#443E99', ...textStyle }} >{item.replace('_', ' ')}</Paragraph></Box>
72+
<Box><Paragraph style={{ color: formatTextColor(item), ...textStyle }} >{formatText(item)}</Paragraph></Box>
6173
</FlexBox>
6274
)}
6375
{item === 'annotator' && (
64-
<FlexBox onClick={() => selectSection(item)} style={{ ...sectionStyle, background: selectedComp === item ? '#443E99' : '#fff' }} marginTop='sm' >
65-
<Box><icons.annotator color={selectedComp === item ? iconColors.white : iconColors.primary} size={iconSizes.md} /></Box>
66-
<Box><Paragraph style={{ color: selectedComp === item ? '#fff' : '#443E99', ...textStyle }} >{item.replace('_', ' ')}</Paragraph></Box>
76+
<FlexBox onClick={() => selectSection(item)} style={{ ...sectionStyle, background: formatSectionColor(item) }} marginTop='sm' >
77+
<Box><icons.annotator color={selectedComp === item ? iconColors.white : iconColors.primary} size={iconSizes.md} /></Box>
78+
<Box><Paragraph style={{ color: formatTextColor(item), ...textStyle }} >{formatText(item)}</Paragraph></Box>
6779
</FlexBox>
6880
)}
6981
{item === 'container_registry' && (
70-
<FlexBox onClick={() => selectSection(item)} style={{ ...sectionStyle, background: selectedComp === item ? '#443E99' : '#fff' }} marginTop='sm' >
82+
<FlexBox onClick={() => selectSection(item)} style={{ ...sectionStyle, background: formatSectionColor(item) }} marginTop='sm' >
7183
<Box><icons.container_registry color={selectedComp === item ? iconColors.white : iconColors.primary} size={iconSizes.md} /></Box>
72-
<Box><Paragraph style={{ color: selectedComp === item ? '#fff' : '#443E99', ...textStyle }} >{item.replace('_', ' ')}</Paragraph></Box>
84+
<Box><Paragraph style={{ color: formatTextColor(item), ...textStyle }} >{formatText(item)}</Paragraph></Box>
7385
</FlexBox>
7486
)}
7587
{item === 'experiment_tracker' && (
76-
<FlexBox onClick={() => selectSection(item)} style={{ ...sectionStyle, background: selectedComp === item ? '#443E99' : '#fff' }} marginTop='sm' >
88+
<FlexBox onClick={() => selectSection(item)} style={{ ...sectionStyle, background: formatSectionColor(item) }} marginTop='sm' >
7789
<Box><icons.experiment_tracker color={selectedComp === item ? iconColors.white : iconColors.primary} size={iconSizes.md} /></Box>
78-
<Box><Paragraph style={{ color: selectedComp === item ? '#fff' : '#443E99', ...textStyle }} >{item.replace('_', ' ')}</Paragraph></Box>
90+
<Box><Paragraph style={{ color: formatTextColor(item), ...textStyle }} >{formatText(item)}</Paragraph></Box>
7991
</FlexBox>
8092
)}
8193

8294
{item === 'feature_store' && (
83-
<FlexBox onClick={() => selectSection(item)} style={{ ...sectionStyle, background: selectedComp === item ? '#443E99' : '#fff' }} marginTop='sm' >
95+
<FlexBox onClick={() => selectSection(item)} style={{ ...sectionStyle, background: formatSectionColor(item) }} marginTop='sm' >
8496
<Box><icons.feature_store color={selectedComp === item ? iconColors.white : iconColors.primary} size={iconSizes.md} /></Box>
85-
<Box><Paragraph style={{ color: selectedComp === item ? '#fff' : '#443E99', ...textStyle }} >{item.replace('_', ' ')}</Paragraph></Box>
97+
<Box><Paragraph style={{ color: formatTextColor(item), ...textStyle }} >{formatText(item)}</Paragraph></Box>
8698
</FlexBox>
8799
)}
88100
{item === 'model_deployer' && (
89-
<FlexBox onClick={() => selectSection(item)} style={{ ...sectionStyle, background: selectedComp === item ? '#443E99' : '#fff' }} marginTop='sm' >
101+
<FlexBox onClick={() => selectSection(item)} style={{ ...sectionStyle, background: formatSectionColor(item) }} marginTop='sm' >
90102
<Box><icons.model_deployer color={selectedComp === item ? iconColors.white : iconColors.primary} size={iconSizes.md} /></Box>
91-
<Box><Paragraph style={{ color: selectedComp === item ? '#fff' : '#443E99', ...textStyle }} >{item.replace('_', ' ')}</Paragraph></Box>
103+
<Box><Paragraph style={{ color: formatTextColor(item), ...textStyle }} >{formatText(item)}</Paragraph></Box>
92104
</FlexBox>
93105
)}
94106
{item === 'secrets_manager' && (
95-
<FlexBox onClick={() => selectSection(item)} style={{ ...sectionStyle, background: selectedComp === item ? '#443E99' : '#fff' }} marginTop='sm' >
107+
<FlexBox onClick={() => selectSection(item)} style={{ ...sectionStyle, background: formatSectionColor(item) }} marginTop='sm' >
96108
<Box><icons.secrets_manager color={selectedComp === item ? iconColors.white : iconColors.primary} size={iconSizes.md} /></Box>
97-
<Box><Paragraph style={{ color: selectedComp === item ? '#fff' : '#443E99', ...textStyle }} >{item.replace('_', ' ')}</Paragraph></Box>
109+
<Box><Paragraph style={{ color: formatTextColor(item), ...textStyle }} >{formatText(item)}</Paragraph></Box>
98110
</FlexBox>
99111
)}
100112
{item === 'orchestrator' && (
101-
<FlexBox onClick={() => selectSection(item)} style={{ ...sectionStyle, background: selectedComp === item ? '#443E99' : '#fff' }} marginTop='sm' >
113+
<FlexBox onClick={() => selectSection(item)} style={{ ...sectionStyle, background: formatSectionColor(item) }} marginTop='sm' >
102114
<Box><icons.orchestrator color={selectedComp === item ? iconColors.white : iconColors.primary} size={iconSizes.md} /></Box>
103-
<Box><Paragraph style={{ color: selectedComp === item ? '#fff' : '#443E99', ...textStyle }} >{item.replace('_', ' ')}</Paragraph></Box>
115+
<Box><Paragraph style={{ color: formatTextColor(item), ...textStyle }} >{formatText(item)}</Paragraph></Box>
104116
</FlexBox>
105117
)}
106118
{item === 'step_operator' && (
107-
<FlexBox onClick={() => selectSection(item)} style={{ ...sectionStyle, background: selectedComp === item ? '#443E99' : '#fff' }} marginTop='sm' >
119+
<FlexBox onClick={() => selectSection(item)} style={{ ...sectionStyle, background: formatSectionColor(item) }} marginTop='sm' >
108120
<Box><icons.step_operator color={selectedComp === item ? iconColors.white : iconColors.primary} size={iconSizes.md} /></Box>
109-
<Box><Paragraph style={{ color: selectedComp === item ? '#fff' : '#443E99', ...textStyle }} >{item.replace('_', ' ')}</Paragraph></Box>
121+
<Box><Paragraph style={{ color: formatTextColor(item), ...textStyle }} >{formatText(item)}</Paragraph></Box>
110122
</FlexBox>
111123
)}
112124
{item === 'data_validator' && (
113-
<FlexBox onClick={() => selectSection(item)} style={{ ...sectionStyle, background: selectedComp === item ? '#443E99' : '#fff' }} marginTop='sm' >
125+
<FlexBox onClick={() => selectSection(item)} style={{ ...sectionStyle, background: formatSectionColor(item) }} marginTop='sm' >
114126
<Box><icons.data_validator color={selectedComp === item ? iconColors.white : iconColors.primary} size={iconSizes.md} /></Box>
115-
<Box><Paragraph style={{ color: selectedComp === item ? '#fff' : '#443E99', ...textStyle }} >{item.replace('_', ' ')}</Paragraph></Box>
127+
<Box><Paragraph style={{ color: formatTextColor(item), ...textStyle }} >{formatText(item)}</Paragraph></Box>
116128
</FlexBox>
117129
)}
118130
</Box>

0 commit comments

Comments
 (0)