src/app/modules/pro/channel/channel.component.html

-<div class="m-pro--channel" *ngIf="channel">
+<div class="m-pro__channel" *ngIf="channel">
  <div class="m-proChannel__topbar">
  <img
  class="m-proChannelTopbar__logo"
@@ -6,7 +6,7 @@
  [routerLink]="homeRouterLink"
  />
 
- <div class="m-proChannelTopbar__SearchBox">
+ <div class="m-proChannelTopbar__searchBox">
  <m-pro__searchBox
  [(query)]="query"
  (onSearch)="search()"

src/app/modules/pro/channel/channel.component.scss

@@ -59,8 +59,8 @@ m-pro--channel {
 }
 
 @media screen and (max-width: $max-mobile) {
- .m-pro--channel {
- .m-proChannelTopbar__SearchBox {
+ .m-pro__channel {
+ .m-proChannelTopbar__searchBox {
  display: none;
  }
 
@@ -70,7 +70,7 @@ m-pro--channel {
  }
 }
 
-.m-pro--channel {
+.m-pro__channel {
  max-width: 1296px;
  margin: 0 auto;
  display: grid;
@@ -107,7 +107,7 @@ m-pro--channel {
  padding: 0 16px 0 0;
  }
 
- .m-proChannelTopbar__SearchBox {
+ .m-proChannelTopbar__searchBox {
  margin: 0 16px;
 
  @media screen and (max-width: 1081px) {

src/app/modules/pro/channel/hamburger-menu/hamburger-menu.component.html

-<a class="m-pro__hamburger-menu__trigger" (click)="toggleMenu()">
+<a class="m-proHamburgerMenu__trigger" (click)="toggleMenu()">
  <i class="material-icons">menu</i>
 </a>
 
-<div class="m-pro__hamburger-menu__menu">
- <a class="m-pro__hamburger-menu__close" (click)="closeMenu()">
+<div class="m-proHamburgerMenu__menu">
+ <a class="m-proHamburgerMenu__close" (click)="closeMenu()">
  <i class="material-icons">close</i>
  </a>
 
  <ul>
- <li class="m-pro__hamburger-menu-menu__logo" *ngIf="channel">
+ <li class="m-proHamburgerMenu__logo" *ngIf="channel">
  <img
  [routerLink]="homeRouterLink"
  [src]="channel.pro_settings.logo_image"
@@ -17,7 +17,7 @@
  </li>
 
  <li
- class="m-pro__hamburger-menu-menu__subscribe"
+ class="m-proHamburgerMenu__subscribe"
  *ngIf="currentUser?.guid != channel?.guid"
  >
  <m-pro__subscribeButton (onAction)="closeMenu()"></m-pro__subscribeButton>
@@ -26,7 +26,7 @@
  <li>
  <a
  [routerLink]="feedRouterLink"
- routerLinkActive="m-pro__hamburger-menu-menu__item--active"
+ routerLinkActive="m-proHamburgerMenu__item--active"
  (click)="closeMenu()"
  i18n
  >Feed</a
@@ -36,7 +36,7 @@
  <li>
  <a
  [routerLink]="videosRouterLink"
- routerLinkActive="m-pro__hamburger-menu-menu__item--active"
+ routerLinkActive="m-proHamburgerMenu__item--active"
  (click)="closeMenu()"
  i18n
  >Videos</a
@@ -46,7 +46,7 @@
  <li>
  <a
  [routerLink]="imagesRouterLink"
- routerLinkActive="m-pro__hamburger-menu-menu__item--active"
+ routerLinkActive="m-proHamburgerMenu__item--active"
  (click)="closeMenu()"
  i18n
  >Images</a
@@ -56,7 +56,7 @@
  <li>
  <a
  [routerLink]="articlesRouterLink"
- routerLinkActive="m-pro__hamburger-menu-menu__item--active"
+ routerLinkActive="m-proHamburgerMenu__item--active"
  (click)="closeMenu()"
  i18n
  >Articles</a
@@ -66,7 +66,7 @@
  <li>
  <a
  [routerLink]="groupsRouterLink"
- routerLinkActive="m-pro__hamburger-menu-menu__item--active"
+ routerLinkActive="m-proHamburgerMenu__item--active"
  (click)="closeMenu()"
  i18n
  >Groups</a
@@ -79,7 +79,7 @@
  </a>
  </li>
 
- <li class="m-pro__hamburger-menu-menu__search-box">
+ <li class="m-proHamburgerMenu__searchBox">
  <m-pro__searchBox
  [query]="query"
  (queryChange)="queryChange.emit($event)"
@@ -88,18 +88,18 @@
  ></m-pro__searchBox>
  </li>
 
- <li class="m-pro__hamburger-menu-menu__spacer"></li>
+ <li class="m-proHamburgerMenu__spacer"></li>
 
  <ng-container *ngIf="items && items.length">
  <li *ngFor="let item of items">
  <a
- [class.m-pro__hamburger-menu-menu__item--active]="item.isActive()"
+ [class.m-proHamburgerMenu__item--active]="item.isActive()"
  (click)="item.onClick(); closeMenu()"
  >{{ item.label }}</a
  >
  </li>
 
- <li class="m-pro__hamburger-menu-menu__spacer"></li>
+ <li class="m-proHamburgerMenu__spacer"></li>
  </ng-container>
  </ul>
 

src/app/modules/pro/channel/hamburger-menu/hamburger-menu.component.scss

 m-pro__hamburger-menu {
  position: relative;
 
- .m-pro__hamburger-menu__menu {
+ .m-proHamburgerMenu__menu {
  right: -110%;
  visibility: hidden;
 
@@ -21,7 +21,7 @@ m-pro__hamburger-menu {
  visibility: visible;
  }
 
- .m-pro__hamburger-menu__close {
+ .m-proHamburgerMenu__close {
  position: absolute;
  top: 30px;
  right: 40px;
@@ -49,7 +49,7 @@ m-pro__hamburger-menu {
  font-weight: 700;
  letter-spacing: 1px;
 
- &.m-pro__hamburger-menu-menu__logo {
+ &.m-proHamburgerMenu__logo {
  height: 100px;
 
  > img {
@@ -59,7 +59,7 @@ m-pro__hamburger-menu {
  }
  }
 
- &.m-pro__hamburger-menu-menu__subscribe {
+ &.m-proHamburgerMenu__subscribe {
  padding: 0 0 16px;
  text-align: center;
 
@@ -69,7 +69,7 @@ m-pro__hamburger-menu {
  }
  }
 
- &.m-pro__hamburger-menu-menu__search-box {
+ &.m-proHamburgerMenu__searchBox {
  > m-pro__searchbox {
  width: 100%;
  display: block;
@@ -82,7 +82,7 @@ m-pro__hamburger-menu {
  }
  }
 
- &.m-pro__hamburger-menu-menu__spacer {
+ &.m-proHamburgerMenu__spacer {
  height: 0;
  border-top: 1px solid var(--m-pro--text-color);
  margin: 16px 0;
@@ -94,7 +94,7 @@ m-pro__hamburger-menu {
  padding: 12px 0;
  display: block;
 
- &.m-pro__hamburger-menu-menu__item--active {
+ &.m-proHamburgerMenu__item--active {
  color: var(--m-pro--primary-color) !important;
  }
  }

src/app/modules/pro/channel/home/home.component.html

-<div class="m-pro--channel-home">
+<div class="m-proChannel__home">
  <m-pro--channel--categories
  [showAllTag]="false"
  [selectedHashtag]="''"
  (onSelectTag)="navigateToCategory($event)"
  ></m-pro--channel--categories>
 
- <div class="m-pro--channel-home--section" *ngIf="featuredContent?.length">
- <div class="m-pro--channel-home--featured-content">
+ <div class="m-proChannelHome__section" *ngIf="featuredContent?.length">
+ <div class="m-proChannelHome__featuredContent">
  <m-pro--channel-tile
  *ngFor="let entity of featuredContent"
  [entity]="entity"
@@ -15,14 +15,14 @@
  </div>
  </div>
 
- <div class="m-pro--channel-home--section" *ngFor="let category of categories">
+ <div class="m-proChannelHome__section" *ngFor="let category of categories">
  <h2 i18n>
  <a [routerLink]="getCategoryRoute(category.tag?.tag)">{{
  category.tag?.label
  }}</a>
  </h2>
 
- <div class="m-pro--channel-home--category-content">
+ <div class="m-proChannelHome__categoryContent">
  <ng-container *ngFor="let entity$ of category?.content">
  <m-pro--channel-tile
  *ngIf="entity$ | async as entity"
@@ -33,7 +33,7 @@
  </div>
  </div>
 
- <div class="m-pro--channel-home--loader" *ngIf="inProgress">
+ <div class="m-proChannelHome__loader" *ngIf="inProgress">
  <div class="mdl-spinner mdl-js-spinner is-active" [mdl]></div>
  </div>
 </div>

src/app/modules/pro/channel/home/home.component.scss

-m-pro--channel-home {
+m-proChannel__home {
  display: block;
  padding: 0 32px;
 }
 
-.m-pro--channel-home {
+.m-proChannel__home {
  m-pro--channel--categories {
  margin: 16px 0 32px;
 
@@ -12,7 +12,7 @@ m-pro--channel-home {
  }
  }
 
- .m-pro--channel-home--section {
+ .m-proChannelHome__section {
  margin-bottom: 72px;
 
  &:last-child {
@@ -36,13 +36,13 @@ m-pro--channel-home {
  }
  }
 
- .m-pro--channel-home--loader {
+ .m-proChannelHome__loader {
  text-align: center;
  margin: 32px auto;
  }
 
- .m-pro--channel-home--featured-content,
- .m-pro--channel-home--category-content {
+ .m-proChannelHome__featuredContent,
+ .m-proChannelHome__categoryContent {
  width: 80%;
  margin: 0 auto;
  display: grid;
@@ -53,7 +53,7 @@ m-pro--channel-home {
  }
  }
 
- .m-pro--channel-home--featured-content {
+ .m-proChannelHome__featuredContent {
  grid-template-columns: repeat(2, 1fr);
 
  *:nth-child(1) {
@@ -69,7 +69,7 @@ m-pro--channel-home {
  }
  }
 
- .m-pro--channel-home--category-content {
+ .m-proChannelHome__categoryContent {
  grid-template-columns: repeat(2, 1fr);
 
  @media screen and (max-width: $max-mobile) {

src/app/modules/pro/channel/login/login.component.html

-<section class="m-ProChannelLogin--hero">
- <div class="m-ProChannelLogin--hero--inner">
- <div class="m-ProChannelLogin--hero--slogans">
+<section class="m-proChannelLogin__hero">
+ <div class="m-proChannelLoginHero__inner">
+ <div class="m-proChannelLoginHero__slogans">
  <h2>{{ settings?.headline }}</h2>
  </div>
 
- <div class="m-ProChannelLogin--login">
+ <div class="m-proChannelLogin__form">
  <ng-container *ngIf="currentSection === 'login'">
- <span class="m-proChannelLogin--subtext">
+ <span class="m-proChannelLogin__subtext">
  Not on {{ settings?.title }}?
  <a (click)="currentSection = 'register'">Start a Minds channel</a>
  </span>
@@ -15,7 +15,7 @@
  </ng-container>
 
  <ng-container *ngIf="currentSection === 'register'">
- <span class="m-proChannelLogin--subtext">
+ <span class="m-proChannelLogin__subtext">
  <a (click)="currentSection = 'login'">
  I already have a Minds account
  </a>

src/app/modules/pro/channel/login/login.component.scss

@@ -9,11 +9,11 @@ m-pro--channel-login {
  }
 }
 
-.m-ProChannelLogin--hero {
+.m-proChannelLogin__hero {
  position: relative;
  width: 100%;
 
- .m-ProChannelLogin--hero--inner {
+ .m-proChannelLoginHero__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
@@ -55,7 +55,7 @@ m-pro--channel-login {
  }
  }
 
- .m-ProChannelLogin--hero--video {
+ .m-proChannelLogin__hero--video {
  position: absolute;
  bottom: 0;
  left: 0;
@@ -71,7 +71,7 @@ m-pro--channel-login {
  }
  }
 
- .m-ProChannelLogin--hero--overlay {
+ .m-proChannelLogin__hero--overlay {
  position: absolute;
  top: 0;
  left: 0;
@@ -83,7 +83,7 @@ m-pro--channel-login {
  }
  }
 
- .m-ProChannelLogin--hero--slogans {
+ .m-proChannelLoginHero__slogans {
  flex-grow: 1;
  z-index: 2;
 
@@ -137,7 +137,7 @@ m-pro--channel-login {
  }
  }
 
- .m-ProChannelLogin--login {
+ .m-proChannelLogin__form {
  flex: 1;
  margin-left: 16px;
  z-index: 2;
@@ -149,7 +149,7 @@ m-pro--channel-login {
  min-width: initial;
  }
 
- .m-proChannelLogin--subtext {
+ .m-proChannelLogin__subtext {
  display: block;
  margin: 0 8px;
  font-size: 20px;

src/app/modules/pro/channel/subscribe-button/subscribe-button.component.html

@@ -3,7 +3,7 @@
  [class.m-pro__subscribeButton--subscribed]="subscribed"
  (click)="toggleSubscription(); $event.preventDefault()"
 >
- <span class="m-pro__subscribeButton--label">
+ <span class="m-proSubscribeButton__label">
  <ng-container *ngIf="!subscribed; else subscribedActionButton" i18n>
  Subscribe
  </ng-container>
@@ -12,7 +12,7 @@
  </ng-template>
  </span>
 
- <span class="m-pro__subscribeButton--counter">
+ <span class="m-proSubscribeButton__counter">
  {{ count | abbr: 0 }}
  </span>
 </button>

src/app/modules/pro/channel/subscribe-button/subscribe-button.component.scss

@@ -18,11 +18,11 @@
  color: var(--m-pro--text-color);
  }
 
- .m-pro__subscribeButton--label {
+ .m-proSubscribeButton__label {
  opacity: 0.85;
  }
 
- .m-pro__subscribeButton--counter {
+ .m-proSubscribeButton__counter {
  margin-left: 0.65em;
  }
 }

src/app/modules/pro/channel/subscription/subscription.component.html

@@ -19,13 +19,13 @@
  Cancel Pro
  </button>
 
- <span *ngIf="error" class="m-pro-subscription--error">
+ <span *ngIf="error" class="m-proSubscription__error">
  {{ error }}
  </span>
  </ng-container>
 
  <ng-template #inProgressSpinner>
- <div class="m-pro-subscription--in-progress">
+ <div class="m-proSubscription__inProgress">
  <div class="mdl-spinner mdl-js-spinner is-active" [mdl]></div>
  </div>
  </ng-template>

src/app/modules/pro/channel/subscription/subscription.components.scss

 m-pro--subscription {
- .m-pro-subscription--error {
+ .m-proSubscription__error {
  display: block;
  font-weight: bold;
  color: #fff;

src/app/modules/pro/channel/unsubscribe-modal/modal.component.html

-<div class="m-pro--unsubscribe-modal">
+<div class="m-pro__unsubscribeModal">
  <div class="m-ProUnsubscribeModal__body">
  <span>
  Do you wish to unsubscribe from <strong>{{ channelName }}</strong

src/app/modules/pro/channel/unsubscribe-modal/modal.component.scss

-m-pro--unsubscribe-modal {
+m-pro__unsubscribeModal {
  @include m-theme() {
  background-color: rgba(themed($m-black-always), 0.95);
  }
 }
 
-.m-pro--unsubscribe-modal {
+.m-pro__unsubscribeModal {
  > * {
  color: var(--m-pro--text-color);
  font-size: 16px;

src/app/modules/pro/settings/settings.component.html

-<div class="m-pro--settings">
+<div class="m-pro__settings">
  <div class="m-toolbar" *ngIf="settings">
  <div class="m-topbar--row">
  <div class="m-topbar--navigation m-topbar--navigation--text-only">
@@ -73,7 +73,7 @@
  </div>
 
  <div class="m-page">
- <div class="m-page--main m-pro--settings--page m-border">
+ <div class="m-page--main m-proSettings__page m-border">
  <div *ngIf="inProgress && !settings">
  <div class="mdl-spinner mdl-js-spinner is-active" [mdl]></div>
  </div>
@@ -84,12 +84,12 @@
  <!-- General -->
 
  <ng-template ngSwitchCase="general">
- <p class="m-pro--settings--note" i18n>
+ <p class="m-proSettings__note" i18n>
  Customize your title and headline. This will be used as your SEO
  tags as well.
  </p>
 
- <div class="m-pro--settings--field">
+ <div class="m-proSettings__field">
  <label for="title" i18n>Title</label>
  <input
  type="text"
@@ -99,7 +99,7 @@
  />
  </div>
 
- <div class="m-pro--settings--field">
+ <div class="m-proSettings__field">
  <label for="headline" i18n>Headline (can be multi-line)</label>
  <textarea
  id="headline"
@@ -112,11 +112,11 @@
  <!-- Theme -->
 
  <ng-template ngSwitchCase="theme">
- <p class="m-pro--settings--note" i18n>
+ <p class="m-proSettings__note" i18n>
  Set up your color scheme below.
  </p>
 
- <div class="m-pro--settings--field">
+ <div class="m-proSettings__field">
  <label for="text_color" i18n>Text Color</label>
  <input
  type="color"
@@ -126,7 +126,7 @@
  />
  </div>
 
- <div class="m-pro--settings--field">
+ <div class="m-proSettings__field">
  <label for="primary_color" i18n>Primary Color</label>
  <input
  type="color"
@@ -136,7 +136,7 @@
  />
  </div>
 
- <div class="m-pro--settings--field">
+ <div class="m-proSettings__field">
  <label for="plain_background_color" i18n>
  Plain Background Color
  </label>
@@ -148,7 +148,7 @@
  />
  </div>
 
- <div class="m-pro--settings--field">
+ <div class="m-proSettings__field">
  <label i18n>
  Color Schema
  </label>
@@ -160,7 +160,7 @@
  value="light"
  [(ngModel)]="settings.scheme"
  />
- <label for="scheme_light" class="m-pro--settings--inline-label">
+ <label for="scheme_light" class="m-proSettings__inlineLabel">
  Light
  </label>
 
@@ -171,12 +171,12 @@
  value="dark"
  [(ngModel)]="settings.scheme"
  />
- <label for="scheme_dark" class="m-pro--settings--inline-label">
+ <label for="scheme_dark" class="m-proSettings__inlineLabel">
  Dark
  </label>
  </div>
 
- <div class="m-pro--settings--field">
+ <div class="m-proSettings__field">
  <label i18n>Tiles Aspect Ratio</label>
 
  <ng-container *ngFor="let ratio of ratios">
@@ -189,14 +189,14 @@
  />
  <label
  [for]="'tile_ratio_' + ratio"
- class="m-pro--settings--inline-label"
+ class="m-proSettings__inlineLabel"
  >
  {{ ratio }}
  </label>
  </ng-container>
  </div>
 
- <div class="m-pro--settings--field">
+ <div class="m-proSettings__field">
  <label for="logo_guid" i18n>Logo Asset GUID</label>
  <input
  type="text"
@@ -210,16 +210,16 @@
  <!-- Tags -->
 
  <ng-template ngSwitchCase="hashtags">
- <p class="m-pro--settings--note" i18n>
+ <p class="m-proSettings__note" i18n>
  Set up your category filter hashtags here.
  </p>
 
  <m-draggable-list [data]="settings.tag_list" [id]="'tag'">
  <ng-template let-tag="item" let-i="i">
- <div class="m-pro--settings--field">
+ <div class="m-proSettings__field">
  <label i18n> Hashtag #{{ i + 1 }} </label>
 
- <div class="m-pro--settings--flex-inputs">
+ <div class="m-proSettings__flexInputs">
  <input
  type="text"
  placeholder="Label"
@@ -244,7 +244,7 @@
  </ng-template>
  </m-draggable-list>
 
- <div class="m-pro--settings--field">
+ <div class="m-proSettings__field">
  <button
  class="m-btn m-btn--slim"
  type="button"
@@ -260,11 +260,11 @@
  <!-- Footer -->
 
  <ng-template ngSwitchCase="footer">
- <p class="m-pro--settings--note" i18n>
+ <p class="m-proSettings__note" i18n>
  Set up your footer links below.
  </p>
 
- <div class="m-pro--settings--field">
+ <div class="m-proSettings__field">
  <label for="footer_text" i18n>Text</label>
  <input
  type="text"
@@ -276,10 +276,10 @@
 
  <m-draggable-list [data]="settings.footer_links" [id]="'title'">
  <ng-template let-link="item" let-i="i">
- <div class="m-pro--settings--field">
+ <div class="m-proSettings__field">
  <label i18n> Link #{{ i + 1 }} </label>
 
- <div class="m-pro--settings--flex-inputs">
+ <div class="m-proSettings__flexInputs">
  <input
  type="text"
  placeholder="Title"
@@ -304,7 +304,7 @@
  </ng-template>
  </m-draggable-list>
 
- <div class="m-pro--settings--field">
+ <div class="m-proSettings__field">
  <button
  class="m-btn m-btn--slim"
  type="button"
@@ -320,11 +320,11 @@
  <!-- Domain -->
 
  <ng-template ngSwitchCase="domain">
- <p class="m-pro--settings--note" i18n>
+ <p class="m-proSettings__note" i18n>
  Customize your domain and setup your HTTPS certificates.
  </p>
 
- <div class="m-pro--settings--field">
+ <div class="m-proSettings__field">
  <label for="domain" i18n>Domain</label>
  <input
  type="text"
@@ -334,17 +334,17 @@
  />
  </div>
 
- <div class="m-pro--settings--field">
+ <div class="m-proSettings__field">
  <label for="custom_head" i18n>Custom &lt;head&gt; Code</label>
  <textarea
- class="m-pro--settings--code-textarea"
+ class="m-proSettings__codeTextarea"
  id="custom_head"
  name="custom_head"
  [(ngModel)]="settings.custom_head"
  [readOnly]="!isAdmin"
  ></textarea>
 
- <p *ngIf="!isAdmin" class="m-pro--settings--note" i18n>
+ <p *ngIf="!isAdmin" class="m-proSettings__note" i18n>
  In order to customize this field, please contact a Minds admin
  or email info@minds.com.
  </p>
@@ -354,12 +354,12 @@
  <!-- Cancel -->
 
  <ng-template ngSwitchCase="cancel">
- <p class="m-pro--settings--note" i18n>
+ <p class="m-proSettings__note" i18n>
  Clicking the button below will take you to Minds Pro page, where
  you can cancel your subscription.
  </p>
 
- <div class="m-pro--settings--field">
+ <div class="m-proSettings__field">
  <a
  class="m-btn m-link-btn m-btn--slim m-btn--destructive"
  routerLink="/pro"
@@ -370,14 +370,14 @@
  </ng-container>
 
  <div
- class="m-pro--settings--error"
+ class="m-proSettings__error"
  *ngIf="!!error"
  >
  {{ error }}
  </div>
 
  <div
- class="m-pro--settings--field m-pro--settings--field-actions"
+ class="m-proSettings__field m-proSettings__fieldActions"
  *ngIf="currentTab !== 'cancel'"
  >
  <button
@@ -389,12 +389,12 @@
  Save
  </button>
 
- <div class="m-pro--settings--field-spinner" *ngIf="inProgress">
+ <div class="m-proSettings__fieldSpinner" *ngIf="inProgress">
  <div class="mdl-spinner mdl-js-spinner is-active" [mdl]></div>
  </div>
 
  <a
- class="m-btn m-link-btn m-btn--slim m-pro--settings--preview-btn"
+ class="m-btn m-link-btn m-btn--slim m-proSettings__previewBtn"
  [routerLink]="previewRoute"
  i18n
  >View your Pro channel</a

src/app/modules/pro/settings/settings.component.scss

-.m-pro--settings {
+.m-pro__settings {
  max-width: 1280px;
  margin: auto;
 
@@ -7,7 +7,7 @@
  }
 }
 
-.m-pro--settings--page {
+.m-proSettings__page {
  padding-bottom: 24px;
 
  @include m-theme() {
@@ -23,7 +23,7 @@
  padding: 0;
  }
 
- .m-pro--settings--field {
+ .m-proSettings__field {
  margin: 0 0 24px;
 
  &:last-child {
@@ -39,7 +39,7 @@
  color: themed($m-grey-800);
  }
 
- &.m-pro--settings--inline-label {
+ &.m-proSettings__inlineLabel {
  display: inline-block;
  padding: 0;
  margin: 0 0.35em;
@@ -72,7 +72,7 @@
  height: 6em;
  resize: none;
 
- &.m-pro--settings--code-textarea {
+ &.m-proSettings__codeTextarea {
  font-family: monospace;
  font-size: 13px;
  max-width: 49em;
@@ -84,7 +84,7 @@
  }
  }
 
- &.m-pro--settings--field-actions {
+ &.m-proSettings__fieldActions {
  display: flex;
  flex-direction: row;
 
@@ -94,7 +94,7 @@
  }
  }
 
- .m-pro--settings--preview-btn {
+ .m-proSettings__previewBtn {
  margin-left: 0.35em;
 
  @include m-theme() {
@@ -103,13 +103,13 @@
  }
  }
 
- .m-pro--settings--note {
+ .m-proSettings__note {
  @include m-theme() {
  color: themed($m-grey-400);
  }
  }
 
- .m-pro--settings--flex-inputs {
+ .m-proSettings__flexInputs {
  display: flex;
  flex-direction: row;
  align-items: center;
@@ -129,11 +129,11 @@
  }
  }
 
- .m-pro--settings--field-spinner {
+ .m-proSettings__fieldSpinner {
  margin-left: 0.65em;
  }
 
- .m-pro--settings--error {
+ .m-proSettings__error {
  margin: 16px 0;
  font-size: 20px;
  @include m-theme() {

src/app/modules/pro/settings/settings.component.ts

@@ -46,7 +46,8 @@ export class ProSettingsComponent implements OnInit, OnDestroy {
  protected cd: ChangeDetectorRef,
  protected title: MindsTitle,
  protected site: SiteService
- ) {}
+ ) {
+ }
 
  ngOnInit() {
  this.param$ = this.route.params.subscribe(params => {
@@ -82,6 +83,7 @@ export class ProSettingsComponent implements OnInit, OnDestroy {
  }
 
  async save() {
+ this.error = null;
  this.inProgress = true;
  this.detectChanges();