From 0d4cb69ec3ff2f86a15bb8a68d51c20559141252 Mon Sep 17 00:00:00 2001 From: Ibrahim Date: Fri, 4 Oct 2024 08:18:20 -0400 Subject: [PATCH] styling --- .../src/components/Onboarding/Onboarding.css | 32 +++++++++++++++---- 1 file changed, 26 insertions(+), 6 deletions(-) diff --git a/platform/ui-next/src/components/Onboarding/Onboarding.css b/platform/ui-next/src/components/Onboarding/Onboarding.css index 7357113a6..634c0a0a7 100644 --- a/platform/ui-next/src/components/Onboarding/Onboarding.css +++ b/platform/ui-next/src/components/Onboarding/Onboarding.css @@ -1,23 +1,43 @@ +.shepherd-header { + @apply !bg-popover !p-0; +} + +.shepherd-title { + @apply text-highlight text-xl; +} + +.shepherd-content { + @apply flex flex-col gap-[8px] p-[12px]; +} + .shepherd-element { - @apply !bg-primary-dark !rounded-lg !p-2; + @apply !bg-popover !min-w-[260px] !max-w-[382px]; } .shepherd-text { - @apply text-[11px] !text-white; + @apply text-foreground p-0 text-base leading-normal; } .shepherd-footer { - @apply !bg-primary-dark !rounded-b-lg; + @apply p-0; } .shepherd-button { - @apply !bg-primary-main hover:!bg-customblue-80 active:!bg-customblue-40 !box-content !inline-flex !h-[15px] !min-w-[60px] !flex-row !items-center !justify-center !gap-[5px] !whitespace-nowrap !rounded !px-[10px] !text-center !font-sans !text-[11px] !font-semibold !leading-[1.2] !text-white !outline-none !transition !duration-300 !ease-in-out focus:!outline-none; + @apply !inline-flex !h-[36px] !min-w-[62px] !flex-row !items-center !justify-center !gap-[5px] !whitespace-nowrap !rounded !bg-[#348cfd] !px-[10px] !text-center !font-sans !text-[14px] !leading-[1.2] !text-white !outline-none !transition !duration-300 !ease-in-out focus:!outline-none; +} + +.shepherd-button.shepherd-button-secondary { + @apply !bg-transparent !text-[#348cfd]; } .shepherd-arrow::before { - @apply !bg-primary-dark; + @apply !bg-popover !h-[30px] !w-[30px]; } .shepherd-element[data-popper-placement^='left'] > .shepherd-arrow { - right: -5px !important; + right: 4px !important; +} + +.shepherd-element[data-popper-placement^='top'] > .shepherd-arrow { + bottom: 2px !important; }