From 92d3f634cbd8f33d2e9f0348c0d877dd4aadbfc3 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Mon, 1 Dec 2025 22:45:36 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20fix=20some=20minor=20c?= =?UTF-8?q?olor=20and=20style=20issues?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When migrating to the new design system, some colors and style issues were identified. This commit addresses these issues by updating the styles to align with the new design guidelines, ensuring a consistent and visually appealing user experience. --- .../impress/public/assets/favicon-dsfr.png | Bin 992 -> 932 bytes .../components/BlockNoteToolBar/AIButton.tsx | 2 +- .../BlockNoteToolBar/MarkdownButton.tsx | 1 + .../doc-editor/components/comments/styles.tsx | 21 +++++++++--------- .../src/features/docs/doc-editor/styles.tsx | 4 ++-- 5 files changed, 15 insertions(+), 13 deletions(-) diff --git a/src/frontend/apps/impress/public/assets/favicon-dsfr.png b/src/frontend/apps/impress/public/assets/favicon-dsfr.png index 4c433bb5646adf2dfa4d7c8a3be812c0df896700..b926b15d6e624d322b1bb7e37e1a3a4079e5d73a 100644 GIT binary patch delta 894 zcmV-^1A+YD2c!ofiBL{Q4GJ0x0000DNk~Le0000c0000c2nGNE0H{6bu8|=%e>q7+ zK~#7FQt(L zRoxY3g?j_D>3`<&o>QkLOj5_0x=4Id;z>L|pJ%@J<{Jb2qd>St)chS6X26y5;m1ZW zK~sCggoJj$bCjCbggz?rfcm7ae@2Qx>Biw!Bg)g?OrA=~llN=8Jb;U!9`fMwAO9v- z@s$9od}S`o0jXcef=SY)TIJFk$bpeF=K4F;xr(!aKrI;*EP(roe{9zuNqNs-@s@%Q z;i$T5)Q!1&YM;Am+ae{vOkWP@)vxuHO_+q(!poi3ANsg8Q2UGj+Be-Xe-a~9i%=3+ zD#o!C+%XW)D3x4MX$D2CnV2+$s4ygA{UEG^CFCZi2wS9`B#OR&UOF<>S!j0GYz0d$ zViM-Zm%VNjyol5P23ei+8j-Vz2p$1hi{Mf}=LU5+)M=aMTTh zZO=yOwg;WwQMBENQ{ne2P;~(K?5O5h>8{PwRBmD-e(b6JTCWp?~V&vqFL~k?IBXb`kAg>8XsSOxuTlz^>thG1{ zA)!bg9A7|W%60p`Up<8fYeS@Xb?Nc*U@OW^EJdxkTOU+rRCgiQQRm8G?DH`ao1 UkunCE9smFU07*qoM6N<$f>#Z%wg3PC delta 955 zcmV;s14R6!2jB-GiBL{Q4GJ0x0000DNk~Le0000m0000m2nGNE09OL}hmj#Qe|1Sj zK~#7F?O9E7(=Zf%aytymvSTPexa}(MfVM) zAn-l_IOu}|JQ>hMVs|(|)B;TwfAFrTy^%kLwb6)oFem0TfQa42OU9StF{vl!u1O}( z=EV@;@E**G5(W_I^+P1Q2Zo$S$fp49OKN?+&-wPX5Je*b`)eW}oZt_4z&m-uS}SP< zf$W?=czjeeqQHQ)F6i~U97qM7Z<~+yY<&t0&`Pmf$Y9s@+F}4LpE{O}e;o=x;sxiq zqF|c=7bWq7Kj37*q7a~^(J$7)4MTJ3T{Ld1pSWP@Z<0a0xA9q*<2SkhkF)7wz!`2h zVadLYoPo>yR}|}vTk#H^ig*0M#Q@xudlWj**X2l(2*!$a19ijE2h=NQ2z;tg0)fun zM+e7fQ@+590=5BE1XmTxe?ov!CG-#V8%dI%q|_*j9`)OW3gBXZK!W=)A>A&iG&-uK zxM~N-zk!P2V!&r4eQNJ=s~TZjLe+3F;H6mt8XHE1SURD>`%P_Oh>HOniGG}Zq+nU7 z%883W4t^Sk8#sFbB`O>$K-C72Lkpuu(Rb4(HEN6LZatWtMK`z@e?TM$ao`pco=1`1 zhd8z{RV)h!1K1}lf0U5HywZxS)WIE{n8IZG;#6W8^Gtb#|1YnM!8aTXAWaW`n0Eca zTNZW1LSEs^0AYMZJGWQ3%IKw$O2QRHI|t*g1|_yU8vKFe#}MiV0>xgvVpt zOQhUUiiIj?nc^AQVEg)N&-PojoYW&>J{m$}A diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/AIButton.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/AIButton.tsx index 08239779..1fdadcde 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/AIButton.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/AIButton.tsx @@ -108,7 +108,7 @@ export function AIGroupButton() { data-test="ai-actions" label="AI" mainTooltip={t('AI Actions')} - icon={} + icon={} /> M diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/styles.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/styles.tsx index 324a86c5..0a87f632 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/styles.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/styles.tsx @@ -11,7 +11,7 @@ export const cssComments = ( .bn-thread-mark:not([data-orphan='true']), .bn-thread-mark-selected:not([data-orphan='true']) { background: ${canSeeComment ? '#EDB40066' : 'transparent'}; - color: var(--c--globals--colors--greyscale-700); + color: var(--c--globals--colors--gray-700); } } @@ -54,7 +54,7 @@ export const cssComments = ( & .bn-editor { padding-left: var(--c--globals--spacings--lg); .bn-inline-content { - color: var(--c--globals--colors--greyscale-700); + color: var(--c--globals--colors--gray-700); } } @@ -65,7 +65,7 @@ export const cssComments = ( padding: var(--c--globals--spacings--0) var(--c--globals--spacings--st); background: none; - border: 1px solid var(--c--globals--colors--greyscale-300); + border: 1px solid var(--c--globals--colors--gray-300); border-radius: var(--c--globals--spacings--st); height: var(--c--globals--spacings--md); } @@ -103,12 +103,12 @@ export const cssComments = ( background-color: transparent; &:hover { - background-color: var(--c--globals--colors--greyscale-100); + background-color: var(--c--globals--colors--gray-100); } } button[role='menuitem'] svg { - color: var(--c--globals--colors--greyscale-600); + color: var(--c--globals--colors--gray-600); } } @@ -137,7 +137,7 @@ export const cssComments = ( &[data-test='cancel'] { background: white; - border: 1px solid var(--c--globals--colors--greyscale-300); + border: 1px solid var(--c--globals--colors--gray-300); color: var(--c--globals--colors--info-600); } } @@ -186,13 +186,14 @@ export const cssComments = ( padding: var(--c--globals--spacings--0); &:disabled { - background: var(--c--globals--colors--greyscale-300); + background: var(--c--globals--colors--gray-300); } & .mantine-Button-label::before { - content: '🡡'; - font-size: 13px; - color: var(--c--globals--colors--greyscale-100); + content: 'arrow_upward_alt'; + font-family: 'Material Symbols Outlined Variable', sans-serif; + font-size: 18px; + color: var(--c--globals--colors--gray-100); } } } diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx index 3e4f1efb..6c9c1645 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx @@ -8,7 +8,7 @@ export const cssEditor = css` } & .bn-editor { - color: var(--c--globals--colors--greyscale-700); + color: var(--c--globals--colors--gray-700); } /** @@ -127,7 +127,7 @@ export const cssEditor = css` font-size: 1.25rem; } a { - color: var(--c--globals--colors--greyscale-600); + color: var(--c--globals--colors--gray-600); cursor: pointer; } .bn-block-group