diff --git a/src/index.tsx b/src/index.tsx index 643ef176..29649aee 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -5,7 +5,6 @@ import { Provider } from 'react-redux'; import { store } from './store/store'; import App from './App'; import { ToastContainer } from'react-toastify'; -import 'react-toastify/dist/ReactToastify.css'; const root = createRoot(document.getElementById("root")!); root.render( diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx index c93151a9..3c203b3b 100644 --- a/src/pages/LandingPage.tsx +++ b/src/pages/LandingPage.tsx @@ -4,7 +4,6 @@ import { useAppDispatch, useAppSelector } from '../store/store'; import { IWelcomeMessage } from '../utils/types/store'; import { loadWelcomeMessage } from '../store/features/welcomeSlice'; import { fetchProducts } from '../store/features/product/productSlice'; -import Header from "../components/layout/Header"; import Footer from "../components/layout/Footer"; import Product from '../components/product/Product'; import Sample from '../components/layout/Sample'; @@ -16,7 +15,6 @@ const LandingPage: React.FC = () => { const dispatch = useAppDispatch(); const { products, isError, isSuccess, isLoading, message } = useAppSelector((state: any) => state.products); - console.log(localStorage.getItem('token')) console.log(localStorage.getItem('token')) const welcomeMessage: IWelcomeMessage = useAppSelector((state) => state.initialMessage.welcomeMessage); useEffect(() => { @@ -25,7 +23,6 @@ const LandingPage: React.FC = () => { return ( <> -
{isLoading ? ( diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx index b99441ea..a91caa58 100644 --- a/src/pages/SignUp.tsx +++ b/src/pages/SignUp.tsx @@ -11,6 +11,7 @@ import { useAppDispatch, useAppSelector } from '../store/store'; import { googleAuth, registerUser } from '../store/features/auth/authSlice'; import { CircleLoader } from 'react-spinners'; import SignUpIcon from '../../public/images/sign-up.png' +import "../styles/signup.scss" const SignUpSchema = Yup.object().shape({ email: Yup.string().email('Email must be valid').required('Email is required'), password: Yup.string().required('Password is required'), @@ -75,7 +76,7 @@ export const SignUp = () => {

- login-icon + Signup-icon
@@ -137,4 +138,3 @@ export const SignUp = () => { ) } - diff --git a/src/styles/LandingPage.scss b/src/styles/LandingPage.scss index d91816f8..a93ee750 100644 --- a/src/styles/LandingPage.scss +++ b/src/styles/LandingPage.scss @@ -1,4 +1,5 @@ @import "./Colors"; +@import "color"; .landing-container { padding: 3rem 2rem 4rem 5rem; diff --git a/src/styles/signup.scss b/src/styles/signup.scss index 05fade28..0c6391bc 100644 --- a/src/styles/signup.scss +++ b/src/styles/signup.scss @@ -1,232 +1,234 @@ +@import "./color.scss"; + .wrapper { - background-color: $container-color; - padding: 3rem 0; + background-color: $container-color; + padding: 3rem 0; + display: flex; + justify-content: center; + + .container { + max-width: 1280px; display: flex; justify-content: center; - - .container { - max-width: 1280px; - display: flex; - justify-content: center; - align-items: center; + align-items: center; + } + + .login-form { + width: 80vw; + display: flex; + justify-content: center; + align-items: center; + } + + form { + display: flex; + gap: 1.5rem; + + .left-side-login { + width: 400px; + height: 500px; + background: $login-bg-color; + border-radius: 40px; + padding: 20px; + + .left-side-text { + display: flex; + flex-direction: column; + gap: 1rem; + justify-content: center; + + h1 { + font-family: $text-family; + font-weight: 700; + font-size: 30px; + font-style: normal; + margin-top: 1.5rem; + margin-bottom: 10px; + color: $white-color; + width: 390px; + } + + p { + color: #FAF8F8; + font-family: $text-family; + font-weight: 700; + font-size: 13px; + width: 270px; + } + + } + + .img{ + margin-bottom: 1.5rem; + img { + width: 320px; + height: 320px; + }} } - - .login-form { - width: 80vw; + + .right-side-login { + width: 500px; + height: 500px; display: flex; - justify-content: center; + flex-direction: column; align-items: center; - } - - form { - display: flex; - gap: 1.5rem; - - .left-side-login { - width: 400px; - height: 500px; - background: $login-bg-color; - border-radius: 40px; - padding: 20px; - - .left-side-text { - display: flex; - flex-direction: column; - gap: 1rem; - justify-content: center; - - h1 { - font-family: $text-family; - font-weight: 700; - font-size: 30px; - font-style: normal; - margin-top: 1.5rem; - margin-bottom: 10px; - color: $white-color; - width: 390px; - } - - p { - color: #FAF8F8; - font-family: $text-family; - font-weight: 700; - font-size: 13px; - width: 270px; - } - + position: relative; + top: 2.5rem; + + .right-side-text { + margin-bottom: 1rem; + + p, + h1 { + text-align: center; + font-family: $text-family; + font-weight: bold; + font-size: 32px; + } + + p { + font-size: 13px; + color: $text-color; } - - .img{ - margin-bottom: 1.5rem; - img { - width: 320px; - height: 320px; - }} } - - .right-side-login { - width: 500px; - height: 500px; + + .form-box { display: flex; flex-direction: column; - align-items: center; - position: relative; - top: 2.5rem; - - .right-side-text { - margin-bottom: 1rem; - - p, - h1 { - text-align: center; + gap: 2rem; + + .input-box { + input { + width: 400px; + height: 3.5rem; + border: none; + border: 1px solid #D9D9D9; + border-radius: 20px; + padding-left: 20px; font-family: $text-family; - font-weight: bold; - font-size: 32px; - } - - p { - font-size: 13px; + font-size: large; color: $text-color; + outline: none; } - } - - .form-box { - display: flex; - flex-direction: column; - gap: 2rem; - - .input-box { - input { - width: 400px; - height: 3.5rem; - border: none; - border: 1px solid #D9D9D9; - border-radius: 20px; - padding-left: 20px; - font-family: $text-family; - font-size: large; - color: $text-color; - outline: none; - } - .error{ - color: red; - padding-left:1rem ; - font-family: $text-family; - } - } - .input-box input:focus{ - border: 1px solid $primary-color; - box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); - } - .input-box:nth-child(2) { - position: relative; - - .hide { - position: absolute; - top: 1.1rem; - right: 1.5rem; - opacity: 1; - font-size: 20px; - color: $text-color; - cursor: pointer;; - transition: all 0.3s ease-in-out; - } + .error{ + color: red; + padding-left:1rem ; + font-family: $text-family; } } - - .btn Button,.btn-loading { - background-color: $primary-color; - color: $white-color; - font-family: $text-family; - font-weight: 700; - font-size: 28px; - width: 400px; - height: 3.5rem; - border: none; - border-radius: 20px; - margin-top: 1.5rem; - cursor: pointer; - } - .btn-loading{ - display: flex; - justify-content: center; - align-items: center; - background-color: $white-color; - border: 1px solid $border-color; - } - .btn:hover Button{ - background-color: $white-color; - color: $primary-color; - border: 1px solid $border-color; - background-color: $white-color; + .input-box input:focus{ + border: 1px solid $primary-color; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); - transition: all 0.3s ease-in-out; } - - .line-text { - p { - margin: 1.5rem 0; - text-align: center; - position: relative; - width: 350px; - color: $text-color; - font-size: 18px; - font-weight: bold; - font-family: $text-family; - } - - p::before, - p::after { - content: ""; + .input-box:nth-child(2) { + position: relative; + + .hide { position: absolute; - top: 55%; - width: 100px; - height: 1px; - background-color: $text-color; - } - - P::before { - left: 0; - } - - P::after { - right: 0; - } - } - - .google { - display: flex; - justify-content: center; - align-items: center; - gap: 2rem; - border: none; - border-radius: 20px; - border: 1px solid $border-color; - background-color: $white-color; - width: 400px; - height: 3.5rem; - cursor: pointer; - p { - font-family: $text-family; - font-weight: bold; + top: 1.1rem; + right: 1.5rem; + opacity: 1; font-size: 20px; color: $text-color; - } - - .google-icon { - font-size: 50px; - color: $primary-color; + cursor: pointer;; + transition: all 0.3s ease-in-out; } } - .google:hover{ - background-color: $primary-color; - box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); + } + + .btn Button,.btn-loading { + background-color: $primary-color; + color: $white-color; + font-family: $text-family; + font-weight: 700; + font-size: 28px; + width: 400px; + height: 3.5rem; + border: none; + border-radius: 20px; + margin-top: 1.5rem; + cursor: pointer; + } + .btn-loading{ + display: flex; + justify-content: center; + align-items: center; + background-color: $white-color; + border: 1px solid $border-color; + } + .btn:hover Button{ + background-color: $white-color; + color: $primary-color; + border: 1px solid $border-color; + background-color: $white-color; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); + transition: all 0.3s ease-in-out; + } + + .line-text { + p { + margin: 1.5rem 0; + text-align: center; + position: relative; + width: 350px; + color: $text-color; + font-size: 18px; + font-weight: bold; + font-family: $text-family; + } + + p::before, + p::after { + content: ""; + position: absolute; + top: 55%; + width: 100px; + height: 1px; + background-color: $text-color; + } + + P::before { + left: 0; + } + + P::after { + right: 0; + } + } + + .google { + display: flex; + justify-content: center; + align-items: center; + gap: 2rem; + border: none; + border-radius: 20px; + border: 1px solid $border-color; + background-color: $white-color; + width: 400px; + height: 3.5rem; + cursor: pointer; + p { + font-family: $text-family; + font-weight: bold; + font-size: 20px; + color: $text-color; + } + + .google-icon { + font-size: 50px; + color: $primary-color; + } + } + .google:hover{ + background-color: $primary-color; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); + transition: all 0.3s ease-in-out; + p{ + color: $white-color; transition: all 0.3s ease-in-out; - p{ - color: $white-color; - transition: all 0.3s ease-in-out; - } } } } - } \ No newline at end of file + } +} \ No newline at end of file