fix: screen adjustments for dark and root themes

src/app/(home)/page.tsx

+import { Search } from 'lucide-react'
+import Link from 'next/link'
+
 import { About } from '@/components/about'
 import { Banner } from '@/components/banner'
 import { CarouselComponent } from '@/components/corousel-component'
 import { CourseCategory } from '@/components/course-category'
 import { Differences } from '@/components/differences'
-import { StyledInputs } from '@/components/mui/styled-inputs'
+import { InputMui } from '@/components/mui/inputs'
 import { NavLinkCategory } from '@/components/nav-link-category'
 import { SignUp } from '@/components/sign-up'
 import { Button } from '@/components/ui/button'
-import { TextField } from '@mui/material'
-import { Search } from 'lucide-react'
-import Link from 'next/link'
 
 export default function Home() {
   return (
@@ -21,12 +21,11 @@ export default function Home() {
         <div className="container flex flex-col">
           <NavLinkCategory />
           <div className="flex justify-center items-center w-full md:w-1/2 mx-auto mb-8">
-            <TextField
+            <InputMui
               label="O que você quer aprender hoje?"
               variant="standard"
               type="text"
-              className="w-full"
-              sx={StyledInputs({ color: '#fafafa' })}
+              className="w-full #fafafa"
             />
             <Search size={24} />
           </div>

src/app/admin/page.tsx

 import { Card } from '@/components/card'
+import { InputMui } from '@/components/mui/inputs'
 import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
 import { CoursesCard } from '@/utils/courses-array'
 import { Pencil, Search } from 'lucide-react'
 import Link from 'next/link'
@@ -91,7 +91,12 @@ export default function Admin() {
             <Link href="admin/curso">+ Adicionar novo</Link>
           </Button>
           <div className="flex items-center flex-1 my-6">
-            <Input className="pr-8" placeholder="Pesquisar" />
+            <InputMui
+              label="Pesquisar"
+              type="text"
+              variant="standard"
+              className="w-full"
+            />
             <Search size={24} className="-ml-6" />
           </div>
           <div className="flex flex-wrap justify-around gap-4">
@@ -102,7 +107,7 @@ export default function Admin() {
                 href={`admin/curso/${course.id}`}
               >
                 <div className={`bg-gray-100 pb-4 rounded-lg max-w-[163px]`}>
-                  <Card.Image image={course.image.src} width="240" height="320">
+                  <Card.Image image={course.image.src} width={240} height={320}>
                     <Card.Title title={course.title} />
                   </Card.Image>
                   <Button

src/app/contato/page.tsx

+import { InputMui } from '@/components/mui/inputs'
 import { Button } from '@/components/ui/button'
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
+import { MenuItem } from '@mui/material'
 import { Clock4, Mail, Smartphone } from 'lucide-react'
 
+const matters = [
+  {
+    value: 'recent',
+    label: 'Mais recentes',
+  },
+  {
+    value: 'fast',
+    label: 'Cursos rápidos',
+  },
+  {
+    value: 'students',
+    label: 'Estudantes',
+  },
+  {
+    value: 'immediate',
+    label: 'Início imediato',
+  },
+]
+
 export default function Contact() {
   return (
     <main className="container flex flex-col justify-center items-center py-20">
@@ -40,38 +53,23 @@ export default function Contact() {
             Envie uma mensagem
           </h2>
           <form action="" className="mt-6 flex flex-col gap-6">
-            <label htmlFor="name" className="relative w-full">
-              <input
-                id="name"
-                type="text"
-                className="px-4 py-2 text-lg outline-none w-full border border-gray-50 rounded-sm hover:border-1 duration-200 peer focus:border-green-800 bg-inherit"
-              />
-              <span className="absolute left-0 top-2 px-1 text-lg bg-gray-900 tracking-wide peer-focus:text-green-800 pointer-events-none duration-200 peer-focus:text-sm peer-focus:-translate-y-5 ml-2 peer-valid:text-sm peer-valid:-translate-y-5">
-                Nome completo
-              </span>
-            </label>
-            <label htmlFor="mensage" className="relative w-full">
-              <textarea
-                id="mensage"
-                className="px-4 py-2 text-lg h-36 outline-none w-full border border-gray-50 rounded-sm hover:border-1 duration-200 peer focus:border-green-800 bg-inherit"
-              />
-              <span className="absolute left-0 top-2 px-1 text-lg bg-gray-900 tracking-wide peer-focus:text-green-800 pointer-events-none duration-200 peer-focus:text-sm peer-focus:-translate-y-5 ml-2 peer-valid:text-sm peer-valid:-translate-y-5">
-                Mensagem
-              </span>
-            </label>
-            <Select>
-              <SelectTrigger className="border-x border-y rounded-sm focus-visible:border-green-800">
-                <SelectValue placeholder="Assunto" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectItem value="recent">Mais recentes</SelectItem>
-                  <SelectItem value="fast">Cursos rápidos</SelectItem>
-                  <SelectItem value="students">Estudantes</SelectItem>
-                  <SelectItem value="immediate">Início imediato</SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
+            <InputMui type="text" variant="outlined" label="Nome completo" />
+            <InputMui
+              type="text"
+              variant="outlined"
+              label="Mensagem"
+              multiline
+              rows={4}
+            />
+
+            <InputMui type="text" variant="outlined" label="Assunto" select>
+              {matters.map((option) => (
+                <MenuItem key={option.value} value={option.value}>
+                  {option.label}
+                </MenuItem>
+              ))}
+            </InputMui>
+
             <div className="flex">
               <Button type="submit" className="w-auto">
                 Enviar

src/app/curso/[courseId]/page.tsx

@@ -3,8 +3,6 @@ import Image from 'next/image'
 import { BannerCategory } from '@/components/banner-category'
 import { CarouselComponent } from '@/components/corousel-component'
 import { CourseDetails } from '@/components/course-details'
-import { Differences } from '@/components/differences'
-import { SignUp } from '@/components/sign-up'
 import {
   Accordion,
   AccordionContent,
@@ -89,8 +87,6 @@ export default function CoursePage({
           <CarouselComponent />
         </div>
       </div>
-      <SignUp />
-      <Differences />
     </>
   )
 }

src/app/empresas/page.tsx

@@ -19,7 +19,7 @@ export default function Companies() {
         {CoursesCard.map((course) => (
           <div className="flex justify-center" key={course.id}>
             <Card.Root link={`curso/${course.id}`}>
-              <Card.Image image={course.image.src} width="273" height="365">
+              <Card.Image image={course.image.src} width={273} height={365}>
                 <Card.Title title={course.title} />
               </Card.Image>
               <Card.Content description={course.hours}>

src/app/estudantes/page.tsx

@@ -19,7 +19,7 @@ export default function Students() {
         {CoursesCard.map((course) => (
           <div className="flex justify-center" key={course.id}>
             <Card.Root link={`curso/${course.id}`}>
-              <Card.Image image={course.image.src} width="273" height="365">
+              <Card.Image image={course.image.src} width={273} height={365}>
                 <Card.Title title={course.title} />
               </Card.Image>
               <Card.Content description={course.hours}>

src/app/layout.tsx

@@ -23,7 +23,7 @@ export default function RootLayout({
       <body className={`antialiased ${poppins.className}`}>
         <ThemeProvider
           attribute="class"
-          defaultTheme="system"
+          defaultTheme="dark"
           enableSystem
           disableTransitionOnChange
         >

src/app/login/page.tsx

@@ -25,18 +25,8 @@ export default function Login() {
         >
           <div className="flex flex-col space-y-6">
             <div className="flex flex-col space-y-4">
-              <InputMui
-                label="E-mail"
-                variant="outlined"
-                type="email"
-                color="white"
-              />
-              <InputMui
-                label="Senha"
-                variant="outlined"
-                type="password"
-                color="white"
-              />
+              <InputMui label="E-mail" variant="outlined" type="email" />
+              <InputMui label="Senha" variant="outlined" type="password" />
             </div>
             <div className="flex items-center space-x-2">
               <Checkbox id="remember" />
@@ -47,7 +37,9 @@ export default function Login() {
                 Lembrar-me
               </label>
             </div>
-            <Button className="rounded-sm">Entrar</Button>
+            <Button className="rounded-sm" asChild>
+              <Link href="/admin">Entrar</Link>
+            </Button>
             <Button
               variant={'link'}
               asChild

src/app/profissionais/page.tsx

@@ -19,7 +19,7 @@ export default function Professionals() {
         {CoursesCard.map((course) => (
           <div className="flex justify-center" key={course.id}>
             <Card.Root link={`curso/${course.id}`}>
-              <Card.Image image={course.image.src} width="273" height="365">
+              <Card.Image image={course.image.src} width={273} height={365}>
                 <Card.Title title={course.title} />
               </Card.Image>
               <Card.Content description={course.hours}>

src/components/banner.tsx

@@ -25,7 +25,7 @@ export function Banner() {
     <section>
       <Carousel
         plugins={[pluginDesktop.current]}
-        className="w-full hidden xs:flex"
+        className="w-full hidden md:flex"
         // onMouseEnter={pluginDesktop.current.stop}
         onMouseLeave={pluginDesktop.current.reset}
       >
@@ -49,7 +49,7 @@ export function Banner() {
 
       <Carousel
         plugins={[pluginMobile.current]}
-        className="w-full flex xs:hidden"
+        className="w-full flex md:hidden"
         // onMouseEnter={pluginMobile.current.stop}
         onMouseLeave={pluginMobile.current.reset}
       >
@@ -61,6 +61,7 @@ export function Banner() {
                 alt="Banner"
                 width={item.mobile.width}
                 height={item.mobile.height}
+                className="w-full object-cover max-h-[400px]"
                 unoptimized
               />
             </CarouselItem>

src/components/card/card-image.tsx

@@ -4,8 +4,8 @@ import { ReactNode } from 'react'
 type CardImageProps = {
   children: ReactNode
   image: string
-  width: string
-  height: string
+  width: number
+  height: number
 }
 
 export function CardImage({ children, image, width, height }: CardImageProps) {
@@ -13,8 +13,8 @@ export function CardImage({ children, image, width, height }: CardImageProps) {
     <div className={`relative w-[${width}px] `}>
       <Image
         src={image}
-        width={Number(width)}
-        height={Number(height)}
+        width={width}
+        height={height}
         alt="Capa do curso"
         className={`object-cover rounded-lg h-[320px]`}
       />

src/components/corousel-component.tsx

@@ -21,7 +21,7 @@ export function CarouselComponent() {
               className="sm:basis-1/2 md:basis-1/3 lg:basis-1/4 xl:basis-1/5 flex justify-center"
             >
               <Card.Root link={`curso/${course.id}`}>
-                <Card.Image image={course.image.src} width="240" height="320">
+                <Card.Image image={course.image.src} width={240} height={320}>
                   <Card.Title title={course.title} />
                 </Card.Image>
                 <Card.Content description={course.hours}>

src/components/course-category.tsx

@@ -10,7 +10,7 @@ export function CourseCategory() {
     <section className="hidden md:block">
       <div className="h-auto flex justify-center items-center my-20 px-6">
         <ul className="flex justify-center items-center gap-4 text-gray-50">
-          <li className="max-w-[472px] bg-gradient-to-r from-green-700 to-green-700/50 rounded-lg pb-4 transform scale-95 hover:scale-100 transition-transform duration-300 drop-shadow-xl hover:drop-shadow-2xl">
+          <li className="max-w-[472px] bg-gradient-to-r from-green-700 to-green-900 rounded-lg pb-4 transform scale-95 hover:scale-100 transition-transform duration-300 drop-shadow-xl hover:drop-shadow-2xl">
             <Link href="#" className="flex flex-col gap-4 p-2">
               <Image
                 src={ImageFast}
@@ -25,7 +25,7 @@ export function CourseCategory() {
               </p>
             </Link>
           </li>
-          <li className="max-w-[472px] bg-gradient-to-r from-green-700 to-green-700/50  rounded-lg pb-4 transform scale-95 hover:scale-100 transition-transform duration-300 drop-shadow-xl hover:drop-shadow-2xl">
+          <li className="max-w-[472px] bg-gradient-to-r from-green-700 to-green-900  rounded-lg pb-4 transform scale-95 hover:scale-100 transition-transform duration-300 drop-shadow-xl hover:drop-shadow-2xl">
             <Link href="#" className="flex flex-col gap-4 p-2">
               <Image
                 src={ImageDeepen}
@@ -40,7 +40,7 @@ export function CourseCategory() {
               </p>
             </Link>
           </li>
-          <li className="max-w-[472px] bg-gradient-to-r from-green-700 to-green-700/50  rounded-lg pb-4 transform scale-95 hover:scale-100 transition-transform duration-300 drop-shadow-xl hover:drop-shadow-2xl">
+          <li className="max-w-[472px] bg-gradient-to-r from-green-700 to-green-900  rounded-lg pb-4 transform scale-95 hover:scale-100 transition-transform duration-300 drop-shadow-xl hover:drop-shadow-2xl">
             <Link href="#" className="flex flex-col gap-4 p-2">
               <Image
                 src={ImageCorporate}

src/components/header.tsx

@@ -9,6 +9,7 @@ import {
   SheetTrigger,
 } from '@/components/ui/sheet'
 import { Menu } from 'lucide-react'
+import { useTheme } from 'next-themes'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import LogoComponent from './logo'
@@ -16,14 +17,19 @@ import { NavLink } from './nav-link'
 
 export function Header() {
   const pathname = usePathname()
+  const { theme } = useTheme()
 
   return (
     <header
-      className={`w-full md:px-6 py-5 overflow-hidden ${pathname === '/' && 'absolute z-50'}`}
+      className={`w-full md:px-6 py-5 overflow-hidden ${theme !== 'dark' && pathname !== '/' && 'bg-gray-50'} ${pathname === '/' && 'absolute z-50 text-gray-50'}`}
     >
       <div className="container mx-auto flex justify-between gap-4">
         <Link href="/">
-          <LogoComponent width={115} height={32} className="#F9F9F9" />
+          <LogoComponent
+            width={115}
+            height={32}
+            className={`${theme === 'dark' || pathname === '/' ? '#F9F9F9' : '#1C1C1C'}`}
+          />
         </Link>
         <div className="flex items-center flex-1 lg:flex-none">
           <div className="hidden lg:block">
@@ -39,7 +45,7 @@ export function Header() {
                 Para empresas
               </NavLink>
               <NavLink variant="ghost" href="/sobre">
-                Conheça a SevenPro
+                Conheça +
               </NavLink>
               <NavLink variant="ghost" href="/contato">
                 Contato
@@ -54,7 +60,7 @@ export function Header() {
             >
               <Link href="/inscricao">Inscreva-se</Link>
             </Button>
-            <ThemeSwitcher />
+            <ThemeSwitcher className="hidden sm:block" />
             <div className="flex flex-col">
               <Sheet>
                 <SheetTrigger asChild>
@@ -63,7 +69,7 @@ export function Header() {
                     size="icon"
                     className="shrink-0 lg:hidden"
                   >
-                    <Menu className="h-5 w-5 text-white" />
+                    <Menu className="h-5 w-5" />
                   </Button>
                 </SheetTrigger>
                 <SheetContent
@@ -72,7 +78,7 @@ export function Header() {
                 >
                   <nav className="flex flex-col items-end gap-2 mt-4 text-lg font-light uppercase">
                     <NavLink
-                      className="hover:bg-gray-50/10"
+                      className="text-gray-50 hover:bg-gray-50/10"
                       variant="ghost"
                       href="/estudantes"
                     >
@@ -82,7 +88,7 @@ export function Header() {
                     </NavLink>
 
                     <NavLink
-                      className="hover:bg-gray-50/10"
+                      className="text-gray-50 hover:bg-gray-50/10"
                       variant="ghost"
                       href="/profissionais"
                     >
@@ -92,7 +98,7 @@ export function Header() {
                     </NavLink>
 
                     <NavLink
-                      className="hover:bg-gray-50/10"
+                      className="text-gray-50 hover:bg-gray-50/10"
                       variant="ghost"
                       href="/empresas"
                     >
@@ -102,22 +108,21 @@ export function Header() {
                     </NavLink>
 
                     <NavLink
-                      className="hover:bg-gray-50/10"
+                      className="text-gray-50 hover:bg-gray-50/10"
                       variant="ghost"
                       href="/sobre"
                     >
-                      <SheetClose className="uppercase">
-                        Conheça a SevenPro
-                      </SheetClose>
+                      <SheetClose className="uppercase">Conheça +</SheetClose>
                     </NavLink>
 
                     <NavLink
-                      className="hover:bg-gray-50/10"
+                      className="text-gray-50 hover:bg-gray-50/10"
                       variant="ghost"
                       href="/contato"
                     >
                       <SheetClose className="uppercase">Contato</SheetClose>
                     </NavLink>
+                    <ThemeSwitcher className="text-gray-50" />
                   </nav>
                 </SheetContent>
               </Sheet>

src/components/logo.tsx

@@ -17,7 +17,11 @@ function LogoComponent(props: ComponentProps<'svg'>) {
       />
       <path
         d="M803.68 94.78L640.5 454.26h-48.76L405.35 43.64h69.44L616.12 355l94.75-208.71.07-.18H641.7v51.33h-51.15V94.78h213.13z"
-        fill={props.className === '#F9F9F9' ? '#007D77' : '#F9F9F9'}
+        fill={
+          props.className !== 'fill-gray-900 flex md:hidden'
+            ? '#007D77'
+            : '#F9F9F9'
+        }
       />
       <path
         d="M1345.38 355.29V194.181h69.48c5.36 0 10.85.619 16.5 1.849s10.82 3.731 15.52 7.491c4.71 3.77 8.5 9.45 11.4 17.04 2.89 7.6 4.34 17.7 4.34 30.29s-1.45 22.76-4.34 30.5c-2.9 7.75-6.63 13.569-11.18 17.479-4.56 3.91-9.52 6.55-14.87 7.92-5.36 1.38-10.57 2.07-15.64 2.07-2.6 0-5.5-.14-8.68-.44-3.19-.29-6.37-.65-9.55-1.09-3.19-.43-6.12-.9-8.79-1.41-2.68-.5-4.89-.83-6.63-.97v50.37h-37.56v.01zm37.56-80.109h27.79c3.33 0 6.05-.871 8.14-2.611 2.1-1.74 3.66-4.34 4.67-7.81 1.01-3.48 1.52-8.04 1.52-13.68 0-5.35-.54-9.73-1.63-13.13-1.08-3.4-2.64-5.929-4.67-7.599s-4.64-2.5-7.82-2.5h-28.01v47.339l.01-.009zM1481.73 355.29V194.181h67.75c6.8 0 13.06.83 18.78 2.5 5.72 1.67 10.71 4.489 14.98 8.469 4.27 3.98 7.6 9.37 9.99 16.17 2.39 6.81 3.58 15.42 3.58 25.84 0 7.09-.65 13.13-1.95 18.13-1.3 4.99-3.04 9.19-5.21 12.59-2.17 3.4-4.67 6.19-7.49 8.36a61.023 61.023 0 01-8.8 5.651l28.88 63.399h-38.22l-24.1-57.319c-1.45 0-3.08-.041-4.88-.111-1.81-.07-3.58-.11-5.32-.11h-10.42v57.54h-37.57zm37.56-87.28h23.45c2.6 0 4.92-.32 6.95-.97 2.03-.66 3.76-1.81 5.21-3.47 1.45-1.67 2.53-3.8 3.26-6.41.72-2.6 1.09-5.859 1.09-9.769s-.37-7.131-1.09-9.661c-.73-2.53-1.81-4.48-3.26-5.86-1.45-1.37-3.18-2.39-5.21-3.04-2.03-.66-4.35-.979-6.95-.979h-23.45v40.17-.011zM1683 356.601c-11.14 0-20.95-1.091-29.42-3.261-8.47-2.17-15.56-6.15-21.28-11.94-5.72-5.79-9.99-14.04-12.81-24.75-2.82-10.71-4.23-24.68-4.23-41.9s1.44-31.01 4.34-41.8c2.89-10.78 7.16-19.07 12.81-24.86 5.65-5.79 12.7-9.8 21.17-12.05 8.47-2.24 18.28-3.37 29.42-3.37s21.17 1.12 29.64 3.37c8.47 2.24 15.52 6.26 21.17 12.05 5.65 5.79 9.88 14.08 12.7 24.86 2.82 10.79 4.23 24.72 4.23 41.8s-1.41 31.2-4.23 41.9c-2.82 10.72-7.09 18.97-12.81 24.75-5.72 5.79-12.78 9.77-21.17 11.94-8.4 2.17-18.24 3.261-29.53 3.261zm0-33.651c5.93 0 10.86-.69 14.77-2.07 3.9-1.37 6.98-3.759 9.22-7.159s3.83-8.251 4.78-14.551c.94-6.29 1.41-14.44 1.41-24.42 0-9.98-.47-18.6-1.41-24.97-.94-6.37-2.53-11.26-4.78-14.66-2.24-3.4-5.32-5.72-9.22-6.95-3.91-1.23-8.83-1.84-14.77-1.84-5.94 0-10.64.61-14.54 1.84-3.91 1.23-6.99 3.55-9.23 6.95-2.24 3.4-3.87 8.29-4.88 14.66-1.02 6.37-1.52 14.69-1.52 24.97s.47 18.13 1.41 24.42c.94 6.3 2.53 11.151 4.77 14.551 2.24 3.4 5.32 5.789 9.23 7.159 3.91 1.38 8.83 2.07 14.76 2.07z"
@@ -25,7 +29,11 @@ function LogoComponent(props: ComponentProps<'svg'>) {
       />
       <path
         d="M1750.75 434.04h-405.37v20.22h405.37v-20.22z"
-        fill={props.className === '#F9F9F9' ? '#007D77' : '#F9F9F9'}
+        fill={
+          props.className !== 'fill-gray-900 flex md:hidden'
+            ? '#007D77'
+            : '#F9F9F9'
+        }
       />
     </svg>
   )

src/components/mui/inputs.tsx

-import { TextField } from '@mui/material'
+'use client'
 
-type InputMuiProps = {
+import { TextField, TextFieldProps } from '@mui/material'
+import { useTheme } from 'next-themes'
+import { ReactNode, useEffect, useState } from 'react'
+
+type InputMuiProps = TextFieldProps & {
   label: string
   variant: 'standard' | 'filled' | 'outlined'
-  type: string
-  color: string
+  children?: ReactNode
 }
 
-export function InputMui({ label, variant, type, color }: InputMuiProps) {
+export function InputMui({
+  label,
+  variant,
+  children,
+  ...props
+}: InputMuiProps) {
+  const { theme } = useTheme()
+  const [themeConfig, setThemeConfig] = useState('dark')
+
+  useEffect(() => {
+    if (theme === 'dark') {
+      setThemeConfig('dark')
+    } else {
+      setThemeConfig('root')
+    }
+  }, [theme])
+
+  const color = themeConfig === 'dark' ? '#fafafa' : '#3C3C3C'
+
   return (
     <TextField
       label={label}
       variant={variant}
-      type={type}
+      {...props}
       sx={{
         '& .MuiOutlinedInput-root': {
           '& fieldset': {
-            borderColor: color, // Inicialmente transparente
+            borderColor: color,
           },
           '&:hover fieldset': {
-            borderColor: color, // Mantém transparente ao passar o mouse
+            borderColor: color,
           },
           '&.Mui-focused fieldset': {
-            borderColor: color, // Mantém transparente ao focar
+            borderColor: color,
           },
         },
         '& label.Mui-focused': {
-          color,
+          color: `${color}`,
         },
         '& label': {
-          color,
+          color: `${color}`,
         },
         '& input': {
-          color,
+          color: `${color}`,
         },
         '& .MuiInputBase-input': {
-          color: 'white',
+          color: `${color}`,
         },
         '& .MuiInput-underline:before': {
           borderBottomColor: color,
@@ -56,6 +77,8 @@ export function InputMui({ label, variant, type, color }: InputMuiProps) {
           borderBottomColor: color,
         },
       }}
-    />
+    >
+      {children}
+    </TextField>
   )
 }

src/components/nav-link.tsx

@@ -26,7 +26,7 @@ export function NavLink(props: NavLinkProps) {
   return (
     <Button
       data-current={pathname === props.href}
-      className={`data-[current=true]:font-semibold text-gray-50 ${props.className}`}
+      className={`data-[current=true]:font-semibold ${props.className}`}
       variant={props.variant}
       asChild
     >

src/components/search-filter.tsx

-import { TextField } from '@mui/material'
 import { Search } from 'lucide-react'
-import { StyledInputs } from './mui/styled-inputs'
+import { InputMui } from './mui/inputs'
 import { Label } from './ui/label'
 import {
   Select,
@@ -15,19 +14,18 @@ export default function SearchFilter() {
   return (
     <div className="container grid md:grid-cols-2 gap-8 items-end mb-8">
       <div className="flex items-center max-w-[712px] flex-1">
-        <TextField
+        <InputMui
           label="O que você quer aprender hoje?"
           variant="standard"
           type="text"
-          className="w-full"
-          sx={StyledInputs({ color: '#fafafa' })}
+          className="w-full #fafafa"
         />
         <Search size={24} className="-ml-6" />
       </div>
       <div>
         <Label>Filtrados por</Label>
         <Select defaultValue="recent">
-          <SelectTrigger className="flex items-center max-w-[712px] flex-1">
+          <SelectTrigger className="flex items-center border-gray-900 text-gray-900 dark:border-gray-50 dark:text-gray-50 max-w-[712px] flex-1">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>

src/components/theme-switcher.tsx

@@ -5,16 +5,20 @@ import { Moon, Sun } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import { Button } from './ui/button'
 
-export function ThemeSwitcher() {
+type ThemeSwitcherProps = {
+  className?: React.HTMLProps<HTMLElement>['className']
+}
+
+export function ThemeSwitcher({ className }: ThemeSwitcherProps) {
   const { setTheme, theme } = useTheme()
   const hasMounted = useHasMounted()
 
   return (
-    <div className="hidden sm:block">
+    <div className={className}>
       {hasMounted && theme === 'dark' ? (
         <Button
           variant="ghost"
-          className="p-2 text-gray-50"
+          className="p-2"
           onClick={() => setTheme('light')}
         >
           <Sun />
@@ -22,7 +26,7 @@ export function ThemeSwitcher() {
       ) : (
         <Button
           variant="ghost"
-          className="p-2 text-gray-50"
+          className="p-2"
           onClick={() => setTheme('dark')}
         >
           <Moon />

src/components/ui/button.tsx

@@ -10,7 +10,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          'bg-gradient-to-r from-green-700 to-green-700/50 text-gray-50 hover:opacity-75',
+          'text-gray-50 bg-gradient-to-r from-green-700 to-green-900 hover:opacity-75',
         // 'bg-green-700 text-primary hover:bg-green-800',
         secondary:
           'text-gray-50 bg-gradient-to-r from-purple-100 to-purple-200 hover:bg-purple-200 hover:opacity-75',
@@ -21,7 +21,8 @@ const buttonVariants = cva(
           'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline:
           'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-        ghost: 'hover:bg-white/10 hover:text-gray-50',
+        ghost:
+          'dark:hover:bg-white/10 dark:hover:text-gray-50 hover:bg-gray-900/10',
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {

src/styles/globals.css

@@ -5,7 +5,7 @@
   @layer base {
     :root {
       --background: 0 0% 100%;
-      --foreground: 0, 0%, 11%;
+      --foreground: 0, 0%, 25%;
 
       --card: 0 0% 100%;
       --card-foreground: 0, 0%, 11%;