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

@@ -88,17 +88,18 @@ export class ProChannelComponent implements OnInit, OnDestroy {
   }
 
   setTitle() {
-    const urlFragments = this.router.url.split('/');
-    const fragmentIndex = urlFragments.findIndex(v => v === "juanmsolaro") + 1;
-
     let title = this.channel.pro_settings.title as string || this.channel.name;
+
+    const childRoute = this.route.children.length > 0 ? this.route.children[0].snapshot : null;
+
+    if (childRoute && childRoute.params['type']) {
+      title += ` - ${childRoute.params['type']}`;
+    }
+
     if (this.channel.pro_settings.headline) {
       title += ` - ${this.channel.pro_settings.headline}`;
     }
 
-    if (urlFragments[fragmentIndex]) {
-      title += ` - ${urlFragments[fragmentIndex]}`;
-    }
 
     this.title.setTitle(title);
   }

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

@@ -46,10 +46,12 @@ m-media--modal {
       flex: 1;
       overflow: hidden;
     }
+
     m-video {
       @include m-theme() {
         background-color: themed($m-black-always);
       }
+
       video {
         max-width: 100%;
         height: 100%;
@@ -83,9 +85,8 @@ m-media--modal {
         text-overflow: ellipsis;
         text-decoration: none;
 
-        @include m-theme(){
-          color: themed($m-white-always);
-        }
+        color: var(--text-color);
+
         &:hover {
           text-decoration: underline;
         }
@@ -93,9 +94,7 @@ m-media--modal {
 
       // TODO OJM fullscreen styles e.g. .myClass:not(:fullscreen)
       .m-mediaModal__fullscreenButton {
-        @include m-theme(){
-          color: themed($m-white-always);
-        }
+        color: var(--text-color);
         transition: transform 150ms ease;
 
 
@@ -108,6 +107,7 @@ m-media--modal {
           .m-mediaModal__fullscreenIcon--enable {
             transform: scale(1.2);
           }
+
           .m-mediaModal__fullscreenIcon--disable {
             transform: scale(0.83);
           }
@@ -116,6 +116,7 @@ m-media--modal {
         .m-mediaModal__fullscreenIcon--disable {
           font-size: 28px;
         }
+
         .m-mediaModal__fullscreenIcon--disable {
           font-size: 34px;
         }
@@ -138,9 +139,7 @@ m-media--modal {
     padding: 16px;
     font-family: 'Roboto', Helvetica, sans-serif;
 
-    @include m-theme(){
-      background-color: themed($m-white);
-    }
+    background-color: var(--plain-background-color);
 
     .m-mediaModal__ownerBlock {
       padding: 0;
@@ -154,6 +153,7 @@ m-media--modal {
         white-space: nowrap;
         font-weight: 500;
       }
+
       .m-ownerBlock__channelLink, .m-ownerBlock__groupLink {
         text-decoration: none;
       }
@@ -168,9 +168,7 @@ m-media--modal {
         white-space: pre-wrap;
         line-height: 18px;
         -webkit-font-smoothing: antialiased;
-        @include m-theme(){
-          color: themed($m-grey-400);
-        }
+        color: var(--text-color);
 
         > * {
           padding-right: 8px;
@@ -189,9 +187,7 @@ m-media--modal {
           font-weight: 700;
           font-size: 11px;
           line-height: 1;
-          @include m-theme(){
-            color: themed($m-grey-400);
-          }
+          color: var(--text-color);
         }
 
         .m-ownerBlock__permalinkFlag--boosted {
@@ -207,18 +203,15 @@ m-media--modal {
 
           a {
             vertical-align: middle;
-            @include m-theme(){
-              color: themed($m-grey-400);
-            }
+            color: var(--text-color);
           }
 
           &.m-ownerBlock__permalinkFlag--onchain {
-            @include m-theme(){
-              color: themed($m-blue);
-            }
+            color: var(--primary-color);
+
             a {
               @include m-theme() {
-                color: themed($m-blue);
+                color: var(--primary-color);
               }
             }
           }
@@ -226,12 +219,14 @@ m-media--modal {
       }
 
     }
+
     .m-mediaModal__actionButtonsWrapper {
       .m-mediaModal__actionButtonsRow {
         display: flex;
         justify-content: space-around;
         padding-top: 16px;
       }
+
       minds-button-boost {
         button {
           margin-top: 8px;
@@ -252,7 +247,6 @@ m-media--modal {
       flex: 1;
 
 
-
       m-comments__tree {
         height: 100%;
         // height: calc(100vh - 45px);
@@ -294,6 +288,7 @@ m-media--modal {
 
 
           }
+
           .minds-comment {
             padding: 8px 0px;
 
@@ -307,6 +302,7 @@ m-media--modal {
 
             .m-comment-attachment .m-rich-embed {
               max-width: 63%;
+
               .m-blurb {
                 display: block;
               }