style language selector

Author: christiansamaniego-okta

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

@@ -1,7 +1,12 @@
 "use client";
 
 import React, { MouseEvent, useState } from "react";
-import Select, { SingleValue, OptionsOrGroups, GroupBase, NonceProvider } from "react-select";
+import Select, {
+  SingleValue,
+  OptionsOrGroups,
+  GroupBase,
+  NonceProvider,
+} from "react-select";
 import { FooterIconsComponent } from "./footer-Icons.component";
 import { MonoFont, SecondaryFont } from "@/libs/theme/fonts";
 import Image from "next/image";
@@ -185,7 +190,12 @@ export const FooterComponent: React.FC<FooterComponentProps> = ({
               aria-label={"Language picker"}
               className={styles.languageSelect__container}
               onChange={handleChange}
-              options={dictionary.languagePicker.options as OptionsOrGroups<UiLanguageModel, GroupBase<UiLanguageModel>>}
+              options={
+                dictionary.languagePicker.options as OptionsOrGroups<
+                  UiLanguageModel,
+                  GroupBase<UiLanguageModel>
+                >
+              }
               menuPortalTarget={document.body}
               classNamePrefix={"language-select"}
               isSearchable={false}
@@ -194,6 +204,8 @@ export const FooterComponent: React.FC<FooterComponentProps> = ({
               styles={{
                 control: (base) => ({
                   ...base,
+                  color: "var(--color_fg_default)",
+                  fontSize: "0.875rem",
                   background: "transparent",
                   border: "none",
                   borderRadius: "0px",
@@ -203,7 +215,6 @@ export const FooterComponent: React.FC<FooterComponentProps> = ({
                   minHeight: "2.5rem",
                   boxSizing: "border-box",
                 }),
-
                 input: (base) => ({
                   ...base,
                   margin: "0px",
@@ -217,14 +228,24 @@ export const FooterComponent: React.FC<FooterComponentProps> = ({
                   alignSelf: "center",
                 }),
                 dropdownIndicator: (base) => ({
+                  ...base,
                   padding: "0px",
                   height: "100%",
                   alignSelf: "center",
                 }),
+                valueContainer: (base) => ({
+                  ...base,
+                  padding: "0px"
+                }),
                 singleValue: (base) => ({
                   ...base,
                   color: "unset",
-                })
+                }),
+                menu: (base) => ({
+                  ...base,
+                  top: "unset",
+                  bottom: "1.75rem",
+                }),
               }}
             ></Select>
           )}

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

@@ -267,7 +267,3 @@
 
   color: var(--color_fg_default);
 }
-
-.languageSelect__container {
-  color: var(--color_fg_default);
-}

src/libs/theme/styles/globals.scss

@@ -553,7 +553,8 @@ $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2);
   height: 100% !important;
 }
 
-.react-select__menu {
+.react-select__menu,
+.language-select__menu {
     background-color: var(--color_bg_layer) !important;
     border-radius: 0.75rem !important;
     box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 11px !important;
@@ -570,7 +571,8 @@ $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2);
 .react-select__menu-portal {
 }
 
-.react-select__menu-list {
+.react-select__menu-list,
+.language-select__menu-list {
   font-family: var(--font-primary), monospace !important;
   padding: 0 !important;
 
@@ -596,7 +598,8 @@ $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2);
   }
 }
 
-.react-select__option {
+.react-select__option,
+.language-select__option {
     cursor: pointer !important;
     display: flex !important;
     font-size: 0.875rem !important;
@@ -622,7 +625,8 @@ $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2);
     }
 }
 
-.react-select__option--is-selected {
+.react-select__option--is-selected,
+.language-select__option--is-selected {
   color: var(--color_fg_bold) !important;
   font-weight: 500;