Kuwait Theme: Settings page styling

src/app/shared/components/template/components/button/button.component.html

@@ -9,7 +9,12 @@
     [attr.data-variant]="params.variant"
     [attr.data-has-children]="_row.rows ? true : false"
   >
-    <ion-icon *ngIf="params.icon" slot="start" src="{{ params.icon | plhAsset }}"></ion-icon>
+    @if (params.icon) {
+      <ion-icon slot="start" src="{{ params.icon | plhAsset }}"></ion-icon>
+    }
+    @if (params.iconSecondary) {
+      <ion-icon slot="end" src="{{ params.iconSecondary | plhAsset }}"></ion-icon>
+    }
     <span
       *ngIf="_row.value"
       [class]="'left text ' + params.textAlign"

src/app/shared/components/template/components/button/button.component.ts

@@ -27,8 +27,13 @@ interface IButtonParams {
   textAlign: "left" | "centre" | "right";
   /** TEMPLATE PARAMETER: "button_align" */
   buttonAlign: "left" | "centre" | "right";
-  /** TEMPLATE PARAMETER: "icon". The path to an icon asset */
+  /** TEMPLATE PARAMETER: "icon". The path to an icon asset. This will be displayed in the 'start' slot (left for LTR languages) */
   icon: string;
+  /**
+   * TEMPLATE PARAMETER: "icon_secondary_asset". The path to a secondary icon asset,
+   * which will be displayed in the 'end' slot (right for LTR languages)
+   * */
+  iconSecondary: string;
   /** TEMPLATE PARAMETER: "image_asset". The path to an image asset */
   image: string;
 }
@@ -75,6 +80,11 @@ export class TmplButtonComponent extends TemplateBaseComponent implements OnInit
       "center"
     ) as any;
     this.params.icon = getStringParamFromTemplateRow(this._row, "icon", null);
+    this.params.iconSecondary = getStringParamFromTemplateRow(
+      this._row,
+      "icon_secondary_asset",
+      null
+    );
   }
 
   /** Determine if the button is inside a display group with the style "two_columns" */

src/app/shared/components/template/components/title/title.component.ts

@@ -13,7 +13,7 @@ interface ITitleParams {
   /** TEMPLATE PARAMETER: "style". */
   style: string | null;
   /** TEMPLATE PARAMETER: "variant". */
-  variant: "" | "header";
+  variant: "" | "header" | "section_banner" | "page_banner";
 }
 
 @Component({

src/theme/themes/plh_kids_kw/_overrides.scss

@@ -25,16 +25,17 @@ body[data-theme="plh_kids_kw"] {
     .left {
       text-align: unset !important;
     }
-    // Center align all button text by default
-    .left.null ::ng-deep {
-      text-align: center;
+    .left.text {
+      text-align: left;
       p {
-        text-align: center !important;
+        text-align: left !important;
       }
     }
-    .left ::ng-deep {
+    // Center align all button text by default
+    .left.null {
+      text-align: center !important;
       p {
-        text-align: left !important;
+        text-align: center !important;
       }
     }
     .left.centre ::ng-deep {
@@ -72,6 +73,22 @@ body[data-theme="plh_kids_kw"] {
         --background: var(--ion-color-primary-500);
       }
     }
+    ion-button[data-variant~="card"],
+    ion-button[data-param-style~="no-background"] {
+      border: none;
+    }
+    ion-button[data-variant~="card"][data-param-style~="no-background"] {
+      border: 1px solid transparent;
+      border-radius: 0px;
+      background-color: transparent;
+      background: transparent;
+      color: var(--color-surface-black);
+      min-height: 64px;
+      padding: 18px 24px;
+      p {
+        font-weight: var(--font-weight-standard);
+      }
+    }
   }
 
   // audio
@@ -429,12 +446,27 @@ body[data-theme="plh_kids_kw"] {
       }
     }
   }
+
+  // Title
   plh-tmpl-title {
-    .title-wrapper h1 p {
+    .title-wrapper h1 {
       font-size: var(--font-size-text-title);
       margin: var(--paragraph-margin-medium) 0;
       line-height: var(--line-height-text-large);
-      color: var(--ion-color-primary-700);
+      color: var(--color-surface-black);
+    }
+    .title-wrapper[data-variant~="section_banner"] {
+      font-size: var(--font-size-text-large) !important;
+      font-weight: var(--font-weight-medium) !important;
+      background-color: #e7f2fd;
+      border-bottom: 1px solid var(--color-secondary-blue-80);
+      h1 {
+        padding: 18px;
+        border: none;
+      }
+    }
+    .title-wrapper[data-variant~="page_banner"] h1 {
+      font-size: var(--font-size-text-extra-large) !important;
     }
   }