mattermost · crspeller · Nov 6, 2017 · Oct 30, 2017 · Oct 30, 2017 · Oct 30, 2017
diff --git a/components/change_url_modal.jsx b/components/change_url_modal.jsx
@@ -135,7 +135,7 @@ export default class ChangeUrlModal extends React.Component {
 
  if (this.props.serverError || this.state.urlError) {
  error = (
- <div className='form-group has-error'>
+ <div className='has-error'>
  <p className='input__help error'>
  {this.state.urlError || this.props.serverError}
  </p>
@@ -170,13 +170,13 @@ export default class ChangeUrlModal extends React.Component {
  />
  </div>
  <div className='form-group'>
- <label className='col-sm-2 form__label control-label'>
+ <label className='col-sm-3 form__label control-label'>
  <FormattedMessage
  id='change_url.urlLabel'
  defaultMessage='Channel URL'
  />
  </label>
- <div className='col-sm-10'>
+ <div className='col-sm-9'>
  <div className={urlClass}>
  <OverlayTrigger
  trigger={['hover', 'focus']}

diff --git a/components/channel_header/channel_header.jsx b/components/channel_header/channel_header.jsx
@@ -690,7 +690,7 @@ export default class ChannelHeader extends React.Component {
  headerTextElement = (
  <div
  id='channelHeaderDescription'
- className='channel-header__description light'
+ className='channel-header__description'
  >
  {dmHeaderIconStatus}
  {dmHeaderTextStatus}

diff --git a/components/delete_modal_trigger.jsx b/components/delete_modal_trigger.jsx
@@ -51,12 +51,12 @@ export default class DeleteModalTrigger extends React.Component {
  render() {
  return (
  <span>
- <a
- href='#'
+ <button
+ className='color--link style--none'
  onClick={this.handleOpenModal}
  >
  { this.triggerTitle }
- </a>
+ </button>
  <ConfirmModal
  show={this.state.showDeleteModal}
  title={this.modalTitle}

diff --git a/components/integrations/components/installed_command.jsx b/components/integrations/components/installed_command.jsx
@@ -108,15 +108,15 @@ export default class InstalledCommand extends React.PureComponent {
  if (this.props.canChange) {
  actions = (
  <div className='item-actions'>
- <a
- href='#'
+ <button
+ className='style--none color--link'
  onClick={this.handleRegenToken}
  >
  <FormattedMessage
  id='installed_integrations.regenToken'
  defaultMessage='Regenerate Token'
  />
- </a>
+ </button>
  {' - '}
  <Link to={`/${this.props.team.name}/integrations/commands/edit?id=${command.id}`}>
  <FormattedMessage

diff --git a/components/integrations/components/installed_oauth_app.jsx b/components/integrations/components/installed_oauth_app.jsx
@@ -158,40 +158,40 @@ export default class InstalledOAuthApp extends React.PureComponent {
  let showHide;
  if (this.state.clientSecret === FAKE_SECRET) {
  showHide = (
- <a
- href='#'
+ <button
+ className='style--none color--link'
  onClick={this.handleShowClientSecret}
  >
  <FormattedMessage
  id='installed_integrations.showSecret'
  defaultMessage='Show Secret'
  />
- </a>
+ </button>
  );
  } else {
  showHide = (
- <a
- href='#'
+ <button
+ className='style--none color--link'
  onClick={this.handleHideClientSecret}
  >
  <FormattedMessage
  id='installed_integrations.hideSecret'
  defaultMessage='Hide Secret'
  />
- </a>
+ </button>
  );
  }
 
  const regen = (
- <a
- href='#'
+ <button
+ className='style--none color--link'
  onClick={this.handleRegenerate}
  >
  <FormattedMessage
  id='installed_integrations.regenSecret'
  defaultMessage='Regenerate Secret'
  />
- </a>
+ </button>
  );
 
  let icon;

diff --git a/components/integrations/components/installed_outgoing_webhook.jsx b/components/integrations/components/installed_outgoing_webhook.jsx
@@ -184,15 +184,15 @@ export default class InstalledOutgoingWebhook extends React.PureComponent {
  if (this.props.canChange) {
  actions = (
  <div className='item-actions'>
- <a
- href='#'
+ <button
+ className='style--none color--link'
  onClick={this.handleRegenToken}
  >
  <FormattedMessage
  id='installed_integrations.regenToken'
  defaultMessage='Regen Token'
  />
- </a>
+ </button>
  {' - '}
  <Link to={`/${this.props.team.name}/integrations/outgoing_webhooks/edit?id=${outgoingWebhook.id}`}>
  <FormattedMessage

diff --git a/components/mfa/mfa_controller.jsx b/components/mfa/mfa_controller.jsx
@@ -24,8 +24,8 @@ export default class MFAController extends React.Component {
  if (window.mm_config.EnforceMultifactorAuthentication === 'true') {
  backButton = (
  <div className='signup-header'>
- <a
- href='#'
+ <button
+ className='style--none color--link'
  onClick={(e) => {
  e.preventDefault();
  emitUserLoggedOutEvent('/login');
@@ -36,7 +36,7 @@ export default class MFAController extends React.Component {
  id='web.header.logout'
  defaultMessage='Logout'
  />
- </a>
+ </button>
  </div>
  );
  } else {

diff --git a/components/new_channel_flow.jsx b/components/new_channel_flow.jsx
@@ -113,14 +113,16 @@ export default class NewChannelFlow extends React.Component {
  this.doOnModalExited();
  }
  }
- typeSwitched() {
+ typeSwitched(e) {
+ e.preventDefault();
  if (this.state.channelType === 'P') {
  this.setState({channelType: 'O'});
  } else {
  this.setState({channelType: 'P'});
  }
  }
- urlChangeRequested() {
+ urlChangeRequested(e) {
+ e.preventDefault();
  this.setState({flowState: SHOW_EDIT_URL});
  }
  urlChangeSubmitted(newURL) {

diff --git a/components/new_channel_modal/new_channel_modal.jsx b/components/new_channel_modal/new_channel_modal.jsx
@@ -167,27 +167,27 @@ export default class NewChannelModal extends React.PureComponent {
  }
 
  let createPublicChannelLink = (
- <a
- href='#'
+ <button
+ className='style--none color--link'
  onClick={this.props.onTypeSwitched}
  >
  <FormattedMessage
  id='channel_modal.publicChannel1'
  defaultMessage='Create a public channel'
  />
- </a>
+ </button>
  );
 
  let createPrivateChannelLink = (
- <a
- href='#'
+ <button
+ className='style--none color--link'
  onClick={this.props.onTypeSwitched}
  >
  <FormattedMessage
  id='channel_modal.privateGroup2'
  defaultMessage='Create a private channel'
  />
- </a>
+ </button>
  );
 
  if (!ChannelUtils.showCreateOption(Constants.OPEN_CHANNEL, this.props.isTeamAdmin, this.props.isSystemAdmin)) {

diff --git a/components/post_view/post_list.jsx b/components/post_view/post_list.jsx
@@ -525,17 +525,16 @@ export default class PostList extends React.PureComponent {
  );
  } else {
  topRow = (
- <a
+ <button
  ref='loadmoretop'
- className='more-messages-text theme'
- href='#'
+ className='more-messages-text theme style--none color--link'
  onClick={this.loadMorePosts}
  >
  <FormattedMessage
  id='posts_view.loadMore'
  defaultMessage='Load more messages'
  />
- </a>
+ </button>
  );
  }
 

diff --git a/components/search_bar.jsx b/components/search_bar.jsx
@@ -303,16 +303,15 @@ export default class SearchBar extends React.Component {
  <div
  className={'channel-header__icon ' + flagBtnClass}
  >
- <a
- href='#'
- type='button'
+ <button
  onClick={this.getFlagged}
+ className='style--none'
  >
  <span
  className='icon icon__flag'
  dangerouslySetInnerHTML={{__html: flagIcon}}
  />
- </a>
+ </button>
  </div>
  </OverlayTrigger>
  );

diff --git a/components/sidebar.jsx b/components/sidebar.jsx
@@ -943,14 +943,14 @@ export default class Sidebar extends React.Component {
  show={this.state.showTopUnread}
  onClick={this.scrollToFirstUnreadChannel}
  extraClass='nav-pills__unread-indicator-top'
- text={above}
+ content={above}
  />
  <UnreadChannelIndicator
  name='Bottom'
  show={this.state.showBottomUnread}
  onClick={this.scrollToLastUnreadChannel}
  extraClass='nav-pills__unread-indicator-bottom'
- text={below}
+ content={below}
  />
 
  <div

diff --git a/sass/base/_typography.scss b/sass/base/_typography.scss
@@ -18,6 +18,7 @@ a {
 }
 
 .color--link {
+ color: $link-color;
  cursor: pointer;
 
  &:hover,

diff --git a/sass/components/_modal.scss b/sass/components/_modal.scss
@@ -128,6 +128,7 @@
  .custom-textarea {
  border-color: $light-gray;
  color: inherit;
+ padding-right: 30px;
 
  &:focus {
  border-color: $light-gray;

diff --git a/sass/components/_search.scss b/sass/components/_search.scss
@@ -47,7 +47,7 @@
  @include border-radius(50px);
  border: 1px solid $light-gray;
  margin: 17px 10px 0 0;
- width: 229px;
+ width: 296px;
  }
 
  .sidebar--right & {

diff --git a/sass/layout/_headers.scss b/sass/layout/_headers.scss
@@ -181,6 +181,17 @@
  margin-top: 12px;
  white-space: nowrap;
 
+ .dropdown-toggle {
+ overflow: hidden;
+ text-align: left;
+ text-overflow: ellipsis;
+ width: 100%;
+
+ strong {
+ max-width: calc(100% - 65px);
+ }
+ }
+
  .header-dropdown__icon {
  color: $dark-gray;
  }
@@ -198,6 +209,7 @@
  }
 
  .channel-header__description {
+ cursor: pointer;
  height: 24px;
  margin-bottom: 3px;
  margin-top: 3px;
@@ -218,12 +230,14 @@
  &.light {
  @include opacity(.8);
  color: inherit;
- cursor: pointer;
 
  &:hover,
  &:focus {
  color: inherit;
- text-decoration: underline;
+
+ span {
+ text-decoration: underline;
+ }
  }
  }
 

diff --git a/sass/layout/_post.scss b/sass/layout/_post.scss
@@ -276,6 +276,7 @@
  margin: 5px 0 10px;
  outline: none;
  text-align: center;
+ width: 100%;
  }
 
  .new-messages__button {

diff --git a/sass/layout/_sidebar-menu.scss b/sass/layout/_sidebar-menu.scss
@@ -63,7 +63,8 @@
 
  .nav {
  > li {
- > a {
+ > a,
+ > button {
  background: none !important;
  color: inherit;
  font-size: 15px;

diff --git a/sass/utils/_variables.scss b/sass/utils/_variables.scss
@@ -11,6 +11,7 @@ $yellow: rgb(255, 255, 0);
 $light-gray: rgba(0, 0, 0, .15);
 $gray: rgba(0, 0, 0, .3);
 $dark-gray: rgba(0, 0, 0, .5);
+$link-color: rgb(35, 137, 215);
 
 // Page Variables
 $border-gray: 1px solid #ddd;

diff --git a/utils/utils.jsx b/utils/utils.jsx
@@ -1057,7 +1057,7 @@ export function displayEntireNameForUser(user) {
  return '';
  }
 
- let displayName = user.username;
+ let displayName = '@' + user.username;
  const fullName = getFullName(user);
 
  if (fullName && user.nickname) {