update styles for card component

Author: javiert-okta

src/features/common/components/card-toolbar-buttons/card-toolbar-description-button/card-toolbar-description-button.component.tsx

@@ -11,6 +11,8 @@ import {
   CardToolbarButtonComponent,
   CardToolbarButtonComponentProps,
 } from "@/features/common/components/card-toolbar-button/card-toolbar-button.component";
+import { EyeOpenIcon } from "../../icons/eye-open/eye-open-icon";
+import { EyeCloseIcon } from "../../icons/eye-close/eye-close-icon";
 
 interface CardToolbarDescriptionButtonComponentProps
   extends Omit<CardToolbarButtonComponentProps, "variant"> {
@@ -26,12 +28,12 @@ export const CardToolbarDescriptionButtonComponent: React.FC<
   const setDescriptionVisibility$ = useDebuggerStore((state) =>
     outputType === "header"
       ? state.setDecodedHeaderDescriptionVisibility$
-      : state.setDecodedPayloadDescriptionVisibility$,
+      : state.setDecodedPayloadDescriptionVisibility$
   );
   const descriptionVisibility$ = useDebuggerStore((state) =>
     outputType === "header"
       ? state.decodedHeaderDescriptionVisibility$
-      : state.decodedPayloadDescriptionVisibility$,
+      : state.decodedPayloadDescriptionVisibility$
   );
 
   const [descVisibility, setDescVisibility] =
@@ -47,7 +49,7 @@ export const CardToolbarDescriptionButtonComponent: React.FC<
       ClaimDescriptionVisibilityValues.HIDDEN,
       {
         secure: true,
-      },
+      }
     );
 
     setDescriptionVisibility$(ClaimDescriptionVisibilityValues.HIDDEN);
@@ -63,7 +65,7 @@ export const CardToolbarDescriptionButtonComponent: React.FC<
       ClaimDescriptionVisibilityValues.VISIBLE,
       {
         secure: true,
-      },
+      }
     );
 
     setDescriptionVisibility$(ClaimDescriptionVisibilityValues.VISIBLE);
@@ -79,15 +81,22 @@ export const CardToolbarDescriptionButtonComponent: React.FC<
     <CardToolbarButtonComponent
       {...props}
       variant="standard"
+      tooltipText={
+        descVisibility === ClaimDescriptionVisibilityValues.VISIBLE
+          ? dictionary.hideDetailsButton.label
+          : dictionary.showDetailsButton.label
+      }
       onPress={
         descVisibility === ClaimDescriptionVisibilityValues.VISIBLE
           ? hideDescription
           : showDescription
       }
     >
-      {descVisibility === ClaimDescriptionVisibilityValues.VISIBLE
-        ? dictionary.hideDetailsButton.label
-        : dictionary.showDetailsButton.label}
+      {descVisibility === ClaimDescriptionVisibilityValues.VISIBLE ? (
+        <EyeCloseIcon />
+      ) : (
+        <EyeOpenIcon />
+      )}
     </CardToolbarButtonComponent>
   );
 };

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

@@ -4,6 +4,7 @@ import { clsx } from "clsx";
 import { getLocalizedSecondaryFont, MonoFont } 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";
 
 export interface CardComponentProps extends PropsWithChildren {
   id: string;
@@ -150,7 +151,10 @@ export const CardComponent: React.FC<CardComponentProps> = (props) => {
         >
           {messages.success.map((line, index) => {
             return (
+              <>
+              <CheckIcon />
               <CardMessageComponent key={index}>{line}</CardMessageComponent>
+              </>
             );
           })}
         </div>

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

@@ -2,16 +2,17 @@
 @use "@/libs/theme/styles/mixins" as *;
 
 .cardHeadline__title {
-  grid-column: 1 / -1;
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.5rem 0;
-  color: var(--color_fg_default);
-  font-size: 0.875rem;
-  line-height: 1.375rem;
-  font-weight: 500;
-  letter-spacing: 0.24px;
+    grid-column: 1/-1;
+    display: flex;
+    align-items: center;
+    gap: .25rem;
+    font-family: var(--font-primary);
+    padding-top: .75rem;
+    color: var(--color_fg_default);
+    font-size: 1rem;
+    line-height: 1.15rem;
+    font-weight: 700;
+    letter-spacing: -.2px;
 
   & * {
     font-size: inherit;
@@ -65,7 +66,6 @@
   border-radius: 0.5rem;
   border: 1px solid var(--color_border_bold);
   background: var(--color_bg_layer_alternate-bold);
-  overflow: hidden;
 
   &[data-type="output"] {
     background: var(--color_bg_layer_alternate);
@@ -206,19 +206,19 @@
 }
 
 .card__status {
+  flex: 1 1;
   display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  padding: 0.5rem 1rem;
-  gap: 0.25rem;
-  font-size: 0.875rem;
+  align-items: center;
+  justify-content: flex-start;
+  padding: .75rem .75rem .5rem;
+  gap: .25rem;
+  font-size: .875rem;
   line-height: 1.375rem;
   color: var(--color_fg_default);
-  border-top: 1px solid var(--color_border_bold);
 }
 
 .card__success {
-
+  svg,
   span,
   p,
   code {
@@ -235,8 +235,7 @@
 }
 
 .card__error {
-  background-color: var(--color_bg_state_danger_subtle);
-
+  
   span,
   p,
   code {