Merge pull request #8449 from weseek/fix/139604-140059-dropup-header-style

fix: Fix Dropup menu style

packages/core/scss/bootstrap/_variables.scss

@@ -115,6 +115,7 @@ $font-family-base: $font-family-sans-serif;
 // $dropdown-link-disabled-color: $gray-500;
 // $dropdown-header-color: $gray-500;
 // $dropdown-box-shadow: 0 0.5rem 0.7rem rgba(black, 0.1);
+$dropdown-header-padding-y:         0 !default;
 
 //== Popovers
 // $popover-border-radius: $border-radius;

packages/editor/src/components/CodeMirrorEditor/Toolbar/AttachmentsButton.tsx

@@ -16,7 +16,7 @@ export const AttachmentsButton = (props: Props): JSX.Element => {
   if (acceptedFileType === AcceptedUploadFileType.ALL) {
     return (
       <>
-        <DropdownItem className="d-flex gap-1 align-items-center" onClick={onFileOpen}>
+        <DropdownItem className="d-flex gap-2 align-items-center" onClick={onFileOpen}>
           <span className="material-symbols-outlined fs-5">attach_file</span>
           Files
         </DropdownItem>
@@ -26,7 +26,7 @@ export const AttachmentsButton = (props: Props): JSX.Element => {
   if (acceptedFileType === AcceptedUploadFileType.IMAGE) {
     return (
       <>
-        <DropdownItem className="d-flex gap-1 align-items-center" onClick={onFileOpen}>
+        <DropdownItem className="d-flex gap-2 align-items-center" onClick={onFileOpen}>
           <span className="material-symbols-outlined fs-5">image</span>
           Images
         </DropdownItem>

packages/editor/src/components/CodeMirrorEditor/Toolbar/AttachmentsDropup.tsx

@@ -27,8 +27,7 @@ export const AttachmentsDropup = (props: Props): JSX.Element => {
           <span className="material-symbols-outlined fs-6">add</span>
         </DropdownToggle>
         <DropdownMenu>
-          <DropdownItem className="d-flex gap-1 align-items-center" header>
-            <span className="material-symbols-outlined fs-5">add_circle_outline</span>
+          <DropdownItem className="mt-1" header>
             Attachments
           </DropdownItem>
           <DropdownItem divider />

packages/override/_dropdown.scss

@@ -0,0 +1,11 @@
+:root[data-bs-theme='light'] {
+  .dropdown-menu {
+    --#{$prefix}dropdown-header-color: var(--grw-gray-500);
+  }
+}
+
+:root[data-bs-theme='dark'] {
+  .dropdown-menu {
+    --#{$prefix}dropdown-header-color: var(--grw-gray-600);
+  }
+}