Kuwait Theme: Component styling Updates

.husky/pre-push

@@ -1,3 +1,3 @@
 #!/bin/sh
-command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting .git/hooks/pre-push.\n"; exit 2; }
+command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting the 'pre-push' file in the hooks directory (set by 'core.hookspath'; usually '.git/hooks').\n"; exit 2; }
 git lfs pre-push "$@"

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.speakerName) {
+      <div class="speaker-name">{{ params.speakerName }}</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"

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;
@@ -32,6 +36,16 @@ $imageSize: 64px;
   &[data-variant~="no_border"] {
     --border-color: transparent;
   }
+
+  &[data-variant~="speaker-3"] {
+    --background-color: #{$bubble-background-color-3};
+    --border-color: #{$bubble-border-color-3};
+  }
+
+  &[data-variant~="speaker-4"] {
+    --background-color: #{$bubble-background-color-4};
+    --border-color: #{$bubble-background-color-4};
+  }
 }
 
 .speaker-image {
@@ -119,3 +133,21 @@ $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;
+  }
+  img.speaker-image {
+    -webkit-transform: scaleX(-1);
+    transform: scaleX(-1);
+  }
+}

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" | "speaker-3" | "speaker-4";
+  /** TEMPLATE PARAMETER: "avatar_name". The name of the speaker */
+  speakerName: 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.speakerName = getStringParamFromTemplateRow(this._row, "speaker_name", "");
   }
 }

src/theme/themes/plh_kids_kw/_index.scss

@@ -22,9 +22,12 @@
 
       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-title: 28px,
       font-size-text-extra-large: 32px,
+
       line-height-text-tiny: 18px,
       line-height-text-small: 24px,
       line-height-text-medium: 28px,
@@ -81,6 +84,48 @@
       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,
+
+      // 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,
+
+      // 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 {