Invert language selector colors

Change the background color of the language selector to match the footer and make the text white.

Author: lovable-dev[bot]

src/components/LanguageSelector.tsx

@@ -3,7 +3,11 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { useTranslation } from 'react-i18next';
 import { Globe } from 'lucide-react';
 
-export const LanguageSelector = () => {
+interface LanguageSelectorProps {
+  variant?: 'default' | 'dark';
+}
+
+export const LanguageSelector = ({ variant = 'default' }: LanguageSelectorProps) => {
   const { i18n } = useTranslation();
 
   const languages = [
@@ -16,11 +20,13 @@ export const LanguageSelector = () => {
 
   const currentLanguage = languages.find(lang => lang.code === i18n.language) || languages[0];
 
+  const isDark = variant === 'dark';
+
   return (
     <div className="flex items-center gap-2">
-      <Globe className="h-4 w-4 text-slate-600" />
+      <Globe className={`h-4 w-4 ${isDark ? 'text-white' : 'text-slate-600'}`} />
       <Select value={i18n.language} onValueChange={(value) => i18n.changeLanguage(value)}>
-        <SelectTrigger className="w-[140px] border-slate-200">
+        <SelectTrigger className={`w-[140px] ${isDark ? 'border-slate-600 bg-slate-800 text-white' : 'border-slate-200'}`}>
           <SelectValue>
             <div className="flex items-center gap-2">
               <span>{currentLanguage.flag}</span>

src/components/landing/LandingFooter.tsx

@@ -1,3 +1,4 @@
+
 import { Globe, TrendingUp, Github } from "lucide-react";
 import { Link } from "react-router-dom";
 import { LanguageSelector } from "@/components/LanguageSelector";
@@ -61,8 +62,8 @@ export const LandingFooter = () => {
         <div className="border-t border-slate-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
           <p className="text-slate-400">&copy; 2024 RefSpring. All rights reserved.</p>
           <div className="flex flex-col sm:flex-row items-center gap-4">
-            <div className="bg-white rounded-xl p-3 shadow-lg">
-              <LanguageSelector />
+            <div className="bg-slate-800 rounded-xl p-3 shadow-lg border border-slate-700">
+              <LanguageSelector variant="dark" />
             </div>
             <div className="flex gap-6">
               <Link to="/privacy" className="text-slate-400 hover:text-white transition-colors">Privacy</Link>