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();