style theme picker

Author: christiansamaniego-okta

src/features/common/components/headers/header/header.module.scss

@@ -101,3 +101,13 @@
     border-radius: 0.125rem;
   }
 }
+
+.actions {
+  display: flex;
+  gap: .5rem;
+
+  @media #{$breakpoint-dimension-md} {
+    gap: 1rem;
+    margin-right: 1.5rem;
+  }
+}

src/features/common/components/theme-picker/theme-picker.component.tsx

@@ -29,11 +29,7 @@ export const ThemePickerComponent: React.FC<ThemePickerComponentProps> = ({
             <div
               key={option.code}
               className={styles.option}
-              data-active={
-                option.code === selectedOptionCode
-                  ? PicketListItemStateValues.ACTIVE
-                  : PicketListItemStateValues.INACTIVE
-              }
+              data-active={selectedOptionCode === option.code}
               title={option.label}
               onClick={async () => {
                 console.log(option.label)

src/features/common/components/theme-picker/theme-picker.module.scss

@@ -1,11 +1,50 @@
 .container {
-
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .wrapper {
-
+  display: flex;
+  background-color: var(--color_bg_app_bar);
+  border: 1px solid var(--color_border_default);
+  border-radius: 9999px;
+  overflow: hidden;
+  width: -moz-fit-content;
+  width: fit-content;
+  padding: 0.25rem;
+  gap: 0.125rem;
 }
 
 .option {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color_fg_default);
+  cursor: pointer;
+  padding: 0.25rem;
+  position: relative;
+  transition: all 0.2s ease;
+  border-radius: 9999px;
+  width: 2.5rem;
+  height: 1.75rem;
+
+  &[data-active="true"] {
+    background-color: var(--color_bg_layer);
+    color: var(--color_fg_bold);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
+  }
+}
+
+.option__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
 
-}
+  svg {
+    height: 1rem;
+    width: 1rem;
+  }
+}