In Drupal modal close button icon colour is different from design.

Created on 7 December 2023, 7 months ago
Updated 11 January 2024, 6 months ago

Problem/Motivation

Remove button icon colour is black which does not match with the button colour also on hover the button colour is not visible. See the screenshot for clarity.

Steps to reproduce

  1. Install the theme and enable it.
  2. Add media field and upload an image.
  3. See remove icon colour.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

๐Ÿ› Bug report
Status

RTBC

Version

3.0

Component

Code

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @shweta__sharma
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia ravi kant Jaipur

    ravi kant โ†’ made their first commit to this issueโ€™s fork.

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Meeni_Dhobale

    Hi, this "X" button is added by the Media module. This module overrides the base Gin theme CSS. I tried to find the exact button design with the icon but didn't get it anywhere.

    However, We can override that Media file CSS to stay consistent overall.

    Otherwise, we have to change
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23000000' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e");

    with our expected fill colour.

  • Status changed to Needs review 6 months ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia ravi kant Jaipur

    I have fixed the issue and created MR.

  • Status changed to RTBC 6 months ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia divya.sejekan

    Verified the issue by applying ' 3406726-in-drupal-modal ' Issue is resolved

    Testing steps :
    1. Install the Gin theme and enable it.
    2. Enable media and media library modules
    3. Add media field to a CT and upload an image.
    3. See remove icon colour.

    Remove button verified both for Hover and default state . Moving issue to RTBC ++

Production build 0.69.0 2024