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> </div>
{/* Progress bar */} {/* 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="max-w-md mx-auto w-full">
<div className="relative"> <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> <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="px-4 py-8">
<div className="max-w-md mx-auto"> <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 */}
<form> <form>
<div className="sm:flex space-y-3 sm:space-y-0 sm:space-x-4 mb-8"> <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" /> <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" /> <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> </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 className="text-sm">Lorem ipsum is place text commonly used.</div>
</div> </div>
<div className="absolute inset-0 border-2 border-transparent peer-checked:border-indigo-400 rounded pointer-events-none" aria-hidden="true"></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-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" /> <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> </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 className="text-sm">Lorem ipsum is place text commonly used.</div>
</div> </div>
<div className="absolute inset-0 border-2 border-transparent peer-checked:border-indigo-400 rounded pointer-events-none" aria-hidden="true"></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 className="flex items-center justify-between space-x-6 mb-8">
<div> <div>
<div className="font-medium text-slate-800 text-sm mb-1">💸 Lorem ipsum is place text commonly?</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>
<div className="flex items-center"> <div className="flex items-center">
<div className="form-switch"> <div className="form-switch">
@@ -104,7 +104,9 @@ function Onboarding1() {
</div> </div>
</div> </div>
<div className="flex items-center justify-between"> <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> </div>
</form> </form>

8
src/pages/Onboarding2.jsx
View File

@@ -30,7 +30,7 @@ function Onboarding2() {
</div> </div>
{/* Progress bar */} {/* 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="max-w-md mx-auto w-full">
<div className="relative"> <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> <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>
<div className="px-4 py-8"> <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> <h1 className="text-3xl text-slate-800 font-bold mb-6">Create your Account ✨</h1>
{/* Form */} {/* Form */}
<form> <form>
@@ -86,7 +86,9 @@ function Onboarding2() {
<span className="text-sm ml-2">Email me about product news.</span> <span className="text-sm ml-2">Email me about product news.</span>
</label> </label>
</div> </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> </div>
</form> </form>
{/* Footer */} {/* Footer */}

8
src/pages/Onboarding3.jsx
View File

@@ -58,14 +58,14 @@ function Onboarding3() {
<div className="gap-0.5"> <div className="gap-0.5">
<h1 className="text-3xl text-slate-800 font-bold mb-12">Company information ✨</h1> <h1 className="text-3xl text-slate-800 font-bold mb-12">Company information ✨</h1>
{/* htmlForm */} {/* 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 => ( {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"> <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> <span className="text-sm font-medium">{tag}</span>
</button> </button>
))} ))}
</div> </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"> <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"> <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mb-0.5" viewBox="0 0 16 16">
<path <path
@@ -84,7 +84,9 @@ function Onboarding3() {
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Link className="text-sm underline hover:no-underline" to="/onboarding-2">&lt;- Back</Link> <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>
</div> </div>

12
src/pages/Onboarding4.jsx
View File

@@ -1,4 +1,4 @@
import React, {useEffect} from 'react'; import React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg"; import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
import Logo from "../images/logo.png"; import Logo from "../images/logo.png";
@@ -28,7 +28,7 @@ function Onboarding4() {
</div> </div>
{/* Progress bar */} {/* 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="max-w-md mx-auto w-full">
<div className="relative"> <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> <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" /> <path className="text-emerald-500" d="m28.5 41-8-8 3-3 5 5 12-12 3 3z" />
</svg> </svg>
<h1 className="text-3xl text-slate-800 font-bold mb-8">Nice to meet you, Ivan 🙌</h1> <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="/settings/account">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>
<div className="flex items-center justify-between mt-6"> <div className="flex items-center justify-between">
<div className="mr-1"> <div className="mr-1">
<label className="flex items-center"> <label className="flex items-center">
<input type="checkbox" className="form-checkbox" /> <input type="checkbox" className="form-checkbox" />
@@ -72,7 +74,7 @@ function Onboarding4() {
<label className="flex items-center"> <label className="flex items-center">
<input type="checkbox" className="form-checkbox" /> <input type="checkbox" className="form-checkbox" />
<div className="text-sm ml-2"> <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> </div>
</label> </label>
</div> </div>