Skip to content

Commit 3b0048b

Browse files
AhsanKhan7AhsanKhan7
committed
ui updates
1 parent ed0b25a commit 3b0048b

File tree

5 files changed

+58
-38
lines changed

5 files changed

+58
-38
lines changed

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

Lines changed: 4 additions & 3 deletions
Loading

‎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
@@ -183,24 +183,25 @@ const selected = projects.some((project) => project['name'] === locationPath.sp
183183
<If condition={!!userFullName}>
184184
{() => (
185185
<Box style={{ position: 'relative' }}>
186-
<LinkBox onClick={() => setPopupOpen(true)}>
186+
<LinkBox onClick={() => setPopupOpen(!popupOpen)}>
187187
<FlexBox alignItems="center">
188188
<FlexBox alignItems="center" className="d-none d-md-flex">
189-
<Box paddingRight="sm">
189+
<Box paddingRight="sm" style={{ textAlign: 'end' }} >
190190
<Paragraph>{userFullName}</Paragraph>
191-
</Box>
192-
<Box>
193-
<icons.chevronDownLight
194-
size={iconSizes.xs}
195-
color={iconColors.black}
196-
/>
191+
<span className={styles.selectedProject} >{selected}</span>
197192
</Box>
198193
</FlexBox>
199-
<Box marginLeft="md">
194+
<Box marginRight="sm">
200195
<ColoredCircle size="md" color="secondary">
201196
{userInitials}
202197
</ColoredCircle>
203198
</Box>
199+
<Box>
200+
<icons.chevronDownLight
201+
size={iconSizes.xs}
202+
color={iconColors.black}
203+
/>
204+
</Box>
204205
</FlexBox>
205206
</LinkBox>
206207
<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)