MOBILE-3565 settings: Fix licenses navigation

src/app/core/settings/pages/about/about.html

@@ -21,7 +21,7 @@
         <ion-icon name="fa-user-shield" slot="start"></ion-icon>
         <ion-label>{{ 'core.settings.privacypolicy' | translate }}</ion-label>
     </ion-item>
-    <ion-item button class="ion-text-wrap" router-direction="forward" routerLink="deviceinfo" detail>
+    <ion-item button class="ion-text-wrap" (click)="openPage('deviceinfo')" detail>
         <ion-icon name="fa-mobile" slot="start"></ion-icon>
         <ion-label>{{ 'core.settings.deviceinfo' | translate }}</ion-label>
     </ion-item>

src/app/core/settings/pages/about/about.page.module.ts

@@ -34,6 +34,12 @@ const routes: Routes = [
             import('@core/settings/pages/deviceinfo/deviceinfo.page.module')
                 .then(m => m.CoreSettingsDeviceInfoPageModule),
     },
+    {
+        path: 'licenses',
+        loadChildren: () =>
+            import('@core/settings/pages/licenses/licenses.page.module')
+                .then(m => m.CoreSettingsLicensesPageModule),
+    },
 ];
 
 @NgModule({

src/app/core/settings/pages/about/about.page.ts

@@ -12,13 +12,17 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { CoreSites } from '@services/sites';
 import { Component } from '@angular/core';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
-import { CoreConstants } from '@core/constants';
 
+import { CoreConstants } from '@core/constants';
+import { CoreSites } from '@services/sites';
+
+/**
+ * App settings about menu page.
+ */
 @Component({
-    selector: 'settings-about',
+    selector: 'page-core-app-settings-about',
     templateUrl: 'about.html',
 })
 export class CoreSettingsAboutPage {
@@ -29,6 +33,7 @@ export class CoreSettingsAboutPage {
 
     constructor(
         protected router: Router,
+        protected route: ActivatedRoute,
     ) {
         const currentSite = CoreSites.instance.getCurrentSite();
 
@@ -48,7 +53,7 @@ export class CoreSettingsAboutPage {
     openPage(page: string): void {
         // const navCtrl = this.svComponent ? this.svComponent.getMasterNav() : this.navCtrl;
         // navCtrl.push(page);
-        this.router.navigate(['/settings/' + page]);
+        this.router.navigate([page], { relativeTo: this.route });
     }
 
 }

src/app/core/settings/pages/app/app.page.ts

@@ -16,8 +16,11 @@ import { CoreApp } from '@services/app';
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 
+/**
+ * App settings menu page.
+ */
 @Component({
-    selector: 'app-settings',
+    selector: 'page-core-app-settings',
     templateUrl: 'app.html',
 })
 export class CoreSettingsAppPage implements OnInit {

src/app/core/settings/pages/deviceinfo/deviceinfo.page.ts

@@ -54,9 +54,11 @@ interface CoreSettingsDeviceInfo {
     localNotifAvailable: string;
 }
 
-
+/**
+ * Page that displays the device information.
+ */
 @Component({
-    selector: 'settings-deviceinfo',
+    selector: 'page-core-app-settings-deviceinfo',
     templateUrl: 'deviceinfo.html',
     styleUrls: ['deviceinfo.scss'],
 })

src/app/core/settings/pages/general/general.page.module.ts

@@ -32,17 +32,19 @@ const routes: Routes = [
 ];
 
 @NgModule({
-    declarations: [
-        CoreSettingsGeneralPage,
-    ],
     imports: [
         RouterModule.forChild(routes),
         CommonModule,
         IonicModule,
+        FormsModule,
         TranslateModule.forChild(),
         CoreComponentsModule,
         CoreDirectivesModule,
-        FormsModule,
     ],
+    declarations: [
+        CoreSettingsGeneralPage,
+    ],
+    exports: [RouterModule],
+
 })
 export class CoreSettingsGeneralPageModule {}

src/app/core/settings/pages/general/general.page.ts

@@ -25,7 +25,7 @@ import { CoreSettingsHelper, CoreColorScheme } from '../../services/settings.hel
  * Page that displays the general settings.
  */
 @Component({
-    selector: 'page-core-settings-general',
+    selector: 'page-core-app-settings-general',
     templateUrl: 'general.html',
     styleUrls: ['general.scss'],
 })

src/app/core/settings/pages/licenses/licenses.page.module.ts

@@ -20,7 +20,6 @@ import { IonicModule } from '@ionic/angular';
 
 import { CoreComponentsModule } from '@components/components.module';
 import { CoreDirectivesModule } from '@directives/directives.module';
-import { CorePipesModule } from '@pipes/pipes.module';
 
 import { CoreSettingsLicensesPage } from './licenses.page';
 
@@ -32,9 +31,6 @@ const routes: Routes = [
 ];
 
 @NgModule({
-    declarations: [
-        CoreSettingsLicensesPage,
-    ],
     imports: [
         RouterModule.forChild(routes),
         CommonModule,
@@ -42,7 +38,10 @@ const routes: Routes = [
         TranslateModule.forChild(),
         CoreComponentsModule,
         CoreDirectivesModule,
-        CorePipesModule,
     ],
+    declarations: [
+        CoreSettingsLicensesPage,
+    ],
+    exports: [RouterModule],
 })
 export class CoreSettingsLicensesPageModule {}

src/app/core/settings/pages/licenses/licenses.page.ts

@@ -14,7 +14,7 @@
 
 import { Component, OnInit } from '@angular/core';
 import { CoreConstants } from '@core/constants';
-import { Http } from '@/app/singletons/core.singletons';
+import { Http } from '@singletons/core.singletons';
 
 /**
  * Defines license info
@@ -35,7 +35,7 @@ interface CoreSettingsLicense {
  * Page that displays the open source licenses information.
  */
 @Component({
-    selector: 'page-core-settings-licenses',
+    selector: 'page-core-app-settings-licenses',
     templateUrl: 'licenses.html',
 })
 export class CoreSettingsLicensesPage implements OnInit {

src/app/core/settings/settings-routing.module.ts

@@ -24,10 +24,6 @@ const routes: Routes = [
         path: 'general',
         loadChildren: () => import('./pages/general/general.page.module').then( m => m.CoreSettingsGeneralPageModule),
     },
-    {
-        path: 'licenses',
-        loadChildren: () => import('./pages/licenses/licenses.page.module').then( m => m.CoreSettingsLicensesPageModule),
-    },
     {
         path: '',
         loadChildren: () => import('./pages/app/app.page.module').then( m => m.CoreSettingsAppPageModule),

src/theme/variables.scss

@@ -126,8 +126,8 @@
             --background: var(--custom-tab-background, var(--white));
             --color: var(--custom-tab-background, var(--gray-dark));
             --border-color: var(--custom-tab-border-color, var(--gray));
-            --color-active: var(--custom-tab-color-active, var(--core-color));
+            --color-active: var(--custom-tab-color-active, var(--color));
-            --border-color-active: var(--custom-tab-border-color-active, var(--color-active));
+            --border-color-active: var(--custom-tab-border-color-active, var(--core-color));
         }
     }