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

fix: fixed broken header style in dashboard detail page (#5154)

Browse Source
This commit is contained in:
SagarRajput-7 2024-06-05 22:17:28 +05:30 committed by GitHub
parent e5f96ac896
commit 35c054835a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 53 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -53,53 +53,59 @@
padding: 0px; padding: 0px;
} }
.dashboard-breadcrumbs { .dashboard-header {
height: 48px;
padding: 16px;
border-bottom: 1px solid var(--bg-slate-400); border-bottom: 1px solid var(--bg-slate-400);
display: flex; display: flex;
gap: 6px; justify-content: space-between;
align-items: center; align-items: center;
.dashboard-btn { .dashboard-breadcrumbs {
height: 48px;
padding: 16px;
display: flex; display: flex;
gap: 6px;
align-items: center; align-items: center;
color: var(--bg-vanilla-400);
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
letter-spacing: -0.07px;
padding: 0px;
height: 20px;
}
.dashboard-btn:hover { .dashboard-btn {
background-color: unset; display: flex;
} align-items: center;
color: var(--bg-vanilla-400);
.id-btn { font-family: Inter;
display: flex; font-size: 14px;
align-items: center; font-style: normal;
padding: 0px 2px; font-weight: 400;
border-radius: 2px; line-height: 20px; /* 142.857% */
background: rgba(113, 144, 249, 0.1); letter-spacing: -0.07px;
color: var(--bg-robin-400); padding: 0px;
font-family: Inter; height: 20px;
font-size: 14px; }
font-style: normal;
font-weight: 400; .dashboard-btn:hover {
line-height: 20px; /* 142.857% */ background-color: unset;
height: 20px; }
.ant-btn-icon { .id-btn {
margin-inline-end: 4px; display: flex;
align-items: center;
padding: 0px 2px;
border-radius: 2px;
background: rgba(113, 144, 249, 0.1);
color: var(--bg-robin-400);
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
height: 20px;
.ant-btn-icon {
margin-inline-end: 4px;
}
}
.id-btn:hover {
background: rgba(113, 144, 249, 0.1);
color: var(--bg-robin-300);
} }
}
.id-btn:hover {
background: rgba(113, 144, 249, 0.1);
color: var(--bg-robin-300);
} }
} }
@ -562,11 +568,12 @@
.dashboard-description-container { .dashboard-description-container {
color: var(--bg-ink-400); color: var(--bg-ink-400);
.dashboard-breadcrumbs { .dashboard-header {
border-bottom: 1px solid var(--bg-vanilla-300); border-bottom: 1px solid var(--bg-vanilla-300);
.dashboard-breadcrumbs {
.dashboard-btn { .dashboard-btn {
color: var(--bg-ink-400); color: var(--bg-ink-400);
}
} }
} }

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

@ -1,16 +1,7 @@
import './Description.styles.scss'; import './Description.styles.scss';
import { PlusOutlined } from '@ant-design/icons'; import { PlusOutlined } from '@ant-design/icons';
import { import { Button, Card, Input, Modal, Popover, Tag, Typography } from 'antd';
Button,
Card,
Flex,
Input,
Modal,
Popover,
Tag,
Typography,
} from 'antd';
import FacingIssueBtn from 'components/facingIssueBtn/FacingIssueBtn'; import FacingIssueBtn from 'components/facingIssueBtn/FacingIssueBtn';
import { dashboardHelpMessage } from 'components/facingIssueBtn/util'; import { dashboardHelpMessage } from 'components/facingIssueBtn/util';
import { SOMETHING_WENT_WRONG } from 'constants/api'; import { SOMETHING_WENT_WRONG } from 'constants/api';
@ -261,7 +252,7 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
return ( return (
<Card className="dashboard-description-container"> <Card className="dashboard-description-container">
<Flex justify="space-between" align="center"> <div className="dashboard-header">
<section className="dashboard-breadcrumbs"> <section className="dashboard-breadcrumbs">
<Button <Button
type="text" type="text"
@ -297,7 +288,7 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
buttonText="Facing issues with dashboards?" buttonText="Facing issues with dashboards?"
onHoverText="Click here to get help with dashboard details" onHoverText="Click here to get help with dashboard details"
/> />
</Flex> </div>
<section className="dashbord-details"> <section className="dashbord-details">
<div className="left-section"> <div className="left-section">
<img <img