update tab split

apps/client/src/app/pages/resources/glossary/resources-glossary.component.scss

@@ -1,5 +1,17 @@
-@import '../shared/resource-page';
-
 :host {
-  @include resource-page;
+  color: rgb(var(--dark-primary-text));
+  display: block;
+
+  a {
+    color: rgba(var(--palette-primary-500), 1);
+    font-weight: 500;
+
+    &:hover {
+      color: rgba(var(--palette-primary-300), 1);
+    }
+  }
+}
+
+:host-context(.theme-dark) {
+  color: rgb(var(--light-primary-text));
 }

apps/client/src/app/pages/resources/guides/resources-guides.component.scss

@@ -1,5 +1,17 @@
-@import '../shared/resource-page';
-
 :host {
-  @include resource-page;
+  color: rgb(var(--dark-primary-text));
+  display: block;
+
+  a {
+    color: rgba(var(--palette-primary-500), 1);
+    font-weight: 500;
+
+    &:hover {
+      color: rgba(var(--palette-primary-300), 1);
+    }
+  }
+}
+
+:host-context(.theme-dark) {
+  color: rgb(var(--light-primary-text));
 }

apps/client/src/app/pages/resources/markets/resources-markets.component.scss

@@ -1,5 +1,17 @@
-@import '../shared/resource-page';
-
 :host {
-  @include resource-page;
+  color: rgb(var(--dark-primary-text));
+  display: block;
+
+  a {
+    color: rgba(var(--palette-primary-500), 1);
+    font-weight: 500;
+
+    &:hover {
+      color: rgba(var(--palette-primary-300), 1);
+    }
+  }
+}
+
+:host-context(.theme-dark) {
+  color: rgb(var(--light-primary-text));
 }

apps/client/src/app/pages/resources/overview/resources-overview.component.scss

@@ -1,7 +1,15 @@
-@import '../shared/resource-page';
-
 :host {
-  @include resource-page;
+  color: rgb(var(--dark-primary-text));
+  display: block;
+
+  a {
+    color: rgba(var(--palette-primary-500), 1);
+    font-weight: 500;
+
+    &:hover {
+      color: rgba(var(--palette-primary-300), 1);
+    }
+  }
 }
 
 :host-context(.theme-dark) {

apps/client/src/app/pages/resources/overview/resources-overview.module.ts

@@ -7,6 +7,6 @@ import { ResourcesOverviewComponent } from './resources-overview.component';
 
 @NgModule({
   declarations: [ResourcesOverviewComponent],
-  imports: [CommonModule, RouterModule, ResourcesOverviewRoutingModule]
+  imports: [CommonModule, ResourcesOverviewRoutingModule, RouterModule]
 })
 export class ResourcesOverviewModule {}

apps/client/src/app/pages/resources/resources-page-routing.module.ts

@@ -18,6 +18,13 @@ const routes: Routes = [
             (m) => m.ResourcesOverviewModule
           )
       },
+      {
+        path: 'glossary',
+        loadChildren: () =>
+          import('./glossary/resources-glossary.module').then(
+            (m) => m.ResourcesGlossaryPageModule
+          )
+      },
       {
         path: 'guides',
         loadChildren: () =>
@@ -31,13 +38,6 @@ const routes: Routes = [
           import('./markets/resources-markets.module').then(
             (m) => m.ResourcesMarketsModule
           )
-      },
-      {
-        path: 'glossary',
-        loadChildren: () =>
-          import('./glossary/resources-glossary.module').then(
-            (m) => m.ResourcesGlossaryPageModule
-          )
       }
     ]
   }

apps/client/src/app/pages/resources/resources-page.component.ts

@@ -3,6 +3,7 @@ import { InfoItem } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 
 import { Component, OnInit } from '@angular/core';
+import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 
 @Component({
@@ -12,6 +13,7 @@ import { Subject } from 'rxjs';
   styleUrls: ['./resources-page.scss']
 })
 export class ResourcesPageComponent implements OnInit {
+  public deviceType: string;
   public hasPermissionForSubscription: boolean;
   public info: InfoItem;
   public routerLinkFaq = ['/' + $localize`:snake-case:faq`];
@@ -44,11 +46,15 @@ export class ResourcesPageComponent implements OnInit {
 
   private unsubscribeSubject = new Subject<void>();
 
-  public constructor(private dataService: DataService) {
+  public constructor(
+    private dataService: DataService,
+    private deviceService: DeviceDetectorService
+  ) {
     this.info = this.dataService.fetchInfo();
   }
 
   public ngOnInit() {
+    this.deviceType = this.deviceService.getDeviceInfo().deviceType;
     this.hasPermissionForSubscription = hasPermission(
       this.info?.globalPermissions,
       permissions.enableSubscription

apps/client/src/app/pages/resources/resources-page.scss

@@ -1,15 +1,9 @@
-@import './shared/resource-page';
-
 :host {
   display: flex;
   flex-direction: row;
   height: 100%;
 }
 
-::ng-deep .resource-content {
-  @include resource-page;
-}
-
 @media (max-width: 599px) {
   :host {
     flex-direction: column-reverse;

apps/client/src/app/pages/resources/shared/resource-page.scss

@@ -1,25 +0,0 @@
-@mixin resource-page {
-  display: block;
-  padding: 1rem;
-  color: rgb(var(--dark-primary-text));
-
-  .container {
-    max-width: 800px;
-    margin: 0 auto;
-  }
-
-  a {
-    color: rgba(var(--palette-primary-500), 1);
-    font-weight: 500;
-    text-decoration: none;
-
-    &:hover {
-      color: rgba(var(--palette-primary-300), 1);
-      text-decoration: underline;
-    }
-  }
-
-  :host-context(.theme-dark) & {
-    color: rgb(var(--light-primary-text));
-  }
-}