JunkiEDM/scultradark

Upgrade Now behind Profile

luizsvdev opened this issue · 3 comments

luizsvdev commented

The "Upgrade Now" button is currently positioned behind the "Profile" button in the sidebar. I fixed this issue by applying the following CSS:

.creatorSubscriptionsButton {
    display: none;
}

This will hide the button completely. If you prefer to relocate it instead of hiding it, you can adjust its positioning using CSS. However, in my case, simply applying the code above was enough to resolve the issue.

Before:
Image

After:
Image

JunkiEDM commented

Thanks for reporting, I don't see this on both my subscribed and unsubscribed accounts, do you mind sending the header html so I can fix this for the next version? (document.querySelector('#app header').innerHTML)

luizsvdev commented

Sure, here is the HTML header:

<div class="header__inner l-container l-fullwidth">
  <div class="header__left">
    <div class="header__logo left m-loggedIn">
      <a href="/" title="Home" class="header__logoLink header__logoLink-iconOnly sc-border-box sc-ir">
      SoundCloud
      </a>
      <a href="/" title="Home" class="header__logoLink header__logoLink-wordmark sc-border-box sc-ir">
      SoundCloud
      </a>
    </div>
    <nav class="left header__navWrapper" role="navigation">
      <ul class="header__navMenu left sc-list-nostyle">
        <li>
          <a class="header__navMenuItem sc-mr-1x" data-menu-name="home" href="/discover">Home</a>
        </li>
        <li>
          <a class="header__navMenuItem sc-mr-1x" data-menu-name="stream" href="/feed">Feed</a>
        </li>
        <li class="header__collection-wrapper">
          <a class="header__navMenuItem" data-menu-name="library" href="/you/library">Library</a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="header__middle">
    <div class="header__search" role="search">
      <form class="headerSearch"><input class="headerSearch__input sc-input g-all-transitions-300" placeholder="Search" type="search" name="q" autocomplete="off" aria-label="Search" aria-autocomplete="list" aria-owns="searchMenuList">
  <button class="headerSearch__submit sc-ir" type="submit">Search</button>
</form>
    </div>
  </div>
  <div class="header__right sc-clearfix">

      <div class="header__upsellWrapper left">
    <button type="button" class="creatorSubscriptionsButton header__creatorUpsell sc-button sc-button-medium sc-button-responsive header__button" tabindex="0" title="" aria-label="" style="background-color: rgb(0, 0, 0); border-color: rgb(255, 85, 0); color: rgb(255, 255, 255);">Upgrade now</button>
</div>

    
        <a class="header__link header__forArtistsButton" href="https://artists.soundcloud.com/overview" target="_blank">For Artists</a>

      <div class="header__soundInput left">
          <a href="/upload" class="uploadButton header__link" tabindex="0"><span class="uploadButton__title sc-text-secondary">Upload</span><span class="uploadButton__status sc-text-primary"></span></a>
      </div>
      <div class="header__userNav">
        <a href="/luizsivan" class="header__userNavButton header__userNavUsernameButton" data-test-id="user-nav-btn" tabindex="0" aria-haspopup="true" role="button" aria-owns="dropdown-button-129">
          <div class="image header__userNavItem header__userNavAvatar image__lightOutline sc-artwork sc-artwork-placeholder-1 image__rounded m-loaded" style="height: 26px; width: 26px;">
<span style="background-image: url(&quot;https://i1.sndcdn.com/avatars-8vsS8UzhVkYUU6TV-4X3YqA-t50x50.jpg&quot;); width: 26px; height: 26px; opacity: 1;" class="sc-artwork  sc-artwork-placeholder-1 image__rounded image__full g-opacity-transition" aria-label="lviz.’s avatar" aria-role="img"></span>
</div>
        </a>
        <a href="/notifications" class="header__userNavItem header__userNavButton header__userNavActivitiesButton" tabindex="0" aria-haspopup="true" role="button" aria-owns="dropdown-button-127">
          <div class="notificationIcon activities newItems__some">  <span class="sc-ir">Notifications</span>
<span class="notificationIcon__badge">
  <span class="newItemBadge newItems__some"></span>
</span>
</div>
        </a>
        <a href="/messages" class="header__userNavItem header__userNavButton header__userNavMessagesButton" tabindex="0" aria-haspopup="true" role="button" aria-owns="dropdown-button-125">
          <div class="notificationIcon messages newItems__some">  <span class="sc-ir">Messages</span>
<span class="notificationIcon__badge">
  <span class="newItemBadge newItems__some"></span>
</span>
</div>
        </a>
      </div>
    <ul class="header__navMenu sc-clearfix sc-list-nostyle left">
      <li>
          <a href="" class="header__moreButton sc-ir" tabindex="0" aria-haspopup="true" role="button" aria-owns="dropdown-button-131">Settings and more</a>
      </li>
    </ul>
  </div>
</div>
JunkiEDM commented

Thanks! Should be fixed now

  • 🎉1