From 2c7dfd748f3f6710e77d77112fe47ee1c0d75d78 Mon Sep 17 00:00:00 2001 From: Yunus M Date: Wed, 12 Mar 2025 09:21:38 +0530 Subject: [PATCH] fix: update design for light mode (#7271) --- .../AddDataSource/AddDataSource.tsx | 1 - .../OnboardingV2.styles.scss | 389 +++++++++++++++++- 2 files changed, 387 insertions(+), 3 deletions(-) diff --git a/frontend/src/container/OnboardingV2Container/AddDataSource/AddDataSource.tsx b/frontend/src/container/OnboardingV2Container/AddDataSource/AddDataSource.tsx index 11827df44f..46ea09dda7 100644 --- a/frontend/src/container/OnboardingV2Container/AddDataSource/AddDataSource.tsx +++ b/frontend/src/container/OnboardingV2Container/AddDataSource/AddDataSource.tsx @@ -411,7 +411,6 @@ function OnboardingAddDataSource(): JSX.Element {
{ logEvent( diff --git a/frontend/src/container/OnboardingV2Container/OnboardingV2.styles.scss b/frontend/src/container/OnboardingV2Container/OnboardingV2.styles.scss index d0df0ca601..38a4ed4422 100644 --- a/frontend/src/container/OnboardingV2Container/OnboardingV2.styles.scss +++ b/frontend/src/container/OnboardingV2Container/OnboardingV2.styles.scss @@ -255,7 +255,7 @@ position: absolute; left: -3px; top: 50px; - bottom: -120px; + bottom: -80px; width: 1px; background: linear-gradient( to bottom, @@ -1104,7 +1104,6 @@ .lightMode { .ingestion-setup-details-links { - background: var(--bg-vanilla-100); color: var(--bg-robin-500); .learn-more { @@ -1112,3 +1111,389 @@ } } } + +.onboarding-header-container-close-icon { + color: var(--bg-vanilla-100); +} + +.lightMode { + .setup-flow { + &__header { + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(20px); + + &--sticky { + background: rgba(255, 255, 255, 0.9); + } + } + + &__question-block { + color: var(--text-ink-300); + background-color: var(--bg-vanilla-100); + + &:before { + background-color: var(--bg-vanilla-100); + border: 1px solid var(--bg-vanilla-300); + color: var(--text-ink-300); + } + } + + &__heading { + color: var(--text-ink-300); + } + + &__description { + color: var(--text-ink-300); + } + + &__radio-custom { + background-color: var(--bg-vanilla-100); + color: var(--text-ink-300); + background: var(--bg-vanilla-100); + cursor: pointer; + box-shadow: 0px 4px 4px 0px rgba(255, 255, 255, 0.19); + + &:hover { + background: var(--bg-robin-500); + box-shadow: 0 4px 8px rgba(58, 134, 255, 0.2); + } + + &__text { + color: var(--text-ink-300); + } + + &--selected { + background: var(--bg-robin-500); + border-color: var(--bg-robin-500); + color: var(--text-ink-300); + box-shadow: 0 4px 10px rgba(58, 134, 255, 0.4); + } + + &--animating { + animation: selectPulse 0.6s cubic-bezier(0.19, 1, 0.22, 1); + } + } + + &__category { + width: 100%; + color: var(--text-ink-300); + } + + &__content-container { + display: flex; + } + + &__category-filter { + margin-left: 20px; + } + + &__category-filter-item { + color: var(--text-ink-300); + + &--selected { + color: var(--text-ink-300); + } + } + + @media (max-width: 600px) { + &__description { + color: var(--text-ink-300); + } + } + } + + .question-block { + color: var(--text-ink-300); + background-color: transparent !important; + + &:before { + background-color: var(--bg-robin-100); + border: 1px solid var(--bg-vanilla-300); + color: var(--text-ink-300); + } + + &.answered { + &:before { + background-color: rgba(78, 116, 248); + color: var(--bg-vanilla-100); + } + } + + &:after { + content: ''; + position: absolute; + left: -3px; + top: 50px; + bottom: -80px; + width: 1px; + background: linear-gradient( + to bottom, + var(--bg-robin-400) 0%, + var(--bg-robin-400) 50%, + transparent 50%, + transparent 100% + ); + background-size: 2px 10px; + } + } + + @keyframes selectPulse { + 0% { + background-color: var(--bg-ink-400); + border-color: var(--bg-robin-500); + } + 20% { + background-color: rgba(58, 134, 255, 0.5); + border-color: var(--bg-robin-500); + } + 40% { + background-color: var(--bg-ink-400); + border-color: var(--bg-robin-500); + } + 60% { + background-color: rgba(58, 134, 255, 0.8); + border-color: var(--bg-robin-500); + } + 100% { + background-color: var(--bg-robin-500); + border-color: var(--bg-robin-500); + } + } + + .onboarding-v2 { + .get-help-btn { + border: 1px solid var(--bg-vanilla-300) !important; + color: var(--bg-ink-300) !important; + + &:focus-visible { + outline: none !important; + outline-offset: 0px !important; + } + + &.rounded-btn { + border-radius: 50px; + } + + &:hover { + border: 1px solid var(--bg-vanilla-300) !important; + color: var(--text-robin-500) !important; + } + + &.primary { + background: var(--bg-robin-500); + color: var(--text-vanilla-200) !important; + border: none !important; + + &:hover { + color: var(--text-vanilla-100) !important; + } + } + + &.outlined { + border: none !important; + color: var(--text-vanilla-400) !important; + + &:hover { + color: var(--text-robin-400) !important; + } + } + + &.full-width { + width: 100%; + } + } + } + + .onboarding-title, + .onboarding-filters-title, + .onboarding-filters-item-title { + color: var(--text-ink-400) !important; + + &.selected { + color: var(--bg-robin-500) !important; + } + } + + .onboarding-text { + color: var(--text-ink-400); + } + + .onboarding-data-source-button { + color: var(--text-ink-300); + background: var(--bg-vanilla-300); + box-shadow: 0px 4px 4px 0px rgba(255, 255, 255, 0.19); + + &:hover { + border: 1px solid var(--bg-robin-500) !important; + color: var(--text-robin-500) !important; + background: var(--bg-vanilla-200) !important; + box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2); + } + + &:active { + border: 1px solid var(--bg-robin-500) !important; + color: var(--text-robin-500) !important; + background: var(--bg-vanilla-200) !important; + box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2); + } + + &:focus { + border: 1px solid var(--bg-robin-500) !important; + color: var(--text-robin-500) !important; + box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2); + background: var(--bg-vanilla-200) !important; + } + + &.selected { + border: 1px solid var(--bg-robin-500) !important; + + color: var(--text-robin-500) !important; + box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2); + background: var(--bg-vanilla-200) !important; + } + } + + .questionaire-footer { + background-color: var(--bg-vanilla-100); + } + + .onboarding-configure-product-description { + background-color: var(--bg-vanilla-100); + } + + .onboarding-data-source-search { + margin-top: 12px; + margin-bottom: 24px; + + .ant-input { + background: var(--bg-vanilla-100); + border: 1px solid var(--bg-vanilla-300); + height: 40px; + } + } + + .onboarding-add-data-source-container { + .onboarding-question { + color: var(--text-ink-300); + } + + .question-title { + color: var(--text-ink-300); + } + + .question-sub-title { + color: var(--text-ink-400); + } + } + + .onboarding-product-setup-container { + &_left-section { + .perlian-bg { + background: radial-gradient(circle, var(--text-ink-400) 10%, transparent 0); + background-size: 12px 12px; + opacity: 1; + -webkit-mask-image: radial-gradient( + circle at 50% 0, + rgba(255, 255, 255, 0.1) 0, + rgba(255, 255, 255, 0) 56.77% + ); + } + + .ant-btn-default { + background: var(--bg-vanilla-100); + } + } + + &_right-section { + .invite-user-section-content { + .ant-btn { + background: var(--bg-vanilla-100); + } + + .need-help-section-content-divider { + color: var(--text-ink-400); + } + } + + .need-help-section-content { + background: rgba(255, 255, 255, 0.1); + + .ant-typography { + color: var(--bg-robin-500); + } + } + + .configure-product-ingestion-section-content { + .ingestion-endpoint-section { + background: var(--bg-vanilla-100); + box-shadow: 0px 4px 4px 0px rgba(255, 255, 255, 0.19) inset; + border: 1px solid var(--bg-vanilla-300); + + .ingestion-endpoint-section-header { + background-color: var(--bg-vanilla-100); + } + + .ingestion-endpoint-info-section { + background-color: var(--bg-vanilla-100); + } + + .ingestion-endpoint-section-title { + background-color: var(--bg-vanilla-100); + } + } + + .ingestion-key-details-section { + background: rgba(255, 255, 255, 1); + } + + .ingestion-endpoint-section-error-container { + background: var(--bg-vanilla-100); + } + } + } + } + + .onboarding-data-source-category-container { + .onboarding-data-source-category-item { + .ant-typography { + color: var(--text-ink-400); + } + } + } + + .onboarding-configure-container { + .configure-product-docs-section { + border: 1px solid var(--bg-vanilla-300); + + .loading-container { + .loading-text { + color: var(--text-ink-300); + } + } + } + + .configure-product-ingestion-section { + .configure-product-ingestion-section-content { + background-color: var(--bg-vanilla-100); + } + } + } + + .invite-team-member-modal { + .ant-modal-content { + background-color: var(--bg-vanilla-100); + } + + .ant-modal-title { + background-color: var(--bg-vanilla-100); + } + + .invite-team-member-modal-content { + background-color: var(--bg-vanilla-100); + } + } + + .onboarding-header-container-close-icon { + color: var(--bg-ink-300); + } +}