GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 12:09:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: fixed dashboard header and list title alignment (#6035)

Browse Source 
* fix: fixed dashboard header and list title alignment

* fix: fixed dashboard header and list title alignment

* fix: fixed existing styles
This commit is contained in:
SagarRajput-7 2024-09-20 11:39:10 +05:30 committed by GitHub
parent 4edc6dbeae
commit 54d5666b92
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 27 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/container/ListOfDashboard/DashboardList.styles.scss
View File

@ -64,9 +64,9 @@
.dashboard-icon { .dashboard-icon {
display: inline-block; display: inline-block;
margin-top: 4px;
margin-right: 4px;
line-height: 20px; line-height: 20px;
height: 14px;
width: 14px;
} }
.dot { .dot {
@ -75,6 +75,12 @@
border-radius: 50%; border-radius: 50%;
} }
.title-link {
display: flex;
align-items: center;
gap: 8px;
}
.title { .title {
color: var(--bg-vanilla-100); color: var(--bg-vanilla-100);
font-size: var(--font-size-sm); font-size: var(--font-size-sm);

22
frontend/src/container/ListOfDashboard/DashboardsList.tsx
View File

@ -459,17 +459,19 @@ function DashboardsList(): JSX.Element {
placement="left" placement="left"
overlayClassName="title-toolip" overlayClassName="title-toolip"
> >
<Typography.Text data-testid={`dashboard-title-${index}`}> <Link to={getLink()} className="title-link">
<Link to={getLink()} className="title"> <img
<img src={dashboard?.image || Base64Icons[0]}
src={dashboard?.image || Base64Icons[0]} alt="dashboard-image"
style={{ height: '14px', width: '14px' }} className="dashboard-icon"
alt="dashboard-image" />
className="dashboard-icon" <Typography.Text
/> data-testid={`dashboard-title-${index}`}
className="title"
>
{dashboard.name} {dashboard.name}
</Link> </Typography.Text>
</Typography.Text> </Link>
</Tooltip> </Tooltip>
</div> </div>

6
frontend/src/container/NewDashboard/DashboardDescription/Description.styles.scss
View File

@ -130,12 +130,16 @@
.left-section { .left-section {
display: flex; display: flex;
flex-wrap: wrap;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
width: 45%; width: 45%;
.dashboard-img {
height: 16px;
width: 16px;
}
.dashboard-title { .dashboard-title {
color: #fff; color: #fff;
font-family: Inter; font-family: Inter;

7
frontend/src/container/NewDashboard/DashboardDescription/index.tsx
View File

@ -306,16 +306,13 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
</div> </div>
<section className="dashboard-details"> <section className="dashboard-details">
<div className="left-section"> <div className="left-section">
<img src={image} alt="dashboard-img" className="dashboard-img" />
<Tooltip title={title.length > 30 ? title : ''}> <Tooltip title={title.length > 30 ? title : ''}>
<Typography.Text <Typography.Text
className="dashboard-title" className="dashboard-title"
data-testid="dashboard-title" data-testid="dashboard-title"
> >
<img {' '}
src={image}
alt="dashboard-img"
style={{ width: '16px', height: '16px' }}
/>{' '}
{title} {title}
</Typography.Text> </Typography.Text>
</Tooltip> </Tooltip>