Update panel picker and card components

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

@@ -4,7 +4,7 @@
 .span,
 .p,
 .code {
-  font-size: 0.75rem;
+  font-size: .875rem;
   line-height: 1.125rem;
 }
 

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

@@ -129,16 +129,20 @@ const CardTabs: React.FC<CardTabsProps> = ({
                           <span className={styles.cardTab__title__compact}>
                             {compactTitle}
                           </span>
+                          {activeCard.slots?.toolbar && (
+                            <div className={styles.cardTabs__actionButtons}>
+                              <div
+                                className={styles.cardTabs__tooltipContainer}
+                              >
+                                {activeCard.slots.toolbar}
+                              </div>
+                            </div>
+                          )}
                         </Tab>
                       </React.Fragment>
                     );
                   })}
                 </TabList>
-                {activeCard.slots?.toolbar && (
-                  <div className={styles.cardTabs__actionButtons}>
-                    {activeCard.slots.toolbar}
-                  </div>
-                )}
               </>
               {cards.map((card) => {
                 return (
@@ -181,7 +185,7 @@ const CardTabs: React.FC<CardTabsProps> = ({
           onSelectionChange={(e) => {
             handleActiveCardChange(e.toString());
           }}
-          className={clsx(MonoFont.className, styles.cardTabs)}
+          className={styles.cardTabs}
         >
           <>
             <TabList className={styles.cardTabs__tabList}>
@@ -197,16 +201,18 @@ const CardTabs: React.FC<CardTabsProps> = ({
                       <span className={styles.cardTab__title__compact}>
                         {compactTitle}
                       </span>
+                      {activeCard.slots?.toolbar && (
+                        <div className={styles.cardTabs__actionButtons}>
+                          <div className={styles.cardTabs__tooltipContainer}>
+                            {activeCard.slots.toolbar}
+                          </div>
+                        </div>
+                      )}
                     </Tab>
                   </React.Fragment>
                 );
               })}
             </TabList>
-            {activeCard.slots?.toolbar && (
-              <div className={styles.cardTabs__actionButtons}>
-                {activeCard.slots.toolbar}
-              </div>
-            )}
           </>
           {cards.map((card) => {
             return (

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

@@ -8,46 +8,42 @@
   width: 100%;
   max-height: fit-content;
   flex-direction: column;
-  row-gap: 0.5rem;
+  row-gap: 1rem;
 
   cursor: default;
 }
 
 .cardTabs__title {
-  grid-column: 1 / -1;
+  grid-column: 1/-1;
   display: flex;
   align-items: center;
-  gap: 0.25rem;
-  text-transform: uppercase;
+  gap: .25rem;
   color: var(--color_fg_default);
-  font-size: 0.875rem;
-  line-height: 1.375rem;
-  font-weight: 500;
-  letter-spacing: 0.24px;
-  margin-right: 8px;
+  font-size: 1rem;
+  line-height: 1.15rem;
+  font-weight: 700;
+  letter-spacing: -.1px;
 }
 
 .cardTabs {
-  position: relative;
-  grid-column: span 6;
-  display: flex;
-  height: 100%;
-  width: 100%;
-  flex-direction: column;
-  border-radius: 0.5rem;
-  border: 1px solid var(--color_border_bold);
-  background: var(--color_bg_layer_alternate);
-  overflow: hidden;
+    grid-column: span 6;
+    display: flex;
+    flex-direction: column;
+    border-radius: 1rem;
+    border: .5px solid var(--color_border_default);
+    background: var(--color_bg_layer_alternate-bold);
+    letter-spacing: -.1px;
+    gap: .25rem;
 }
 
 $cardTabs__tabList__height: 2.5rem;
 
 .cardTabs__tabList {
-  position: relative;
-  display: flex;
-  border-bottom: 1px solid var(--color_border_bold);
-  height: $cardTabs__tabList__height;
-  flex-shrink: 0;
+    position: relative;
+    display: flex;
+    height: 2.5rem;
+    padding: .5rem;
+    gap: .25rem;
 }
 
 .cardTabs__title__container {
@@ -56,23 +52,21 @@ $cardTabs__tabList__height: 2.5rem;
 }
 
 .cardTab__title {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  text-transform: uppercase;
-  padding: 0.5rem 0.75rem;
-  border-bottom: 0.125rem solid transparent;
-  color: var(--color_fg_default);
-  font-size: 0.75rem;
-  line-height: 1.125rem;
-  font-weight: 500;
-  letter-spacing: 0.24px;
-  cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: .25rem;
+    border-radius: .5rem;
+    padding: 0 .5rem;
+    color: var(--color_fg_default);
+    font-size: .875rem;
+    line-height: 1.125rem;
+    font-weight: 500;
+    letter-spacing: -.1px;
+    cursor: pointer;
 
   &[data-selected="true"] {
-    color: var(--color_fg_selected);
-    border-bottom: 0.125rem solid var(--color_border_selected);
+    background-color: var(--color_bg_layer);
+    box-shadow: 0 0 0 1px rgba(0,0,0,.04),0 1px 1px -.5px rgba(0,0,0,.04),inset 0 0 0 1px rgba(0,0,0,.04);
   }
 
   &[data-focus-visible]:after {
@@ -86,6 +80,7 @@ $cardTabs__tabList__height: 2.5rem;
 
 .cardTab__title__full {
   display: none;
+  font-weight: 500;
 
   @media #{$breakpoint-dimension-sm} {
     display: flex;
@@ -99,14 +94,24 @@ $cardTabs__tabList__height: 2.5rem;
 }
 
 .cardTabs__actionButtons {
-  position: absolute;
-  right: 0.75rem;
-  top: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  height: $cardTabs__tabList__height;
+    position: absolute;
+    right: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.cardTabs__tooltipContainer {
+    position: relative;
+    display: inline-block;
+    &:hover {
+      .button__tooltip {
+        opacity: 1;
+      }
+    }
 }
 
 .cardTabs__body {

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

@@ -7,12 +7,13 @@ import { MonoFont } from "@/libs/theme/fonts";
 export interface CardToolbarButtonComponentProps
   extends AriaButtonOptions<"span"> {
   variant: "standard" | "icon";
+  tooltipText?: string;
 }
 
 export const CardToolbarButtonComponent: React.FC<
   PropsWithChildren<CardToolbarButtonComponentProps>
 > = (props) => {
-  const { variant, children } = props;
+  const { variant, tooltipText, children } = props;
 
   const ref = useRef<HTMLButtonElement | null>(null);
 
@@ -22,20 +23,25 @@ export const CardToolbarButtonComponent: React.FC<
       elementType: "span",
       preventFocusOnPress: true,
     },
-    ref,
+    ref
   );
 
   return (
-    <button
-      {...buttonProps}
-      type="button"
-      className={clsx(
-        variant === "icon" ? styles.button__icon : styles.button__standard,
-        MonoFont.className,
+    <div className={styles.button__tooltipContainer}>
+      <button
+        {...buttonProps}
+        type="button"
+        className={clsx(
+          variant === "icon" ? styles.button__icon : styles.button__standard,
+          MonoFont.className
+        )}
+        data-style="compact"
+      >
+        {children}
+      </button>
+      {tooltipText && (
+        <span className={styles.button__tooltip}>{tooltipText}</span>
       )}
-      data-style="compact"
-    >
-      {children}
-    </button>
+    </div>
   );
 };

src/features/common/components/card-toolbar-button/card-toolbar-button.module.scss

@@ -1,37 +1,56 @@
+.button__tooltipContainer {
+    position: relative;
+    display: inline-block;
+    &:hover {
+      .button__tooltip {
+        opacity: 1;
+      }
+    }
+}
 .button__standard {
-  gap: 0.75rem;
-  border-radius: 0.25rem;
-  border: 1px solid var(--color_border_button);
+  gap: .75rem;
+  border-radius: .5rem;
   color: var(--color_fg_on_button_subtle);
-  font-variant-numeric: slashed-zero;
-  font-feature-settings:
-    "clig" off,
-    "liga" off;
+  z-index: 2;
   background-color: transparent;
   text-transform: uppercase;
   cursor: pointer;
-  letter-spacing: 0.2px;
+  padding: .75rem;
+  letter-spacing: .2px;
   appearance: none;
   display: flex;
   align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  transition: all .2s ease-out;
+  width: 2rem;
+  height: 2rem;
+  font-size: .875rem;
+  line-height: 1.375rem;
 
   &[aria-disabled="true"] {
     opacity: 0.48;
     cursor: not-allowed;
   }
 
+   &:hover {
+    background-color: var(--color_bg_layer);
+    border: 1px solid var(--color_border_default);
+    transition: all .2s ease-out;
+  }
+
   padding: 0 0.75rem;
   width: 5rem;
   height: 2rem;
   font-size: 0.875rem;
   line-height: 1.375rem;
 
   &[data-style="compact"] {
-    padding: 0.125rem 0.375rem;
-    width: unset;
-    height: unset;
-    font-size: 0.75rem;
-    line-height: 1.25rem;
+    padding: .25rem;
+    width: 2rem;
+    height: 2rem;
+    font-size: .8125rem;
+    line-height: 1.35;
   }
 
   svg {
@@ -46,6 +65,25 @@
   }
 }
 
+.button__tooltip {
+    position: absolute;
+    top: -30px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 4px 8px;
+    color: var(--color_fg_bold);
+    background-color: var(--color_bg_layer);
+    border: 1px solid var(--color_border_default);
+    border-radius: .5rem;
+    font-size: .75rem;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity .2s ease-in-out;
+    box-shadow: 0 2px 4px rgba(0,0,0,.1);
+    z-index: 1000;
+}
+
 .button__icon {
   gap: 0.75rem;
   border-radius: 0.25rem;
@@ -72,10 +110,9 @@
   }
 
   &:hover {
-    background-color: var(--color_bg_layer_alternate-bold);
-    svg {
-      stroke: var(--color_fg_selected);
-    }
+    background-color: var(--color_bg_layer);
+    border: 1px solid var(--color_border_default);
+    transition: all .2s ease-out;
   }
 
   &:focus-visible {

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

@@ -4,6 +4,7 @@ import {
   CardToolbarButtonComponent,
   CardToolbarButtonComponentProps,
 } from "@/features/common/components/card-toolbar-button/card-toolbar-button.component";
+import { ClearIcon } from "../../icons/clear/clear-icon";
 
 interface CardToolbarClearButtonComponentProps
   extends Omit<CardToolbarButtonComponentProps, "variant"> {
@@ -16,8 +17,12 @@ export const CardToolbarClearButtonComponent: React.FC<
   const dictionary = getButtonsUiDictionary(languageCode);
 
   return (
-    <CardToolbarButtonComponent {...props} variant="standard">
-      {dictionary.clearButton.label}
+    <CardToolbarButtonComponent
+      {...props}
+      variant="standard"
+      tooltipText={dictionary.clearButton.label}
+    >
+      <ClearIcon />
     </CardToolbarButtonComponent>
   );
 };