update

src/components/BtnToggleMode.tsx

@@ -37,8 +37,12 @@ setThemeIsDark(!ThemeIsDark) ;
 
 
 
-return (<button onClick={ToggleTheme}>
- {ThemeIsDark ? <IoIosSunny className=" text-2xl"/> : <FaMoon />} 
+return (<button onClick={ToggleTheme} >
+
+ {ThemeIsDark ?
+<IoIosSunny className=" text-[2.2rem]"/> : <FaMoon className=" text-[1.5rem]"/>
+}
+
 
 </button>)
 

src/components/MyTechs.tsx

@@ -19,15 +19,15 @@ function MyTechs() {
 const [TechClicked,setTechClicked] = useState<string>('react') ;
 
 const StyleForLi = 'cursor-pointer flex flex-col rounded-t-xl px-2 pb-1  shadow-2xl border ml-3 '
-const ThemeForComponent = ThemeIsDark ? 'text-white bg-gray-800 duration-500 bg-gray-500 border-x-gray-500  border-b-gray-700'
+const ThemeForComponent = ThemeIsDark ? 'text-white bg-gray-800 duration-500  border-x-gray-500  border-b-gray-700'
 :'duration-500 bg-white  from-gray-600 to-white bg-gray-200 border-x-gray-300 border-t-gray-300 border-b-gray-300'
 
 function CatchTechGiveStyle (tech:string ){
     if (ThemeIsDark) {
-    return (tech === TechClicked ? 'bg-gray-800 border-b-0 ' : 'bg-gray-900  border-gray-500 border-b-gray-500' ) 
+    return (tech === TechClicked ? 'bg-gray-800 border-b-0 ' : 'bg-gray-900  border-gray-500 border-b-gray-500 hover:bg-gray-700' ) 
     }
     else {
-    return (tech === TechClicked ? 'bg-white border-b-0 border-x-gray-300 border-t-gray-500' : 'bg-gray-200  border-b-gray-300' ) 
+    return (tech === TechClicked ? 'bg-white border-b-0 border-x-gray-300 border-t-gray-500' : 'bg-gray-200  border-b-gray-300 hover:bg-white' ) 
     }
     }
 
@@ -58,7 +58,7 @@ onClick={()=>setTechClicked('react')}><b className=''
 >React js</b>
 <Image src={ReactImg} alt='image' height={70}  className=" "/></li>
 
-<li className={`${StyleForLi} ${CatchTechGiveStyle('typescript')} `} 
+<li className={`${StyleForLi} ${CatchTechGiveStyle('typescript')}`} 
 onClick={()=>setTechClicked('typescript')}><b>Typescript</b>
 <Image src={TypescriptImg} alt='image' height={70}  className=" "/></li>
 

src/components/MyTechsForMobile.tsx

@@ -10,7 +10,6 @@ import CssImg from '../images/css3d.png'
 import Htmlimg from '../images/html3d.png'
 import GitImg from '../images/git3d.webp'
 import FirebaseImg from '../images/firebaseLogo.webp'
-// import Firebase from '../images/firebaseLogo.webp'
 import { ReactText,TypescriptText,NextText,TailwindText,CssText,HtmlText,GitText,GithubText,FirebaseText,BoostrapText,JavascriptText } from './Content'
 import { MyContext } from "@/context/MyContext"
 import { TstateTheme } from "@/types/Types"
@@ -38,10 +37,10 @@ function ReturnText() {
 }
 function CatchTechGiveStyle (tech:string ){
     if (ThemeIsDark) {
-    return (tech === TechClicked ? 'bg-gray-700' : 'bg-gray-900  border-gray-500' ) 
+    return (tech === TechClicked ? 'bg-gray-700' : 'bg-gray-900  border-gray-500 hover:bg-gray-700' ) 
     }
     else {
-    return (tech === TechClicked ? 'bg-white border-gray-400' : 'bg-gray-200  border-b-gray-300' ) 
+    return (tech === TechClicked ? 'bg-white border-gray-400' : 'bg-gray-200  border-b-gray-300 hover:bg-white' ) 
     }
     }
 

src/modals/ModalProject.module.css

@@ -43,16 +43,22 @@ color: white;
   background-color: black;
   color: white; 
  }
-
+ .divScroll{
+  height: 100%;
+  width: 100%;
+  overflow-y: scroll;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+ }
+
 
 @media only screen and (max-height: 500px) {
   .dadSquare {
-      overflow-y: scroll;
       height: 100%;
 }
 .squareMod{
-  max-height: 130vh;
-
+  max-height: 150vh;
 }
 }
 

src/modals/ModalProject.tsx

@@ -10,6 +10,8 @@ return (<>
 { Modal.IsOpen && <div onClick={()=>setModal({IsOpen:false,img:''})}
    className={`${style.containerMod} `} >
 
+<div className={`${style.divScroll}`}>
+
 <div className={`${style.dadSquare}`}>
 <p className={`${style.btnCloseMod}`}> <IoClose/></p>
 <Image onClick={(e)=> e.stopPropagation()} src={Modal.img} alt="imagem"
@@ -19,6 +21,8 @@ className={`${style.squareMod }`}/>
 
 </div>
 
+</div>
+
 }
 
 </>

src/pages/Footer.tsx

@@ -4,8 +4,11 @@ import { TstateTheme } from "@/types/Types";
 
 function Footer() {
     const {ThemeIsDark} = useContext(MyContext) as TstateTheme ;
-    const ThemeForComponent = ThemeIsDark ? 'text-white bg-gray-800 duration-500 border-t-gray-700 ':'duration-500 bg-gradient-to-t from-gray-600 to-white'
+    const ThemeForComponent = ThemeIsDark ? 'bg-gradient-to-b from-black to-gray-500 text-white duration-500 border-t-gray-800 ':'duration-500 bg-gradient-to-t from-gray-600 to-white border-t-0'
+//const ThemeForComponent = ThemeIsDark ? 'text-white bg-gradient-to-t from-black to-gray-400 duration-700 border-b-gray-800 border border-t-0 border-x-0':'duration-800 bg-gradient-to-b from-gray-600 to-white'
 
+
+
 return (<footer className={`${ThemeForComponent} border border-b-0 border-x-0`}>
 <nav className=" flex justify-around w-full h-16 items-center">
 Developed by Gabriel Brandão

src/pages/Header.tsx

@@ -7,7 +7,7 @@ import { TstateTheme } from "@/types/Types";
 
 function Header() {
 const {ThemeIsDark} = useContext(MyContext) as TstateTheme ;
-const ThemeForComponent = ThemeIsDark ? 'text-white bg-gray-800 duration-700 border-b-gray-600 border border-t-0 border-x-0':'duration-800 bg-gradient-to-b from-gray-600 to-white'
+const ThemeForComponent = ThemeIsDark ? 'text-white bg-gradient-to-t from-black to-gray-400 duration-700 border-b-gray-800 border border-t-0 border-x-0':'duration-800 bg-gradient-to-b from-gray-600 to-white'
 
 return (<header className={`${ThemeForComponent} `}>
 <nav className=" flex justify-around w-full h-16 items-center ">