update token decoder styling

Author: javiert-okta

src/features/decoder/components/token-decoder.component.tsx

@@ -20,6 +20,8 @@ import { AsymmetricKeyFormatValues } from "@/features/common/values/asymmetric-k
 import { WidgetComponent } from "@/features/common/components/widget/widget/widget.component";
 import { dataTestidDictionary } from "@/libs/testing/data-testid.dictionary";
 import { DebuggerWidgetValues } from "@/features/common/values/debugger-widget.values";
+import { WidgetAlgPickerComponent } from "@/features/debugger/components/debugger-alg-picker/debugger-alg-picker.component";
+import styles from "./token-decoder.module.scss";
 
 interface TokenDecoderComponentProps {
   languageCode: string;
@@ -49,7 +51,7 @@ export const TokenDecoderComponent: React.FC<TokenDecoderComponentProps> = ({
   const loadDecoderInputs = useDecoderStore((state) => state.loadDecoderInputs);
   const handleJwtChange$ = useDecoderStore((state) => state.handleJwtChange);
   const showUseHashWarning$ = useDecoderStore(
-    (state) => state.showUseHashWarning,
+    (state) => state.showUseHashWarning
   );
 
   useEffect(() => {
@@ -184,41 +186,51 @@ export const TokenDecoderComponent: React.FC<TokenDecoderComponentProps> = ({
   }, [decoderInputs$, loadDecoderInputs, headlineConfig.isVisible]);
 
   return (
-    <WidgetComponent
-      id={dataTestidDictionary.decoder.id}
-      widget={DebuggerWidgetValues.DECODER}
-      languageCode={languageCode}
-      headlineConfig={headlineConfig}
-      title={dictionary.title}
-      description={dictionary.description}
-      exampleGenerator={dictionary.exampleGenerator}
-      contentInput={
-        <JwtInputComponent
-          dictionary={dictionary.jwtEditor}
+    <>
+      <div className={styles.input__description}>
+        <span>{dictionary.description}</span>
+        <WidgetAlgPickerComponent
+          label={dictionary.exampleGenerator.label}
           languageCode={languageCode}
+          widget={DebuggerWidgetValues.DECODER}
         />
-      }
-      contentOutput={
-        <>
-          <DecodedHeaderOutputComponent
-            languageCode={languageCode}
-            dictionary={dictionary.decodedHeader}
-            decodedHeaderInitialTabId={decodedHeaderInitialTabId}
-            descriptionVisibility={decodedHeaderDescriptionVisibility}
-          />
-          <DecodedPayloadOutputComponent
-            languageCode={languageCode}
-            dictionary={dictionary.decodedPayload}
-            decodedPayloadInitialTabId={decodedPayloadInitialTabId}
-            descriptionVisibility={decodedPayloadDescriptionVisibility}
-          />
-          <SecretKeyInputComponent
+      </div>
+      <WidgetComponent
+        id={dataTestidDictionary.decoder.id}
+        widget={DebuggerWidgetValues.DECODER}
+        languageCode={languageCode}
+        headlineConfig={headlineConfig}
+        title={dictionary.title}
+        description={dictionary.description}
+        exampleGenerator={dictionary.exampleGenerator}
+        contentInput={
+          <JwtInputComponent
+            dictionary={dictionary.jwtEditor}
             languageCode={languageCode}
-            dictionary={dictionary.signatureVerification}
           />
-        </>
-      }
-      warnings={null}
-    />
+        }
+        contentOutput={
+          <>
+            <DecodedHeaderOutputComponent
+              languageCode={languageCode}
+              dictionary={dictionary.decodedHeader}
+              decodedHeaderInitialTabId={decodedHeaderInitialTabId}
+              descriptionVisibility={decodedHeaderDescriptionVisibility}
+            />
+            <DecodedPayloadOutputComponent
+              languageCode={languageCode}
+              dictionary={dictionary.decodedPayload}
+              decodedPayloadInitialTabId={decodedPayloadInitialTabId}
+              descriptionVisibility={decodedPayloadDescriptionVisibility}
+            />
+            <SecretKeyInputComponent
+              languageCode={languageCode}
+              dictionary={dictionary.signatureVerification}
+            />
+          </>
+        }
+        warnings={null}
+      />
+    </>
   );
 };

src/features/decoder/components/token-decoder.module.scss

@@ -1,2 +1,32 @@
 @use "@/libs/theme/styles/variables" as *;
 @use "@/libs/theme/styles/mixins" as *;
+
+.input__description {
+    display: flex;
+    width: calc(100% - 2rem);
+    max-width: 1312px;
+    flex-direction: column;
+    grid-row-gap: 0;
+    margin: 0 auto 2rem;
+    color: var(--color_fg_default);
+    font-size: .875rem;
+    line-height: 1.375rem;
+    margin-bottom: .5rem;
+
+  & strong {
+    font-weight: 500;
+  }
+
+  @media #{$breakpoint-dimension-sm} {
+    width: calc(100% - 4rem);
+     grid-column: span 12;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  @media #{$breakpoint-dimension-lg} {
+    width: calc(100% - 8rem);
+  }
+ 
+}