add globe icon and minor style changes

Author: christiansamaniego-okta

src/features/common/components/bars/ribbon/assets/globe-icon.component.tsx

@@ -3,10 +3,11 @@ import React from "react";
 export const GlobeIconComponent: React.FC = () => {
   return (
     <svg
+      width="24"
+      height="24"
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
     >
       <path
         fillRule="evenodd"
@@ -15,17 +16,20 @@ export const GlobeIconComponent: React.FC = () => {
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
+        stroke="currentColor"
       ></path>
       <path
         d="M2 12H22"
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
+        stroke="currentColor"
       ></path>
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M12 2C14.5013 4.73835 15.9228 8.29203 16 12C15.9228 15.708 14.5013 19.2616 12 22C9.49872 19.2616 8.07725 15.708 8 12C8.07725 8.29203 9.49872 4.73835 12 2V2Z"
+        stroke="currentColor"
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"

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

@@ -26,6 +26,7 @@ import { Auth0LogoComponent } from "../../assets/auth0-logo.component";
 import { getBrandDictionary } from "@/features/localization/services/brand-dictionary.service";
 import { savePreferredLanguage } from "@/features/localization/services/ui-language.utils";
 import { UiLanguageModel } from "../../models/ui-language.model";
+import { GlobeIconComponent } from "../bars/ribbon/assets/globe-icon.component";
 
 interface FooterComponentProps {
   languageCode: string;
@@ -186,68 +187,72 @@ export const FooterComponent: React.FC<FooterComponentProps> = ({
             {dictionary.copyright}
           </span>
           {dictionary.languagePicker.options.length > 1 && (
-            <Select
-              aria-label={"Language picker"}
-              className={styles.languageSelect__container}
-              onChange={handleChange}
-              options={
-                dictionary.languagePicker.options as OptionsOrGroups<
-                  UiLanguageModel,
-                  GroupBase<UiLanguageModel>
-                >
-              }
-              menuPortalTarget={document.body}
-              classNamePrefix={"language-select"}
-              isSearchable={false}
-              placeholder={currentLanguage.label}
-              value={currentLanguage}
-              styles={{
-                control: (base) => ({
-                  ...base,
-                  color: "var(--color_fg_default)",
-                  fontSize: "0.875rem",
-                  background: "transparent",
-                  border: "none",
-                  borderRadius: "0px",
-                  display: "flex",
-                  alignItems: "center",
-                  cursor: "pointer",
-                  minHeight: "2.5rem",
-                  boxSizing: "border-box",
-                }),
-                input: (base) => ({
-                  ...base,
-                  margin: "0px",
-                }),
-                indicatorSeparator: () => ({
-                  display: "none",
-                }),
-                indicatorsContainer: (base) => ({
-                  ...base,
-                  height: "20px",
-                  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>
+            <div className={styles.subFooter__languagePicker}>
+              <GlobeIconComponent />
+              <Select
+                aria-label={"Language picker"}
+                className={styles.languageSelect__container}
+                onChange={handleChange}
+                options={
+                  dictionary.languagePicker.options as OptionsOrGroups<
+                    UiLanguageModel,
+                    GroupBase<UiLanguageModel>
+                  >
+                }
+                menuPortalTarget={document.body}
+                classNamePrefix={"language-select"}
+                isSearchable={false}
+                placeholder={currentLanguage.label}
+                value={currentLanguage}
+                styles={{
+                  control: (base, state) => ({
+                    ...base,
+                    fontSize: "0.875rem",
+                    background: "transparent",
+                    border: "none",
+                    borderRadius: "0px",
+                    display: "flex",
+                    alignItems: "center",
+                    cursor: "pointer",
+                    minHeight: "2.5rem",
+                    boxSizing: "border-box",
+                    boxShadow: "none",
+                  }),
+                  input: (base) => ({
+                    ...base,
+                    margin: "0px",
+                  }),
+                  indicatorSeparator: () => ({
+                    display: "none",
+                  }),
+                  indicatorsContainer: (base) => ({
+                    ...base,
+                    height: "20px",
+                    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",
+                    right: "0",
+                  }),
+                }}
+              />
+            </div>
           )}
         </div>
       </BoxComponent>

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

@@ -267,3 +267,14 @@
 
   color: var(--color_fg_default);
 }
+
+.subFooter__languagePicker {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--color_fg_default);
+
+  &:focus-within {
+    color: (var(--color_fg_bold));
+  }
+}