Wip: Update layout style in dark

wwWallet · Apr 16, 2024 · a033e6d · a033e6d
1 parent 3b841f0
commit a033e6d
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 13 deletions.
diff --git a/src/components/BottomNav.js b/src/components/BottomNav.js
@@ -27,11 +27,11 @@ const BottomNav = ({ isOpen, toggle }) => {
 	};
 
 	return (
-		<div className={`fixed bottom-0 left-0 right-0 bg-white flex justify-around p-4 z-40 max480:flex hidden shadow-2xl rounded-t-lg`}>
+		<div className={`fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 flex justify-around p-4 z-40 max480:flex hidden shadow-2xl rounded-t-lg`}>
 			{navItems.map(item => (
 				<button
 					key={item.path}
-					className={`cursor-pointer flex flex-col items-center w-[20%] ${(location.pathname === item.path && !isOpen) ? 'text-primary' : 'text-gray-400'} transition-colors duration-200`}
+					className={`cursor-pointer flex flex-col items-center w-[20%] ${(location.pathname === item.path && !isOpen) ? 'text-primary dark:text-primary-light' : 'text-gray-400 dark:text-white'} transition-colors duration-200`}
 					onClick={() => handleNavigate(item.path)}
 					title={item.label}
 				>
@@ -41,7 +41,7 @@ const BottomNav = ({ isOpen, toggle }) => {
 			))}
 			<button
 				key={t("common.navItemProfile")}
-				className={`cursor-pointer flex flex-col items-center w-[20%] ${(isOpen) ? 'text-primary' : 'text-gray-400'} transition-colors duration-200`}
+				className={`cursor-pointer flex flex-col items-center w-[20%] ${(isOpen) ? 'text-primary dark:text-primary-light' : 'text-gray-400 dark:text-white'} transition-colors duration-200`}
 				onClick={toggle}
 				title={t("common.navItemProfile")}
 			>

diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -51,7 +51,7 @@ const Layout = ({ children, isPermissionGranted, tokenSentInSession }) => {
 
 			{/* Header */}
 			<header
-				className={`${isOpen ? 'hidden' : 'z-50 fixed top-0 left-0 w-full bg-primary text-white flex items-center justify-between p-4 shadow-md sm:hidden rounded-b-lg'}`}
+				className={`${isOpen ? 'hidden' : 'z-50 fixed top-0 left-0 w-full bg-primary bg-gray-800 text-white flex items-center justify-between p-4 shadow-md sm:hidden rounded-b-lg'}`}
 			>
 				<div className="flex items-center">
 					<button className='mr-2' onClick={() => handleNavigate('/')}>
@@ -74,7 +74,7 @@ const Layout = ({ children, isPermissionGranted, tokenSentInSession }) => {
 
 			<div className={`w-3/5 ${isOpen ? "hidden md:flex" : "flex"} flex-col flex-grow `}>
 				{/* Content */}
-				<div className="flex-grow bg-gray-100 p-6 mt-10 pt-10 sm:mt-0 sm:pt-6 max480:pb-20 overflow-y-auto">
+				<div className="flex-grow bg-gray-100 dark:bg-gray-900 p-6 mt-10 pt-10 sm:mt-0 sm:pt-6 max480:pb-20 overflow-y-auto">
 					{/* Conditional Notification Message */}
 					{(!isPermissionGranted && isMessageNoGrantedVisible === false) || (isPermissionGranted && !tokenSentInSession && isMessageGrantedVisible === false) ? (
 						<div className="bg-orange-100 shadow-lg p-4 rounded-lg mb-4 flex items-center">

diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
@@ -54,8 +54,8 @@ const Sidebar = ({ isOpen, toggle }) => {
 	return (
 		<div
 			className={`${isOpen
-				? 'w-full flex flex-col justify-between fixed h-screen z-30 bg-primary text-white p-4 max480:pb-20 overflow-y-auto'
-				: 'hidden sm:flex sm:flex-col justify-between	 sticky top-0 bg-primary w-auto text-white h-screen py-10 px-10 overflow-y-auto'
+				? 'w-full flex flex-col justify-between fixed h-screen z-30 bg-primary dark:bg-gray-800 text-white p-4 max480:pb-20 overflow-y-auto'
+				: 'hidden sm:flex sm:flex-col justify-between	 sticky top-0 bg-primary dark:bg-gray-800 w-auto text-white h-screen py-10 px-10 overflow-y-auto'
 
 				}`}
 		>
@@ -153,7 +153,7 @@ const Sidebar = ({ isOpen, toggle }) => {
 			</div>
 
 			{/* Powered By */}
-			<div className="bg-primary text-white text-sm space-x-2 p-2">
+			<div className="text-white text-sm space-x-2 p-2">
 				<Trans
 					i18nKey="sidebar.poweredBy"
 					components={{

diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
@@ -104,11 +104,11 @@ const Home = () => {
 		<>
 			<div className="sm:px-6 w-full">
 				<div className="flex justify-between items-center">
-					<h1 className="text-2xl font-bold text-primary">{t('common.navItemCredentials')}</h1>
+					<h1 className="text-2xl font-bold text-primary dark:text-white">{t('common.navItemCredentials')}</h1>
 					<QRButton openQRScanner={openQRScanner} isSmallScreen={isSmallScreen} />
 				</div>
-				<hr className="mb-2 border-t border-primary/80" />
-				<p className="italic pd-2 text-gray-700">{t('pageCredentials.description')}</p>
+				<hr className="mb-2 border-t border-primary/80 dark:border-primary-light/80"/>
+				<p className="italic pd-2 text-gray-700 dark:text-gray-300">{t('pageCredentials.description')}</p>
 				<div className='my-4'>
 					{isSmallScreen ? (
 						<>

diff --git a/src/pages/Login/Login.js b/src/pages/Login/Login.js
@@ -59,7 +59,7 @@ const FormInputField = ({
 	return (
 		<div className="relative">
 			<input
-				className="border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-gray-700 dark:bg-transparent dark:text-white w-full py-1.5 pl-10 pr-3"
+				className="border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-gray-700 dark:bg-gray-700 dark:text-white w-full py-1.5 pl-10 pr-3"
 				type={show ? 'text' : type}
 				name={name}
 				placeholder={placeholder}
@@ -639,7 +639,7 @@ const Login = () => {
 								</p>
 							</CheckBrowserSupport.If>
 						</CheckBrowserSupport.Ctx>
-						<div className="p-6 space-y-4 md:space-y-6 sm:p-8 bg-white rounded-lg shadow dark:bg-gray-700">
+						<div className="p-6 space-y-4 md:space-y-6 sm:p-8 bg-white rounded-lg shadow dark:bg-gray-800">
 							<CheckBrowserSupport.WarningPortal>
 								<h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl text-center dark:text-white">
 									{isLogin ? t('loginSignup.login') : t('loginSignup.signUp')}