update card styles and component to render toggle switch

Author: javiert-okta

src/features/common/components/card/card.component.tsx

@@ -1,10 +1,11 @@
 import React, { PropsWithChildren, useId } from "react";
 import styles from "./card.module.scss";
 import { clsx } from "clsx";
-import { getLocalizedSecondaryFont, MonoFont } from "@/libs/theme/fonts";
+import { getLocalizedSecondaryFont } from "@/libs/theme/fonts";
 import { CardMessageComponent } from "@/features/common/components/card-message/card-message.component";
 import { HeaderIcon } from "../icons/header/header-icon";
 import { CheckIcon } from "../icons/check/check-icon";
+import { EncodingFormatToggleSwitchComponent } from "@/features/decoder/components/encoding-format-toggle-swith/encoding-format-toggle-switch";
 
 export interface CardComponentProps extends PropsWithChildren {
   id: string;
@@ -151,8 +152,8 @@ export const CardComponent: React.FC<CardComponentProps> = (props) => {
           {messages.success.map((line, index) => {
             return (
               <>
-              <CheckIcon />
-              <CardMessageComponent key={index}>{line}</CardMessageComponent>
+                <CheckIcon />
+                <CardMessageComponent key={index}>{line}</CardMessageComponent>
               </>
             );
           })}
@@ -201,27 +202,30 @@ export const CardWithHeadlineComponent: React.FC<
   return (
     <div role="region" aria-labelledby={regionId}>
       {sectionHeadline && (
-        <>
-          <h3
-            id={regionId}
-            className={clsx(
-              styles.cardHeadline__title,
-              getLocalizedSecondaryFont(languageCode)
-            )}
-          >
-            {sectionHeadline.title}
-            {sectionHeadline.titleTag && (
-              <span className={styles.cardHeadline__titleTag}>
-                {sectionHeadline.titleTag}
-              </span>
+        <div className={styles.title__container}>
+          <div>
+            <h3
+              id={regionId}
+              className={clsx(
+                styles.cardHeadline__title,
+                getLocalizedSecondaryFont(languageCode)
+              )}
+            >
+              {sectionHeadline.title}
+              {sectionHeadline.titleTag && (
+                <span className={styles.cardHeadline__titleTag}>
+                  {sectionHeadline.titleTag}
+                </span>
+              )}
+            </h3>
+            {sectionHeadline.description && (
+              <p className={styles.cardHeadline__description}>
+                {sectionHeadline.description}
+              </p>
             )}
-          </h3>
-          {sectionHeadline.description && (
-            <p className={styles.cardHeadline__description}>
-              {sectionHeadline.description}
-            </p>
-          )}
-        </>
+          </div>
+          <EncodingFormatToggleSwitchComponent languageCode={languageCode} />
+        </div>
       )}
       <CardComponent languageCode={languageCode} {...props} />
     </div>

src/features/common/components/card/card.module.scss

@@ -56,6 +56,18 @@
   }
 }
 
+.title__container {
+  grid-column: 1/-1;
+  width: 100%;
+  color: var(--color_fg_bold);
+  font-size: 1.75rem;
+  font-weight: 500;
+  line-height: 1.5;
+  margin-bottom: .5rem;
+  display: flex;
+  justify-content: space-between;
+}
+
 .card {
   isolation: isolate;
   grid-column: span 6;