Ambigous toggle buttons in Email Settings

Issue Description

Inorder to disable or enable notification emails, the user is expected to toggle the options in the Email Settings page. However the toggle buttons are ambigous and does not clearly convey whether the On or Off implies that the emails are currently enabled or disabled. The fact that the unsubscribe links from emails errors out when not logged in does not help matters much either.

Suggested Solution

Buttons with text like Enabled/Disabled with suggestive colors might be the more user friendly way to go.

[ZacharyKearns]

@vs1682 Changing them to a smaller size did not stop them from breaking unfortunately.

@BerkeleyTrue Here are screenshots for the final version as well as the css that was added to the main.less file and one of the ToggleButtonGroup’s. The new code passed all the tests.

Just want to note that there seems to be a major issue with the layout of the settings page.

Because the content is not wrapped in a traditional bootstrap container the negative margins on the rows are causing the elements to be 30px wider than the width of the viewport which is causing horizontal scrolling.

.email-settings {
  @media (max-width: 768px) {
    text-align: center;
  }
}

.toggle-btn-group {
  float: right;
  @media (max-width: 768px) {
    float: none;
    .btn-toggle {
      margin-top: 15px;
      margin-bottom: 25px;
    }
  }
}

<ToggleButtonGroup
  className='toggle-btn-group'
  name='montly-email'
  onChange={ toggleMonthlyEmail }
  type='radio'
  >
  <ToggleButton
    bsSize='lg'
    bsStyle='primary'
    className={
      classnames(
        'positive-20',
        { active: sendMonthlyEmail },
        'btn-toggle'
      )
    }
    type='radio'
    value={ 1 }
    >
    On
  </ToggleButton>
  <ToggleButton
    bsSize='lg'
    bsStyle='primary'
    className={
      classnames(
        'positive-20',
        { active: !sendMonthlyEmail },
        'btn-toggle'
      )
    }
    type='radio'
    value={ 2 }
    >
    Off
  </ToggleButton>
</ToggleButtonGroup>

This view is for tablets and desktops

This view is for smartphones

If there are any problems please let me know before I issue a pull request.

This is my first contribution so be gentle haha.

[ZacharyKearns]

I have started working on this. Here a screenshot of what I have so far.

They do break at certain screen widths

Still working on making them functional