client: modify style

BIT-GDSC · Nov 11, 2023 · 7d8e0f2 · 7d8e0f2
1 parent 2b80a4a
commit 7d8e0f2
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 27 deletions.
diff --git a/client/public/logo-crop.png b/client/public/logo-crop.png
diff --git a/client/src/App.css b/client/src/App.css
@@ -136,15 +136,17 @@ a {
  height: 72px;
  justify-content: space-between;
  align-items: center;
- padding: 1rem 1rem;
+ padding: 1rem 2rem;
  background-color: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 1px 5px 2px #00000040;
 }
 
 .Navbar-logo img {
- height: 28px;
- width: 47px;
+ width: 64.6px;
+ height: 60.8px;
+ /* height: 28px;
+ width: 47px; */
 }
 
 .Navbar-menu-toggler {
@@ -270,6 +272,11 @@ a {
  color: #ffffff;
  font-weight: bold;
  white-space: nowrap;
+ transition: 200ms;
+}
+
+.Navbar-signin-button:hover {
+ background-color: var(--body-main-bg);
 }
 
 /* Main content */

diff --git a/client/src/components/Container.jsx b/client/src/components/Container.jsx
@@ -11,7 +11,8 @@ const Container = ({ children }) => {
 
  return (
  <>
- <Toaster richColors duration={5000} position='top-center' />
+ <Toaster className='hidden sm:block' richColors duration={5000} position='top-center' />
+ <Toaster className='block sm:hidden' richColors duration={5000} position='bottom-center' />
  <div className='global-container'>
  {location.pathname !== '/auth' && <Navbar />}
  <div className='w-full h-full fixed -z-10 top-0 left-0 right-0 bg-gradient-to-b from-[#FFBC39] to-[#FFF]' />

diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx
@@ -9,7 +9,7 @@ export const Navbar = () => {
  const { verifyLoading, verifySuccess, user } = useAuthStore()
  const { mobileMenu, setMobileMenu, closeMenu, openMenu, toggleDisable } =
  useAnimStore()
- function handleToggle () {
+ function handleToggle() {
  if (mobileMenu) {
  closeMenu()
  } else {
@@ -21,7 +21,7 @@ export const Navbar = () => {
  <div className='Navbar-container'>
  <div className='Navbar-flex-container'>
  <Link to='/' className='Navbar-logo'>
- <img src='/logo.png' alt='logo' />
+ <img src='/logo-crop.png' alt='logo' />
  </Link>
  <div className='Navbar-links'>
  {navData.map(item => (
@@ -32,21 +32,21 @@ export const Navbar = () => {
  ))}
  </div>
  <div className='Navbar-auth'>
- {!verifyLoading && !verifySuccess ? (
+ {verifyLoading ? (
+ <div className='relative w-[40px] h-[40px] rounded-full overflow-hidden'>
+ <Skeleton className='absolute -top-1 left-0 right-0 bottom-0 w-full h-full' />
+ </div>
+ ) : (!verifyLoading && !verifySuccess) ? (
  <Link to='/auth' className='Navbar-signin-button'>
  Sign in
  </Link>
- ) : !verifyLoading && verifySuccess ? (
+ ) : (!verifyLoading && verifySuccess) && (
  <div className='w-[40px] h-[40px] rounded-full border border-[#3c82f6] bg-white overflow-hidden'>
  <img
  src={user?.avatar?.url ? user.avatar.url : '/user.svg'}
  className='w-full h-full object-contain'
  />
  </div>
- ) : (
- <div className='relative w-[40px] h-[40px] rounded-full overflow-hidden'>
- <Skeleton className='absolute -top-1 left-0 right-0 bottom-0 w-full h-full' />
- </div>
  )}
  {/* Mobile Menu toggler */}
  <button
@@ -58,14 +58,12 @@ export const Navbar = () => {
  className={`Navbar-menu-bar-container ${mobileMenu && 'active'}`}
  >
  <div
- className={`Navbar-menu-toggler-top arrow-bar ${
- mobileMenu && 'active'
- }`}
+ className={`Navbar-menu-toggler-top arrow-bar ${mobileMenu && 'active'
+ }`}
  ></div>
  <div
- className={`Navbar-menu-toggler-bottom ${
- mobileMenu && 'active'
- } arrow-bar`}
+ className={`Navbar-menu-toggler-bottom ${mobileMenu && 'active'
+ } arrow-bar`}
  ></div>
  </div>
  </button>

diff --git a/client/src/pages/Auth.jsx b/client/src/pages/Auth.jsx
@@ -87,7 +87,7 @@ const Auth = () => {
  ?
  </p>
  <button
- className='text-[#103fef] hover:underline'
+ className='text-[#3c82f6] hover:underline'
  onClick={() =>
  setAuthType(
  authType === 'sign-in' ? 'sign-up' : 'sign-in'
@@ -100,7 +100,7 @@ const Auth = () => {
  {authType === 'sign-in' && (
  <button
  type='button'
- className='flex items-center justify-end font-[400] text-[0.8125rem] text-[#103fef] hover:underline'
+ className='flex items-center justify-end font-[400] text-[0.8125rem] text-[#3c82f6] hover:underline'
  onClick={() => setAuthType("forgot-password-email")}
  >
  Forgot Password
@@ -312,7 +312,7 @@ const OTPVerify = () => {
  <div className='flex justify-center'>
  <button
  type='button'
- className='font-[400] text-[0.8125rem] text-[#103fef] hover:underline'
+ className='font-[400] text-[0.8125rem] text-[#3c82f6] hover:underline'
  onClick={handleResendOTP}
  >
  Resend OTP
@@ -501,7 +501,7 @@ const ForgotPasswordEmail = () => {
  <div className='flex justify-center'>
  <button
  type='button'
- className='font-[400] text-[0.8125rem] text-[#103fef] hover:underline'
+ className='font-[400] text-[0.8125rem] text-[#3c82f6] hover:underline'
  onClick={() => setAuthType("sign-in")}
  >
  Back to Login

diff --git a/client/src/store/useAuthStore.js b/client/src/store/useAuthStore.js
@@ -151,16 +151,12 @@ export const useLoginStore = create(() => ({
  userLogin: async (email, password, navigate) => {
  try {
  useAuthStore.getState().setVerifyLoading(true);
- useAuthStore.getState().setVerifySuccess(false);
  const CustomHeader = new Headers();
  CustomHeader.append('Content-Type', 'application/json')
  const config = {
  method: 'POST',
  headers: CustomHeader,
- body: JSON.stringify({
- email,
- password
- })
+ body: JSON.stringify({ email, password })
  }
  await fetch(`/api/login`, config)
  .then(response => response.json())
@@ -173,10 +169,12 @@ export const useLoginStore = create(() => ({
 
  if (result.success === false) {
  toast.error(result.msg, { duration: 7500 });
+ useAuthStore.getState().setVerifyLoading(false);
  }
  })
  }
  catch (error) {
+ useAuthStore.getState().setVerifyLoading(false);
  toast.error("Something went wrong... Try again later!");
  }
  },