Notifications page & dropdown improvements #61
Conversation
layouts/default.vue
Outdated
| .n-accordion-panel_new .n-header-subj { | ||
| @apply !text-[var(--bluegray-900)]; | ||
| @apply dark:!text-[var(--bluegray-0)]; |
There was a problem hiding this comment.
Base fixes of text colors and backgrounds, can be applied directly at preset files. So for something specific => local overrides, for changes like replacing text-surface-800 with text-bluegray-900 => global theme override.
There was a problem hiding this comment.
@MartinKolarik since there is #61 (comment) could you please confirm that is ok? In 90% of the cases it is only fixing colors for dark theme (e.g. https://github.com/jsdelivr/globalping-dash/pull/59/files#diff-6fd410bbd76536ad0916987fb9292b0fcc746a5b7becc71554e20988d30979bc)
There was a problem hiding this comment.
Sure, fixing theme colors most likely applies to all occurrences of the component so preset.
|
| .notification p { | ||
| .notification-content-msg p { | ||
| margin-bottom: 18px; | ||
| word-break: break-all; | ||
| } | ||
|
|
||
| .notification p:last-child { | ||
| .notification-content-msg p strong { | ||
| word-break: break-all; | ||
| } | ||
|
|
||
| .notification-content-msg p:last-child { | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| .notification a { | ||
| .notification-content-msg a { | ||
| color: var(--p-primary-color); | ||
| font-weight: 600; | ||
| } | ||
|
|
||
| .n-popover[data-pc-name="popover"] { | ||
| @apply !rounded-xl; | ||
| @apply !overflow-hidden; | ||
| @apply absolute !ml-4 !mt-2; | ||
| } |
There was a problem hiding this comment.
This part should be done in tailwind as well.
| .n-popover[data-pc-name="popover"] > *[data-pc-section="content"] { | ||
| @apply flex items-center; | ||
| @apply !rounded-xl; | ||
| @apply border dark:border-[var(--table-border)]; | ||
| } |
There was a problem hiding this comment.
Here it can be done too via :pt={ content: { class: '...' } } on the popover component
|
|
||
| .notification-new-icon { | ||
| width: 8px; | ||
| height: 8px; | ||
| border-radius: 50%; | ||
| } | ||
|
|
||
| .n-accordion-panel[data-pc-name="accordionpanel"] { | ||
| @apply !rounded-xl; | ||
| } | ||
|
|
||
| .n-expand-chevron { | ||
| transition: all 400ms ease-out; | ||
| } | ||
|
|
||
| .n-accordion-panel [aria-expanded="true"] .n-expand-chevron { | ||
| transform: rotate(90deg); | ||
| } |
Fix #43