feat: move language switcher into user actions area

AmazeeLabs · Mar 15, 2024 · fae50f2 · fae50f2
1 parent 5d26540
commit fae50f2
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 38 deletions.
diff --git a/packages/ui/src/components/Molecules/LanguageSwitcher.tsx b/packages/ui/src/components/Molecules/LanguageSwitcher.tsx
@@ -8,13 +8,13 @@ export function LanguageSwitcher() {
   const translations = useTranslations();
   const [location] = useLocation();
   return (
-    <ul className="flex gap-2">
+    <ul className="flex gap-2 uppercase">
       {Object.values(Locale).map((locale) => (
         <li key={locale}>
           {translations[locale] ? (
             <Link
               href={translations[locale]!}
-              className={clsx({
+              className={clsx('text-gray-500', {
                 underline: location.pathname !== translations[locale],
               })}
             >

diff --git a/packages/ui/src/components/Organisms/Header.tsx b/packages/ui/src/components/Organisms/Header.tsx
@@ -106,7 +106,6 @@ export function Header() {
               ),
             )}
           </div>
-          <LanguageSwitcher />
         </nav>
         <MobileMenu>
           <div className="mt-6 flow-root">
@@ -156,7 +155,6 @@ export function Header() {
                     </MobileMenuDropdown>
                   ),
                 )}
-                <LanguageSwitcher />
               </div>
             </div>
           </div>
@@ -167,9 +165,6 @@ export function Header() {
 }
 
 function UserActions({
-  iconWidth,
-  iconHeight,
-  showIconText = true,
   isDesktop = true,
 }: {
   iconWidth: string;
@@ -184,41 +179,11 @@ function UserActions({
         isDesktop && 'border-b border-gray-300 border-opacity-30',
       )}
     >
-      <a href="/login" className={'flex items-center text-gray-600'}>
-        <UnlockIcon iconWidth={iconWidth} iconHeight={iconHeight} />
-        {showIconText && (
-          <span className={'block md:ml-2 text-[0.875rem] leading-[1.25]'}>
-            Login
-          </span>
-        )}
-      </a>
+      <LanguageSwitcher />
     </div>
   );
 }
 
-function UnlockIcon({
-  iconWidth,
-  iconHeight,
-}: {
-  iconWidth: string;
-  iconHeight: string;
-}) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={iconWidth}
-      height={iconHeight}
-      viewBox="0 0 13 16"
-      fill="none"
-    >
-      <path
-        d="M6.5 8.8C6.25263 8.79715 6.01032 8.86899 5.80567 9.00584C5.60102 9.14269 5.44387 9.33799 5.35536 9.56544C5.26685 9.7929 5.25124 10.0416 5.31062 10.278C5.37 10.5145 5.50153 10.7274 5.6875 10.888V12C5.6875 12.2122 5.7731 12.4157 5.92548 12.5657C6.07785 12.7157 6.28451 12.8 6.5 12.8C6.71549 12.8 6.92215 12.7157 7.07452 12.5657C7.2269 12.4157 7.3125 12.2122 7.3125 12V10.888C7.49847 10.7274 7.63 10.5145 7.68938 10.278C7.74876 10.0416 7.73315 9.7929 7.64464 9.56544C7.55613 9.33799 7.39898 9.14269 7.19433 9.00584C6.98968 8.86899 6.74737 8.79715 6.5 8.8ZM10.5625 5.6V4C10.5625 2.93913 10.1345 1.92172 9.37262 1.17157C8.61075 0.421427 7.57744 0 6.5 0C5.42256 0 4.38925 0.421427 3.62738 1.17157C2.86551 1.92172 2.4375 2.93913 2.4375 4V5.6C1.79103 5.6 1.17105 5.85286 0.713927 6.30294C0.256807 6.75303 0 7.36348 0 8V13.6C0 14.2365 0.256807 14.847 0.713927 15.2971C1.17105 15.7471 1.79103 16 2.4375 16H10.5625C11.209 16 11.829 15.7471 12.2861 15.2971C12.7432 14.847 13 14.2365 13 13.6V8C13 7.36348 12.7432 6.75303 12.2861 6.30294C11.829 5.85286 11.209 5.6 10.5625 5.6ZM4.0625 4C4.0625 3.36348 4.31931 2.75303 4.77643 2.30294C5.23355 1.85286 5.85353 1.6 6.5 1.6C7.14647 1.6 7.76645 1.85286 8.22357 2.30294C8.68069 2.75303 8.9375 3.36348 8.9375 4V5.6H4.0625V4ZM11.375 13.6C11.375 13.8122 11.2894 14.0157 11.137 14.1657C10.9847 14.3157 10.778 14.4 10.5625 14.4H2.4375C2.22201 14.4 2.01535 14.3157 1.86298 14.1657C1.7106 14.0157 1.625 13.8122 1.625 13.6V8C1.625 7.78783 1.7106 7.58434 1.86298 7.43431C2.01535 7.28429 2.22201 7.2 2.4375 7.2H10.5625C10.778 7.2 10.9847 7.28429 11.137 7.43431C11.2894 7.58434 11.375 7.78783 11.375 8V13.6Z"
-        fill="#1A56DB"
-      />
-    </svg>
-  );
-}
-
 function SiteLogo({
   className,
   width,