Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multilingual bidirectional styling #37

Open
wants to merge 36 commits into
base: dev-main
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
94d1302
Merge pull request #30 from creativetimofficial/dev-main
sajadevo Nov 2, 2022
2f40bf1
add nepcha script
sajadevo Mar 29, 2023
22ffe2f
Merge pull request #31 from creativetimofficial/feature/v2.0.1
sajadevo Mar 29, 2023
fbe30e0
Update README.md
sajadevo Apr 25, 2023
c082d2c
Update index.html
sajadevo Apr 25, 2023
5b32cf9
upgrade to Material Tailwind v2
maisamaf Oct 25, 2023
323c2dd
fix: implement upgrade changes
maisamaf Oct 25, 2023
5c1edc5
ref: update colors
maisamaf Nov 5, 2023
de3e0b9
fix the issues
sajadevo Nov 5, 2023
985af21
fix design issues
maisamaf Nov 7, 2023
32c0fd7
ref: add border to components
maisamaf Nov 7, 2023
2aadbbf
ref: signin & signup pages
maisamaf Nov 13, 2023
6e33c38
update the design
sajadevo Nov 14, 2023
879fd18
ready for release
sajadevo Nov 14, 2023
b28a39a
update change log
sajadevo Nov 14, 2023
9fdc896
Merge pull request #36 from maisamaf/feature/v3
sajadevo Nov 14, 2023
572ba93
language theme provider added
Dec 10, 2023
7f399c0
fix a bug in labguage context provider
Dec 10, 2023
f67ada2
change sidebar translate-x based on html dir attribute
Dec 10, 2023
1cb6ecc
dashboard layout fixed to comply with document changing direction
Dec 10, 2023
02ed33b
fix default select option
Dec 10, 2023
5512a93
fix XMarkIcon position based on language direction
Dec 10, 2023
0a0c0ec
theme language provider refactored to be more reusable and deveopler …
Dec 10, 2023
92418eb
fix a typo
Dec 10, 2023
79ef7a5
routes object changed to support multilingual configuration
Dec 10, 2023
7ea3b0d
statistics cards text direction adjusted for mutilingual setup
Dec 11, 2023
e7a565f
Home page translated to persian
Dec 11, 2023
f399d33
a minor fix the body layout for rtl languages
Dec 11, 2023
b305e03
Suspense added for the main app component as changing lang takes time
Dec 11, 2023
57fb0ff
structure of layoutData changed
Dec 11, 2023
ad4eb93
modified to access layoutData properties due to data structral changes
Dec 11, 2023
bee45bb
Profile page multilingual setup done
Dec 11, 2023
aa053b3
yables page multilingual setup done
Dec 11, 2023
a9a9438
initial push of multilingual and birdirectional support for MaterialT…
Dec 11, 2023
b740802
README.md file updated
Dec 11, 2023
d68bf80
modified readme file to show new changes
Dec 15, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
ref: signin & signup pages
maisamaf committed Nov 13, 2023
commit 2aadbbfd4d0f41a8382fe787dbf3cd0e857133a0
Binary file added public/img/pattern.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions public/img/twitter-logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 0 additions & 6 deletions src/layouts/auth.jsx
Original file line number Diff line number Diff line change
@@ -34,9 +34,6 @@ export function Auth() {

return (
<div className="relative min-h-screen w-full">
<div className="container relative z-40 mx-auto p-4">
<Navbar routes={navbarRoutes} />
</div>
<Routes>
{routes.map(
({ layout, pages }) =>
@@ -46,9 +43,6 @@ export function Auth() {
))
)}
</Routes>
<div className="container absolute bottom-8 left-2/4 z-10 mx-auto -translate-x-2/4 text-white">
<Footer />
</div>
</div>
);
}
145 changes: 104 additions & 41 deletions src/pages/auth/sign-in.jsx
Original file line number Diff line number Diff line change
@@ -1,62 +1,125 @@
import { Link } from "react-router-dom";
import {
Card,
CardHeader,
CardBody,
CardFooter,
Input,
Checkbox,
Button,
Typography,
} from "@material-tailwind/react";
import { Link } from "react-router-dom";


export function SignIn() {
return (
<>
<img
src="https://images.unsplash.com/photo-1497294815431-9365093b7331?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80"
className="absolute inset-0 z-0 h-full w-full object-cover"
/>
<div className="absolute inset-0 z-0 h-full w-full bg-black/50" />
<div className="container mx-auto p-4">
<Card className="absolute top-2/4 left-2/4 w-full max-w-[24rem] -translate-y-2/4 -translate-x-2/4">
<CardHeader
variant="gradient"
color="gray"
className="mb-4 grid h-28 place-items-center"
>
<Typography variant="h3" color="white">
Sign In
<section className="m-8 flex gap-4">
<div className="w-full lg:w-3/5 mt-24">
<div className="text-center">
<Typography variant="h2" className="font-bold mb-4">Sign In</Typography>
<Typography variant="paragraph" color="blue-gray" className="text-lg font-normal">Enter your email and password to Sign In.</Typography>
</div>
<form className="mt-8 mb-2 mx-auto w-80 max-w-screen-lg lg:w-1/2">
<div className="mb-1 flex flex-col gap-6">
<Typography variant="small" color="blue-gray" className="-mb-3 font-medium">
Your email
</Typography>
</CardHeader>
<CardBody className="flex flex-col gap-4">
<Input type="email" label="Email" size="lg" />
<Input type="password" label="Password" size="lg" />
<div className="-ml-2.5">
<Checkbox label="Remember Me" />
</div>
</CardBody>
<CardFooter className="pt-0">
<Button variant="gradient" fullWidth>
Sign In
</Button>
<Typography variant="small" className="mt-6 flex justify-center">
Don't have an account?
<Link to="/auth/sign-up">
<Input
size="lg"
placeholder="name@mail.com"
className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
labelProps={{
className: "before:content-none after:content-none",
}}
/>
<Typography variant="small" color="blue-gray" className="-mb-3 font-medium">
Password
</Typography>
<Input
type="password"
size="lg"
placeholder="********"
className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
labelProps={{
className: "before:content-none after:content-none",
}}
/>
</div>
<Checkbox
label={
<Typography
variant="small"
color="gray"
className="flex items-center justify-start font-medium"
>
I agree the&nbsp;
<a
href="#"
className="font-normal text-black transition-colors hover:text-gray-900 underline"
>
Terms and Conditions
</a>
</Typography>
}
containerProps={{ className: "-ml-2.5" }}
/>
<Button className="mt-6" fullWidth>
Sign In
</Button>

<div className="flex items-center justify-between gap-2 mt-6">
<Checkbox
label={
<Typography
as="span"
variant="small"
color="gray"
className="ml-1 font-bold"
className="flex items-center justify-start font-medium"
>
Sign up
Subscribe me to newsletter
</Typography>
</Link>
}
containerProps={{ className: "-ml-2.5" }}
/>
<Typography variant="small" className="font-medium text-gray-900">
<a href="#">
Forgot Password
</a>
</Typography>
</CardFooter>
</Card>
</div>
<div className="space-y-4 mt-8">
<Button size="lg" color="white" className="flex items-center gap-2 justify-center shadow-md" fullWidth>
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_1156_824)">
<path d="M16.3442 8.18429C16.3442 7.64047 16.3001 7.09371 16.206 6.55872H8.66016V9.63937H12.9813C12.802 10.6329 12.2258 11.5119 11.3822 12.0704V14.0693H13.9602C15.4741 12.6759 16.3442 10.6182 16.3442 8.18429Z" fill="#4285F4" />
<path d="M8.65974 16.0006C10.8174 16.0006 12.637 15.2922 13.9627 14.0693L11.3847 12.0704C10.6675 12.5584 9.7415 12.8347 8.66268 12.8347C6.5756 12.8347 4.80598 11.4266 4.17104 9.53357H1.51074V11.5942C2.86882 14.2956 5.63494 16.0006 8.65974 16.0006Z" fill="#34A853" />
<path d="M4.16852 9.53356C3.83341 8.53999 3.83341 7.46411 4.16852 6.47054V4.40991H1.51116C0.376489 6.67043 0.376489 9.33367 1.51116 11.5942L4.16852 9.53356Z" fill="#FBBC04" />
<path d="M8.65974 3.16644C9.80029 3.1488 10.9026 3.57798 11.7286 4.36578L14.0127 2.08174C12.5664 0.72367 10.6469 -0.0229773 8.65974 0.000539111C5.63494 0.000539111 2.86882 1.70548 1.51074 4.40987L4.1681 6.4705C4.8001 4.57449 6.57266 3.16644 8.65974 3.16644Z" fill="#EA4335" />
</g>
<defs>
<clipPath id="clip0_1156_824">
<rect width="16" height="16" fill="white" transform="translate(0.5)" />
</clipPath>
</defs>
</svg>
<span>Sign in With Google</span>
</Button>
<Button size="lg" color="white" className="flex items-center gap-2 justify-center shadow-md" fullWidth>
<img src="/img/twitter-logo.svg" height={24} width={24} alt="" />
<span>Sign in With Twitter</span>
</Button>
</div>
<Typography variant="paragraph" className="text-center text-blue-gray-500 font-medium mt-4">
Not registered?
<Link to="/auth/sign-up" className="text-gray-900 ml-1">Create account</Link>
</Typography>
</form>

</div>
<div className="w-2/5 h-full hidden lg:block">
<img
src="/img/pattern.png"
className="h-full w-full object-cover rounded-3xl"
/>
</div>
</>

</section>
);
}

124 changes: 77 additions & 47 deletions src/pages/auth/sign-up.jsx
Original file line number Diff line number Diff line change
@@ -1,63 +1,93 @@
import { Link } from "react-router-dom";
import {
Card,
CardHeader,
CardBody,
CardFooter,
Input,
Checkbox,
Button,
Typography,
} from "@material-tailwind/react";
import { Link } from "react-router-dom";


export function SignUp() {
return (
<>
<img
src="https://images.unsplash.com/photo-1497294815431-9365093b7331?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80"
className="absolute inset-0 z-0 h-full w-full object-cover"
/>
<div className="absolute inset-0 z-0 h-full w-full bg-black/50" />
<div className="container mx-auto p-4">
<Card className="absolute top-2/4 left-2/4 w-full max-w-[24rem] -translate-y-2/4 -translate-x-2/4">
<CardHeader
variant="gradient"
color="gray"
className="mb-4 grid h-28 place-items-center"
>
<Typography variant="h3" color="white">
Sign Up
<section className="m-8 flex">
<div className="w-2/5 h-full hidden lg:block">
<img
src="/img/pattern.png"
className="h-full w-full object-cover rounded-3xl"
/>
</div>
<div className="w-full lg:w-3/5 flex flex-col items-center justify-center">
<div className="text-center">
<Typography variant="h2" className="font-bold mb-4">Join Us Today</Typography>
<Typography variant="paragraph" color="blue-gray" className="text-lg font-normal">Enter your email and password to register.</Typography>
</div>
<form className="mt-8 mb-2 mx-auto w-80 max-w-screen-lg lg:w-1/2">
<div className="mb-1 flex flex-col gap-6">
<Typography variant="small" color="blue-gray" className="-mb-3 font-medium">
Your email
</Typography>
</CardHeader>
<CardBody className="flex flex-col gap-4">
<Input label="Name" size="lg" />
<Input type="email" label="Email" size="lg" />
<Input type="password" label="Password" size="lg" />
<div className="-ml-2.5">
<Checkbox label="I agree the Terms and Conditions" />
</div>
</CardBody>
<CardFooter className="pt-0">
<Button variant="gradient" fullWidth>
Sign Up
</Button>
<Typography variant="small" className="mt-6 flex justify-center">
Already have an account?
<Link to="/auth/sign-in">
<Typography
as="span"
variant="small"
color="gray"
className="ml-1 font-bold"
<Input
size="lg"
placeholder="name@mail.com"
className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
labelProps={{
className: "before:content-none after:content-none",
}}
/>
</div>
<Checkbox
label={
<Typography
variant="small"
color="gray"
className="flex items-center justify-start font-medium"
>
I agree the&nbsp;
<a
href="#"
className="font-normal text-black transition-colors hover:text-gray-900 underline"
>
Sign in
</Typography>
</Link>
</Typography>
</CardFooter>
</Card>
Terms and Conditions
</a>
</Typography>
}
containerProps={{ className: "-ml-2.5" }}
/>
<Button className="mt-6" fullWidth>
Register Now
</Button>

<div className="space-y-4 mt-8">
<Button size="lg" color="white" className="flex items-center gap-2 justify-center shadow-md" fullWidth>
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_1156_824)">
<path d="M16.3442 8.18429C16.3442 7.64047 16.3001 7.09371 16.206 6.55872H8.66016V9.63937H12.9813C12.802 10.6329 12.2258 11.5119 11.3822 12.0704V14.0693H13.9602C15.4741 12.6759 16.3442 10.6182 16.3442 8.18429Z" fill="#4285F4" />
<path d="M8.65974 16.0006C10.8174 16.0006 12.637 15.2922 13.9627 14.0693L11.3847 12.0704C10.6675 12.5584 9.7415 12.8347 8.66268 12.8347C6.5756 12.8347 4.80598 11.4266 4.17104 9.53357H1.51074V11.5942C2.86882 14.2956 5.63494 16.0006 8.65974 16.0006Z" fill="#34A853" />
<path d="M4.16852 9.53356C3.83341 8.53999 3.83341 7.46411 4.16852 6.47054V4.40991H1.51116C0.376489 6.67043 0.376489 9.33367 1.51116 11.5942L4.16852 9.53356Z" fill="#FBBC04" />
<path d="M8.65974 3.16644C9.80029 3.1488 10.9026 3.57798 11.7286 4.36578L14.0127 2.08174C12.5664 0.72367 10.6469 -0.0229773 8.65974 0.000539111C5.63494 0.000539111 2.86882 1.70548 1.51074 4.40987L4.1681 6.4705C4.8001 4.57449 6.57266 3.16644 8.65974 3.16644Z" fill="#EA4335" />
</g>
<defs>
<clipPath id="clip0_1156_824">
<rect width="16" height="16" fill="white" transform="translate(0.5)" />
</clipPath>
</defs>
</svg>
<span>Sign in With Google</span>
</Button>
<Button size="lg" color="white" className="flex items-center gap-2 justify-center shadow-md" fullWidth>
<img src="/img/twitter-logo.svg" height={24} width={24} alt="" />
<span>Sign in With Twitter</span>
</Button>
</div>
<Typography variant="paragraph" className="text-center text-blue-gray-500 font-medium mt-4">
Already have an account?
<Link to="/auth/sign-in" className="text-gray-900 ml-1">Sign in</Link>
</Typography>
</form>

</div>
</>
</section>
);
}