diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss index ccb6f7b949..b3f22776bb 100644 --- a/frontend/src/_styles/theme.scss +++ b/frontend/src/_styles/theme.scss @@ -808,6 +808,7 @@ button { vertical-align: unset; } } + // .menu-ico:hover { // background-color: #d2ddec; // } @@ -1186,9 +1187,11 @@ button { } } } - .menu-ico,.folder-menu-icon{ - svg{ - path{ + + .menu-ico, + .folder-menu-icon { + svg { + path { fill: white !important; } } @@ -4203,7 +4206,7 @@ input[type="text"] { font-weight: 400; font-size: 12px; letter-spacing: 0.5px; - + } .undo-button, @@ -6766,18 +6769,21 @@ tbody { background-color: #1F2936; } } + .app-icon-main { background: #2F3C4C !important; } - .launch-button{ - svg{ - path{ + + .launch-button { + svg { + path { fill: white !important; } } } - .breadcrumb-item{ - a{ + + .breadcrumb-item { + a { color: white !important; } @@ -7162,892 +7168,6 @@ tbody { display: none; } -.tj-text-input, -.onboard-input { - box-sizing: border-box; - display: flex; - flex-direction: row; - align-items: center; - padding: 8px 16px; - gap: 10px; - height: 40px; - background: #FFFFFF; - border: 1px solid #D1D5DB; - border-radius: 4px; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 24px; - display: flex; - align-items: center; - margin-bottom: 12px; - caret-color: #466BF2; - - ::placeholder { - color: #6B7787; - } - - p { - margin-bottom: 0 !important; - font-weight: 400; - font-size: 14px; - line-height: 24px; - color: #000000; - } - - &:hover { - border: 1px solid #D1D5DB; - box-shadow: 0px 0px 0px 4px #E4E7EB; - } - - &:active { - border: 1px solid #466BF2; - box-shadow: none; - } - -} - -.tj-input-helper-text { - font-weight: 400; - font-size: 11px; - line-height: 16px; - color: #6B7787; - margin-top: 2px; -} - -.reset-password-input { - margin-bottom: 0px !important; -} - -.reset-password-input-container { - margin-bottom: 24px !important; -} - -.signup-page-inputs-wrapper, -.org-page-inputs-wrapper { - display: flex; - flex-direction: column; -} - -.signup-terms { - font-weight: 400; - font-size: 14px; - line-height: 24px; - margin: 12px auto auto auto; - color: #1F2937; - line-break: anywhere; - text-align: center; - - span { - color: #466BF2; - } -} - -.signup-password-wrap, -.signin-email-wrap, -.forgot-input-wrap { - margin-bottom: 16px; -} - -.info-screen-wrapper, -.link-expired-info-wrapper { - display: flex; - flex-direction: column; - align-items: center; -} - -.link-expired-info-wrapper { - height: calc(100vh - 64px); - justify-content: center; -} - -.signup-info-card { - width: 352px; - height: 572.69px; - margin: 0px auto 0px auto; - text-align: center; -} - -.link-expired-card { - width: 392px; - height: 482.69px; - text-align: center; -} - -.onboarding-testimonial-img { - width: 52px; - height: 52px; - border-radius: 100%; - background-color: #f5f5f5; - margin-right: 12px; -} - -.onboarding-testimonial-container { - display: flex; - flex-direction: row; - margin-top: 18px; - margin-bottom: 56px; - - p { - margin-bottom: 4px !important; - } -} - -.login-password, -.org-password, -.signup-password-wrapper { - position: relative; - - input { - margin-bottom: 2px !important; - } -} - -.signup-password-hide-img { - position: absolute; - right: 16px; - top: 15%; - width: 20px; - height: 20px; - cursor: pointer; -} - -.login-password-hide-img, -.org-password-hide-img { - position: absolute; - right: 16px; - top: 23%; - width: 20px; - height: 20px; - cursor: pointer; -} - -.onboarding-clients { - display: flex; - flex-direction: row; - margin-left: 0px; - margin-bottom: 54px; - - img { - margin-right: 20px; - } - - .byjus-img { - width: 82.91px; - height: 32.44px; - } - - .sequoia-img { - width: 77.96px; - height: 31.99px; - } - - .orange-img { - height: 32.44px; - left: 128.15px; - } -} - -.testimonial-name { - font-weight: 700; - font-size: 14px; - line-height: 24px; -} - -.testimonial-position { - font-weight: 400; - font-size: 15px; - line-height: 28px; - letter-spacing: 0.002em; - color: #6B7380; -} - -.onboarding-navbar { - height: 64px; - position: sticky; - top: 0; - display: flex; - align-items: center; - - img { - cursor: pointer; - } -} - -.signup-page-signin-redirect { - margin: auto auto 32px auto; - text-align: center; -} - -.invite-sub-header { - margin: auto auto 32px auto; - text-align: center; -} - -.org-invite-header { - margin-left: auto !important; - margin-right: auto !important; - text-align: center; -} - -.reset-password-header { - margin-bottom: 32px !important; -} - -.info-screen-outer-wrap { - margin: 0 auto; - display: flex; - justify-content: center; - align-items: center; -} - -.onboarding-form { - width: 392px; - height: auto; - margin: 44px auto; -} - -.forget-password-info-card { - width: 352px; - height: 520.69px; - text-align: center; -} - -.signup-email-name { - font-weight: 700; -} - -.verification-success-card { - display: flex; - flex-direction: column; - text-align: center; - width: 392px; - height: 482.69px; -} - -.password-reset-card { - width: 352px; - height: 482.69px; - text-align: center; -} - -// verification-navbar styles -.onboarding-navbar-layout { - display: grid; - grid-template-columns: 1fr 3fr 392px 3fr 1fr; - align-items: center; - border-bottom: 1px solid #E4E7EB; - background-color: #fff; - z-index: 1000; -} - -.onboarding-account-name { - font-weight: 400; - font-size: 14px; - line-height: 24px; - text-align: center; - color: #172531; - width: 32px; - height: 33px; - background: #F3F4F6; - border-radius: 4px; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - padding: 8px; - gap: 10px; - text-transform: uppercase; -} - -.onboarding-divider { - height: 2px; - background-color: #D1D5DB; - width: 390px; - position: absolute; - bottom: 0; -} - -.onboarding-checkpoints { - display: flex; - justify-content: space-around; - align-items: center; - - p { - margin-bottom: 0 !important; - height: 20px; - font-weight: 500; - font-size: 12px; - line-height: 20px; - text-align: center; - color: #4B5563; - } - - img { - margin-right: 10.78px; - height: 16px; - width: 16px; - } -} - -.info-screen-spam-msg { - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 24px; - margin-top: 32px; - color: #4B5563; -} - -.tooljet-nav-logo { - text-align: right; -} - -// DESIGN SYSTEM ONBOARD BUTTON START -.tj-btn { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - border-radius: 4px; -} - -.tj-btn-base { - padding: 8px 20px; - height: 40px; - font-size: 14px; - line-height: 24px; - border: none; - font-weight: 600; -} - -.tj-btn-large { - padding: 16px 32px; - height: 56px; - font-size: 14px; - line-height: 24px; - font-weight: 600; - border: none; -} - -.tj-btn-primary { - background: #466BF2; - color: #FFFFFF; - - &:hover { - background: #5F81FF; - box-shadow: 0px 0px 0px 4px #D2DDFF; - } - - &:active { - background: #3756C5; - box-shadow: none; - } - - &:disabled { - background: linear-gradient(0deg, #F3F4F6, #F3F4F6); - box-shadow: none; - color: #D1D5DB; - } -} - -.tj-btn-secondary { - background: #E9EEFF; - color: #466BF2; - - &:hover { - background: #FFFFFF; - box-shadow: 0px 0px 0px 4px #D2DDFF; - color: #3756C5; - } - - &:active { - background: #D2DDFF; - color: #466BF2; - box-shadow: none; - } - - &:disabled { - background: linear-gradient(0deg, #F3F4F6, #F3F4F6); - box-shadow: none; - color: #D1D5DB; - } -} - -.tj-btn-tertiary { - background: #FFFFFF; - color: #283948; - border: 1px solid #D1D5DB; - - &:hover { - box-shadow: 0px 0px 0px 4px #E4E7EB; - color: #576574 - } - - &:active { - border: 1px solid #6B7380; - box-shadow: none; - color: #172531 - } - - &:disabled { - background: linear-gradient(0deg, #F3F4F6, #F3F4F6); - box-shadow: none; - color: #D1D5DB; - } -} - -.tj-btn-ghost { - background: #fff; - color: #466BF2; - - &:hover { - background: #E9EEFF; - color: #3756C5; - box-shadow: none; - } - - &:active { - background: #D2DDFF; - color: #466BF2; - } - - &:disabled { - background: linear-gradient(0deg, #F3F4F6, #F3F4F6); - box-shadow: none; - color: #D1D5DB; - } -} - -// DESIGN SYSTEM BUTTOM END-------------->> - -// Onbarding-btn styles -.signup-btn, -.login-btn, -.sh-setup-button { - width: 352px; - margin-top: 24px; - margin-bottom: 12px; - justify-content: space-between !important; -} - -.sh-setup-button { - width: 328px !important; -} - -.org-btn { - width: 352px; - margin-bottom: 12px; - justify-content: space-between !important; -} - -.signup-info-btn { - width: 352px; - margin-bottom: 12px; - justify-content: center !important; -} - -.signup-info-cancel-btn { - margin-top: 8px; -} - -.verification-success-info-btn { - margin-top: 32px; - justify-content: space-between; -} - - -.forget-password-btn { - width: 352px; - margin-top: 8px; - justify-content: space-between !important; -} - -.reset-password-btn { - width: 352px; - margin-top: 0px !important; - justify-content: space-between !important; -} - -.reset-password-info-btn, -.forgot-password-info-btn { - margin-top: 32px; - width: 352px; - justify-content: center; -} - -.link-expired-info-btn { - margin-top: 32px; - width: 392px; - justify-content: center; -} - -.signup-info-verify-btn { - width: 352px; - margin-top: 8x !important; - margin-bottom: 8x !important; -} - -#enter-svg, -#eye-svg { - height: 20px !important; - width: 20px !important; -} - -// ----btn-end -.onboarding-cta-wrapper { - position: relative; - display: flex; - align-items: flex-end; - flex-direction: column; - height: 46vh; - margin-left: 64px; - box-shadow: 0px 24px 48px -12px rgba(16, 24, 40, 0.18); - border-radius: 6px; -} - -.page-wrap-onboarding { - min-height: calc(100vh - 64px); - display: flex; - flex-direction: column; - position: relative; -} - -.spinner-center { - margin: 0 auto -} - -.spinner-center, -.text-center { - display: flex; - justify-content: center; - align-items: center; -} - -.text-center-onboard { - display: flex; - justify-content: center; - align-items: center; - margin: 0 auto; - text-align: center; -} - -.common-auth-signup-section-header, -.sign-in-header, -.common-auth-signup-sub-header { - margin: 0px auto 4px auto; - justify-content: center; - display: flex; - text-align: center; -} - -.verification-loader-wrap { - width: 300px; - margin: 0 auto; - flex-direction: column; -} - -// onboarding-media-query -@media only screen and (max-width: 768px) { - - .onboarding-checkpoints, - .onboarding-account-name { - display: none; - } -} - -@media only screen and (max-width: 1200px) { - .onboarding-cta-wrapper { - display: none; - } - - .forget-password-info-card, - .onboarding-form, - .verification-success-card, - .password-reset-card, - .link-expired-card, - .signup-info-card, - .onboarding-page-wrapper, - .login-sso-wrapper, - .common-auth-container-wrapper, - .onboard-input { - width: 320px !important; - } - - .common-auth-section-whole-wrapper { - height: calc(100% - 64px); - - .common-auth-section-right-wrapper { - width: 0%; - } - - .common-auth-section-left-wrapper { - width: 100%; - position: relative; - height: calc(100% - 64px) !important; - - } - - .common-auth-section-left-wrapper-grid { - gap: 0px !important; - height: 100vh; - } - - .common-auth-container-wrapper, - .common-auth-signup-container-wrapper { - margin: 0px auto; - } - - .tj-text-input, - .onboard-input { - width: 300px !important; - } - } - - .signup-btn, - .login-btn, - .reset-password-info-btn, - .forgot-password-info-btn, - .forget-password-btn, - .verification-success-info-btn, - .signup-info-cancel-btn, - .reset-password-btn, - .link-expired-info-btn .signup-info-verify-btn, - .login-sso-wrapper, - .link-expired-info-btn, - .signup-info-btn { - width: 300px !important; - } - - .onboarding-page-continue-button { - width: 320px !important; - } - - .onboarding-navbar-img { - position: absolute; - top: 22px; - width: 82px; - left: 10px; - } - - .tooljet-nav-logo { - width: 92px; - } -} - -.onboarding-cta-image-wrapper { - height: 100%; - width: 100%; - background-image: url(../../assets/images/onboardingassets/Illustrations/cta_light.png); - background-repeat: no-repeat; - background-size: cover; -} - -.org-invite-fallback { - display: flex; - justify-content: center; -} - -.forgot-password-auth-wrapper { - align-items: flex-start !important; -} - -// Dark-Mode styles onboarding && self host dark mode -.theme-dark { - - .org-avatar:hover { - .avatar { - background: #10141A no-repeat center/cover; - } - } - - .common-auth-signup-section-header, - .sign-in-header, - .sign-in-sub-header, - .sso-info-text, - .tj-text-input-label, - .common-auth-testimonial, - .testimonial-position, - .signup-terms, - .common-auth-section-header, - .common-auth-sub-header, - .info-screen-description, - .reset-password-header, - .onboarding-page-header, - .onboarding-back-button, - .sh-setup-button { - color: #ECEDEE !important; - } - - .onboarding-navbar-layout { - background-color: #2b394b; - border-bottom: 1px solid #2B2F31; - } - - .onboarding-page-sub-header { - color: #9BA1A6; - } - - .login-sso-wrapper, - .sso-button, - .tj-text-input, - .onboard-input { - background-color: #2b394b !important; - border-color: #787F85; - } - - .login-sso-wrapper { - - &:hover { - border: 1px solid #6E7479; - box-shadow: 0px 0px 0px 2px #4C5358; - } - } - - .separator-onboarding .separator h2 span, - .separator-signup .separator h2 span { - background-color: #2b394b; - } - - .separator-onboarding .separator h2 { - border-bottom: 1px solid #697177 !important; - - } - - .separator-signup .separator h2 { - border-bottom: 1px solid #697177 !important; - } - - .tj-text-input, - .onboard-input { - color: #fff; - border-color: #787F85; - - ::placeholder { - color: #697177; - } - - p { - color: #697177; - } - - &:hover { - border: 1px solid #6E7479; - box-shadow: 0px 0px 0px 2px #4C5358; - } - - &:active { - box-shadow: 0px 0px 0px 2px #333845; - border: 1px solid #3E63DD - } - } - - .tj-input-helper-text, - .info-screen-spam-msg { - color: #9BA1A6; - } - - .tj-btn-primary { - background: #3E63DD; - color: #fff; - - &:hover { - background: #5373E7; - box-shadow: 0px 0px 0px 4px #22346E; - } - - &:active { - background: #849DFF; - } - - &:disabled { - background: #171B23; - box-shadow: none; - color: #656565; - } - } - - .common-auth-section-right-wrapper { - border-left: 1px solid #2B2F31; - } - - .signup-terms, - .verification-terms { - a { - color: #3E63DD; - } - } - - .tj-btn-tertiary { - background-color: #3A3A3A; - color: #fff; - border: none; - - &:hover { - box-shadow: 0px 0px 0px 4px #313538; - border: none; - } - - &:active { - background: #849DFF; - } - } - - .tj-btn-secondary { - background-color: #3E63DD; - color: #fff; - - &:hover { - background: #5373E7; - box-shadow: 0px 0px 0px 4px #22346E; - } - - &:active { - background: #3E63DD; - } - - &:disabled { - background: #202425; - color: #4C5155; - box-shadow: none; - } - } - - .onboarding-page-continue-button { - - &:hover { - background: #5373E7; - box-shadow: 0px 0px 0px 4px #22346E; - } - - &:disabled { - background: #171B23; - box-shadow: none; - color: #656565; - } - } - - .onboarding-radio-checked { - border: 2px solid #466BF2 !important; - } - - .onboarding-bubbles-active { - background: #3E63DD !important; - } - - .onboarding-cta-image-wrapper { - background-image: url(../../assets/images/onboardingassets/Illustrations/cta_dark.png); - } - - .onboarding-account-name { - background-color: #1A1D1E; - color: rgba(255, 255, 255, 0.7) !important; - } - -} - -//ONBOARD STYLES END---------------------------->>>>> - .organization-selector { max-width: 288px; max-height: 48px; @@ -8078,175 +7198,6 @@ tbody { display: block; } -// ONBOARDING-SELF-HOST STYLES START-------> - -.sh-setup-card { - width: 392px; - height: 486px; - margin: auto; - display: flex; - flex-direction: column; - text-align: center; - background: #FFFFFF; - box-shadow: 0px 2px 4px rgba(40, 57, 72, 0.06), 0px 4px 6px rgba(40, 57, 72, 0.1); - border-radius: 6px; - text-align: center; - justify-content: center; - align-items: center; - position: absolute; - left: 0; - right: 0; - top: 36vh; - text-align: center; - - img { - width: 366px; - height: 89.34px; - left: 530px; - top: 310.42px; - } - - h1 { - width: 328px; - height: 186px; - font-weight: 700; - font-size: 45px; - line-height: 62px; - text-align: center; - color: #1F2937; - flex: none; - margin: 0 auto; - - span { - color: #466BF2; - } - } - - p { - width: 286px; - height: 64px; - font-weight: 400; - font-size: 18px; - line-height: 32px; - text-align: center; - color: #000000; - flex: none; - margin-top: 16px; - } - - .sh-setup-button { - margin: 32px auto; - } -} - -.sh-setup-banner { - position: relative; - background-repeat: no-repeat; - background: linear-gradient(253.22deg, #F3F4F6 0%, #F9FAFB 100%); - height: 50vh; -} - -.sh-setup-banner-inner { - width: 986.19px; - height: 360px; - background-repeat: no-repeat; - display: flex; - justify-content: center; - background: url('../../assets/images/onboardingassets/Illustrations/background.jpg'); - position: absolute; - left: 0; - right: 0; - margin: auto; - bottom: 0; - background-position: center; -} - -.sh-setup-sub-banner { - position: absolute; - left: 0; - right: 0; - margin: auto; - width: 803px; - height: 210px; - bottom: 0; - width: 803px; - background: url('../../assets/images/onboardingassets/Illustrations/app_image.png'); - border-radius: 16px; - background-size: cover; -} - -.sh-setup-screen-wrapper { - min-height: 100vh; -} - -.onboarding-password-hide-img { - position: absolute; - right: 16px; - top: 17%; - cursor: pointer; -} - -.admin-setup-continue-btn { - margin-top: 24px; -} - -.passive-onboarding-tab { - color: #6B7380 !important; - font-weight: 400 !important; -} - -.active-onboarding-tab { - color: #111827 !important; -} - -.navigation-wrap { - display: flex; - justify-content: space-around; -} - -.wrap-onboard-input { - position: relative; -} - -.onboard-password-label { - margin-top: 16px; -} - -.signup-status-card-wrapper { - box-sizing: border-box; - display: flex; - flex-direction: row; - align-items: flex-start; - padding: 10px 16px; - gap: 10px; - width: 352px; - height: 60px; - background: #FEF8F4; - border: 1px solid #FFF1E7; - border-radius: 6px; - margin-bottom: 20px; - - p { - font-size: 12px; - line-height: 20px; - color: #11181C; - width: 288px; - height: 40px; - margin-left: 14px; - font-weight: 500; - align-items: baseline; - } -} - -.onboard-password { - margin-bottom: 24px !important; -} - - -// ONBOARDING-SELF-HOST STYLES END-------> - -//ONBOARD STYLES END---------------------------->>>>> - .app-versions-selector { display: inline-flex; align-items: center; @@ -8331,19 +7282,21 @@ tbody { } } -.profile-card.dark.card{ +.profile-card.dark.card { background-color: #1F2936; color: #C0C8CC; } -.theme-dark{ - .editor-header-actions{ - .current-layout{ - .bg-white{ + +.theme-dark { + .editor-header-actions { + .current-layout { + .bg-white { background-color: #232E3C !important; } - svg{ - path{ - fill: white ; + + svg { + path { + fill: white; } } }