Usercard style is broken

Hello :wave:

It seems the float-kit .popup-menu style is overriding the usercard specific style. It makes some conflict such as the Message, Chat etc… buttons style. The class popup-menu is added to .fk-d-menu which cause this.

Screenshot 2023-12-02 at 9.12.46

And the popup-menu background, border, shadow also appears.

Probably related commit: UX: improve btn-transparent styling by awesomerobot · Pull Request #24666 · discourse/discourse · GitHub

Thanks :slightly_smiling_face:

Removing popup-menu class fixes this issue. Possible quick fix is overriding the popup-menu on usercard.

It can be target with .popup-menu[data-identifier=card]

So something like this will recover the user card style
@mixin usercard-btn($btn-bg, $btn-color, $btn-bg-hover, $btn-color-hover) {
  background: var(--#{$btn-bg});
  .d-icon {
    color: var(--#{$btn-color});
    margin-right: 0.45em;
  }
  .discourse-no-touch & {
    &:focus,
    &:hover {
      background-color: var(--#{$btn-bg-hover});
      color: var(--#{$btn-color-hover});
      .d-icon {
        color: var(--#{$btn-color-hover});
      }
    }
  }
  .discourse-touch & {
    &:focus,
    &:hover {
      color: var(--#{$btn-color});
      .d-icon {
        color: var(--#{$btn-color});
      }
    }
  }
}

.popup-menu[data-identifier="card"] {
  background: none;
  border: none;
  .mobile-view & {
    z-index: z("max");
  }
  box-shadow: none;
  ul {
    li {
      border-bottom: none;
    }
  }
  .btn {
    justify-content: center;
    padding: 0.5em 0.65em;
    border-radius: var(--d-button-border-radius);
    margin-bottom: 5px;
    .d-icon {
      align-self: unset;
      margin-top: unset
    }
    &.btn-primary {
      @include usercard-btn(
        tertiary, 
        secondary, 
        tertiary-hover, 
        secondary
      );
    }
    &:not(.btn-primary) {
      @include usercard-btn(
        primary-low, 
        primary, 
        primary-medium, 
        secondary
      );
    }
  }
}
6 Likes

I think this has now been fixed in: :partying_face:

don usercard

3 Likes

This topic was automatically closed after 2 days. New replies are no longer allowed.