ahmed/arduino-parts-inventory
Archived
1
0
Fork 0
Code Activity

Fix dark mode login/signup pages

Browse Source
This commit is contained in:
Ahmed Al-Taiar
2023-11-01 08:35:47 -04:00
parent f5a6b1c37a
commit af93899796
5 changed files with 20 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/components/NavbarAccountIcon/NavbarAccountIcon.tsx
View File

@ -16,19 +16,19 @@ const NavbarAccountIcon = ({ mobile, className }: Props) => {
return isAuthenticated ? (
<div className={className}>
<details
className={`dropdown dropdown-end ${
className={`dropdown-end dropdown ${
mobile ? 'space-y-2' : 'space-y-4'
}`}
>
<summary className="btn btn-ghost swap swap-rotate w-12 hover:shadow-lg">
<Icon path={mdiAccount} className="h-8 w-8 text-gray-500" />
<Icon path={mdiAccount} className="h-8 w-8 text-base-content" />
</summary>
<div className="dropdown-content flex w-auto flex-row items-center space-x-3 rounded-xl bg-base-100 p-3 shadow-lg">
<p className="whitespace-nowrap font-inter text-lg">
Hello, {currentUser.firstName}!
</p>
<button className="btn btn-ghost" type="button" onClick={logOut}>
<Icon path={mdiLogout} className="h-7 w-7 text-gray-600" />
<Icon path={mdiLogout} className="h-7 w-7 text-base-content" />
</button>
</div>
</details>
@ -37,7 +37,7 @@ const NavbarAccountIcon = ({ mobile, className }: Props) => {
<div className={className}>
<Link to={routes.login()}>
<button className="btn btn-ghost" type="button" onClick={logOut}>
<Icon path={mdiLogin} className="h-8 w-8 text-gray-500" />
<Icon path={mdiLogin} className="h-8 w-8 text-base-content" />
</button>
</Link>
</div>

2
web/src/pages/ForgotPasswordPage/ForgotPasswordPage.tsx
View File

@ -62,7 +62,7 @@ const ForgotPasswordPage = () => {
validation={{
required: {
value: true,
message: 'Email is required',
message: 'Required',
},
pattern: {
value: new RegExp(

4
web/src/pages/LoginPage/LoginPage.tsx
View File

@ -107,7 +107,9 @@ const LoginPage = () => {
</div>
</div>
<div className="rw-login-link">
<span className="font-inter">Don&apos;t have an account?</span>{' '}
<span className="font-inter text-base-content">
Don&apos;t have an account?
</span>{' '}
<Link to={routes.signup()} className="rw-link">
Sign up!
</Link>

4
web/src/pages/SignupPage/SignupPage.tsx
View File

@ -140,7 +140,9 @@ const SignupPage = () => {
</div>
</div>
<div className="rw-login-link">
<span className="font-inter">Already have an account?</span>{' '}
<span className="font-inter text-base-content">
Already have an account?
</span>{' '}
<Link to={routes.login()} className="rw-link">
Log in!
</Link>

27
web/src/scaffold.css
View File

@ -24,7 +24,7 @@
@apply m-4;
}
.rw-segment {
@apply w-full overflow-hidden rounded-lg border border-gray-200;
@apply w-full overflow-hidden rounded-lg ;
scrollbar-color: theme('colors.zinc.400') transparent;
}
.rw-segment::-webkit-scrollbar {
@ -37,25 +37,19 @@
@apply rounded-full border-[3px] border-solid border-transparent bg-zinc-400 bg-clip-content;
}
.rw-segment-header {
@apply bg-gray-200 px-4 py-3 text-gray-700;
@apply bg-base-300 px-4 py-3;
}
.rw-segment-main {
@apply bg-gray-100 p-4;
@apply bg-base-200 p-4;
}
.rw-link {
@apply font-inter text-blue-400 underline;
}
.rw-link:hover {
@apply text-blue-500;
@apply font-inter link link-hover text-base-content;
}
.rw-forgot-link {
@apply mt-1 text-right font-inter text-xs text-gray-400 underline;
}
.rw-forgot-link:hover {
@apply text-blue-500;
@apply text-right font-inter text-xs text-base-content link link-hover;
}
.rw-heading {
@apply font-inter font-semibold;
@apply font-inter font-semibold text-base-content;
}
.rw-heading.rw-heading-primary {
@apply text-xl;
@ -110,10 +104,10 @@
@apply text-red-600;
}
.rw-input {
@apply input input-bordered w-full max-w-xs font-inter;
@apply input input-bordered w-full max-w-xs font-inter text-base-content;
}
.rw-textarea {
@apply textarea textarea-bordered font-inter max-w-xs w-full;
@apply textarea textarea-bordered font-inter max-w-xs w-full text-base-content;
}
.rw-check-radio-items {
@apply flex justify-items-center;
@ -125,9 +119,6 @@
.rw-input[type='radio'] {
@apply ml-0 mr-1 mt-1 inline w-4;
}
.rw-input:focus {
@apply border-gray-400;
}
.rw-input-error {
@apply input-error;
}
@ -188,7 +179,7 @@
@apply text-center;
}
.rw-login-container {
@apply mx-auto my-16 flex w-96 flex-wrap items-center justify-center;
@apply mx-auto my-16 flex w-96 flex-wrap items-center justify-center bg-base-100;
}
.rw-login-container .rw-form-wrapper {
@apply w-full text-center;