Feedback on changes to merge button

Issue #16868 resolved
Julia Lockin created an issue

Why did @Bitbucket change their merge PR button to a yellow color? Gives the user the impression they're merging conflicts.

Hey @Atlassian have you changed the normal "Merge" button to a "warning-like orange"? If so... WHY?

@Bitbucket just a question, the merge button on cloud version is now Yellow rather than the standard Call-to-action colour of navy blue. Are there any docs as to why? #bitbucketcloud #ux #ui

Comments (10)

  1. Philip Brown

    Seems this colour change applies to more than just the "Merge" button

    bitbucket.jpg

    Did somebody mess up the CSS for primary buttons?

  2. Amir Khassaia

    Made me do a double take and confirm it was not trying to tell me about conflicts, here I thought it was a handy UI feedback but instead a UX confusion.

    The amount of time wasted by devs globally will be interesting to consider 🤔

  3. Philip Brown

    In case this isn't clear, we're talking about the final "Merge" button that appears on the modal window / dialog that shows up when you want to finalise the PR.

    bitbucket.png

    This seems to be due to some global style change that effects dialog buttons.

    /* From adg3.css */
    body.adg3 .aui-dialog .dialog-button-panel button.button-panel-button {
        color: #091E42;
        background: #F4F5F7;
        border: none;
        box-sizing: border-box;
        margin-right: 4px;
        height: 32px;
        min-width: 24px;
        border-radius: 3px;
        text-shadow: none;
        padding: 4px 10px;
        background: #0052CC; /* <-- Blue */
        color: #FFF;
        background: #DE350B; /* <-- Red */
        color: #172B4D;
        background: #FFAB00; /* <-- Orange */
        transition: background .1s ease-out,box-shadow .15s cubic-bezier(.47,.03,.49,1.38);
        font-weight: 400;
        -webkit-font-smoothing: antialiased;
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
        margin-right: 10px
    }
    

    Really looks like something has gone wrong with all those overridden background directives.

    Please fix / revert it.

  4. Olubukola Adebanke Alabi

    Yea, the color change is surprising every time I want to merge. Feels like I'm setting off a bomb.

  5. Philip Brown

    I'm currently using the Stylebot Chrome extension with the below to fix this

    body.adg3 .aui-dialog .dialog-button-panel button.button-panel-button {
        background-color: #0052CC;
        color: #fff;
    }
    
    body.adg3 .aui-dialog .dialog-button-panel button.button-panel-button:active {
        background-color: #0747A6;
    }
    
    body.adg3 .aui-dialog .dialog-button-panel button.button-panel-button:hover {
        background-color: #0065FF;
    }
    
  6. Aneita Yang staff
    • changed status to open

    Hi everyone,

    Thanks for reaching out and sorry for the confusion.

    This is a bug on our end, and we hope to have a fix out shortly. Please continue to watch this ticket for updates.

  7. Log in to comment