GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-11 21:09:09 +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 {
display: inline-block;
margin-top: 4px;
margin-right: 4px;
line-height: 20px;
height: 14px;
width: 14px;
}
.dot {
@ -75,6 +75,12 @@
border-radius: 50%;
}
.title-link {
display: flex;
align-items: center;
gap: 8px;
}
.title {
color: var(--bg-vanilla-100);
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"
overlayClassName="title-toolip"
>
<Typography.Text data-testid={`dashboard-title-${index}`}>
<Link to={getLink()} className="title">
<img
src={dashboard?.image || Base64Icons[0]}
style={{ height: '14px', width: '14px' }}
alt="dashboard-image"
className="dashboard-icon"
/>
<Link to={getLink()} className="title-link">
<img
src={dashboard?.image || Base64Icons[0]}
alt="dashboard-image"
className="dashboard-icon"
/>
<Typography.Text
data-testid={`dashboard-title-${index}`}
className="title"
>
{dashboard.name}
</Link>
</Typography.Text>
</Typography.Text>
</Link>
</Tooltip>
</div>

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

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

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

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