tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix(richtext-lexical): table dropdown menu dark mode color (#8368)

Browse Source 
This PR supports dark mode for the tables dropdown menu (currently only
available in light mode).

I copied the colors from
[slash-menu-popup](https://github.com/payloadcms/payload/blob/beta/packages/richtext-lexical/src/lexical/plugins/SlashMenu/index.scss)
to keep things consistent.

Below are screenshots of the change. I also show the slash-menu-popup to
compare color consistency, and the light mode to verify that it's not
broken.

## Before


![image](https://github.com/user-attachments/assets/a709bf8c-1dc2-47ac-8310-5cd1776cb268)


## After


![image](https://github.com/user-attachments/assets/e6df6693-793d-4afb-8dcc-2ead5ac62ca9)

![image](https://github.com/user-attachments/assets/7604fdcd-34d0-4801-96c2-ae5ca92357d9)

![image](https://github.com/user-attachments/assets/3bd2c877-2567-44dd-89fe-cc565988f72a)

![image](https://github.com/user-attachments/assets/813693ea-ddbe-45f5-8f98-5c9c8c58c082)
This commit is contained in:
Germán Jabloñski
2024-09-23 15:03:14 -03:00
committed by GitHub
parent fbc395b692
commit bd41b4d7d2
1 changed files with 17 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/richtext-lexical/src/features/experimental_table/client/plugins/TableActionMenuPlugin/index.scss
View File

@@ -24,7 +24,9 @@
html[data-theme='light'] {
.table-action-menu-dropdown {
@include shadow-m;
box-shadow:
0px 1px 2px 1px rgba(0, 0, 0, 0.05),
0px 4px 8px 0px rgba(0, 0, 0, 0.1);
}
}
@@ -32,17 +34,26 @@ html[data-theme='light'] {
z-index: 100;
display: block;
position: fixed;
background: var(--color-base-0);
background: var(--theme-input-bg);
min-width: 160px;
color: var(--color-base-800);
border-radius: $style-radius-m;
min-height: 40px;
overflow-y: auto;
box-shadow:
0px 1px 2px 1px rgba(0, 0, 0, 0.1),
0px 4px 16px 0px rgba(0, 0, 0, 0.2),
0px -4px 8px 0px rgba(0, 0, 0, 0.1);
hr {
border: none;
height: 1px;
background-color: var(--theme-elevation-200);
}
.item {
padding: 8px;
color: var(--color-base-900);
background: var(--color-base-0);
color: var(--theme-elevation-900);
background: var(--theme-input-bg);
cursor: pointer;
font-size: 13px;
font-family: var(--font-body);
@@ -56,7 +67,7 @@ html[data-theme='light'] {
width: 100%;
&:hover {
background: var(--color-base-100);
background: var(--theme-elevation-100);
}
}
}