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

Onboarding fix styling

Browse Source
This commit is contained in:
DwCay
2022-06-01 17:33:20 +03:00
parent 095c5e236e
commit c45b7c5e4d
4 changed files with 25 additions and 17 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>