V200

LoginSignUp/SignIn.jsx

@@ -1,6 +1,9 @@
 import React, { useState } from 'react'
 import { BsMortarboardFill } from "react-icons/bs";
 import { Link } from 'react-router-dom';
+import './styles/app.css'
+import '@jehankandy/jkcss/src/layout/columns/columns.css'
+import '@jehankandy/jkcss/src/buttons/button.css'
 
 const SignIn = () => {
     // for login data
@@ -17,41 +20,41 @@ const SignIn = () => {
         // this will be updated in future versions
     }
   return (
-    <div className='bg-gray-200 min-h-screen py-24 px-8'>
-        <div className="md:grid grid-cols-3 gap-2">
-            <div className=""></div>
-            <div className="">
-                <div className="bg-white py-16 px-8 rounded shadow-md w-full ">
-                    <center className='text-gray-500'>
+    <div className='app-body'>
+        <div className="line">
+            <div className="rec-4"></div>
+            <div className="rec-4">
+                <div className="form-bg">
+                    <center className='' style={{ color: 'rgb(107 114 128)' }}>
                         {/* change the Icon According to your needs */}
-                        <h1 className=''><BsMortarboardFill className='h-20 w-auto'/></h1>
-                        <p className="pt-4 text-2xl">Welcome Back</p>
+                        <h1 className=''><BsMortarboardFill className='logo'/></h1>
+                        <p className="" style={{ paddingTop: '16px', fontSize: '24px', lineHeight: '32px' }}>Welcome Back</p>
                         <p className="">Your Project Name</p>
                     </center>
-                    <hr className='my-2'/>
-                    <div className="my-4">
+                    <hr className='' style={{ marginTop: '8px', marginBottom: '8px' }}/>
+                    <div className="" style={{ marginTop: '16px', marginBottom: '16px' }}>
                         <form onSubmit={headleSubmit}>
-                            <div className="my-2 md:mx-8">
+                            <div className="input-area">
                                 <label htmlFor="" className=''>Email : </label>
-                                <input type="email" name="" id="" className="w-full h-12 pl-2 rounded bg-gray-200" required placeholder='Enter Email Address'
+                                <input type="email" name="" id="" className="feild-input" required placeholder='Enter Email Address'
                                 onChange={e => SetLoginData({...LoginData, email:e.target.value})}/>
                             </div>
-                            <div className="my-2 md:mx-8">
+                            <div className="input-area">
                                 <label htmlFor="" className=''>Password : </label>
-                                <input type="password" name="" id="" className="w-full h-12 pl-2 rounded bg-gray-200" required placeholder='Enter Password' 
+                                <input type="password" name="" id="" className="feild-input" required placeholder='Enter Password' 
                                 onChange={e => SetLoginData({...LoginData, password:e.target.value})}/>
                             </div>
-                            <div className="my-2 md:mx-8">
-                                <button type='submit' className='mt-8 font-semibold w-full py-4 px-8 rounded bg-blue-500 text-white shadow-md duration-500 hover:bg-blue-600'>SignIn</button>
+                            <div className="input-area">
+                                <button type='submit' className='jkbtn jkbtn-blue' style={{ width: '100%', marginTop: '2rem' }}>SignIn</button>
                             </div>
                         </form>
-                        <Link><p className="my-2 md:mx-8 text-blue-500 font-semibold">Forget Password ? </p></Link>
+                        <Link><p className="link-text">Forget Password ? </p></Link>
                     </div>
-                    <hr className='my-2'/>
-                    <p className="my-4">Don't have an Account ? <Link to={'/SignUp'}><span className="text-blue-500">SignUp</span></Link></p>
+                    <hr className='' style={{ marginTop: '8px', marginBottom: '8px' }}/>
+                    <p className="" style={{ marginTop: '16px', marginBottom: '16px' }}>Don't have an Account ? <Link to={'/SignUp'}><span className="" style={{ color: 'rgb(59 130 246)' }}>SignUp</span></Link></p>
                 </div>  
             </div>
-            <div className=""></div>
+            <div className="rec-4"></div>
         </div>
     </div>
   )

LoginSignUp/SignUp.jsx

@@ -18,45 +18,45 @@ const SignUp = () => {
         // this will be updated in future versions
     }
   return (
-    <div className='bg-gray-200 min-h-screen py-24 px-8'>
-        <div className="md:grid grid-cols-3 gap-2">
-            <div className=""></div>
-            <div className="">
-                <div className="bg-white py-16 px-8 rounded shadow-md w-full ">
-                    <center className='text-gray-500'>
+    <div className='app-body'>
+        <div className="line">
+            <div className="rec-4"></div>
+            <div className="rec-4">
+                <div className="form-bg">
+                    <center className='' style={{ color: 'rgb(107 114 128)' }}>
                         {/* change the Icon According to your needs */}
-                        <h1 className=''><BsMortarboardFill className='h-20 w-auto'/></h1>
-                        <p className="pt-4 text-2xl">Welcome to</p>
+                        <h1 className=''><BsMortarboardFill className='logo'/></h1>
+                        <p className="" style={{ paddingTop: '16px', fontSize: '24px', lineHeight: '32px' }}>Welcome to</p>
                         <p className="">Your Project Name</p>
                     </center>
-                    <hr className='my-2'/>
-                    <div className="my-4">
+                    <hr className='' style={{ marginTop: '8px', marginBottom: '8px' }}/>
+                    <div className="" style={{ marginTop: '16px', marginBottom: '16px' }}>
                         <form onSubmit={headleSubmit}>
-                             <div className="my-2 md:mx-8">
+                             <div className="input-area">
                                 <label htmlFor="" className=''>Username : </label>
-                                <input type="text" name="" id="" className="w-full h-12 pl-2 rounded bg-gray-200" required placeholder='Enter Username'
+                                <input type="text" name="" id="" className="feild-input" required placeholder='Enter Username'
                                 onChange={e => SetSignUpData({...SignUpData, username:e.target.value})}/>
                             </div>
-                            <div className="my-2 md:mx-8">
+                            <div className="input-area">
                                 <label htmlFor="" className=''>Email : </label>
-                                <input type="email" name="" id="" className="w-full h-12 pl-2 rounded bg-gray-200" required placeholder='Enter Email Address'
+                                <input type="email" name="" id="" className="feild-input" required placeholder='Enter Email Address'
                                 onChange={e => SetSignUpData({...SignUpData, email:e.target.value})}/>
                             </div>
-                            <div className="my-2 md:mx-8">
+                            <div className="input-area">
                                 <label htmlFor="" className=''>Password : </label>
-                                <input type="password" name="" id="" className="w-full h-12 pl-2 rounded bg-gray-200" required placeholder='Enter Password' 
+                                <input type="password" name="" id="" className="feild-input" required placeholder='Enter Password' 
                                 onChange={e => SetSignUpData({...SignUpData, password:e.target.value})}/>
                             </div>
-                            <div className="my-2 md:mx-8">
-                                <button type='submit' className='mt-8 font-semibold w-full py-4 px-8 rounded bg-blue-500 text-white shadow-md duration-500 hover:bg-blue-600'>Sign Up</button>
+                            <div className="input-area">
+                                <button type='submit' className='jkbtn jkbtn-blue' style={{ width: '100%', marginTop: '2rem' }}>Sign Up</button>
                             </div>
                         </form>
                     </div>
-                    <hr className='my-2'/>
-                    <p className="my-4">Already have an Account ? <Link to={'/'}><span className="text-blue-500">SignUp</span></Link></p>
+                    <hr className='' style={{ marginTop: '8px', marginBottom: '8px' }}/>
+                    <p className="" style={{ marginTop: '16px', marginBottom: '16px' }}>Already have an Account ? <Link to={'/'}><span className="" style={{ color: 'rgb(59 130 246)' }}>SignIn</span></Link></p>
                 </div>  
             </div>
-            <div className=""></div>
+            <div className="rec-4"></div>
         </div>
     </div>
   )

LoginSignUp/styles/app.css

@@ -0,0 +1,48 @@
+.app-body {
+  background: #e5e7eb;
+  min-height: 100vh;
+  padding-top: 6rem;
+  padding-bottom: 6rem;
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.form-bg {
+  background: white;
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+  padding-left: 2rem;
+  padding-right: 2rem;
+  width: 100%;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+}
+
+.logo {
+  height: 5rem;
+  width: auto;
+}
+
+.input-area, .link-text {
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
+.link-text {
+  color: rgb(59, 130, 246);
+  font-weight: 600;
+}
+
+.feild-input {
+  width: 100%;
+  height: 3rem;
+  padding-left: 0.5rem;
+  background: rgb(229, 231, 235);
+  border-radius: 0.25rem;
+}
+
+@media (min-width: 768px) {
+  .input-area, .link-text {
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+}

LoginSignUp/styles/app.scss

@@ -0,0 +1,47 @@
+.app-body{
+    background: #e5e7eb; //#e5e7eb
+    min-height: 100vh;
+    padding-top: 6rem;
+    padding-bottom: 6rem;
+    padding-left: 2rem;
+    padding-right: 2rem;
+}
+.form-bg{
+    background: white;
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+    padding-left: 2rem;
+    padding-right: 2rem;
+    width: 100%;
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+.logo{
+    height: 5rem;
+    width: auto;
+}
+.input-area{
+    margin-top: 8px;
+    margin-bottom: 8px;
+}
+.link-text{
+    @extend .input-area;
+    color: rgb(59 130 246);
+    font-weight: 600;
+}
+
+.feild-input{
+    width: 100%;
+    height: 3rem;
+    padding-left: 0.5rem;
+    background: rgb(229 231 235);
+    border-radius: 0.25rem;
+}
+
+// responcive styles
+
+@media (min-width: 768px) {
+    .input-area{
+        margin-left: 2rem;
+        margin-right: 2rem;
+    }
+}

LoginSignUpTW/SignIn.jsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react'
+import { BsMortarboardFill } from "react-icons/bs";
+import { Link } from 'react-router-dom';
+
+const SignIn = () => {
+    // for login data
+    const [LoginData, SetLoginData] = useState({
+        email: '',
+        password: ''
+    })
+
+    // send data to backend using axios
+    const headleSubmit = (e) => {
+        e.preventDefault();
+
+        // login to system
+        // this will be updated in future versions
+    }
+  return (
+    <div className='bg-gray-200 min-h-screen py-24 px-8'>
+        <div className="md:grid grid-cols-3 gap-2">
+            <div className=""></div>
+            <div className="">
+                <div className="bg-white py-16 px-8 rounded shadow-md w-full ">
+                    <center className='text-gray-500'>
+                        {/* change the Icon According to your needs */}
+                        <h1 className=''><BsMortarboardFill className='h-20 w-auto'/></h1>
+                        <p className="pt-4 text-2xl">Welcome Back</p>
+                        <p className="">Your Project Name</p>
+                    </center>
+                    <hr className='my-2'/>
+                    <div className="my-4">
+                        <form onSubmit={headleSubmit}>
+                            <div className="my-2 md:mx-8">
+                                <label htmlFor="" className=''>Email : </label>
+                                <input type="email" name="" id="" className="w-full h-12 pl-2 rounded bg-gray-200" required placeholder='Enter Email Address'
+                                onChange={e => SetLoginData({...LoginData, email:e.target.value})}/>
+                            </div>
+                            <div className="my-2 md:mx-8">
+                                <label htmlFor="" className=''>Password : </label>
+                                <input type="password" name="" id="" className="w-full h-12 pl-2 rounded bg-gray-200" required placeholder='Enter Password' 
+                                onChange={e => SetLoginData({...LoginData, password:e.target.value})}/>
+                            </div>
+                            <div className="my-2 md:mx-8">
+                                <button type='submit' className='mt-8 font-semibold w-full py-4 px-8 rounded bg-blue-500 text-white shadow-md duration-500 hover:bg-blue-600'>SignIn</button>
+                            </div>
+                        </form>
+                        <Link><p className="my-2 md:mx-8 text-blue-500 font-semibold">Forget Password ? </p></Link>
+                    </div>
+                    <hr className='my-2'/>
+                    <p className="my-4">Don't have an Account ? <Link to={'/SignUp'}><span className="text-blue-500">SignUp</span></Link></p>
+                </div>  
+            </div>
+            <div className=""></div>
+        </div>
+    </div>
+  )
+}
+
+export default SignIn

LoginSignUpTW/SignUp.jsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react'
+import { BsMortarboardFill } from "react-icons/bs";
+import { Link } from 'react-router-dom';
+
+const SignUp = () => {
+     // for login data
+    const [SignUpData, SetSignUpData] = useState({
+        username: '',
+        email: '',
+        password: ''
+    })
+
+    // send data to backend using axios
+    const headleSubmit = (e) => {
+        e.preventDefault();
+
+        // signup to system
+        // this will be updated in future versions
+    }
+  return (
+    <div className='bg-gray-200 min-h-screen py-24 px-8'>
+        <div className="md:grid grid-cols-3 gap-2">
+            <div className=""></div>
+            <div className="">
+                <div className="bg-white py-16 px-8 rounded shadow-md w-full ">
+                    <center className='text-gray-500'>
+                        {/* change the Icon According to your needs */}
+                        <h1 className=''><BsMortarboardFill className='h-20 w-auto'/></h1>
+                        <p className="pt-4 text-2xl">Welcome to</p>
+                        <p className="">Your Project Name</p>
+                    </center>
+                    <hr className='my-2'/>
+                    <div className="my-4">
+                        <form onSubmit={headleSubmit}>
+                             <div className="my-2 md:mx-8">
+                                <label htmlFor="" className=''>Username : </label>
+                                <input type="text" name="" id="" className="w-full h-12 pl-2 rounded bg-gray-200" required placeholder='Enter Username'
+                                onChange={e => SetSignUpData({...SignUpData, username:e.target.value})}/>
+                            </div>
+                            <div className="my-2 md:mx-8">
+                                <label htmlFor="" className=''>Email : </label>
+                                <input type="email" name="" id="" className="w-full h-12 pl-2 rounded bg-gray-200" required placeholder='Enter Email Address'
+                                onChange={e => SetSignUpData({...SignUpData, email:e.target.value})}/>
+                            </div>
+                            <div className="my-2 md:mx-8">
+                                <label htmlFor="" className=''>Password : </label>
+                                <input type="password" name="" id="" className="w-full h-12 pl-2 rounded bg-gray-200" required placeholder='Enter Password' 
+                                onChange={e => SetSignUpData({...SignUpData, password:e.target.value})}/>
+                            </div>
+                            <div className="my-2 md:mx-8">
+                                <button type='submit' className='mt-8 font-semibold w-full py-4 px-8 rounded bg-blue-500 text-white shadow-md duration-500 hover:bg-blue-600'>Sign Up</button>
+                            </div>
+                        </form>
+                    </div>
+                    <hr className='my-2'/>
+                    <p className="my-4">Already have an Account ? <Link to={'/'}><span className="text-blue-500">SignUp</span></Link></p>
+                </div>  
+            </div>
+            <div className=""></div>
+        </div>
+    </div>
+  )
+}
+
+export default SignUp