From e2ceccbfdf29dbfb6f067adf09bbe8da94f60407 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Mon, 11 Nov 2024 07:26:44 +0300
Subject: [PATCH 01/27] refactor: text-bubble component

---
 .../text-bubble/text-bubble.component.html    | 33 +++++++++++--------
 .../text-bubble/text-bubble.component.ts      |  5 ++-
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/app/shared/components/template/components/text-bubble/text-bubble.component.html b/src/app/shared/components/template/components/text-bubble/text-bubble.component.html
index ccad63c9be..ee0ce02953 100644
--- a/src/app/shared/components/template/components/text-bubble/text-bubble.component.html
+++ b/src/app/shared/components/template/components/text-bubble/text-bubble.component.html
@@ -1,21 +1,28 @@
 <div
-  class="container"
+  class="text-bubble-container container"
   [attr.data-position]="params.speakerPosition"
   [attr.data-variant]="params.variant"
 >
-  <div class="text-bubble" [attr.data-position]="params.speakerPosition">
-    @if (_row.value) {
-      <plh-tmpl-text
-        [row]="{ _nested_name: '', name: '', type: 'text', value: value() }"
-      ></plh-tmpl-text>
-    }
-    @for (childRow of _row.rows | filterDisplayComponent; track trackByRow($index, childRow)) {
-      <plh-template-component
-        [row]="childRow"
-        [parent]="parent"
-        [attr.data-rowname]="_row.name"
-      ></plh-template-component>
+  <div>
+    @if (params.avatarName) {
+      <div class="avatar-name">{{ params.avatarName }}</div>
+    } @else {
+      <div class="no-name"></div>
     }
+    <div class="text-bubble" [attr.data-position]="params.speakerPosition">
+      @if (_row.value) {
+        <plh-tmpl-text
+          [row]="{ _nested_name: '', name: '', type: 'text', value: value() }"
+        ></plh-tmpl-text>
+      }
+      @for (childRow of _row.rows | filterDisplayComponent; track trackByRow($index, childRow)) {
+        <plh-template-component
+          [row]="childRow"
+          [parent]="parent"
+          [attr.data-rowname]="_row.name"
+        ></plh-template-component>
+      }
+    </div>
   </div>
   <img
     [src]="params.speakerImageAsset | plhAsset"
diff --git a/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts b/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
index 7c05b1a18d..89f51b87c6 100644
--- a/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
+++ b/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
@@ -8,7 +8,9 @@ interface ITextBubbleParams {
   /** TEMPLATE PARAMETER: "speaker_position". The position of the speaker image and speech bubble tail */
   speakerPosition: "left" | "right";
   /** TEMPLATE PARAMETER: "variant" */
-  variant: "gray" | "primary" | "secondary" | "no-border";
+  variant: "gray" | "primary" | "secondary" | "no-border" | "orange" | "yellow";
+  /** TEMPLATE PARAMETER: "avatar_name". The name of the speaker */
+  avatarName: string;
 }
 
 @Component({
@@ -36,5 +38,6 @@ export class TmplTextBubbleComponent extends TemplateBaseComponent implements On
     this.params.variant = getStringParamFromTemplateRow(this._row, "variant", "")
       .split(",")
       .join(" ") as ITextBubbleParams["variant"];
+    this.params.avatarName = getStringParamFromTemplateRow(this._row, "avatar_name", "");
   }
 }

From ded4ce8eea318a889a3432db5a0370117daf0cfe Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Mon, 11 Nov 2024 07:27:10 +0300
Subject: [PATCH 02/27] styling: text-bubble

---
 src/theme/themes/plh_kids_kw/_overrides.scss | 135 ++++++++++++++++++-
 1 file changed, 134 insertions(+), 1 deletion(-)

diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss
index d3286f84e0..afe6c14071 100644
--- a/src/theme/themes/plh_kids_kw/_overrides.scss
+++ b/src/theme/themes/plh_kids_kw/_overrides.scss
@@ -248,4 +248,137 @@ body[data-theme="plh_kids_kw"] {
       }
     }
   }
-}
\ No newline at end of file
+
+  // Text Bubble
+  .text-bubble-container {
+    position: unset;
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: center;
+    align-items: start;
+    height: fit-content;
+    margin-bottom: 20px;
+
+    &[data-variant~="gray"] {
+      --border-color: none;
+      --background-color: none;
+      .text-bubble {
+        border: 1px solid #74777c;
+        background-color: #f9f9fa;
+      }
+    }
+
+    &[data-variant~="primary"] {
+      --background-color: none;
+      --border-color: none;
+      .text-bubble {
+        border: 1px solid var(--ion-color-secondary-700);
+        background-color: var(--ion-color-primary-50);
+      }
+    }
+
+    &[data-variant~="secondary"] {
+      --background-color: none;
+      --border-color: none;
+      .text-bubble {
+        border: 1px solid #815600;
+        background-color: #f9f9fa;
+      }
+    }
+
+    &[data-variant~="orange"] {
+      margin-bottom: 14px;
+      .text-bubble {
+        border: 1px solid #ff8250;
+        background-color: #ffeade;
+      }
+    }
+
+    &[data-variant~="yellow"] {
+      margin-bottom: 14px;
+      .text-bubble {
+        border: 1px solid #d5a344;
+        background-color: #fdefdc;
+      }
+    }
+
+    &[data-variant~="no_border"] {
+      .text-bubble {
+        border: 0px;
+      }
+    }
+
+    img.speaker-image {
+      position: unset;
+      margin-right: 8px;
+    }
+
+    .text-bubble {
+      clip-path: none;
+      border-image: none;
+      border-radius: 0px 12px 12px 12px;
+      border: 1px solid var(--ion-color-secondary-700);
+      background-color: var(--ion-color-primary-50);
+
+      --a: 0deg;
+      --h: 0em;
+      --p: 0%;
+
+      padding: 0;
+      padding: 14px 16px;
+      min-width: 124px;
+
+      p {
+        font-size: var(--font-size-text-mid-size);
+        color: var(--ion-color-gray-900);
+      }
+
+      li {
+        font-size: var(--font-size-text-mid-size);
+        color: var(--ion-color-gray-900);
+      }
+
+      ol {
+        margin: 4px 0;
+      }
+    }
+
+    .avatar-name {
+      margin-bottom: 6px;
+      font-size: var(--font-size-text-tiny);
+      color: #74777c;
+      font-weight: var(--font-weight-bold);
+      letter-spacing: -0.1px;
+    }
+
+    .no-name {
+      margin-bottom: 20px;
+    }
+  }
+  .text-bubble-container[data-position="right"] {
+    display: flex;
+    flex-direction: row;
+
+    .text-bubble {
+      border-radius: 12px 0px 12px 12px;
+
+      p {
+        text-align: right;
+      }
+
+      li {
+        text-align: right;
+      }
+    }
+
+    img.speaker-image {
+      -webkit-transform: scaleX(-1);
+      transform: scaleX(-1);
+      margin-left: 8px;
+    }
+
+    .avatar-name {
+      text-align: right;
+    }
+  }
+}

From 2d521bd848e356f17feb410a6e84cd2e6530606f Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Mon, 11 Nov 2024 07:27:31 +0300
Subject: [PATCH 03/27] mid font variable

---
 src/theme/themes/plh_kids_kw/_index.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/theme/themes/plh_kids_kw/_index.scss b/src/theme/themes/plh_kids_kw/_index.scss
index e695bba0e6..01bab104ae 100644
--- a/src/theme/themes/plh_kids_kw/_index.scss
+++ b/src/theme/themes/plh_kids_kw/_index.scss
@@ -22,6 +22,7 @@
 
       font-size-text-tiny: 14px,
       font-size-text-small: 16px,
+      font-size-text-mid-size: 18px,
       font-size-text-medium: 20px,
       font-size-text-large: 24px,
       font-size-text-extra-large: 32px,

From bea342b4adb0638d695b4bc1f7e1738bf547260b Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Mon, 11 Nov 2024 07:34:56 +0300
Subject: [PATCH 04/27] refactor: speaker name

---
 .../components/text-bubble/text-bubble.component.html         | 4 ++--
 .../template/components/text-bubble/text-bubble.component.ts  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/shared/components/template/components/text-bubble/text-bubble.component.html b/src/app/shared/components/template/components/text-bubble/text-bubble.component.html
index ee0ce02953..e3fec0e5ab 100644
--- a/src/app/shared/components/template/components/text-bubble/text-bubble.component.html
+++ b/src/app/shared/components/template/components/text-bubble/text-bubble.component.html
@@ -4,8 +4,8 @@
   [attr.data-variant]="params.variant"
 >
   <div>
-    @if (params.avatarName) {
-      <div class="avatar-name">{{ params.avatarName }}</div>
+    @if (params.speakerName) {
+      <div class="avatar-name">{{ params.speakerName }}</div>
     } @else {
       <div class="no-name"></div>
     }
diff --git a/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts b/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
index 89f51b87c6..77242bce49 100644
--- a/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
+++ b/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
@@ -10,7 +10,7 @@ interface ITextBubbleParams {
   /** TEMPLATE PARAMETER: "variant" */
   variant: "gray" | "primary" | "secondary" | "no-border" | "orange" | "yellow";
   /** TEMPLATE PARAMETER: "avatar_name". The name of the speaker */
-  avatarName: string;
+  speakerName: string;
 }
 
 @Component({
@@ -38,6 +38,6 @@ export class TmplTextBubbleComponent extends TemplateBaseComponent implements On
     this.params.variant = getStringParamFromTemplateRow(this._row, "variant", "")
       .split(",")
       .join(" ") as ITextBubbleParams["variant"];
-    this.params.avatarName = getStringParamFromTemplateRow(this._row, "avatar_name", "");
+    this.params.speakerName = getStringParamFromTemplateRow(this._row, "speaker_name", "");
   }
 }

From f063957b246e9451ed7bebb9bf12bd4ecfdc8c18 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Mon, 11 Nov 2024 08:12:41 +0300
Subject: [PATCH 05/27] styling: text component

---
 src/theme/themes/plh_kids_kw/_overrides.scss | 25 +++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss
index afe6c14071..838b692d96 100644
--- a/src/theme/themes/plh_kids_kw/_overrides.scss
+++ b/src/theme/themes/plh_kids_kw/_overrides.scss
@@ -339,7 +339,7 @@ body[data-theme="plh_kids_kw"] {
       }
 
       ol {
-        margin: 4px 0;
+        margin: var(--paragraph-margin-small) 0;
       }
     }
 
@@ -381,4 +381,27 @@ body[data-theme="plh_kids_kw"] {
       text-align: right;
     }
   }
+
+  // Text
+  plh-tmpl-text {
+    .standard {
+      color: var(--ion-color-gray-900);
+      font-size: var(--font-size-text-medium);
+      p {
+        margin: var(--paragraph-margin-small) 0;
+      }
+      ol {
+        margin: var(--paragraph-margin-small) 0;
+      }
+    }
+  }
+
+  plh-tmpl-title {
+    .title-wrapper h1 p {
+      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);
+    }
+  }
 }

From ce170df5766994e6186fe7623ac4318e71449190 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Mon, 11 Nov 2024 08:13:09 +0300
Subject: [PATCH 06/27] new global variables

---
 src/theme/themes/plh_kids_kw/_index.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/theme/themes/plh_kids_kw/_index.scss b/src/theme/themes/plh_kids_kw/_index.scss
index 01bab104ae..74e50fbdd9 100644
--- a/src/theme/themes/plh_kids_kw/_index.scss
+++ b/src/theme/themes/plh_kids_kw/_index.scss
@@ -25,7 +25,9 @@
       font-size-text-mid-size: 18px,
       font-size-text-medium: 20px,
       font-size-text-large: 24px,
+      font-size-text-title: 28px,
       font-size-text-extra-large: 32px,
+
       line-height-text-tiny: 18px,
       line-height-text-small: 24px,
       line-height-text-medium: 28px,
@@ -82,6 +84,10 @@
       icon-size-large: 32px,
       icon-size-extra-large: 40px,
       icon-size-largest: 48px,
+
+      paragraph-margin-small: 4px,
+      paragraph-margin-medium: 8px,
+      paragraph-margin-large: 12px,
     );
     @include utils.generateTheme($color-primary, $color-secondary, $page-background);
     @each $name, $value in $variable-overrides {

From 213f5964947cf00d63724499aefe56727509a602 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Mon, 11 Nov 2024 08:45:50 +0300
Subject: [PATCH 07/27] styling: text area component

---
 src/theme/themes/plh_kids_kw/_overrides.scss | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss
index 838b692d96..3e5a2d0f3e 100644
--- a/src/theme/themes/plh_kids_kw/_overrides.scss
+++ b/src/theme/themes/plh_kids_kw/_overrides.scss
@@ -395,7 +395,6 @@ body[data-theme="plh_kids_kw"] {
       }
     }
   }
-
   plh-tmpl-title {
     .title-wrapper h1 p {
       font-size: var(--font-size-text-title);
@@ -404,4 +403,19 @@ body[data-theme="plh_kids_kw"] {
       color: var(--ion-color-primary-700);
     }
   }
+
+  // Text Area
+  plh-text-area {
+    .wrapper .text_area {
+      background: white !important;
+      border: 0.8px solid var(--ion-color-gray-200) !important;
+      font-size: var(--font-size-text-medium) !important;
+      color: var(--ion-color-gray-900) !important;
+      font-weight: var(--font-weight-medium) !important;
+      box-shadow: none !important;
+      border-radius: var(--ion-border-radius-standard);
+      --padding-end: 16px !important;
+      --padding-start: 16px !important;
+    }
+  }
 }

From 0d52291556202bf498f864e6ff731423c7687617 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Mon, 11 Nov 2024 08:57:29 +0300
Subject: [PATCH 08/27] styling: text box component

---
 src/theme/themes/plh_kids_kw/_overrides.scss | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss
index 3e5a2d0f3e..b1d87c3b54 100644
--- a/src/theme/themes/plh_kids_kw/_overrides.scss
+++ b/src/theme/themes/plh_kids_kw/_overrides.scss
@@ -418,4 +418,23 @@ body[data-theme="plh_kids_kw"] {
       --padding-start: 16px !important;
     }
   }
+
+  // Text Box
+  plh-text-box {
+    .wrapper {
+      .text-box-input {
+        background: white !important;
+        border: 1px solid var(--ion-color-gray-200) !important;
+        font-size: var(--font-size-text-medium) !important;
+        color: var(--ion-color-gray-900) !important;
+        font-weight: var(--font-weight-medium) !important;
+        box-shadow: none !important;
+        --padding-end: 16px !important;
+        --padding-start: 16px !important;
+        --padding-top: 14px;
+        --padding-bottom: 14px;
+        min-height: 58px;
+      }
+    }
+  }
 }

From 1ed927b205e3fa12f5fe0b1cfd6354e57fe25a3e Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Tue, 12 Nov 2024 11:04:03 +0300
Subject: [PATCH 09/27] fix: styling of audio and accordion components

---
 src/theme/themes/plh_kids_kw/_overrides.scss | 86 ++++++++++++++++++--
 1 file changed, 78 insertions(+), 8 deletions(-)

diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss
index b1d87c3b54..e2dd88ba86 100644
--- a/src/theme/themes/plh_kids_kw/_overrides.scss
+++ b/src/theme/themes/plh_kids_kw/_overrides.scss
@@ -82,19 +82,21 @@ body[data-theme="plh_kids_kw"] {
       background-color: var(--ion-color-primary-50);
       padding: 8px 16px;
       padding-right: 24px;
+      margin-top: 30px;
 
       .top-row {
-        min-height: 0;
+        min-height: 0 !important;
         position: absolute;
         top: -52px;
         margin: 0 0 0 -14px;
+        // padding-top: 30px;
         h3 {
           margin: 0;
-          margin-right: 0;
-          color: var(--ion-color-gray-900);
+          color: var(--ion-color-gray-900) !important;
           max-width: 95%;
           font-weight: var(--font-weight-bold);
           font-size: var(var(--font-size-text-medium) + 2);
+          // margin-top: 20px !important;
         }
       }
       .second-row {
@@ -140,6 +142,7 @@ body[data-theme="plh_kids_kw"] {
       display: flex;
       position: relative;
       flex-direction: column;
+      margin-top: 20px;
       .top-row {
         position: absolute;
         top: -56px;
@@ -217,7 +220,6 @@ body[data-theme="plh_kids_kw"] {
 
   // accordion
   plh-accordion-component {
-    // KUWAIT THEME STYLING
     ion-accordion {
       background: var(--ion-color-primary-600);
 
@@ -227,23 +229,40 @@ body[data-theme="plh_kids_kw"] {
       .accordion-section-title {
         color: white;
 
-        font-size: var(--font-size-text-large);
+        font-size: var(--font-size-text-medium);
         font-weight: var(--font-weight-bold);
+        line-height: var(--line-height-text-small);
       }
     }
-    .accordion-header::ng-deep ion-icon {
+    ion-accordion.accordion-animated > [slot="header"] .ion-accordion-toggle-icon {
+      color: unset !important;
       color: white !important;
     }
+    ion-item.accordion-header[slot="header"] {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: flex-start;
+      min-width: 390px;
+      left: 0;
+      right: 0;
+      // border: 1px solid red;
+      &::ng-deep {
+        border: 1px solid red !important;
+      }
+    }
     ion-item.accordion-content {
       border-top: 1px solid #c4c7c9 !important;
-      margin: 0px 16px !important;
+      margin: 0px 10px !important;
 
-      &::ng-deep {
+      plh-tmpl-text {
+        width: 100%;
         p {
           color: white !important;
           font-size: var(--font-size-text-medium) !important;
           line-height: var(--line-height-text-medium) !important;
           font-weight: var(--font-weight-standard) !important;
+          margin-top: 8px;
         }
       }
     }
@@ -437,4 +456,55 @@ body[data-theme="plh_kids_kw"] {
       }
     }
   }
+
+  // Select Text
+  plh-select-text {
+    .box-wrapper {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      border: none;
+      width: 100%;
+      padding: 0;
+      .text {
+        border: 1px solid #f8dfbb;
+        border-top-left-radius: 12px;
+        border-bottom-left-radius: 12px;
+
+        width: 60%;
+        display: flex;
+        align-items: center;
+        padding: 0 12px;
+        height: 60px;
+
+        color: var(--ion-color-gray-600);
+        font-size: var(--font-size-text-small) !important;
+        text-overflow: ellipsis;
+      }
+      .copy-button {
+        width: 40%;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        margin-top: 0 !important;
+        padding: 0 6px;
+        border-top-right-radius: 12px;
+        border-bottom-right-radius: 12px;
+
+        background-color: #815600;
+        color: white;
+        font-size: var(--font-size-text-small) !important;
+        font-weight: var(--font-weight-bold);
+        text-align: center;
+        text-overflow: clip;
+      }
+
+      .image-based-icon {
+        max-width: 32px !important;
+      }
+    }
+  }
 }

From 1f278cd4966b1fefd93bbb0b523d8359bede536e Mon Sep 17 00:00:00 2001
From: Busigu Faith Daka <53012890+FaithDaka@users.noreply.github.com>
Date: Tue, 12 Nov 2024 12:32:34 +0400
Subject: [PATCH 10/27] Update comment

---
 .../template/components/text-bubble/text-bubble.component.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts b/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
index 77242bce49..e325a28582 100644
--- a/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
+++ b/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
@@ -9,7 +9,7 @@ interface ITextBubbleParams {
   speakerPosition: "left" | "right";
   /** TEMPLATE PARAMETER: "variant" */
   variant: "gray" | "primary" | "secondary" | "no-border" | "orange" | "yellow";
-  /** TEMPLATE PARAMETER: "avatar_name". The name of the speaker */
+  /** TEMPLATE PARAMETER: "speaker_name". The name of the speaker */
   speakerName: string;
 }
 

From 24f43246920784c3b42711e5c6578eb841658a76 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Tue, 12 Nov 2024 19:00:17 +0300
Subject: [PATCH 11/27] fix: update class name

---
 .../template/components/text-bubble/text-bubble.component.html  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/shared/components/template/components/text-bubble/text-bubble.component.html b/src/app/shared/components/template/components/text-bubble/text-bubble.component.html
index e3fec0e5ab..1e996b7797 100644
--- a/src/app/shared/components/template/components/text-bubble/text-bubble.component.html
+++ b/src/app/shared/components/template/components/text-bubble/text-bubble.component.html
@@ -5,7 +5,7 @@
 >
   <div>
     @if (params.speakerName) {
-      <div class="avatar-name">{{ params.speakerName }}</div>
+      <div class="speaker-name">{{ params.speakerName }}</div>
     } @else {
       <div class="no-name"></div>
     }

From 6b42bad81d766ee56231d51c6e3b423688dff1ef Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Tue, 12 Nov 2024 19:00:38 +0300
Subject: [PATCH 12/27] styling support for new variants and speaker name

---
 .../text-bubble/text-bubble.component.scss    | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss b/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss
index ce2838f3c7..753c294a73 100644
--- a/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss
+++ b/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss
@@ -32,6 +32,16 @@ $imageSize: 64px;
   &[data-variant~="no_border"] {
     --border-color: transparent;
   }
+
+  &[data-variant~="accent-1"] {
+    --background-color: var(--ion-color-primary-200);
+    --border-color: var(--ion-color-primary-500);
+  }
+
+  &[data-variant~="accent-2"] {
+    --background-color: var(--ion-color-secondary-200);
+    --border-color: var(--ion-color-secondary-500);
+  }
 }
 
 .speaker-image {
@@ -119,3 +129,15 @@ $imageSize: 64px;
     max(var(--b), 100% - var(--p) - var(--h) * tan(var(--a) / 2)) 0
     max(var(--b), var(--p) - var(--h) * tan(var(--a) / 2)) / 0 0 var(--h) 0;
 }
+
+// For the speaker name
+.speaker-name {
+  position: absolute;
+  bottom: -55px;
+  left: 78px;
+  color: var(--ion-color-gray-700);
+}
+.container[data-position="right"] .speaker-name {
+  text-align: right;
+  right: 80px;
+}

From 0fc821c3209ba1b8713f7cbf0ddc195e050783b4 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Tue, 12 Nov 2024 19:00:56 +0300
Subject: [PATCH 13/27] refactor: variant names

---
 .../template/components/text-bubble/text-bubble.component.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts b/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
index 77242bce49..06c7012b9f 100644
--- a/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
+++ b/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
@@ -8,7 +8,7 @@ interface ITextBubbleParams {
   /** TEMPLATE PARAMETER: "speaker_position". The position of the speaker image and speech bubble tail */
   speakerPosition: "left" | "right";
   /** TEMPLATE PARAMETER: "variant" */
-  variant: "gray" | "primary" | "secondary" | "no-border" | "orange" | "yellow";
+  variant: "gray" | "primary" | "secondary" | "no-border" | "accent-1" | "accent-2";
   /** TEMPLATE PARAMETER: "avatar_name". The name of the speaker */
   speakerName: string;
 }

From c7478e10002472c0d5aa50e76b63e4a765cbbc0d Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Tue, 12 Nov 2024 19:01:25 +0300
Subject: [PATCH 14/27] additional color variants

---
 src/theme/themes/plh_kids_kw/_index.scss | 32 ++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/theme/themes/plh_kids_kw/_index.scss b/src/theme/themes/plh_kids_kw/_index.scss
index 74e50fbdd9..9970f52a75 100644
--- a/src/theme/themes/plh_kids_kw/_index.scss
+++ b/src/theme/themes/plh_kids_kw/_index.scss
@@ -88,6 +88,38 @@
       paragraph-margin-small: 4px,
       paragraph-margin-medium: 8px,
       paragraph-margin-large: 12px,
+
+      // SURFACE COLOUR PALETTE
+      color-surface-white: #ffffff,
+      color-surface-white-variant: #f9f9fa,
+      color-surface-black: #1b1c1d,
+      color-surface-black-variant: #44474a,
+      color-outline: #74777c,
+      color-outline-variant: #c4c7c9,
+
+      // SECONDARY PALETTE
+      color-secondary-blue-40: #0066a1,
+      color-secondary-blue-50: #007fbf,
+      color-secondary-blue-60: #2e98d8,
+      color-secondary-blue-70: #6ab2e9,
+      color-secondary-blue-80: #9ecbf5,
+      color-secondary-blue-90: #cfe5fb,
+
+      // YELLOW PALETTE
+      color-accent-yellow-40: #815600,
+      color-accent-yellow-50: #9f6e00,
+      color-accent-yellow-60: #bb8807,
+      color-accent-yellow-70: #d5a344,
+      color-accent-yellow-80: #eac07c,
+      color-accent-yellow-95: #fdefdc,
+
+      // ORANGE PALETTE
+      color-accent-orange-40: #b82000,
+      color-accent-orange-50: #dd3b00,
+      color-accent-orange-70: #ff8250,
+      color-accent-orange-80: #ffab83,
+      color-accent-orange-90: #ffd5be,
+      color-accent-orange-95: #ffeade,
     );
     @include utils.generateTheme($color-primary, $color-secondary, $page-background);
     @each $name, $value in $variable-overrides {

From 92e4ad33c352590f08c8559570aa174d3735b46d Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Tue, 12 Nov 2024 19:02:07 +0300
Subject: [PATCH 15/27] fix: use color variables

---
 src/theme/themes/plh_kids_kw/_overrides.scss | 57 ++++++++++----------
 1 file changed, 29 insertions(+), 28 deletions(-)

diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss
index e2dd88ba86..639dafa9e7 100644
--- a/src/theme/themes/plh_kids_kw/_overrides.scss
+++ b/src/theme/themes/plh_kids_kw/_overrides.scss
@@ -115,7 +115,7 @@ body[data-theme="plh_kids_kw"] {
         .progress-block {
           ion-range {
             width: 100% !important;
-            --bar-background: white !important;
+            --bar-background: var(--color-surface-white) !important;
             --bar-height: 12px !important;
             --knob-size: 20px !important;
             --knob-background: var(--ion-color-secondary-600) !important;
@@ -189,7 +189,7 @@ body[data-theme="plh_kids_kw"] {
         .progress-block {
           .audio-range {
             --bar-background-active: var(--ion-color-primary-400) !important;
-            --bar-background: white !important;
+            --bar-background: var(--color-surface-white) !important;
             --bar-height: 12px !important;
             --bar-border-radius: var(--ion-border-radius-standard) !important;
             --knob-size: 0px !important;
@@ -227,7 +227,7 @@ body[data-theme="plh_kids_kw"] {
       border-radius: var(--ion-border-radius-small);
       box-shadow: none;
       .accordion-section-title {
-        color: white;
+        color: var(--color-surface-white);
 
         font-size: var(--font-size-text-medium);
         font-weight: var(--font-weight-bold);
@@ -236,7 +236,7 @@ body[data-theme="plh_kids_kw"] {
     }
     ion-accordion.accordion-animated > [slot="header"] .ion-accordion-toggle-icon {
       color: unset !important;
-      color: white !important;
+      color: var(--color-surface-white) !important;
     }
     ion-item.accordion-header[slot="header"] {
       display: flex;
@@ -252,13 +252,13 @@ body[data-theme="plh_kids_kw"] {
       }
     }
     ion-item.accordion-content {
-      border-top: 1px solid #c4c7c9 !important;
+      border-top: 1px solid var(--color-outline-variant) !important;
       margin: 0px 10px !important;
 
       plh-tmpl-text {
         width: 100%;
         p {
-          color: white !important;
+          color: var(--color-surface-white) !important;
           font-size: var(--font-size-text-medium) !important;
           line-height: var(--line-height-text-medium) !important;
           font-weight: var(--font-weight-standard) !important;
@@ -282,8 +282,8 @@ body[data-theme="plh_kids_kw"] {
       --border-color: none;
       --background-color: none;
       .text-bubble {
-        border: 1px solid #74777c;
-        background-color: #f9f9fa;
+        border: 1px solid var(--color-outline);
+        background-color: var(--color-white-variant);
       }
     }
 
@@ -300,24 +300,24 @@ body[data-theme="plh_kids_kw"] {
       --background-color: none;
       --border-color: none;
       .text-bubble {
-        border: 1px solid #815600;
-        background-color: #f9f9fa;
+        border: 1px solid var(--color-accent-yellow-40);
+        background-color: var(--color-white-variant);
       }
     }
 
-    &[data-variant~="orange"] {
+    &[data-variant~="accent-1"] {
       margin-bottom: 14px;
       .text-bubble {
-        border: 1px solid #ff8250;
-        background-color: #ffeade;
+        border: 1px solid var(--color-accent-orange-70);
+        background-color: var(--color-accent-orange-95);
       }
     }
 
-    &[data-variant~="yellow"] {
+    &[data-variant~="accent-2"] {
       margin-bottom: 14px;
       .text-bubble {
-        border: 1px solid #d5a344;
-        background-color: #fdefdc;
+        border: 1px solid var(--color-accent-yellow-70);
+        background-color: var(--color-accent-yellow-95);
       }
     }
 
@@ -362,10 +362,11 @@ body[data-theme="plh_kids_kw"] {
       }
     }
 
-    .avatar-name {
+    .speaker-name {
+      position: unset !important;
       margin-bottom: 6px;
       font-size: var(--font-size-text-tiny);
-      color: #74777c;
+      color: var(--color-outline);
       font-weight: var(--font-weight-bold);
       letter-spacing: -0.1px;
     }
@@ -396,7 +397,7 @@ body[data-theme="plh_kids_kw"] {
       margin-left: 8px;
     }
 
-    .avatar-name {
+    .speaker-name {
       text-align: right;
     }
   }
@@ -404,7 +405,7 @@ body[data-theme="plh_kids_kw"] {
   // Text
   plh-tmpl-text {
     .standard {
-      color: var(--ion-color-gray-900);
+      color: var(--color-surface-black);
       font-size: var(--font-size-text-medium);
       p {
         margin: var(--paragraph-margin-small) 0;
@@ -426,8 +427,8 @@ body[data-theme="plh_kids_kw"] {
   // Text Area
   plh-text-area {
     .wrapper .text_area {
-      background: white !important;
-      border: 0.8px solid var(--ion-color-gray-200) !important;
+      background: var(--color-surface-white) !important;
+      border: 1px solid var(--color-outline-variant) !important;
       font-size: var(--font-size-text-medium) !important;
       color: var(--ion-color-gray-900) !important;
       font-weight: var(--font-weight-medium) !important;
@@ -442,10 +443,10 @@ body[data-theme="plh_kids_kw"] {
   plh-text-box {
     .wrapper {
       .text-box-input {
-        background: white !important;
-        border: 1px solid var(--ion-color-gray-200) !important;
+        background: var(--color-surface-white) !important;
+        border: 1px solid var(--color-outline-variant) !important;
         font-size: var(--font-size-text-medium) !important;
-        color: var(--ion-color-gray-900) !important;
+        color: var(--color-surface-black) !important;
         font-weight: var(--font-weight-medium) !important;
         box-shadow: none !important;
         --padding-end: 16px !important;
@@ -468,7 +469,7 @@ body[data-theme="plh_kids_kw"] {
       width: 100%;
       padding: 0;
       .text {
-        border: 1px solid #f8dfbb;
+        border: 1px solid var(--color-accent-yellow-80);
         border-top-left-radius: 12px;
         border-bottom-left-radius: 12px;
 
@@ -494,8 +495,8 @@ body[data-theme="plh_kids_kw"] {
         border-top-right-radius: 12px;
         border-bottom-right-radius: 12px;
 
-        background-color: #815600;
-        color: white;
+        background-color: var(--color-accent-yellow-40);
+        color: var(--color-surface-white);
         font-size: var(--font-size-text-small) !important;
         font-weight: var(--font-weight-bold);
         text-align: center;

From 0cddf4f16fc83e0389030e7ea65d2e704e1dab52 Mon Sep 17 00:00:00 2001
From: Johnny McQuade <jfmcquade@hotmail.com>
Date: Mon, 18 Nov 2024 10:56:14 +0000
Subject: [PATCH 16/27] chore: expose 'speaker_numer' parameter; expose
 tertiary and quarternary styling to theme variables

---
 .../text-bubble/text-bubble.component.scss    | 28 ++++++++++++-------
 .../text-bubble/text-bubble.component.ts      | 26 +++++++++++++++--
 src/theme/themes/plh_kids_kw/_index.scss      |  5 ++++
 3 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss b/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss
index 753c294a73..e6390021b0 100644
--- a/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss
+++ b/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss
@@ -3,6 +3,14 @@
 // NOTE - when copying css border-image double-slash // misinterpreted so replace with / 0 /
 
 $imageSize: 64px;
+$bubble-background-color-1: var(--text-bubble-background-color-1, var(--ion-color-primary-200));
+$bubble-border-color-1: var(--text-bubble-border-color-1, var(--ion-color-primary-500));
+$bubble-background-color-2: var(--text-bubble-background-color-2, var(--ion-color-secondary-200));
+$bubble-border-color-2: var(--text-bubble-border-color-2, var(--ion-color-secondary-500));
+$bubble-background-color-3: var(--text-bubble-background-color-3, var(--ion-color-primary-200));
+$bubble-border-color-3: var(--text-bubble-border-color-3, var(--ion-color-primary-500));
+$bubble-background-color-4: var(--text-bubble-background-color-4, var(--ion-color-secondary-200));
+$bubble-border-color-4: var(--text-bubble-border-color-4, var(--ion-color-secondary-500));
 
 .container {
   position: relative;
@@ -20,27 +28,27 @@ $imageSize: 64px;
   }
 
   &[data-variant~="primary"] {
-    --background-color: var(--ion-color-primary-200);
-    --border-color: var(--ion-color-primary-500);
+    --background-color: #{$bubble-background-color-1};
+    --border-color: #{$bubble-border-color-1};
   }
 
   &[data-variant~="secondary"] {
-    --background-color: var(--ion-color-secondary-200);
-    --border-color: var(--ion-color-secondary-500);
+    --background-color: #{$bubble-background-color-2};
+    --border-color: #{$bubble-border-color-2};
   }
 
   &[data-variant~="no_border"] {
     --border-color: transparent;
   }
 
-  &[data-variant~="accent-1"] {
-    --background-color: var(--ion-color-primary-200);
-    --border-color: var(--ion-color-primary-500);
+  &[data-variant~="tertiary"] {
+    --background-color: #{$bubble-background-color-3};
+    --border-color: #{$bubble-border-color-3};
   }
 
-  &[data-variant~="accent-2"] {
-    --background-color: var(--ion-color-secondary-200);
-    --border-color: var(--ion-color-secondary-500);
+  &[data-variant~="quaternary"] {
+    --background-color: #{$bubble-background-color-4};
+    --border-color: #{$bubble-border-color-4};
   }
 }
 
diff --git a/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts b/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
index 06c7012b9f..db2b35a65c 100644
--- a/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
+++ b/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewEncapsulation } from "@angular/core";
 import { TemplateBaseComponent } from "../base";
-import { getStringParamFromTemplateRow } from "src/app/shared/utils";
+import { getNumberParamFromTemplateRow, getStringParamFromTemplateRow } from "src/app/shared/utils";
 
 interface ITextBubbleParams {
   /** TEMPLATE PARAMETER: "speaker_image_asset". The path to an image to be used as the speaker */
@@ -8,9 +8,12 @@ interface ITextBubbleParams {
   /** TEMPLATE PARAMETER: "speaker_position". The position of the speaker image and speech bubble tail */
   speakerPosition: "left" | "right";
   /** TEMPLATE PARAMETER: "variant" */
-  variant: "gray" | "primary" | "secondary" | "no-border" | "accent-1" | "accent-2";
+  variant: "gray" | "primary" | "secondary" | "no-border" | "tertiary" | "quaternary";
   /** TEMPLATE PARAMETER: "avatar_name". The name of the speaker */
   speakerName: string;
+  /** TEMPLATE PARAMETER: "speaker_number". Alternative way to handle both speaker position
+   *  and speech bubble style (colour). Number 1-4. */
+  speakerNumber: number;
 }
 
 @Component({
@@ -39,5 +42,24 @@ export class TmplTextBubbleComponent extends TemplateBaseComponent implements On
       .split(",")
       .join(" ") as ITextBubbleParams["variant"];
     this.params.speakerName = getStringParamFromTemplateRow(this._row, "speaker_name", "");
+    this.params.speakerNumber = getNumberParamFromTemplateRow(this._row, "speaker_number", 0);
+    switch (this.params.speakerNumber) {
+      case 1:
+        this.params.variant = "primary";
+        this.params.speakerPosition = "left";
+        break;
+      case 2:
+        this.params.variant = "secondary";
+        this.params.speakerPosition = "right";
+        break;
+      case 3:
+        this.params.variant = "tertiary";
+        this.params.speakerPosition = "left";
+        break;
+      case 4:
+        this.params.variant = "quaternary";
+        this.params.speakerPosition = "right";
+        break;
+    }
   }
 }
diff --git a/src/theme/themes/plh_kids_kw/_index.scss b/src/theme/themes/plh_kids_kw/_index.scss
index 9970f52a75..6ad10a45b4 100644
--- a/src/theme/themes/plh_kids_kw/_index.scss
+++ b/src/theme/themes/plh_kids_kw/_index.scss
@@ -56,6 +56,11 @@
       border-width-default: 1px,
       border-standard: var(--border-width-default) solid var(--border-color-default),
       border-thin-standard: 1px solid var(--border-color-default),
+      // COLOURS
+      text-bubble-background-color-3: #ffeade,
+      text-bubble-border-color-3: #ff8250,
+      text-bubble-background-color-4: #fdefdc,
+      text-bubble-border-color-4: #d5a344,
       button-background-primary: var(--ion-color-primary-500),
       button-background-secondary: var(--ion-color-secondary),
       button-background-option: var(--ion-color-primary-800),

From 136e6f93afee8cfdb52ba64fd26a66b0bea94052 Mon Sep 17 00:00:00 2001
From: Johnny McQuade <jfmcquade@hotmail.com>
Date: Mon, 18 Nov 2024 11:18:30 +0000
Subject: [PATCH 17/27] chore: expose 'speaker_numer' parameter; expose
 tertiary and quarternary styling to theme variables

---
 .../text-bubble/text-bubble.component.scss    | 28 ++++++++++++-------
 .../text-bubble/text-bubble.component.ts      | 26 +++++++++++++++--
 src/theme/themes/plh_kids_kw/_index.scss      |  5 ++++
 3 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss b/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss
index 753c294a73..e6390021b0 100644
--- a/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss
+++ b/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss
@@ -3,6 +3,14 @@
 // NOTE - when copying css border-image double-slash // misinterpreted so replace with / 0 /
 
 $imageSize: 64px;
+$bubble-background-color-1: var(--text-bubble-background-color-1, var(--ion-color-primary-200));
+$bubble-border-color-1: var(--text-bubble-border-color-1, var(--ion-color-primary-500));
+$bubble-background-color-2: var(--text-bubble-background-color-2, var(--ion-color-secondary-200));
+$bubble-border-color-2: var(--text-bubble-border-color-2, var(--ion-color-secondary-500));
+$bubble-background-color-3: var(--text-bubble-background-color-3, var(--ion-color-primary-200));
+$bubble-border-color-3: var(--text-bubble-border-color-3, var(--ion-color-primary-500));
+$bubble-background-color-4: var(--text-bubble-background-color-4, var(--ion-color-secondary-200));
+$bubble-border-color-4: var(--text-bubble-border-color-4, var(--ion-color-secondary-500));
 
 .container {
   position: relative;
@@ -20,27 +28,27 @@ $imageSize: 64px;
   }
 
   &[data-variant~="primary"] {
-    --background-color: var(--ion-color-primary-200);
-    --border-color: var(--ion-color-primary-500);
+    --background-color: #{$bubble-background-color-1};
+    --border-color: #{$bubble-border-color-1};
   }
 
   &[data-variant~="secondary"] {
-    --background-color: var(--ion-color-secondary-200);
-    --border-color: var(--ion-color-secondary-500);
+    --background-color: #{$bubble-background-color-2};
+    --border-color: #{$bubble-border-color-2};
   }
 
   &[data-variant~="no_border"] {
     --border-color: transparent;
   }
 
-  &[data-variant~="accent-1"] {
-    --background-color: var(--ion-color-primary-200);
-    --border-color: var(--ion-color-primary-500);
+  &[data-variant~="tertiary"] {
+    --background-color: #{$bubble-background-color-3};
+    --border-color: #{$bubble-border-color-3};
   }
 
-  &[data-variant~="accent-2"] {
-    --background-color: var(--ion-color-secondary-200);
-    --border-color: var(--ion-color-secondary-500);
+  &[data-variant~="quaternary"] {
+    --background-color: #{$bubble-background-color-4};
+    --border-color: #{$bubble-border-color-4};
   }
 }
 
diff --git a/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts b/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
index 06c7012b9f..db2b35a65c 100644
--- a/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
+++ b/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewEncapsulation } from "@angular/core";
 import { TemplateBaseComponent } from "../base";
-import { getStringParamFromTemplateRow } from "src/app/shared/utils";
+import { getNumberParamFromTemplateRow, getStringParamFromTemplateRow } from "src/app/shared/utils";
 
 interface ITextBubbleParams {
   /** TEMPLATE PARAMETER: "speaker_image_asset". The path to an image to be used as the speaker */
@@ -8,9 +8,12 @@ interface ITextBubbleParams {
   /** TEMPLATE PARAMETER: "speaker_position". The position of the speaker image and speech bubble tail */
   speakerPosition: "left" | "right";
   /** TEMPLATE PARAMETER: "variant" */
-  variant: "gray" | "primary" | "secondary" | "no-border" | "accent-1" | "accent-2";
+  variant: "gray" | "primary" | "secondary" | "no-border" | "tertiary" | "quaternary";
   /** TEMPLATE PARAMETER: "avatar_name". The name of the speaker */
   speakerName: string;
+  /** TEMPLATE PARAMETER: "speaker_number". Alternative way to handle both speaker position
+   *  and speech bubble style (colour). Number 1-4. */
+  speakerNumber: number;
 }
 
 @Component({
@@ -39,5 +42,24 @@ export class TmplTextBubbleComponent extends TemplateBaseComponent implements On
       .split(",")
       .join(" ") as ITextBubbleParams["variant"];
     this.params.speakerName = getStringParamFromTemplateRow(this._row, "speaker_name", "");
+    this.params.speakerNumber = getNumberParamFromTemplateRow(this._row, "speaker_number", 0);
+    switch (this.params.speakerNumber) {
+      case 1:
+        this.params.variant = "primary";
+        this.params.speakerPosition = "left";
+        break;
+      case 2:
+        this.params.variant = "secondary";
+        this.params.speakerPosition = "right";
+        break;
+      case 3:
+        this.params.variant = "tertiary";
+        this.params.speakerPosition = "left";
+        break;
+      case 4:
+        this.params.variant = "quaternary";
+        this.params.speakerPosition = "right";
+        break;
+    }
   }
 }
diff --git a/src/theme/themes/plh_kids_kw/_index.scss b/src/theme/themes/plh_kids_kw/_index.scss
index 9970f52a75..6ad10a45b4 100644
--- a/src/theme/themes/plh_kids_kw/_index.scss
+++ b/src/theme/themes/plh_kids_kw/_index.scss
@@ -56,6 +56,11 @@
       border-width-default: 1px,
       border-standard: var(--border-width-default) solid var(--border-color-default),
       border-thin-standard: 1px solid var(--border-color-default),
+      // COLOURS
+      text-bubble-background-color-3: #ffeade,
+      text-bubble-border-color-3: #ff8250,
+      text-bubble-background-color-4: #fdefdc,
+      text-bubble-border-color-4: #d5a344,
       button-background-primary: var(--ion-color-primary-500),
       button-background-secondary: var(--ion-color-secondary),
       button-background-option: var(--ion-color-primary-800),

From 129c0fda217501c9636c1f88018de26d6f60a317 Mon Sep 17 00:00:00 2001
From: Johnny McQuade <jfmcquade@hotmail.com>
Date: Mon, 18 Nov 2024 11:19:48 +0000
Subject: [PATCH 18/27] Revert "chore: expose 'speaker_numer' parameter; expose
 tertiary and quarternary styling to theme variables"

This reverts commit 136e6f93afee8cfdb52ba64fd26a66b0bea94052.
---
 .../text-bubble/text-bubble.component.scss    | 28 +++++++------------
 .../text-bubble/text-bubble.component.ts      | 26 ++---------------
 src/theme/themes/plh_kids_kw/_index.scss      |  5 ----
 3 files changed, 12 insertions(+), 47 deletions(-)

diff --git a/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss b/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss
index e6390021b0..753c294a73 100644
--- a/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss
+++ b/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss
@@ -3,14 +3,6 @@
 // NOTE - when copying css border-image double-slash // misinterpreted so replace with / 0 /
 
 $imageSize: 64px;
-$bubble-background-color-1: var(--text-bubble-background-color-1, var(--ion-color-primary-200));
-$bubble-border-color-1: var(--text-bubble-border-color-1, var(--ion-color-primary-500));
-$bubble-background-color-2: var(--text-bubble-background-color-2, var(--ion-color-secondary-200));
-$bubble-border-color-2: var(--text-bubble-border-color-2, var(--ion-color-secondary-500));
-$bubble-background-color-3: var(--text-bubble-background-color-3, var(--ion-color-primary-200));
-$bubble-border-color-3: var(--text-bubble-border-color-3, var(--ion-color-primary-500));
-$bubble-background-color-4: var(--text-bubble-background-color-4, var(--ion-color-secondary-200));
-$bubble-border-color-4: var(--text-bubble-border-color-4, var(--ion-color-secondary-500));
 
 .container {
   position: relative;
@@ -28,27 +20,27 @@ $bubble-border-color-4: var(--text-bubble-border-color-4, var(--ion-color-second
   }
 
   &[data-variant~="primary"] {
-    --background-color: #{$bubble-background-color-1};
-    --border-color: #{$bubble-border-color-1};
+    --background-color: var(--ion-color-primary-200);
+    --border-color: var(--ion-color-primary-500);
   }
 
   &[data-variant~="secondary"] {
-    --background-color: #{$bubble-background-color-2};
-    --border-color: #{$bubble-border-color-2};
+    --background-color: var(--ion-color-secondary-200);
+    --border-color: var(--ion-color-secondary-500);
   }
 
   &[data-variant~="no_border"] {
     --border-color: transparent;
   }
 
-  &[data-variant~="tertiary"] {
-    --background-color: #{$bubble-background-color-3};
-    --border-color: #{$bubble-border-color-3};
+  &[data-variant~="accent-1"] {
+    --background-color: var(--ion-color-primary-200);
+    --border-color: var(--ion-color-primary-500);
   }
 
-  &[data-variant~="quaternary"] {
-    --background-color: #{$bubble-background-color-4};
-    --border-color: #{$bubble-border-color-4};
+  &[data-variant~="accent-2"] {
+    --background-color: var(--ion-color-secondary-200);
+    --border-color: var(--ion-color-secondary-500);
   }
 }
 
diff --git a/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts b/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
index db2b35a65c..06c7012b9f 100644
--- a/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
+++ b/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewEncapsulation } from "@angular/core";
 import { TemplateBaseComponent } from "../base";
-import { getNumberParamFromTemplateRow, getStringParamFromTemplateRow } from "src/app/shared/utils";
+import { getStringParamFromTemplateRow } from "src/app/shared/utils";
 
 interface ITextBubbleParams {
   /** TEMPLATE PARAMETER: "speaker_image_asset". The path to an image to be used as the speaker */
@@ -8,12 +8,9 @@ interface ITextBubbleParams {
   /** TEMPLATE PARAMETER: "speaker_position". The position of the speaker image and speech bubble tail */
   speakerPosition: "left" | "right";
   /** TEMPLATE PARAMETER: "variant" */
-  variant: "gray" | "primary" | "secondary" | "no-border" | "tertiary" | "quaternary";
+  variant: "gray" | "primary" | "secondary" | "no-border" | "accent-1" | "accent-2";
   /** TEMPLATE PARAMETER: "avatar_name". The name of the speaker */
   speakerName: string;
-  /** TEMPLATE PARAMETER: "speaker_number". Alternative way to handle both speaker position
-   *  and speech bubble style (colour). Number 1-4. */
-  speakerNumber: number;
 }
 
 @Component({
@@ -42,24 +39,5 @@ export class TmplTextBubbleComponent extends TemplateBaseComponent implements On
       .split(",")
       .join(" ") as ITextBubbleParams["variant"];
     this.params.speakerName = getStringParamFromTemplateRow(this._row, "speaker_name", "");
-    this.params.speakerNumber = getNumberParamFromTemplateRow(this._row, "speaker_number", 0);
-    switch (this.params.speakerNumber) {
-      case 1:
-        this.params.variant = "primary";
-        this.params.speakerPosition = "left";
-        break;
-      case 2:
-        this.params.variant = "secondary";
-        this.params.speakerPosition = "right";
-        break;
-      case 3:
-        this.params.variant = "tertiary";
-        this.params.speakerPosition = "left";
-        break;
-      case 4:
-        this.params.variant = "quaternary";
-        this.params.speakerPosition = "right";
-        break;
-    }
   }
 }
diff --git a/src/theme/themes/plh_kids_kw/_index.scss b/src/theme/themes/plh_kids_kw/_index.scss
index 6ad10a45b4..9970f52a75 100644
--- a/src/theme/themes/plh_kids_kw/_index.scss
+++ b/src/theme/themes/plh_kids_kw/_index.scss
@@ -56,11 +56,6 @@
       border-width-default: 1px,
       border-standard: var(--border-width-default) solid var(--border-color-default),
       border-thin-standard: 1px solid var(--border-color-default),
-      // COLOURS
-      text-bubble-background-color-3: #ffeade,
-      text-bubble-border-color-3: #ff8250,
-      text-bubble-background-color-4: #fdefdc,
-      text-bubble-border-color-4: #d5a344,
       button-background-primary: var(--ion-color-primary-500),
       button-background-secondary: var(--ion-color-secondary),
       button-background-option: var(--ion-color-primary-800),

From 71bd2d376357a1adb64cbf7b18530af3065122e7 Mon Sep 17 00:00:00 2001
From: Johnny McQuade <jfmcquade@hotmail.com>
Date: Mon, 18 Nov 2024 12:02:02 +0000
Subject: [PATCH 19/27] chore: rename tertiary and quarternary text bubble
 variants, expose corresponding colour variables to theme

---
 .../text-bubble/text-bubble.component.scss       | 16 ++++++++++------
 .../text-bubble/text-bubble.component.ts         |  2 +-
 src/theme/themes/plh_kids_kw/_index.scss         |  5 +++++
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss b/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss
index 753c294a73..09f4f74ccd 100644
--- a/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss
+++ b/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss
@@ -3,6 +3,10 @@
 // NOTE - when copying css border-image double-slash // misinterpreted so replace with / 0 /
 
 $imageSize: 64px;
+$bubble-background-color-3: var(--text-bubble-background-color-3, --ion-color-primary-200);
+$bubble-border-color-3: var(--text-bubble-border-color-3, --ion-color-primary-500);
+$bubble-background-color-4: var(--text-bubble-background-color-4, --ion-color-secondary-200);
+$bubble-border-color-4: var(--text-bubble-border-color-4, --ion-color-secondary-500);
 
 .container {
   position: relative;
@@ -33,14 +37,14 @@ $imageSize: 64px;
     --border-color: transparent;
   }
 
-  &[data-variant~="accent-1"] {
-    --background-color: var(--ion-color-primary-200);
-    --border-color: var(--ion-color-primary-500);
+  &[data-variant~="speaker-3"] {
+    --background-color: #{$bubble-background-color-3};
+    --border-color: #{$bubble-border-color-3};
   }
 
-  &[data-variant~="accent-2"] {
-    --background-color: var(--ion-color-secondary-200);
-    --border-color: var(--ion-color-secondary-500);
+  &[data-variant~="speaker-4"] {
+    --background-color: #{$bubble-background-color-4};
+    --border-color: #{$bubble-background-color-4};
   }
 }
 
diff --git a/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts b/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
index 06c7012b9f..715490e9cf 100644
--- a/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
+++ b/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
@@ -8,7 +8,7 @@ interface ITextBubbleParams {
   /** TEMPLATE PARAMETER: "speaker_position". The position of the speaker image and speech bubble tail */
   speakerPosition: "left" | "right";
   /** TEMPLATE PARAMETER: "variant" */
-  variant: "gray" | "primary" | "secondary" | "no-border" | "accent-1" | "accent-2";
+  variant: "gray" | "primary" | "secondary" | "no-border" | "speaker-3" | "speaker-4";
   /** TEMPLATE PARAMETER: "avatar_name". The name of the speaker */
   speakerName: string;
 }
diff --git a/src/theme/themes/plh_kids_kw/_index.scss b/src/theme/themes/plh_kids_kw/_index.scss
index 9970f52a75..6ad10a45b4 100644
--- a/src/theme/themes/plh_kids_kw/_index.scss
+++ b/src/theme/themes/plh_kids_kw/_index.scss
@@ -56,6 +56,11 @@
       border-width-default: 1px,
       border-standard: var(--border-width-default) solid var(--border-color-default),
       border-thin-standard: 1px solid var(--border-color-default),
+      // COLOURS
+      text-bubble-background-color-3: #ffeade,
+      text-bubble-border-color-3: #ff8250,
+      text-bubble-background-color-4: #fdefdc,
+      text-bubble-border-color-4: #d5a344,
       button-background-primary: var(--ion-color-primary-500),
       button-background-secondary: var(--ion-color-secondary),
       button-background-option: var(--ion-color-primary-800),

From 7a08eddfa89576d23103ed09ad60565593b1e439 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Tue, 19 Nov 2024 10:37:03 +0300
Subject: [PATCH 20/27] fix: flip text bubble image at component level

---
 .../text-bubble/text-bubble.component.scss           | 12 +++++++++---
 src/theme/themes/plh_kids_kw/_overrides.scss         |  2 --
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss b/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss
index 753c294a73..e5d1bed227 100644
--- a/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss
+++ b/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss
@@ -137,7 +137,13 @@ $imageSize: 64px;
   left: 78px;
   color: var(--ion-color-gray-700);
 }
-.container[data-position="right"] .speaker-name {
-  text-align: right;
-  right: 80px;
+.container[data-position="right"] {
+  .speaker-name {
+    text-align: right;
+    right: 80px;
+  }
+  img.speaker-image {
+    -webkit-transform: scaleX(-1);
+    transform: scaleX(-1);
+  }
 }
diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss
index 639dafa9e7..0dc0b59d71 100644
--- a/src/theme/themes/plh_kids_kw/_overrides.scss
+++ b/src/theme/themes/plh_kids_kw/_overrides.scss
@@ -392,8 +392,6 @@ body[data-theme="plh_kids_kw"] {
     }
 
     img.speaker-image {
-      -webkit-transform: scaleX(-1);
-      transform: scaleX(-1);
       margin-left: 8px;
     }
 

From 3f903f214c64e9f4381fcf64898cc7bcfd94eee4 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Tue, 19 Nov 2024 10:43:20 +0300
Subject: [PATCH 21/27] fix: use colour variables

---
 src/theme/themes/plh_kids_kw/_index.scss | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/theme/themes/plh_kids_kw/_index.scss b/src/theme/themes/plh_kids_kw/_index.scss
index 6ad10a45b4..ccef178235 100644
--- a/src/theme/themes/plh_kids_kw/_index.scss
+++ b/src/theme/themes/plh_kids_kw/_index.scss
@@ -56,11 +56,6 @@
       border-width-default: 1px,
       border-standard: var(--border-width-default) solid var(--border-color-default),
       border-thin-standard: 1px solid var(--border-color-default),
-      // COLOURS
-      text-bubble-background-color-3: #ffeade,
-      text-bubble-border-color-3: #ff8250,
-      text-bubble-background-color-4: #fdefdc,
-      text-bubble-border-color-4: #d5a344,
       button-background-primary: var(--ion-color-primary-500),
       button-background-secondary: var(--ion-color-secondary),
       button-background-option: var(--ion-color-primary-800),
@@ -125,6 +120,12 @@
       color-accent-orange-80: #ffab83,
       color-accent-orange-90: #ffd5be,
       color-accent-orange-95: #ffeade,
+
+      // TEXT BUBBLE COLOURS
+      text-bubble-background-color-3: var(--color-accent-orange-95),
+      text-bubble-border-color-3: var(--color-accent-orange-70),
+      text-bubble-background-color-4: var(--color-accent-yellow-95),
+      text-bubble-border-color-4: var(--color-accent-yellow-70),
     );
     @include utils.generateTheme($color-primary, $color-secondary, $page-background);
     @each $name, $value in $variable-overrides {

From 16395e0db175a42725244197be9cddb6ef6de553 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Mon, 25 Nov 2024 17:58:07 +0300
Subject: [PATCH 22/27] fix comment

---
 .../template/components/text-bubble/text-bubble.component.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts b/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
index 715490e9cf..990f20ff80 100644
--- a/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
+++ b/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
@@ -9,7 +9,7 @@ interface ITextBubbleParams {
   speakerPosition: "left" | "right";
   /** TEMPLATE PARAMETER: "variant" */
   variant: "gray" | "primary" | "secondary" | "no-border" | "speaker-3" | "speaker-4";
-  /** TEMPLATE PARAMETER: "avatar_name". The name of the speaker */
+  /** TEMPLATE PARAMETER: "speaker_name". The name of the speaker */
   speakerName: string;
 }
 

From 784accdbedca42fc918d74ce25defed838bb69f3 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Tue, 26 Nov 2024 13:33:51 +0300
Subject: [PATCH 23/27] style: radio-group

---
 src/theme/themes/plh_kids_kw/_overrides.scss | 259 ++++++++++++-------
 1 file changed, 162 insertions(+), 97 deletions(-)

diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss
index a0e927255a..f918b64c9e 100644
--- a/src/theme/themes/plh_kids_kw/_overrides.scss
+++ b/src/theme/themes/plh_kids_kw/_overrides.scss
@@ -21,8 +21,13 @@ body[data-theme="plh_kids_kw"] {
     ion-button[disabled] {
       filter: none;
     }
+
+    .left {
+      text-align: unset !important;
+    }
     // Center align all button text by default
     .left.null ::ng-deep {
+      text-align: center;
       p {
         text-align: center !important;
       }
@@ -269,134 +274,139 @@ body[data-theme="plh_kids_kw"] {
   }
 
   // Text Bubble
-  .text-bubble-container {
-    position: unset;
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: center;
-    align-items: start;
-    height: fit-content;
-    margin-bottom: 20px;
-
-    &[data-variant~="gray"] {
-      --border-color: none;
-      --background-color: none;
-      .text-bubble {
-        border: 1px solid var(--color-outline);
-        background-color: var(--color-white-variant);
+  plh-text-bubble {
+    .text-bubble-container {
+      position: unset;
+      display: flex;
+      flex-direction: row-reverse;
+      justify-content: center;
+      align-items: start;
+      height: fit-content;
+      margin-bottom: 20px;
+
+      &[data-variant~="gray"] {
+        --border-color: none;
+        --background-color: none;
+        .text-bubble {
+          border: 1px solid var(--color-outline);
+          background-color: var(--color-white-variant);
+        }
       }
-    }
 
-    &[data-variant~="primary"] {
-      --background-color: none;
-      --border-color: none;
-      .text-bubble {
-        border: 1px solid var(--ion-color-secondary-700);
-        background-color: var(--ion-color-primary-50);
+      &[data-variant~="primary"] {
+        --background-color: none;
+        --border-color: none;
+        .text-bubble {
+          border: 1px solid var(--ion-color-secondary-700);
+          background-color: var(--ion-color-primary-50);
+        }
       }
-    }
 
-    &[data-variant~="secondary"] {
-      --background-color: none;
-      --border-color: none;
-      .text-bubble {
-        border: 1px solid var(--color-accent-yellow-40);
-        background-color: var(--color-white-variant);
+      &[data-variant~="secondary"] {
+        --background-color: none;
+        --border-color: none;
+        .text-bubble {
+          border: 1px solid var(--color-accent-yellow-40);
+          background-color: var(--color-white-variant);
+        }
       }
-    }
 
-    &[data-variant~="accent-1"] {
-      margin-bottom: 14px;
-      .text-bubble {
-        border: 1px solid var(--color-accent-orange-70);
-        background-color: var(--color-accent-orange-95);
+      &[data-variant~="accent-1"] {
+        margin-bottom: 14px;
+        .text-bubble {
+          border: 1px solid var(--color-accent-orange-70);
+          background-color: var(--color-accent-orange-95);
+        }
       }
-    }
 
-    &[data-variant~="accent-2"] {
-      margin-bottom: 14px;
-      .text-bubble {
-        border: 1px solid var(--color-accent-yellow-70);
-        background-color: var(--color-accent-yellow-95);
+      &[data-variant~="accent-2"] {
+        margin-bottom: 14px;
+        .text-bubble {
+          border: 1px solid var(--color-accent-yellow-70);
+          background-color: var(--color-accent-yellow-95);
+        }
       }
-    }
 
-    &[data-variant~="no_border"] {
-      .text-bubble {
-        border: 0px;
+      &[data-variant~="no_border"] {
+        .text-bubble {
+          border: 0px;
+        }
       }
-    }
 
-    img.speaker-image {
-      position: unset;
-      margin-right: 8px;
-    }
+      img.speaker-image {
+        position: unset;
+        margin-right: 8px;
+      }
 
-    .text-bubble {
-      clip-path: none;
-      border-image: none;
-      border-radius: 0px 12px 12px 12px;
-      border: 1px solid var(--ion-color-secondary-700);
-      background-color: var(--ion-color-primary-50);
+      .text-bubble {
+        clip-path: none;
+        border-image: none;
+        border-radius: 0px 12px 12px 12px;
+        border: 1px solid var(--ion-color-secondary-700);
+        background-color: var(--ion-color-primary-50);
 
-      --a: 0deg;
-      --h: 0em;
-      --p: 0%;
+        --a: 0deg;
+        --h: 0em;
+        --p: 0%;
 
-      padding: 0;
-      padding: 14px 16px;
-      min-width: 124px;
+        padding: 0;
+        padding: 14px 16px;
+        min-width: 124px;
 
-      p {
-        font-size: var(--font-size-text-mid-size);
-        color: var(--ion-color-gray-900);
+        p {
+          font-size: var(--font-size-text-mid-size);
+          color: var(--ion-color-gray-900);
+        }
+
+        li {
+          font-size: var(--font-size-text-mid-size);
+          color: var(--ion-color-gray-900);
+        }
+
+        ol {
+          margin: var(--paragraph-margin-small) 0;
+        }
       }
 
-      li {
-        font-size: var(--font-size-text-mid-size);
-        color: var(--ion-color-gray-900);
+      .speaker-name {
+        position: unset !important;
+        margin-bottom: 6px;
+        font-size: var(--font-size-text-tiny);
+        color: var(--color-outline);
+        font-weight: var(--font-weight-bold);
+        letter-spacing: -0.1px;
       }
 
-      ol {
-        margin: var(--paragraph-margin-small) 0;
+      .no-name {
+        margin-bottom: 20px;
       }
     }
+    .text-bubble-container[data-position="right"] {
+      display: flex;
+      flex-direction: row;
 
-    .speaker-name {
-      position: unset !important;
-      margin-bottom: 6px;
-      font-size: var(--font-size-text-tiny);
-      color: var(--color-outline);
-      font-weight: var(--font-weight-bold);
-      letter-spacing: -0.1px;
-    }
+      .text-bubble {
+        border-radius: 12px 0px 12px 12px;
 
-    .no-name {
-      margin-bottom: 20px;
-    }
-  }
-  .text-bubble-container[data-position="right"] {
-    display: flex;
-    flex-direction: row;
+        p {
+          text-align: right;
+        }
 
-    .text-bubble {
-      border-radius: 12px 0px 12px 12px;
+        li {
+          text-align: right;
+        }
+      }
 
-      p {
-        text-align: right;
+      img.speaker-image {
+        margin-left: 8px;
       }
 
-      li {
+      .speaker-name {
         text-align: right;
       }
     }
-
-    img.speaker-image {
-      margin-left: 8px;
-    }
-
-    .speaker-name {
-      text-align: right;
+    .text-bubble-container[data-language-direction~="rtl"] {
+      border: 1px solid red;
     }
   }
 
@@ -583,4 +593,59 @@ body[data-theme="plh_kids_kw"] {
       }
     }
   }
+
+  // Radio Button Group
+  plh-radio-group {
+    .btn_triangle {
+      &_container {
+        margin-bottom: 10px !important;
+        label {
+          border-radius: 0px;
+          box-shadow: none;
+
+          border-radius: var(--ion-border-radius-small);
+          border: 1px solid #2e98d8;
+          padding: 24px;
+          margin-bottom: 10px;
+        }
+        .checked {
+          border: 2px solid #2e98d8;
+          background: #f6fafe !important;
+        }
+      }
+    }
+    .btn_square {
+      &_container {
+        width: 100% !important;
+        max-width: 320px !important;
+        label {
+          width: unset !important;
+          height: unset !important;
+          width: 100% !important;
+          max-width: 280px !important;
+          max-height: unset !important;
+
+          padding: 10px !important;
+        }
+      }
+    }
+    .standard-label {
+      background-color: #ffd5be;
+      border-radius: var(--ion-border-radius-small);
+      max-width: unset;
+      box-shadow: none;
+      border: none;
+      color: var(--ion-color-gray-900);
+      width: auto;
+      margin: 12px !important;
+    }
+    .checked {
+      background: #ffab83;
+      border: 2px solid #ff6f3a;
+      transition: 0.3s linear;
+    }
+    img {
+      padding: 8px;
+    }
+  }
 }

From aa4d9bdc8581124e56d3a31e60f7737d116d1c72 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Tue, 26 Nov 2024 13:34:20 +0300
Subject: [PATCH 24/27] add rtl identifier

---
 .../components/text-bubble/text-bubble.component.html        | 1 +
 .../template/components/text-bubble/text-bubble.component.ts | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/src/app/shared/components/template/components/text-bubble/text-bubble.component.html b/src/app/shared/components/template/components/text-bubble/text-bubble.component.html
index 1e996b7797..4fc8bdc26e 100644
--- a/src/app/shared/components/template/components/text-bubble/text-bubble.component.html
+++ b/src/app/shared/components/template/components/text-bubble/text-bubble.component.html
@@ -2,6 +2,7 @@
   class="text-bubble-container container"
   [attr.data-position]="params.speakerPosition"
   [attr.data-variant]="params.variant"
+  [attr.data-language-direction]="templateTranslateService.languageDirection()"
 >
   <div>
     @if (params.speakerName) {
diff --git a/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts b/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
index 990f20ff80..25fa4d2d40 100644
--- a/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
+++ b/src/app/shared/components/template/components/text-bubble/text-bubble.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, ViewEncapsulation } from "@angular/core";
 import { TemplateBaseComponent } from "../base";
 import { getStringParamFromTemplateRow } from "src/app/shared/utils";
+import { TemplateTranslateService } from "../../services/template-translate.service";
 
 interface ITextBubbleParams {
   /** TEMPLATE PARAMETER: "speaker_image_asset". The path to an image to be used as the speaker */
@@ -20,6 +21,10 @@ interface ITextBubbleParams {
 })
 export class TmplTextBubbleComponent extends TemplateBaseComponent implements OnInit {
   params: Partial<ITextBubbleParams> = {};
+
+  constructor(public templateTranslateService: TemplateTranslateService) {
+    super();
+  }
   ngOnInit() {
     this.getParams();
   }

From 6578a4c8bab13ea189d29c2b937295bfaf9de4e5 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Tue, 26 Nov 2024 14:37:25 +0300
Subject: [PATCH 25/27] remove background color

---
 src/theme/themes/plh_kids_kw/_overrides.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss
index f918b64c9e..b996355a6e 100644
--- a/src/theme/themes/plh_kids_kw/_overrides.scss
+++ b/src/theme/themes/plh_kids_kw/_overrides.scss
@@ -610,7 +610,7 @@ body[data-theme="plh_kids_kw"] {
         }
         .checked {
           border: 2px solid #2e98d8;
-          background: #f6fafe !important;
+          // background: #f6fafe !important;
         }
       }
     }

From 7e719bdf89820363f773482cd16de576d4f26387 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Wed, 27 Nov 2024 19:49:43 +0300
Subject: [PATCH 26/27] style: text-bubble rtl styling

---
 src/theme/themes/plh_kids_kw/_overrides.scss | 22 ++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss
index b996355a6e..e072d44a8b 100644
--- a/src/theme/themes/plh_kids_kw/_overrides.scss
+++ b/src/theme/themes/plh_kids_kw/_overrides.scss
@@ -274,7 +274,7 @@ body[data-theme="plh_kids_kw"] {
   }
 
   // Text Bubble
-  plh-text-bubble {
+  tmpl-text-bubble {
     .text-bubble-container {
       position: unset;
       display: flex;
@@ -406,7 +406,25 @@ body[data-theme="plh_kids_kw"] {
       }
     }
     .text-bubble-container[data-language-direction~="rtl"] {
-      border: 1px solid red;
+      .text-bubble {
+        border-radius: 12px 0px 12px 12px;
+      }
+      &[data-position="right"] {
+        float: left;
+        .text-bubble {
+          border-radius: 0px 12px 12px 12px;
+        }
+        img.speaker-image {
+          -webkit-transform: scaleX(1);
+          transform: scaleX(1);
+        }
+      }
+      img.speaker-image {
+        position: unset;
+        margin-left: 8px;
+        -webkit-transform: scaleX(-1);
+        transform: scaleX(-1);
+      }
     }
   }
 

From 9f71586604ad800d67945125140adc578ac4dca7 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Wed, 27 Nov 2024 19:55:50 +0300
Subject: [PATCH 27/27] fix: use absolute values divisible by 4

---
 .../components/text-bubble/text-bubble.component.scss         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss b/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss
index f57df491c4..5e82eb41fa 100644
--- a/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss
+++ b/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss
@@ -137,8 +137,8 @@ $bubble-border-color-4: var(--text-bubble-border-color-4, --ion-color-secondary-
 // For the speaker name
 .speaker-name {
   position: absolute;
-  bottom: -55px;
-  left: 78px;
+  bottom: -56px;
+  left: 80px;
   color: var(--ion-color-gray-700);
 }
 .container[data-position="right"] {