fix: clean button fixes

Author: HusseinSerag

src/components/LandingPage/HeroSection.tsx

@@ -12,7 +12,8 @@ export default function HeroSection() {
 				<Link to={"/themes"}>
 					<button
 						className="
-              bg-accent-900 hover:bg-gradient-to-r hover:from-secondary-900 px-2 py-1 text-[14px] hover:to-primary-600 
+              bg-accent-100 text-accent-700 hover:bg-gradient-to-r
+               hover:from-secondary-900 px-2 py-1 text-[14px] hover:to-primary-600 
               transition-colors duration-300 hover:text-accent-900 sm:px-4 sm:py-2 sm:text-lg rounded-lg
             "
 					>
@@ -22,7 +23,8 @@ export default function HeroSection() {
 				<Link to={"/plugins"}>
 					<button
 						className="
-              bg-accent-900 hover:bg-gradient-to-r hover:from-secondary-900 px-2 py-1 text-[14px] hover:to-primary-600 
+            bg-accent-100 text-accent-700  hover:bg-gradient-to-r
+             hover:from-secondary-900 px-2 py-1 text-[14px] hover:to-primary-600 
               transition-colors duration-300 hover:text-accent-900 sm:px-4 sm:py-2 sm:text-lg rounded-lg
             "
 					>
@@ -32,7 +34,8 @@ export default function HeroSection() {
 				<Link to={"https://react-chatbotify.com"}>
 					<button
 						className="
-              bg-accent-900 hover:bg-gradient-to-r hover:from-secondary-900 px-2 py-1 text-[14px] hover:to-primary-600 
+            bg-accent-100 text-accent-700 hover:bg-gradient-to-r hover:from-secondary-900 px-2 py-1 text-[14px]
+             hover:to-primary-600 
               transition-colors duration-300 hover:text-accent-900 sm:px-4 sm:py-2 sm:text-lg rounded-lg
             "
 					>

src/components/NavigationBar/AppThemeToggle.tsx

@@ -17,7 +17,7 @@ const AppThemeToggle = () => {
 	return <DarkModeSwitch
 		checked={isDark}
 		onChange={handleClick}
-		size={30}
+		size={20}
 		moonColor="hsl(198,90%,15%)"
 		sunColor="hsl(48,90%,55%)"
 

src/components/NavigationBar/NavigationBar.tsx

@@ -360,7 +360,7 @@ const NavigationBar = () => {
 						</button>
 					</li>
 				)}
-				<li>
+				<li className='grid items-center'>
 					<AppThemeToggle />
 				</li>
 			</ul>

src/components/NavigationBar/ToggleButton.tsx

@@ -12,12 +12,6 @@
   0px 8.5px 17.9px rgba(0, 0, 0, 0.042),
   0px 15.9px 33.4px rgba(0, 0, 0, 0.05),
   0px 38px 80px rgba(0, 0, 0, 0.07);
-  --hue: 223;
-  --bg: hsl(var(--hue), 10%, 100%);
-  --fg: hsl(var(--hue), 10%, 0%);
-  --primary: hsl(var(--hue), 90%, 55%);
-  --primaryT: hsla(var(--hue), 90%, 55%, 0);
-  --transDur: 0.3s;
  }
 
 :root[app-theme="light"] {