admin/BlockchainUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #15 from franze6/Onboarding_steps

Browse Source 
Onboarding fix styling
This commit is contained in:
DuCay
2022-06-01 17:36:25 +03:00
committed by GitHub
parent 606223216f fa5ddbf64a
commit 5e74f2bc0b
4 changed files with 24 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/pages/Onboarding1.jsx
View File

@@ -30,7 +30,7 @@ function Onboarding1() {
</div>
{/* Progress bar */}
<div className="px-4 pt-12 pb-8">
<div className="px-4 pt-12 pb-[142px]">
<div className="max-w-md mx-auto w-full">
<div className="relative">
<div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div>
@@ -56,7 +56,7 @@ function Onboarding1() {
<div className="px-4 py-8">
<div className="max-w-md mx-auto">
<h1 className="text-3xl text-slate-800 font-bold mb-6">Tell us about your company ✨</h1>
<h1 className="text-3xl text-slate-800 font-bold mb-12">Tell us about your company ✨</h1>
{/* Form */}
<form>
<div className="sm:flex space-y-3 sm:space-y-0 sm:space-x-4 mb-8">
@@ -67,7 +67,7 @@ function Onboarding1() {
<circle className="text-indigo-100" cx="20" cy="20" r="20" />
<path className="text-indigo-500" d="m26.371 23.749-3.742-1.5a1 1 0 0 1-.629-.926v-.878A3.982 3.982 0 0 0 24 17v-1.828A4.087 4.087 0 0 0 20 11a4.087 4.087 0 0 0-4 4.172V17a3.982 3.982 0 0 0 2 3.445v.878a1 1 0 0 1-.629.928l-3.742 1.5a1 1 0 0 0-.629.926V27a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.323a1 1 0 0 0-.629-.928Z" />
</svg>
<div className="font-medium text-slate-800 mb-1">Individual</div>
<div className="font-semibold text-slate-800 mb-1">Individual</div>
<div className="text-sm">Lorem ipsum is place text commonly used.</div>
</div>
<div className="absolute inset-0 border-2 border-transparent peer-checked:border-indigo-400 rounded pointer-events-none" aria-hidden="true"></div>
@@ -82,7 +82,7 @@ function Onboarding1() {
<path className="text-indigo-300" d="m30.377 22.749-3.709-1.5a1 1 0 0 1-.623-.926v-.878A3.989 3.989 0 0 0 28.027 16v-1.828c.047-2.257-1.728-4.124-3.964-4.172-2.236.048-4.011 1.915-3.964 4.172V16a3.989 3.989 0 0 0 1.982 3.445v.878a1 1 0 0 1-.623.928c-.906.266-1.626.557-2.159.872-.533.315-1.3 1.272-2.299 2.872 1.131.453 6.075-.546 6.072.682V28a2.99 2.99 0 0 1-.182 1h7.119A.996.996 0 0 0 31 28v-4.323a1 1 0 0 0-.623-.928Z" />
<path className="text-indigo-500" d="m22.371 24.749-3.742-1.5a1 1 0 0 1-.629-.926v-.878A3.982 3.982 0 0 0 20 18v-1.828A4.087 4.087 0 0 0 16 12a4.087 4.087 0 0 0-4 4.172V18a3.982 3.982 0 0 0 2 3.445v.878a1 1 0 0 1-.629.928l-3.742 1.5a1 1 0 0 0-.629.926V28a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.323a1 1 0 0 0-.629-.928Z" />
</svg>
<div className="font-medium text-slate-800 mb-1">Organization</div>
<div className="font-semibold text-slate-800 mb-1">Organization</div>
<div className="text-sm">Lorem ipsum is place text commonly used.</div>
</div>
<div className="absolute inset-0 border-2 border-transparent peer-checked:border-indigo-400 rounded pointer-events-none" aria-hidden="true"></div>
@@ -91,7 +91,7 @@ function Onboarding1() {
<div className="flex items-center justify-between space-x-6 mb-8">
<div>
<div className="font-medium text-slate-800 text-sm mb-1">💸 Lorem ipsum is place text commonly?</div>
<div className="text-xs">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.</div>
<div className="text-xs font-normal leading-6">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.</div>
</div>
<div className="flex items-center">
<div className="form-switch">
@@ -104,7 +104,9 @@ function Onboarding1() {
</div>
</div>
<div className="flex items-center justify-between">
<Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-auto" to="/onboarding-2">Next Step -&gt;</Link>
<button className="font-medium btn bg-indigo-500 hover:bg-indigo-600 text-white ml-auto">
<Link to="/onboarding-2">Next Step -&gt;</Link>
</button>
</div>
</form>

8
src/pages/Onboarding2.jsx
View File

@@ -30,7 +30,7 @@ function Onboarding2() {
</div>
{/* Progress bar */}
<div className="px-4 pt-12 pb-8">
<div className="px-4 pt-12 pb-[59px]">
<div className="max-w-md mx-auto w-full">
<div className="relative">
<div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div>
@@ -54,7 +54,7 @@ function Onboarding2() {
</div>
<div className="px-4 py-8">
<div className="max-w-sm mx-auto">
<div className="max-w-[344px] mx-auto">
<h1 className="text-3xl text-slate-800 font-bold mb-6">Create your Account ✨</h1>
{/* Form */}
<form>
@@ -86,7 +86,9 @@ function Onboarding2() {
<span className="text-sm ml-2">Email me about product news.</span>
</label>
</div>
<Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3 whitespace-nowrap" to="/onboarding-3">Sign Up</Link>
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3 whitespace-nowrap">
<Link to="/signup">Sign Up</Link>
</button>
</div>
</form>
{/* Footer */}

8
src/pages/Onboarding3.jsx
View File

@@ -58,14 +58,14 @@ function Onboarding3() {
<div className="gap-0.5">
<h1 className="text-3xl text-slate-800 font-bold mb-12">Company information ✨</h1>
{/* htmlForm */}
<div className="grid grid-cols-4 gap-2.5 mb-14">
<div className="grid grid-cols-4 gap-y-2.5 gap-[18px] mb-14">
{arrayBadges.map(tag => (
<button key={tag} className="min-w-93px w-24 min-h-26px h-26px bg-slate-100 text-slate-500 cursor-pointer hover:bg-blue-100 hover:text-blue-600 rounded-full text-center px-2.5">
<span className="text-sm font-medium">{tag}</span>
</button>
))}
</div>
<div className="flex justify-center gap-x-5">
<div className="flex pl-7 gap-x-5">
<button className="btn pl-9 pr-16 border-slate-200 hover:border-slate-300 text-slate-600">
<svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mb-0.5" viewBox="0 0 16 16">
<path
@@ -84,7 +84,9 @@ function Onboarding3() {
</div>
<div className="flex items-center justify-between">
<Link className="text-sm underline hover:no-underline" to="/onboarding-2">&lt;- Back</Link>
<Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-auto" to="/onboarding-4">Next Step -&gt;</Link>
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-auto">
<Link to="/onboarding-4">Next Step -&gt;</Link>
</button>
</div>
</div>

10
src/pages/Onboarding4.jsx
View File

@@ -28,7 +28,7 @@ function Onboarding4() {
</div>
{/* Progress bar */}
<div className="px-4 pt-12 pb-8">
<div className="px-4 pt-12 pb-[85px]">
<div className="max-w-md mx-auto w-full">
<div className="relative">
<div className="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200" aria-hidden="true"></div>
@@ -60,10 +60,12 @@ function Onboarding4() {
<path className="text-emerald-500" d="m28.5 41-8-8 3-3 5 5 12-12 3 3z" />
</svg>
<h1 className="text-3xl text-slate-800 font-bold mb-8">Nice to meet you, Ivan 🙌</h1>
<Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white" to="/">Go To Profile -&gt;</Link>
<button className="btn px-6 bg-indigo-500 hover:bg-indigo-600 text-white">
<Link to="/settings/account">Go To Profile -&gt;</Link>
</button>
</div>
<div className="flex items-center justify-between mt-6">
<div className="flex items-center justify-between">
<div className="mr-1">
<label className="flex items-center">
<input type="checkbox" className="form-checkbox" />
@@ -72,7 +74,7 @@ function Onboarding4() {
<label className="flex items-center">
<input type="checkbox" className="form-checkbox" />
<div className="text-sm ml-2">
<Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/">I store my pharse</Link> very carefuly
I <Link className="text-indigo-500 hover:text-indigo-600 underline" to="/">store my pharse</Link> very carefuly
</div>
</label>
</div>