intro tour background
This commit is contained in:
parent
84bcdded62
commit
11cf4d0542
|
@ -54,21 +54,21 @@ const CustomTooltip = ({
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative w-72 rounded-lg bg-gradient-to-b from-gradient-start via-gradient-mid to-gradient-end p-4">
|
<div className="relative w-72 rounded-lg bg-th-bkg-2 p-4">
|
||||||
{!loading ? (
|
{!loading ? (
|
||||||
<>
|
<>
|
||||||
<button
|
<button
|
||||||
onClick={onClose}
|
onClick={onClose}
|
||||||
className={`absolute right-4 top-4 z-50 text-th-bkg-3 focus:outline-none md:right-2 md:top-2 md:hover:text-th-primary`}
|
className={`absolute right-4 top-4 z-50 text-th-fgd-4 focus:outline-none md:right-2 md:top-2 md:hover:text-th-primary`}
|
||||||
>
|
>
|
||||||
<XMarkIcon className={`h-5 w-5`} />
|
<XMarkIcon className={`h-5 w-5`} />
|
||||||
</button>
|
</button>
|
||||||
<h3 className="text-th-bkg-1">{title}</h3>
|
<h3 className="mb-1 text-base text-th-fgd-1">{title}</h3>
|
||||||
<p className="text-sm text-th-bkg-1">{description}</p>
|
<p className="text-sm text-th-fgd-3">{description}</p>
|
||||||
<div className="mt-4 flex items-center justify-between">
|
<div className="mt-4 flex items-center justify-between">
|
||||||
{stepIndex !== 0 ? (
|
{stepIndex !== 0 ? (
|
||||||
<button
|
<button
|
||||||
className="default-transition h-8 rounded-md border border-th-bkg-1 px-3 font-bold text-th-bkg-1 focus:outline-none md:hover:border-th-bkg-3 md:hover:text-th-bkg-3"
|
className="default-transition h-8 rounded-md border border-th-fgd-4 px-3 font-bold text-th-fgd-3 focus:outline-none md:hover:border-th-fgd-3 md:hover:text-th-fgd-2"
|
||||||
onClick={() => prev()}
|
onClick={() => prev()}
|
||||||
>
|
>
|
||||||
Back
|
Back
|
||||||
|
@ -80,7 +80,7 @@ const CustomTooltip = ({
|
||||||
{allSteps.map((s, i) => (
|
{allSteps.map((s, i) => (
|
||||||
<div
|
<div
|
||||||
className={`h-1 w-1 rounded-full ${
|
className={`h-1 w-1 rounded-full ${
|
||||||
i === stepIndex ? 'bg-th-primary' : 'bg-[rgba(0,0,0,0.2)]'
|
i === stepIndex ? 'bg-th-primary' : 'bg-th-bkg-4'
|
||||||
}`}
|
}`}
|
||||||
key={s.title}
|
key={s.title}
|
||||||
/>
|
/>
|
||||||
|
@ -88,7 +88,7 @@ const CustomTooltip = ({
|
||||||
</div>
|
</div>
|
||||||
{stepIndex !== allSteps.length - 1 ? (
|
{stepIndex !== allSteps.length - 1 ? (
|
||||||
<button
|
<button
|
||||||
className="default-transition h-8 rounded-md bg-th-bkg-1 px-3 font-bold text-th-fgd-1 focus:outline-none md:hover:bg-th-bkg-3"
|
className="default-transition h-8 rounded-md bg-th-button px-3 font-bold text-th-fgd-1 focus:outline-none md:hover:bg-th-button-hover"
|
||||||
onClick={() => next()}
|
onClick={() => next()}
|
||||||
>
|
>
|
||||||
Next
|
Next
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
export const COLORS: any = {
|
export const COLORS: any = {
|
||||||
BKG1: { Mango: '#18181C', Dark: '#17171B', Light: '#FDFDFD' },
|
BKG1: { Mango: '#18181C', Dark: '#17171B', Light: '#FDFDFD' },
|
||||||
|
BKG2: { Mango: '#242132', Dark: '#201F27', Light: '#f0f0f0' },
|
||||||
GREEN: { Mango: '#A6CD03', Dark: '#5EBF4d', Light: '#5EBF4d' },
|
GREEN: { Mango: '#A6CD03', Dark: '#5EBF4d', Light: '#5EBF4d' },
|
||||||
PRIMARY: { Mango: '#F2C94C', Dark: '#F2C94C', Light: '#FF9C24' },
|
PRIMARY: { Mango: '#F2C94C', Dark: '#F2C94C', Light: '#FF9C24' },
|
||||||
RED: { Mango: '#F84638', Dark: '#CC2929', Light: '#CC2929' },
|
RED: { Mango: '#F84638', Dark: '#CC2929', Light: '#CC2929' },
|
||||||
|
|
Loading…
Reference in New Issue