mirror of
https://github.com/QuivrHQ/quivr.git
synced 2024-08-17 02:10:31 +03:00
fix(frontend): UI Notification Ring and Fix Page Header Display on Mobile (#2771)
…y and responsiveness. # Description Please include a summary of the changes and the related issue. Please also include relevant motivation and context. ## Checklist before requesting a review Please delete options that are not relevant. - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my code - [ ] I have commented hard-to-understand areas - [ ] I have ideally added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged ## Screenshots (if appropriate):
This commit is contained in:
parent
0294698f05
commit
bbbf0d1217
@ -14,10 +14,6 @@
|
|||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.read {
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@ -76,4 +72,4 @@
|
|||||||
font-size: Typography.$tiny;
|
font-size: Typography.$tiny;
|
||||||
color: var(--text-2);
|
color: var(--text-2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -11,16 +11,16 @@
|
|||||||
.badge {
|
.badge {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
color: var(--white-0);
|
color: var(--white-0);
|
||||||
background-color: var(--accent);
|
background-color: var(--dangerous-dark);
|
||||||
border-radius: Radius.$circle;
|
border-radius: Radius.$normal;
|
||||||
width: 14px;
|
width: 16px;
|
||||||
height: 14px;
|
height: 16px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: Typography.$very_tiny;
|
font-size: Typography.$very_tiny;
|
||||||
top: -(Spacings.$spacing02);
|
top: -(Spacings.$spacing03);
|
||||||
right: -(Spacings.$spacing01);
|
right: -(Spacings.$spacing02);
|
||||||
}
|
}
|
||||||
|
|
||||||
.notifications_panel {
|
.notifications_panel {
|
||||||
@ -59,4 +59,4 @@
|
|||||||
color: var(--text-2);
|
color: var(--text-2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -104,7 +104,11 @@ export const Notifications = (): JSX.Element => {
|
|||||||
color="black"
|
color="black"
|
||||||
handleHover={true}
|
handleHover={true}
|
||||||
/>
|
/>
|
||||||
<span className={styles.badge}>{unreadNotifications}</span>
|
{!!unreadNotifications && (
|
||||||
|
<span className={styles.badge}>
|
||||||
|
{unreadNotifications > 9 ? "9+" : unreadNotifications}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
{panelOpened && (
|
{panelOpened && (
|
||||||
<div className={styles.notifications_panel}>
|
<div className={styles.notifications_panel}>
|
||||||
|
@ -10,6 +10,7 @@
|
|||||||
padding-left: Spacings.$spacing09;
|
padding-left: Spacings.$spacing09;
|
||||||
border-bottom: 1px solid var(--border-1);
|
border-bottom: 1px solid var(--border-1);
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
@include Typography.H2;
|
@include Typography.H2;
|
||||||
@ -22,15 +23,19 @@
|
|||||||
visibility: visible;
|
visibility: visible;
|
||||||
padding-left: Spacings.$spacing07;
|
padding-left: Spacings.$spacing07;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: ScreenSizes.$small) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttons_wrapper {
|
.buttons_wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: Spacings.$spacing04;
|
gap: Spacings.$spacing04;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
@media (max-width: ScreenSizes.$small) {
|
||||||
|
justify-content: flex-end;
|
||||||
|
.left {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user