Problem

The design of the remove button within the media modal does not conform to the design of the remove button established by the theme.

Steps to Reproduce

  • Install and set the theme as the Administration theme.
  • Ensure that a media & image field is present in the Content Type; if not, add both fields.
  • Add a media file in the media field while adding/editing the content.
  • Compare the design of the remove button with the image fields.

Remove btn design

CommentFileSizeAuthor
#13 after-remove-btn-hover.png290.79 KBesha_kundu
#13 after-remove-btn.png290.09 KBesha_kundu
#13 before-remove-btn-hover.png289.59 KBesha_kundu
#13 before-remove-btn.png286.89 KBesha_kundu
#12 without patch.png27.62 KBkanchan bhogade
#11 withoutpatch.png399.92 KBsdhruvi5142
#10 non-hovered.png351.27 KBkpap
#10 hovered.png351.05 KBkpap
#7 Capture d’écran du 2024-04-05 15-52-23.png80.21 KBaimadbachar
#6 Screenshot from 2024-04-03 17-58-48.png160.51 KBhritick
#2 Remove-button-seven.png336.77 KBrinku jacob 13
#2 Remove-button-claro.png222.51 KBrinku jacob 13
Screenshot at Feb 08 11-47-58.png197.33 KBshweta__sharma

Issue fork adminimal_theme-3419950

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

shweta__sharma created an issue. See original summary.

rinku jacob 13’s picture

rinku jacob 13 commented
StatusFileSize
new Remove-button-claro.png222.51 KB
new Remove-button-seven.png336.77 KB

Hi @shweta__sharma, Base theme of adminal theme is seven. so remove button color is inherited from seven theme.
do we need to follow any theme/design to style remove button?
for the example in claro theme they are used different style for remove button compared to other buttons. so can you please give any suggestion to style that.

shivamsen_12579 made their first commit to this issue’s fork.

Hritick made their first commit to this issue’s fork.

Hritick opened merge request !13

hritick’s picture

hritick commented
Issue summary: View changes
StatusFileSize
new Screenshot from 2024-04-03 17-58-48.png160.51 KB

issue resolved image

I have fixed the issue and attached a screenshot as reference

aimadbachar’s picture

aimadbachar commented
StatusFileSize
new Capture d’écran du 2024-04-05 15-52-23.png80.21 KB

Hello,
The patch works and displays the button when adding media, thanks.

misterdidi’s picture

misterdidi commented
Status: Active » Needs review
kpap’s picture

kpap commented
Assigned: Unassigned » kpap
kpap’s picture

kpap commented
StatusFileSize
new hovered.png351.05 KB
new non-hovered.png351.27 KB

Previous changes seemed to not match adminimal's style guide.
Fixed it in my latest commit.

sdhruvi5142’s picture

sdhruvi5142 commented
StatusFileSize
new withoutpatch.png399.92 KB

Hi,

Without applying any patch on drupal 10.3, I don't see any color issue on Remove button, its color looks proper as per the theme. Adding screenshot for reference.

Please share steps if anyone is facing issue. This require further review so keeping this issue in Need Review.

Thanks

kanchan bhogade’s picture

kanchan bhogade commented
StatusFileSize
new without patch.png27.62 KB

Hi
I have tried to reproduce issue on Drupal 10.3.x with Adminimal theme version 8.x.1.x dev
but no color issue occurs remove button, button color already compatible..

Attaching screenshot for reference

esha_kundu’s picture

esha_kundu commented
Assigned: kpap » Unassigned
Issue summary: View changes
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new before-remove-btn.png286.89 KB
new before-remove-btn-hover.png289.59 KB
new after-remove-btn.png290.09 KB
new after-remove-btn-hover.png290.79 KB

Hello,
I've reviewed the issue following the steps mentioned below:

  1. Installed theme version 8.x-1.7 in Drupal version 10.4.7.
  2. Set this theme as the Administration theme.
  3. Ensure that a media & image field is present in the Content Type; if not, add both the fields.
  4. On the add/edit page of a content, add a media file in the media field.
  5. A modal opens with a cross icon representing the remove button, which differs significantly from the remove button that appears for the image field in this theme.
  6. Applied the MR!13 cleanly.
  7. Repeated step 4 and found the button similar to that of the image field. The hover is also aligned with the buttons in this theme.

Attaching SS for reference. I am also updating the issue summary for improved clarity. Moving to RTBC.
Thanks

esha_kundu’s picture

esha_kundu commented
Issue summary: View changes