Merge pull request #7 from Iapdigital/dev

fix: adjustments in logo colors and header background

src/components/footer.tsx

@@ -16,7 +16,9 @@ export function Footer() {
           <LogoComponent
             width={200}
             height={80}
-            className="fill-gray-900 flex md:hidden"
+            className="flex md:hidden"
+            fill="#1C1C1C"
+            color="#F9F9F9"
           />
           <ul className="text-center text-gray-50 md:text-start">
             <li>Plataforma de Cursos Livres</li>
@@ -24,7 +26,7 @@ export function Footer() {
             <li className="hidden md:flex">
               Centro de Ensino Superior Adventista no Sul do Brasil
             </li>
-            <li className="flex">
+            <li className="block lg:flex">
               CNPJ 76.726.884/0003-90
               <span className="hidden lg:flex">
                 &nbsp;| Vale do Ivaí - Ivatuba, PR

src/components/header.tsx

@@ -8,8 +8,8 @@ import {
   SheetContent,
   SheetTrigger,
 } from '@/components/ui/sheet'
+import { useThemeClient } from '@/hooks/useThemeClient'
 import { Menu } from 'lucide-react'
-import { useTheme } from 'next-themes'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import LogoComponent from './logo'
@@ -17,19 +17,18 @@ import { NavLink } from './nav-link'
 
 export function Header() {
   const pathname = usePathname()
-  const { theme } = useTheme()
+  const themeConfig = useThemeClient()
+
+  const color =
+    pathname === '/' || themeConfig === 'dark' ? '#fafafa' : '#1C1C1C'
 
   return (
     <header
-      className={`w-full md:px-6 py-5 overflow-hidden ${theme !== 'dark' && pathname !== '/' && 'bg-gray-50'} ${pathname === '/' && 'absolute z-50 text-gray-50'}`}
+      className={`w-full md:px-6 py-5 overflow-hidden ${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={`${theme === 'dark' || pathname === '/' ? '#F9F9F9' : '#1C1C1C'}`}
-          />
+          <LogoComponent width={115} height={32} fill={color} color="#007D77" />
         </Link>
         <div className="flex items-center flex-1 lg:flex-none">
           <div className="hidden lg:block">

src/components/logo.tsx

 import { ComponentProps } from 'react'
 
 function LogoComponent(props: ComponentProps<'svg'>) {
+  console.log('props', props)
   return (
     <svg
       width={115}
@@ -13,27 +14,19 @@ function LogoComponent(props: ComponentProps<'svg'>) {
     >
       <path
         d="M137.83 456.37c-7.29 0-14.63-.24-22.03-.71-7.41-.47-14.7-1.119-21.86-1.939-7.17-.81-14.11-1.821-20.8-2.991-6.69-1.18-12.86-2.47-18.51-3.87v-48.31c7.52.71 15.87 1.3 25.03 1.77 9.16.47 18.51.82 28.03 1.05 9.52.24 18.51.351 26.97.351 8.46 0 15.22-.641 20.97-1.941 5.76-1.29 10.17-3.52 13.23-6.69 3.05-3.18 4.58-7.58 4.58-13.23v-6.69c0-6.35-2.07-11.159-6.17-14.449-4.12-3.29-9.34-4.931-15.69-4.931h-20.45c-26.33 0-46.31-5.76-59.93-17.28-13.63-11.51-20.45-30.899-20.45-58.159V266c0-25.61 7.52-44.59 22.56-56.93 15.04-12.34 36.67-18.509 64.87-18.509 10.35 0 20.33.539 29.97 1.589 9.63 1.06 18.8 2.301 27.49 3.701 8.69 1.42 16.33 2.949 22.91 4.589v47.94c-10.81-.71-22.91-1.409-36.31-2.109-13.39-.71-25.62-1.061-36.66-1.061-7.29 0-13.75.65-19.39 1.94-5.64 1.3-9.99 3.64-13.04 7.05-3.06 3.41-4.58 8.41-4.58 14.99v4.93c0 7.53 2.17 13.04 6.52 16.57 4.34 3.52 10.98 5.29 19.92 5.29h24.32c16.22 0 29.62 2.991 40.2 8.991 10.58 6 18.51 14.22 23.79 24.67 5.29 10.46 7.94 22.269 7.94 35.429v13.04c0 21.63-3.83 38.071-11.47 49.361-7.63 11.28-18.45 18.929-32.43 22.909-13.98 4-30.5 6-49.53 6v-.01zM333.13 456.37c-5.64 0-12.28-.59-19.92-1.76-7.64-1.18-14.99-3.7-22.03-7.58-7.05-3.87-12.93-9.87-17.63-17.98-4.71-8.11-7.05-19.09-7.05-32.97V255.41c0-12.21 1.93-22.44 5.81-30.67 3.87-8.22 8.82-14.63 14.8-19.21 6-4.58 12.75-7.87 20.27-9.87 7.52-2 14.8-2.99 21.86-2.99 18.79 0 35.13.3 49 .88 13.86.58 26.09 1.23 36.66 1.94 10.58.7 20.1 1.411 28.56 2.111v51.469h-95.89c-6.34 0-11.28 1.47-14.8 4.41-3.52 2.94-5.29 7.57-5.29 13.92v28.911l98.71 3.519v47.95l-98.71 3.18v27.49c0 5.17.82 9.23 2.47 12.16 1.64 2.94 3.88 5.11 6.7 6.52 2.82 1.41 5.87 2.11 9.16 2.11h97.65v51.12c-10.34 1.19-21.85 2.24-34.54 3.18-12.69.94-25.56 1.59-38.61 1.94-13.04.35-25.44.64-37.19.88l.01.01zM842.76 456.37c-5.64 0-12.28-.59-19.92-1.76-7.64-1.18-14.99-3.7-22.03-7.58-7.05-3.87-12.93-9.87-17.63-17.98-4.71-8.11-7.05-19.09-7.05-32.97V255.41c0-12.21 1.93-22.44 5.81-30.67 3.87-8.22 8.82-14.63 14.8-19.21 6-4.58 12.75-7.87 20.27-9.87 7.52-2 14.8-2.99 21.86-2.99 18.79 0 35.13.3 49 .88 13.86.58 26.09 1.23 36.66 1.94 10.58.7 20.1 1.411 28.56 2.111v51.469H857.2c-6.34 0-11.28 1.47-14.8 4.41-3.52 2.94-5.29 7.57-5.29 13.92v28.911l98.71 3.519v47.95l-98.71 3.18v27.49c0 5.17.82 9.23 2.47 12.16 1.65 2.93 3.88 5.11 6.7 6.52 2.82 1.41 5.87 2.11 9.16 2.11h97.65v51.12c-10.34 1.19-21.85 2.24-34.54 3.18-12.69.94-25.56 1.59-38.61 1.94-13.04.35-25.44.64-37.19.88l.01.01zM989.061 454.26V192.67h48.309l100.12 158.29V192.67h61v261.59h-48.66l-100.12-157.94v157.94h-60.649z"
-        fill={props.className}
+        fill={props.fill}
       />
       <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 !== 'fill-gray-900 flex md:hidden'
-            ? '#007D77'
-            : '#F9F9F9'
-        }
+        fill={props.color}
       />
       <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"
-        fill={props.className}
+        fill={props.fill}
       />
       <path
         d="M1750.75 434.04h-405.37v20.22h405.37v-20.22z"
-        fill={
-          props.className !== 'fill-gray-900 flex md:hidden'
-            ? '#007D77'
-            : '#F9F9F9'
-        }
+        fill={props.color}
       />
     </svg>
   )

src/components/mui/inputs.tsx

 'use client'
 
+import { useThemeClient } from '@/hooks/useThemeClient'
 import { TextField, TextFieldProps } from '@mui/material'
-import { useTheme } from 'next-themes'
-import { ReactNode, useEffect, useState } from 'react'
+import { ReactNode } from 'react'
 
 type InputMuiProps = TextFieldProps & {
   label: string
@@ -16,16 +16,7 @@ export function InputMui({
   children,
   ...props
 }: InputMuiProps) {
-  const { theme } = useTheme()
-  const [themeConfig, setThemeConfig] = useState('dark')
-
-  useEffect(() => {
-    if (theme === 'dark') {
-      setThemeConfig('dark')
-    } else {
-      setThemeConfig('root')
-    }
-  }, [theme])
+  const themeConfig = useThemeClient()
 
   const color = themeConfig === 'dark' ? '#fafafa' : '#3C3C3C'
 

src/hooks/useThemeClient.tsx

+import { useTheme } from 'next-themes'
+import { useEffect, useState } from 'react'
+
+export const useThemeClient = () => {
+  const { theme } = useTheme()
+  const [themeConfig, setThemeConfig] = useState('dark')
+
+  useEffect(() => {
+    if (theme === 'dark') {
+      setThemeConfig('dark')
+    } else {
+      setThemeConfig('root')
+    }
+  }, [theme])
+
+  return themeConfig
+}