src/app/common/pipes/tags.spec.ts

@@ -58,6 +58,15 @@ describe('TagPipe', () => {
     );
   });
 
+  it('should transform uppercase text following # to lower case ', () => {
+    const pipe = new TagsPipe(featuresServiceMock);
+    const string = 'textString #NaMe';
+    const transformedString = pipe.transform(<any>string);
+    expect(transformedString).toContain(
+      '<a href="/newsfeed/global/top;hashtag=name;period=24h'
+    );
+  });
+
   it('should correctly parse when duplicates substrings present', () => {
     const pipe = new TagsPipe(featuresServiceMock);
     const string = '#hash #hashlonger';

src/app/common/pipes/tags.ts

@@ -32,7 +32,11 @@ export class TagsPipe implements PipeTransform {
       rule: /(^|\s||)#(\w+)/gim,
       replace: m => {
         if (this.featureService.has('top-feeds')) {
-          return `${m.match[1]}<a href="/newsfeed/global/top;hashtag=${m.match[2]};period=24h">#${m.match[2]}</a>`;
+          return `${
+            m.match[1]
+          }<a href="/newsfeed/global/top;hashtag=${m.match[2].toLowerCase()};period=24h">#${
+            m.match[2]
+          }</a>`;
         }
         return `${m.match[1]}<a href="/newsfeed/tag/${m.match[2]};ref=hashtag">#${m.match[2]}</a>`;
       },

src/app/modules/legacy/components/cards/cards.scss

@@ -319,7 +319,9 @@ minds-activity-preview {
       margin-right: 12px;
     }
     .avatar img {
-      max-height: 24px;
+      width: 24px;
+      height: 24px;
+      object-fit: cover;
     }
     .body {
       margin-left: 12px;

src/app/modules/notifications/notifications.component.scss

@@ -15,7 +15,9 @@ minds-notification.mdl-card {
 
     img {
       border-radius: 50%;
-      max-height: 50px;
+      width: 40px;
+      height: 40px;
+      object-fit: cover;
     }
   }
 

src/app/modules/plus/marketing.component.html

@@ -16,7 +16,29 @@
         </p>
 
         <div class="m-plusMarketing__subscription">
-          <m-plus--subscription></m-plus--subscription>
+          <m-plus--subscription
+            (onEnable)="detectChanges()"
+            (onDisable)="detectChanges()"
+          ></m-plus--subscription>
+        </div>
+
+        <div class="m-plusMarketing__verify" *ngIf="isPlus">
+          <i
+            class="material-icons"
+            [class.m-plusMarketingVerify__verifiedIcon]="isVerified"
+            [class.m-plusMarketingVerify__unverifiedIcon]="!isVerified"
+            >verified_user</i
+          >
+
+          <ng-container *ngIf="!isVerified; else alreadyVerifiedView">
+            <a (click)="openVerifyModal()" i18n
+              >Click here to request to be verified</a
+            >
+          </ng-container>
+
+          <ng-template #alreadyVerifiedView>
+            <span i18n>You are verified!</span>
+          </ng-template>
         </div>
       </div>
 
@@ -36,3 +58,8 @@
 
   <m-marketing__asFeaturedIn slot="2"></m-marketing__asFeaturedIn>
 </m-marketing>
+
+<m-plus--verify
+  *ngIf="showVerifyModal"
+  (closed)="closeVerifyModal()"
+></m-plus--verify>

src/app/modules/plus/marketing.component.scss

+@import '../../foundation/grid-values';
+
 .m-plus__marketing {
-  .m-marketing--hero--slogans ul {
-    font-size: 20px;
-    padding: 0 0 0 16px;
-    margin: 32px 0;
+  .m-plusMarketing__verify {
+    margin-top: 50px;
 
     @include m-theme() {
-      color: themed($m-white);
+      color: themed($m-black);
+    }
+
+    @media screen and (max-width: $m-grid-min-vp) {
+      margin-top: 30px;
+      text-align: center;
+    }
+
+    > * {
+      vertical-align: middle;
+      color: inherit;
+    }
+
+    > i.material-icons {
+      margin-right: 0.35em;
+
+      &.m-plusMarketingVerify__verifiedIcon {
+        @include m-theme() {
+          color: themed($m-blue);
+        }
+      }
+
+      &.m-plusMarketingVerify__unverifiedIcon {
+        opacity: 0.2;
+      }
     }
 
-    li {
-      margin-bottom: 8px;
+    > a {
+      border-bottom: 1px solid;
+      cursor: pointer;
 
-      &:last-child {
-        margin-bottom: 0;
+      @include m-theme() {
+        border-color: themed($m-grey-400);
       }
     }
   }

src/app/modules/plus/marketing.component.ts

-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+} from '@angular/core';
 
 @Component({
   selector: 'm-plus--marketing',
@@ -6,5 +10,33 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PlusMarketingComponent {
+  showVerifyModal: boolean = false;
+
   readonly cdnAssetsUrl: string = window.Minds.cdn_assets_url;
+
+  readonly minds = window.Minds;
+
+  constructor(protected cd: ChangeDetectorRef) {}
+
+  openVerifyModal() {
+    this.showVerifyModal = true;
+  }
+
+  closeVerifyModal() {
+    this.showVerifyModal = false;
+    this.detectChanges();
+  }
+
+  detectChanges() {
+    this.cd.markForCheck();
+    this.cd.detectChanges();
+  }
+
+  get isPlus() {
+    return this.minds.user && this.minds.user.plus;
+  }
+
+  get isVerified() {
+    return this.minds.user && this.minds.user.verified;
+  }
 }

src/app/modules/plus/subscription/subscription.component.ts

@@ -142,6 +142,10 @@ export class PlusSubscriptionComponent implements OnInit {
   }
 
   async disable() {
+    if (!confirm('Click OK if you want to cancel your Plus subscription...')) {
+      return;
+    }
+
     this.inProgress = true;
     this.error = '';
     this.detectChanges();

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

@@ -141,6 +141,10 @@ export class ProSubscriptionComponent implements OnInit {
   }
 
   async disable() {
+    if (!confirm('Click OK if you want to cancel your Pro subscription...')) {
+      return;
+    }
+
     this.inProgress = true;
     this.error = '';
     this.detectChanges();

src/stylesheets/core/feeds.scss

@@ -56,7 +56,9 @@ minds-newsfeed-single {
 
     img {
       border-radius: 50%;
-      max-height: 50px;
+      width: 50px;
+      height: 50px;
+      object-fit: cover;
     }
   }