diff --git a/src/i18n-keysets/auth.sign-in/en.json b/src/i18n-keysets/auth.sign-in/en.json index 17ceeb15a4..f198a326ee 100644 --- a/src/i18n-keysets/auth.sign-in/en.json +++ b/src/i18n-keysets/auth.sign-in/en.json @@ -5,6 +5,5 @@ "label_login-placeholder": "Username", "label_password-placeholder": "Password", "label_sign-up-hint": "Don't have an account?", - "label_sing-up-link": "Sign up", - "title_product": "DataLens" + "label_sing-up-link": "Sign up" } diff --git a/src/i18n-keysets/auth.sign-in/ru.json b/src/i18n-keysets/auth.sign-in/ru.json index 2d71e1f7e9..38b0556dcf 100644 --- a/src/i18n-keysets/auth.sign-in/ru.json +++ b/src/i18n-keysets/auth.sign-in/ru.json @@ -5,6 +5,5 @@ "label_login-placeholder": "Логин", "label_password-placeholder": "Пароль", "label_sign-up-hint": "У вас ещё нет учётной записи?", - "label_sing-up-link": "Зарегистрироваться", - "title_product": "DataLens" + "label_sing-up-link": "Зарегистрироваться" } diff --git a/src/server/components/layout/opensource-layout-config.ts b/src/server/components/layout/opensource-layout-config.ts index 9219afcaf3..a23b49903c 100644 --- a/src/server/components/layout/opensource-layout-config.ts +++ b/src/server/components/layout/opensource-layout-config.ts @@ -7,7 +7,7 @@ import type { DLUser, TenantSettings, } from '../../../shared'; -import {FALLBACK_LANGUAGES, Feature, Language, USER_SETTINGS_KEY} from '../../../shared'; +import {FALLBACK_LANGUAGES, Language, USER_SETTINGS_KEY} from '../../../shared'; import type {AppLayoutSettings, GetLayoutConfig} from '../../types/app-layout'; import {addTranslationsScript} from '../../utils/language'; import {getUserInfo} from '../zitadel/utils'; @@ -72,11 +72,6 @@ export const getOpensourceLayoutConfig: GetLayoutConfig = async (args) => { }; } - const isRebrandingEnabled = req.ctx.get('isEnabledServerFeature')(Feature.EnableDLRebranding); - - // applying new favicon from rebranding - const faviconUrl = isRebrandingEnabled ? '/os-favicon.ico' : config.faviconUrl; - const tenantSettings: TenantSettings = { defaultColorPaletteId: res.locals.tenantDefaultColorPaletteId, }; @@ -115,7 +110,7 @@ export const getOpensourceLayoutConfig: GetLayoutConfig = async (args) => { lang, icon: { type: 'image/ico', - href: faviconUrl, + href: '/os-favicon.ico', sizes: '32x32', }, inlineScripts: ['window.DL = window.__DATA__.DL', ...chartkitInlineScripts], diff --git a/src/ui/assets/icons/logo.svg b/src/ui/assets/icons/logo.svg deleted file mode 100644 index a2d95d4c91..0000000000 --- a/src/ui/assets/icons/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/ui/components/AsideHeaderAdapter/AsideHeaderAdapter.tsx b/src/ui/components/AsideHeaderAdapter/AsideHeaderAdapter.tsx index 1c34f606a6..453ff91df1 100644 --- a/src/ui/components/AsideHeaderAdapter/AsideHeaderAdapter.tsx +++ b/src/ui/components/AsideHeaderAdapter/AsideHeaderAdapter.tsx @@ -29,9 +29,8 @@ import {Settings as SettingsPanel} from './Settings/Settings'; import {DIALOG_RELEASE_VERSION} from './VersionDialog/VersionDialog'; import {ASIDE_HEADER_LOGO_ICON_SIZE} from './constants'; -import defaultLogoIcon from '../../assets/icons/logo.svg'; import iconCollection from '../../assets/icons/mono-collection.svg'; -import rebrandingLogoIcon from '../../assets/icons/os-logo.svg'; +import defaultLogoIcon from '../../assets/icons/os-logo.svg'; import './AsideHeaderAdapter.scss'; @@ -222,8 +221,6 @@ export const AsideHeaderAdapter = ({ setCurrentPopup(null); }, []); - const isRebrandingEnabled = isEnabledFeature(Feature.EnableDLRebranding); - const renderFooter = () => { return ( @@ -328,14 +325,12 @@ export const AsideHeaderAdapter = ({ ); }; - const defaultLogo = isRebrandingEnabled ? rebrandingLogoIcon : defaultLogoIcon; - return ( , - icon: logoIcon ?? defaultLogo, + icon: logoIcon ?? defaultLogoIcon, iconSize: ASIDE_HEADER_LOGO_ICON_SIZE, iconClassName: b('logo-icon'), className: b('logo'), diff --git a/src/ui/components/AsideHeaderAdapter/LogoText/LogoText.scss b/src/ui/components/AsideHeaderAdapter/LogoText/LogoText.scss index 0fc419c15b..ac5c95a50f 100644 --- a/src/ui/components/AsideHeaderAdapter/LogoText/LogoText.scss +++ b/src/ui/components/AsideHeaderAdapter/LogoText/LogoText.scss @@ -2,10 +2,6 @@ .aside-header-logo-text { &__title { - @include text-body-2; - } - - &__title_rebranding { @include text-subheader-2; } diff --git a/src/ui/components/AsideHeaderAdapter/LogoText/LogoText.tsx b/src/ui/components/AsideHeaderAdapter/LogoText/LogoText.tsx index 55e1537c93..214c22145f 100644 --- a/src/ui/components/AsideHeaderAdapter/LogoText/LogoText.tsx +++ b/src/ui/components/AsideHeaderAdapter/LogoText/LogoText.tsx @@ -1,9 +1,7 @@ import React from 'react'; import block from 'bem-cn-lite'; -import {Feature} from 'shared/types'; -import {PRODUCT_NAME, REBRANDING_PRODUCT_NAME} from 'ui/constants'; -import {isEnabledFeature} from 'ui/utils/isEnabledFeature'; +import {REBRANDING_PRODUCT_NAME} from 'ui/constants'; import './LogoText.scss'; @@ -17,15 +15,12 @@ export type LogoTextProps = { export const LogoText = React.forwardRef( ({installationInfo, productName, installationInfoClassName}, ref) => { - const isRebrandingEnabled = isEnabledFeature(Feature.EnableDLRebranding); - const showInstallation = isRebrandingEnabled && installationInfo; - const defaultProductName = isRebrandingEnabled ? REBRANDING_PRODUCT_NAME : PRODUCT_NAME; + const showInstallation = installationInfo; + const defaultProductName = REBRANDING_PRODUCT_NAME; return (
-
- {productName || defaultProductName} -
+
{productName || defaultProductName}
{showInstallation && (
{installationInfo} diff --git a/src/ui/components/Illustration/getIllustrationStore.ts b/src/ui/components/Illustration/getIllustrationStore.ts index f25044ba19..ebb8c55791 100644 --- a/src/ui/components/Illustration/getIllustrationStore.ts +++ b/src/ui/components/Illustration/getIllustrationStore.ts @@ -1,28 +1,30 @@ export const getIllustrationStore = () => ({ light: { - notFound: () => import('assets/images/illustration/light/404.svg'), - notFoundError: () => import('assets/images/illustration/light/404.svg'), - noAccess: () => import('assets/images/illustration/light/403.svg'), - error: () => import('assets/images/illustration/light/500.svg'), - identity: () => import('assets/images/illustration/light/identity.svg'), - project: () => import('assets/images/illustration/light/project.svg'), - template: () => import('assets/images/illustration/light/template.svg'), - emptyDirectory: () => import('assets/images/illustration/light/folder.svg'), - successOperation: () => import('assets/images/illustration/light/success_operation.svg'), - badRequest: () => import('assets/images/illustration/light/bad_request.svg'), - noAccounts: () => import('assets/images/illustration/light/404.svg'), + notFound: () => import('assets/images/new-illustrations/light/nothing_found.svg'), + notFoundError: () => import('assets/images/new-illustrations/light/404.svg'), + noAccess: () => import('assets/images/new-illustrations/light/403.svg'), + error: () => import('assets/images/new-illustrations/light/500.svg'), + identity: () => import('assets/images/new-illustrations/light/no_permission.svg'), + project: () => import('assets/images/new-illustrations/light/project.svg'), + template: () => import('assets/images/new-illustrations/light/empty_state.svg'), + emptyDirectory: () => import('assets/images/new-illustrations/light/empty_directory.svg'), + successOperation: () => + import('assets/images/new-illustrations/light/success_operation.svg'), + badRequest: () => import('assets/images/new-illustrations/light/bad_request.svg'), + noAccounts: () => import('assets/images/new-illustrations/light/no_accounts.svg'), }, dark: { - notFound: () => import('assets/images/illustration/dark/404.svg'), - notFoundError: () => import('assets/images/illustration/dark/404.svg'), - noAccess: () => import('assets/images/illustration/dark/403.svg'), - error: () => import('assets/images/illustration/dark/500.svg'), - identity: () => import('assets/images/illustration/dark/identity.svg'), - project: () => import('assets/images/illustration/dark/project.svg'), - template: () => import('assets/images/illustration/dark/template.svg'), - emptyDirectory: () => import('assets/images/illustration/dark/folder.svg'), - successOperation: () => import('assets/images/illustration/dark/success_operation.svg'), - badRequest: () => import('assets/images/illustration/light/bad_request.svg'), - noAccounts: () => import('assets/images/illustration/dark/404.svg'), + notFound: () => import('assets/images/new-illustrations/dark/nothing_found.svg'), + notFoundError: () => import('assets/images/new-illustrations/dark/404.svg'), + noAccess: () => import('assets/images/new-illustrations/dark/403.svg'), + error: () => import('assets/images/new-illustrations/dark/500.svg'), + identity: () => import('assets/images/new-illustrations/dark/no_permission.svg'), + project: () => import('assets/images/new-illustrations/dark/project.svg'), + template: () => import('assets/images/new-illustrations/dark/empty_state.svg'), + emptyDirectory: () => import('assets/images/new-illustrations/dark/empty_directory.svg'), + successOperation: () => + import('assets/images/new-illustrations/dark/success_operation.svg'), + badRequest: () => import('assets/images/new-illustrations/dark/bad_request.svg'), + noAccounts: () => import('assets/images/new-illustrations/dark/no_accounts.svg'), }, }); diff --git a/src/ui/components/Illustration/getRebrandingIllustrationStore.ts b/src/ui/components/Illustration/getRebrandingIllustrationStore.ts index 3a0c86ad29..02a512f96c 100644 --- a/src/ui/components/Illustration/getRebrandingIllustrationStore.ts +++ b/src/ui/components/Illustration/getRebrandingIllustrationStore.ts @@ -1,3 +1,4 @@ +// TODO: remove CHARTS-11919 export const getRebrandingIllustrationStore = () => ({ light: { notFound: () => import('assets/images/new-illustrations/light/nothing_found.svg'), diff --git a/src/ui/components/MobileHeader/MobileHeader.scss b/src/ui/components/MobileHeader/MobileHeader.scss index 4ac706e75a..6795d79443 100644 --- a/src/ui/components/MobileHeader/MobileHeader.scss +++ b/src/ui/components/MobileHeader/MobileHeader.scss @@ -11,7 +11,7 @@ height: 0; } - &__logo_rebranding { + &__logo { flex: 1; } @@ -25,13 +25,10 @@ } &__logo-icon { + height: auto; + width: auto; + padding-left: var(--g-spacing-2); color: var(--g-color-base-brand); - - &_rebranding { - height: auto; - width: auto; - padding-left: var(--g-spacing-2); - } } &__user-avatar { diff --git a/src/ui/components/MobileHeader/MobileHeaderComponent/MobileHeaderComponent.tsx b/src/ui/components/MobileHeader/MobileHeaderComponent/MobileHeaderComponent.tsx index 66901df1e4..049a99a205 100644 --- a/src/ui/components/MobileHeader/MobileHeaderComponent/MobileHeaderComponent.tsx +++ b/src/ui/components/MobileHeader/MobileHeaderComponent/MobileHeaderComponent.tsx @@ -5,11 +5,8 @@ import {MobileHeader, getMobileHeaderCustomEvent} from '@gravity-ui/navigation'; import {mergeRefs} from '@gravity-ui/uikit'; import block from 'bem-cn-lite'; import {I18n} from 'i18n'; -import {Feature} from 'shared/types'; import {LogoText} from 'ui/components/AsideHeaderAdapter/LogoText/LogoText'; -import {PRODUCT_NAME} from 'ui/constants'; import type {MobileHeaderComponentProps} from 'ui/registry/units/common/types/components/MobileHeaderComponent'; -import {isEnabledFeature} from 'ui/utils/isEnabledFeature'; import {useScrollableContainerContext} from 'ui/utils/scrollableContainerContext'; import {DL} from '../../../constants/common'; @@ -19,9 +16,8 @@ import {MOBILE_HEADER_LOGO_ICON_SIZE} from '../constants'; import {BurgerMenuFooter} from './BurgerMenuFooter/BurgerMenuFooter'; import {UserPanel} from './UserPanel/UserPanel'; -import defaultLogoIcon from 'ui/assets/icons/logo.svg'; import iconCollection from 'ui/assets/icons/mono-collection.svg'; -import rebrandingLogoIcon from 'ui/assets/icons/os-logo.svg'; +import defaultLogoIcon from 'ui/assets/icons/os-logo.svg'; import '../MobileHeader.scss'; @@ -73,12 +69,6 @@ export const MobileHeaderComponent = ({ ] : undefined; - const defaultLogo = isEnabledFeature(Feature.EnableDLRebranding) - ? rebrandingLogoIcon - : defaultLogoIcon; - - const isRebrandingEnabled = isEnabledFeature(Feature.EnableDLRebranding); - const {scrollableContainerRef} = useScrollableContainerContext(); const contentRef = React.useRef(); @@ -98,11 +88,11 @@ export const MobileHeaderComponent = ({ : PRODUCT_NAME, - iconClassName: b('logo-icon', {rebranding: isRebrandingEnabled}), - className: b('logo', {rebranding: isRebrandingEnabled}), - iconSize: isRebrandingEnabled ? MOBILE_HEADER_LOGO_ICON_SIZE : undefined, + icon: logoIcon ?? defaultLogoIcon, + text: () => , + iconClassName: b('logo-icon'), + className: b('logo'), + iconSize: MOBILE_HEADER_LOGO_ICON_SIZE, }} burgerMenu={{items: menuItems, renderFooter: () => }} contentClassName={CONTENT_CLASSNAME} diff --git a/src/ui/entries/dl-main.tsx b/src/ui/entries/dl-main.tsx index 2c95119f2e..7c3b53d6b6 100644 --- a/src/ui/entries/dl-main.tsx +++ b/src/ui/entries/dl-main.tsx @@ -28,8 +28,6 @@ import 'ui/styles/variables.scss'; import 'ui/styles/split-pane-resizer.scss'; import 'ui/styles/theme.scss'; import 'ui/styles/rebranding-theme.scss'; -import {isEnabledFeature} from 'ui/utils/isEnabledFeature'; -import {Feature} from 'shared'; import {ScrollableContainerContextProvider} from 'ui/utils/scrollableContainerContext'; const Content = () => { @@ -37,10 +35,6 @@ const Content = () => { const theme = getOverridedTheme(userTheme); const themeSettings = useSelector(selectThemeSettings); - if (isEnabledFeature(Feature.EnableDLRebranding)) { - Utils.addBodyClass('dl-root', 'dl-root_rebranding'); - } - Utils.addBodyClass('dl-root_new-palette'); return ( diff --git a/src/ui/registry/units/auth/types/components/Signin.ts b/src/ui/registry/units/auth/types/components/Signin.ts index 051f327f15..dbed89c97b 100644 --- a/src/ui/registry/units/auth/types/components/Signin.ts +++ b/src/ui/registry/units/auth/types/components/Signin.ts @@ -1,3 +1 @@ -import type {IconData} from '@gravity-ui/uikit'; - -export type SigninProps = {alternativeAuthOptions?: React.ReactNode; logoIcon?: IconData}; +export type SigninProps = {alternativeAuthOptions?: React.ReactNode}; diff --git a/src/ui/registry/units/common/register.tsx b/src/ui/registry/units/common/register.tsx index e919e8a19e..9ee0b2f453 100644 --- a/src/ui/registry/units/common/register.tsx +++ b/src/ui/registry/units/common/register.tsx @@ -1,4 +1,4 @@ -import {Feature, extractEntryId, isEntryId} from 'shared'; +import {extractEntryId, isEntryId} from 'shared'; import {getEntryScopesWithRevisionsList} from 'ui/components/RevisionsPanel/utils'; import {DL} from 'ui/constants'; import {getAdditionalChartkitErrorContent} from 'ui/libs/DatalensChartkit/Error/getAdditionalChartkitErrorContent'; @@ -6,7 +6,6 @@ import {getIsCompact, updateIsCompact} from 'ui/store/utils/asideHeader'; import {getLoginById} from 'ui/units/auth/components/LoginById/utils'; import {resolveUsersByIds} from 'ui/units/auth/store/actions/usersByIds'; import {getRestrictedParamNames} from 'ui/utils/getRestrictedParamNames'; -import {isEnabledFeature} from 'ui/utils/isEnabledFeature'; import {setEntryKey} from 'ui/utils/setEntryKey'; import {formatNumber} from '../../../../shared/modules/format-units/formatUnit'; @@ -18,7 +17,6 @@ import {getAdditionalEntryDialoguesMap} from '../../../components/EntryDialogues import {getEntryName} from '../../../components/EntryTitle/utils'; import {Illustration} from '../../../components/Illustration/Illustration'; import {getIllustrationStore} from '../../../components/Illustration/getIllustrationStore'; -import {getRebrandingIllustrationStore} from '../../../components/Illustration/getRebrandingIllustrationStore'; import {MarkdownControl} from '../../../components/MarkdownControl/MarkdownControl'; import {MobileHeaderComponent} from '../../../components/MobileHeader/MobileHeaderComponent/MobileHeaderComponent'; import { @@ -55,8 +53,6 @@ import {registry} from '../../index'; import {EXAMPLE_FUNCTION} from './constants/functions'; export const registerCommonPlugins = () => { - const isRebrandingEnabled = isEnabledFeature(Feature.EnableDLRebranding); - registry.common.components.registerMany({ MobileHeaderComponent, PlaceholderIllustrationImage: Illustration, @@ -74,9 +70,7 @@ export const registerCommonPlugins = () => { getEntryMenuConfig, getMenuGroupConfig, getIconDataById, - getIllustrationStore: isRebrandingEnabled - ? getRebrandingIllustrationStore - : getIllustrationStore, + getIllustrationStore, getIsCompact, updateIsCompact, getPlaceSelectParameters, diff --git a/src/ui/styles/rebranding-theme.scss b/src/ui/styles/rebranding-theme.scss deleted file mode 100644 index 4f7b695d11..0000000000 --- a/src/ui/styles/rebranding-theme.scss +++ /dev/null @@ -1,107 +0,0 @@ -@import './variables.scss'; - -#{$rebrandingRoot} { - --dl-color-export-loading-toast: var(--g-color-private-brand-100-solid); - - --gn-aside-header-item-icon-color: var(--g-color-text-primary); - - &.g-root_theme_light, - &.g-root_theme_light-hc, - & .g-root_theme_light, - & .g-root_theme_light-hc { - --g-color-private-brand-50: rgba(1, 123, 254, 0.1); - --g-color-private-brand-100: rgba(1, 123, 254, 0.15); - --g-color-private-brand-150: rgba(1, 123, 254, 0.2); - --g-color-private-brand-200: rgba(1, 123, 254, 0.3); - --g-color-private-brand-250: rgba(1, 123, 254, 0.4); - --g-color-private-brand-300: rgba(1, 123, 254, 0.5); - --g-color-private-brand-350: rgba(1, 123, 254, 0.6); - --g-color-private-brand-400: rgba(1, 123, 254, 0.7); - --g-color-private-brand-450: rgba(1, 123, 254, 0.8); - --g-color-private-brand-500: rgba(1, 123, 254, 0.9); - --g-color-private-brand-550-solid: rgb(1, 123, 254); - --g-color-private-brand-1000-solid: rgb(29, 43, 67); - --g-color-private-brand-950-solid: rgb(27, 48, 78); - --g-color-private-brand-900-solid: rgb(24, 57, 100); - --g-color-private-brand-850-solid: rgb(21, 67, 122); - --g-color-private-brand-800-solid: rgb(18, 76, 144); - --g-color-private-brand-750-solid: rgb(14, 85, 166); - --g-color-private-brand-700-solid: rgb(11, 95, 188); - --g-color-private-brand-650-solid: rgb(8, 104, 210); - --g-color-private-brand-600-solid: rgb(4, 114, 232); - --g-color-private-brand-500-solid: rgb(26, 136, 254); - --g-color-private-brand-450-solid: rgb(52, 149, 254); - --g-color-private-brand-400-solid: rgb(77, 163, 254); - --g-color-private-brand-350-solid: rgb(103, 176, 254); - --g-color-private-brand-300-solid: rgb(128, 189, 255); - --g-color-private-brand-250-solid: rgb(153, 202, 255); - --g-color-private-brand-200-solid: rgb(179, 215, 255); - --g-color-private-brand-150-solid: rgb(204, 229, 255); - --g-color-private-brand-100-solid: rgb(217, 235, 255); - --g-color-private-brand-50-solid: rgb(230, 242, 255); - - --g-color-base-brand: var(--g-color-private-brand-550-solid); - --g-color-base-brand-hover: var(--g-color-private-brand-600-solid); - --g-color-base-selection: var(--g-color-private-brand-100); - --g-color-base-selection-hover: var(--g-color-private-brand-200); - - --g-color-line-brand: var(--g-color-private-brand-550-solid); - --g-color-text-brand: var(--g-color-private-brand-550-solid); - --g-color-text-brand-heavy: var(--g-color-private-brand-600-solid); - --g-color-text-brand-contrast: var(--g-color-text-light-primary); - - --g-color-text-link: var(--g-color-private-brand-550-solid); - --g-color-text-link-hover: var(--g-color-private-brand-700-solid); - - --gn-aside-header-item-current-background-color: var(--g-color-private-brand-100); - } - - &.g-root_theme_dark, - &.g-root_theme_dark-hc, - & .g-root_theme_dark-hc, - & .g-root_theme_dark { - --g-color-private-brand-50: rgba(1, 123, 254, 0.1); - --g-color-private-brand-100: rgba(1, 123, 254, 0.15); - --g-color-private-brand-150: rgba(1, 123, 254, 0.2); - --g-color-private-brand-200: rgba(1, 123, 254, 0.3); - --g-color-private-brand-250: rgba(1, 123, 254, 0.4); - --g-color-private-brand-300: rgba(1, 123, 254, 0.5); - --g-color-private-brand-350: rgba(1, 123, 254, 0.6); - --g-color-private-brand-400: rgba(1, 123, 254, 0.7); - --g-color-private-brand-450: rgba(1, 123, 254, 0.8); - --g-color-private-brand-500: rgba(1, 123, 254, 0.9); - --g-color-private-brand-550-solid: rgb(1, 123, 254); - --g-color-private-brand-1000-solid: rgb(217, 235, 255); - --g-color-private-brand-950-solid: rgb(204, 229, 255); - --g-color-private-brand-900-solid: rgb(179, 215, 255); - --g-color-private-brand-850-solid: rgb(153, 202, 255); - --g-color-private-brand-800-solid: rgb(128, 189, 255); - --g-color-private-brand-750-solid: rgb(103, 176, 254); - --g-color-private-brand-700-solid: rgb(77, 163, 254); - --g-color-private-brand-650-solid: rgb(52, 149, 254); - --g-color-private-brand-600-solid: rgb(26, 136, 254); - --g-color-private-brand-500-solid: rgb(4, 114, 232); - --g-color-private-brand-450-solid: rgb(8, 104, 210); - --g-color-private-brand-400-solid: rgb(11, 95, 188); - --g-color-private-brand-350-solid: rgb(14, 85, 166); - --g-color-private-brand-300-solid: rgb(18, 76, 144); - --g-color-private-brand-250-solid: rgb(21, 67, 122); - --g-color-private-brand-200-solid: rgb(24, 57, 100); - --g-color-private-brand-150-solid: rgb(27, 48, 78); - --g-color-private-brand-100-solid: rgb(29, 43, 67); - --g-color-private-brand-50-solid: rgb(31, 38, 56); - - --g-color-base-brand: var(--g-color-private-brand-550-solid); - --g-color-base-brand-hover: var(--g-color-private-brand-600-solid); - --g-color-base-selection: var(--g-color-private-brand-150); - --g-color-base-selection-hover: var(--g-color-private-brand-200); - - --g-color-line-brand: var(--g-color-private-brand-550-solid); - --g-color-text-brand: var(--g-color-private-brand-550-solid); - --g-color-text-brand-heavy: var(--g-color-private-brand-600-solid); - --g-color-text-brand-contrast: var(--g-color-text-light-primary); - - --g-color-text-link: var(--g-color-private-brand-550-solid); - --g-color-text-link-hover: var(--g-color-private-brand-700-solid); - } -} diff --git a/src/ui/styles/theme.scss b/src/ui/styles/theme.scss index 48e2482c37..19dda6b696 100644 --- a/src/ui/styles/theme.scss +++ b/src/ui/styles/theme.scss @@ -1,116 +1,113 @@ @import './variables.scss'; -.g-root:not(#{$rebrandingRoot}) { - --g-color-text-brand-contrast: var(--g-color-text-light-primary); +.g-root { + --dl-color-export-loading-toast: var(--g-color-private-brand-100-solid); - --dl-color-export-loading-toast: var(--g-color-private-orange-100-solid); + --gn-aside-header-item-icon-color: var(--g-color-text-primary); } body.g-root { --g-font-family-sans: 'Inter', sans-serif; } -.g-root_theme_light:not(#{$rebrandingRoot}), -.g-root_theme_light-hc:not(#{$rebrandingRoot}) { - --g-color-private-orange-50: rgba(255, 105, 40, 0.1); - --g-color-private-orange-100: rgba(255, 105, 40, 0.15); - --g-color-private-orange-150: rgba(255, 105, 40, 0.2); - --g-color-private-orange-200: rgba(255, 105, 40, 0.3); - --g-color-private-orange-250: rgba(255, 105, 40, 0.4); - --g-color-private-orange-300: rgba(255, 105, 40, 0.5); - --g-color-private-orange-350: rgba(255, 105, 40, 0.6); - --g-color-private-orange-400: rgba(255, 105, 40, 0.7); - --g-color-private-orange-450: rgba(255, 105, 40, 0.8); - --g-color-private-orange-500: rgba(255, 105, 40, 0.9); - --g-color-private-orange-50-solid: rgb(255, 240, 234); - --g-color-private-orange-100-solid: rgb(255, 233, 223); - --g-color-private-orange-150-solid: rgb(255, 225, 212); - --g-color-private-orange-200-solid: rgb(255, 210, 191); - --g-color-private-orange-250-solid: rgb(255, 195, 169); - --g-color-private-orange-300-solid: rgb(255, 180, 148); - --g-color-private-orange-350-solid: rgb(255, 165, 126); - --g-color-private-orange-400-solid: rgb(255, 150, 105); - --g-color-private-orange-450-solid: rgb(255, 135, 83); - --g-color-private-orange-500-solid: rgb(255, 120, 62); - --g-color-private-orange-550-solid: rgb(255, 105, 40); - --g-color-private-orange-600-solid: rgb(232, 98, 40); - --g-color-private-orange-650-solid: rgb(210, 91, 40); - --g-color-private-orange-700-solid: rgb(187, 83, 39); - --g-color-private-orange-750-solid: rgb(165, 76, 39); - --g-color-private-orange-800-solid: rgb(142, 69, 39); - --g-color-private-orange-850-solid: rgb(119, 62, 39); - --g-color-private-orange-900-solid: rgb(97, 55, 39); - --g-color-private-orange-950-solid: rgb(74, 47, 38); - --g-color-private-orange-1000-solid: rgb(63, 44, 38); - - --g-color-base-brand: var(--g-color-private-orange-550-solid); - --g-color-base-brand-hover: var(--g-color-private-orange-650-solid); - --g-color-base-selection: var(--g-color-private-orange-150); - --g-color-base-selection-hover: var(--g-color-private-orange-300); +.g-root_theme_light, +.g-root_theme_light-hc, +.g-root_theme_light, +.g-root_theme_light-hc { + --g-color-private-brand-50: rgba(1, 123, 254, 0.1); + --g-color-private-brand-100: rgba(1, 123, 254, 0.15); + --g-color-private-brand-150: rgba(1, 123, 254, 0.2); + --g-color-private-brand-200: rgba(1, 123, 254, 0.3); + --g-color-private-brand-250: rgba(1, 123, 254, 0.4); + --g-color-private-brand-300: rgba(1, 123, 254, 0.5); + --g-color-private-brand-350: rgba(1, 123, 254, 0.6); + --g-color-private-brand-400: rgba(1, 123, 254, 0.7); + --g-color-private-brand-450: rgba(1, 123, 254, 0.8); + --g-color-private-brand-500: rgba(1, 123, 254, 0.9); + --g-color-private-brand-550-solid: rgb(1, 123, 254); + --g-color-private-brand-1000-solid: rgb(29, 43, 67); + --g-color-private-brand-950-solid: rgb(27, 48, 78); + --g-color-private-brand-900-solid: rgb(24, 57, 100); + --g-color-private-brand-850-solid: rgb(21, 67, 122); + --g-color-private-brand-800-solid: rgb(18, 76, 144); + --g-color-private-brand-750-solid: rgb(14, 85, 166); + --g-color-private-brand-700-solid: rgb(11, 95, 188); + --g-color-private-brand-650-solid: rgb(8, 104, 210); + --g-color-private-brand-600-solid: rgb(4, 114, 232); + --g-color-private-brand-500-solid: rgb(26, 136, 254); + --g-color-private-brand-450-solid: rgb(52, 149, 254); + --g-color-private-brand-400-solid: rgb(77, 163, 254); + --g-color-private-brand-350-solid: rgb(103, 176, 254); + --g-color-private-brand-300-solid: rgb(128, 189, 255); + --g-color-private-brand-250-solid: rgb(153, 202, 255); + --g-color-private-brand-200-solid: rgb(179, 215, 255); + --g-color-private-brand-150-solid: rgb(204, 229, 255); + --g-color-private-brand-100-solid: rgb(217, 235, 255); + --g-color-private-brand-50-solid: rgb(230, 242, 255); - --g-color-text-brand: var(--g-color-private-orange-600-solid); - --g-color-text-brand-heavy: var(--g-color-private-orange-750-solid); - --g-color-line-brand: var(--g-color-private-orange-600-solid); + --g-color-base-brand: var(--g-color-private-brand-550-solid); + --g-color-base-brand-hover: var(--g-color-private-brand-600-solid); + --g-color-base-selection: var(--g-color-private-brand-100); + --g-color-base-selection-hover: var(--g-color-private-brand-200); - --g-color-text-link: var(--g-color-private-blue-600-solid); - --g-color-text-link-hover: var(--g-color-private-blue-800-solid); - --g-color-text-link-visited: var(--g-color-private-purple-550-solid); - --g-color-text-link-visited-hover: var(--g-color-private-purple-800-solid); -} + --g-color-line-brand: var(--g-color-private-brand-550-solid); + --g-color-text-brand: var(--g-color-private-brand-550-solid); + --g-color-text-brand-heavy: var(--g-color-private-brand-600-solid); + --g-color-text-brand-contrast: var(--g-color-text-light-primary); -.g-root_theme_dark:not(#{$rebrandingRoot}), -.g-root_theme_dark-hc:not(#{$rebrandingRoot}) { - --g-color-private-orange-50: rgba(255, 121, 63, 0.1); - --g-color-private-orange-100: rgba(255, 121, 63, 0.15); - --g-color-private-orange-150: rgba(255, 121, 63, 0.2); - --g-color-private-orange-200: rgba(255, 121, 63, 0.3); - --g-color-private-orange-250: rgba(255, 121, 63, 0.4); - --g-color-private-orange-300: rgba(255, 121, 63, 0.5); - --g-color-private-orange-350: rgba(255, 121, 63, 0.6); - --g-color-private-orange-400: rgba(255, 121, 63, 0.7); - --g-color-private-orange-450: rgba(255, 121, 63, 0.8); - --g-color-private-orange-500: rgba(255, 121, 63, 0.9); - --g-color-private-orange-50-solid: rgb(52, 42, 41); - --g-color-private-orange-100-solid: rgb(63, 46, 42); - --g-color-private-orange-150-solid: rgb(74, 51, 43); - --g-color-private-orange-200-solid: rgb(97, 59, 46); - --g-color-private-orange-250-solid: rgb(119, 68, 48); - --g-color-private-orange-300-solid: rgb(142, 77, 51); - --g-color-private-orange-350-solid: rgb(165, 86, 53); - --g-color-private-orange-400-solid: rgb(187, 95, 56); - --g-color-private-orange-450-solid: rgb(210, 103, 58); - --g-color-private-orange-500-solid: rgb(232, 112, 61); - --g-color-private-orange-550-solid: rgb(255, 121, 63); - --g-color-private-orange-600-solid: rgb(255, 134, 82); - --g-color-private-orange-650-solid: rgb(255, 148, 101); - --g-color-private-orange-700-solid: rgb(255, 161, 121); - --g-color-private-orange-750-solid: rgb(255, 175, 140); - --g-color-private-orange-800-solid: rgb(255, 188, 159); - --g-color-private-orange-850-solid: rgb(255, 201, 178); - --g-color-private-orange-900-solid: rgb(255, 215, 197); - --g-color-private-orange-950-solid: rgb(255, 228, 217); - --g-color-private-orange-1000-solid: rgb(255, 235, 226); + --g-color-text-link: var(--g-color-private-brand-550-solid); + --g-color-text-link-hover: var(--g-color-private-brand-700-solid); - --g-color-base-brand: var(--g-color-private-orange-550-solid); - --g-color-base-brand-hover: var(--g-color-private-orange-650-solid); - --g-color-base-selection: var(--g-color-private-orange-150); - --g-color-base-selection-hover: var(--g-color-private-orange-300); + --gn-aside-header-item-current-background-color: var(--g-color-private-brand-100); +} - --g-color-text-brand: var(--g-color-private-orange-600-solid); - --g-color-text-brand-heavy: var(--g-color-private-orange-750-solid); - --g-color-line-brand: var(--g-color-private-orange-600-solid); +.g-root_theme_dark, +.g-root_theme_dark-hc, +.g-root_theme_dark-hc, +.g-root_theme_dark { + --g-color-private-brand-50: rgba(1, 123, 254, 0.1); + --g-color-private-brand-100: rgba(1, 123, 254, 0.15); + --g-color-private-brand-150: rgba(1, 123, 254, 0.2); + --g-color-private-brand-200: rgba(1, 123, 254, 0.3); + --g-color-private-brand-250: rgba(1, 123, 254, 0.4); + --g-color-private-brand-300: rgba(1, 123, 254, 0.5); + --g-color-private-brand-350: rgba(1, 123, 254, 0.6); + --g-color-private-brand-400: rgba(1, 123, 254, 0.7); + --g-color-private-brand-450: rgba(1, 123, 254, 0.8); + --g-color-private-brand-500: rgba(1, 123, 254, 0.9); + --g-color-private-brand-550-solid: rgb(1, 123, 254); + --g-color-private-brand-1000-solid: rgb(217, 235, 255); + --g-color-private-brand-950-solid: rgb(204, 229, 255); + --g-color-private-brand-900-solid: rgb(179, 215, 255); + --g-color-private-brand-850-solid: rgb(153, 202, 255); + --g-color-private-brand-800-solid: rgb(128, 189, 255); + --g-color-private-brand-750-solid: rgb(103, 176, 254); + --g-color-private-brand-700-solid: rgb(77, 163, 254); + --g-color-private-brand-650-solid: rgb(52, 149, 254); + --g-color-private-brand-600-solid: rgb(26, 136, 254); + --g-color-private-brand-500-solid: rgb(4, 114, 232); + --g-color-private-brand-450-solid: rgb(8, 104, 210); + --g-color-private-brand-400-solid: rgb(11, 95, 188); + --g-color-private-brand-350-solid: rgb(14, 85, 166); + --g-color-private-brand-300-solid: rgb(18, 76, 144); + --g-color-private-brand-250-solid: rgb(21, 67, 122); + --g-color-private-brand-200-solid: rgb(24, 57, 100); + --g-color-private-brand-150-solid: rgb(27, 48, 78); + --g-color-private-brand-100-solid: rgb(29, 43, 67); + --g-color-private-brand-50-solid: rgb(31, 38, 56); - --g-color-base-background: #1d2126; - --g-color-base-generic-ultralight: #1d2126; + --g-color-base-brand: var(--g-color-private-brand-550-solid); + --g-color-base-brand-hover: var(--g-color-private-brand-600-solid); + --g-color-base-selection: var(--g-color-private-brand-150); + --g-color-base-selection-hover: var(--g-color-private-brand-200); - --g-color-text-link: var(--g-color-private-blue-600-solid); - --g-color-text-link-hover: var(--g-color-private-blue-850-solid); - --g-color-text-link-visited: var(--g-color-private-purple-700-solid); - --g-color-text-link-visited-hover: var(--g-color-private-purple-850-solid); -} + --g-color-line-brand: var(--g-color-private-brand-550-solid); + --g-color-text-brand: var(--g-color-private-brand-550-solid); + --g-color-text-brand-heavy: var(--g-color-private-brand-600-solid); + --g-color-text-brand-contrast: var(--g-color-text-light-primary); -.g-root_theme_dark-hc:not(#{$rebrandingRoot}) { - --g-color-base-background: #121416; + --g-color-text-link: var(--g-color-private-brand-550-solid); + --g-color-text-link-hover: var(--g-color-private-brand-700-solid); } .g-button { diff --git a/src/ui/styles/variables.scss b/src/ui/styles/variables.scss index fbd6cb3420..4b1a070175 100644 --- a/src/ui/styles/variables.scss +++ b/src/ui/styles/variables.scss @@ -1,5 +1,3 @@ -$rebrandingRoot: '.dl-root_rebranding'; - $backgroundMenu: #fbfbfb; // Sizes diff --git a/src/ui/units/auth/components/AuthPage/AuthPage.scss b/src/ui/units/auth/components/AuthPage/AuthPage.scss index d7b7b687e4..61f632176e 100644 --- a/src/ui/units/auth/components/AuthPage/AuthPage.scss +++ b/src/ui/units/auth/components/AuthPage/AuthPage.scss @@ -2,11 +2,11 @@ position: relative; z-index: 1; - &_rebranding#{&}_theme_dark { + &_theme_dark { background: #081b38; } - &_rebranding#{&}_theme_light { + &_theme_light { background: #f5f9fe; } diff --git a/src/ui/units/auth/components/AuthPage/AuthPage.tsx b/src/ui/units/auth/components/AuthPage/AuthPage.tsx index 3f0e98e401..d08fa9a3f2 100644 --- a/src/ui/units/auth/components/AuthPage/AuthPage.tsx +++ b/src/ui/units/auth/components/AuthPage/AuthPage.tsx @@ -4,10 +4,8 @@ import {Flex, useThemeType} from '@gravity-ui/uikit'; import block from 'bem-cn-lite'; import {useDispatch, useSelector} from 'react-redux'; import {Redirect, Route, Switch, useLocation} from 'react-router-dom'; -import {Feature} from 'shared'; import {DL} from 'ui/constants'; import {registry} from 'ui/registry'; -import {isEnabledFeature} from 'ui/utils/isEnabledFeature'; import {AUTH_ROUTE} from '../../constants/routes'; import {resetAuthState} from '../../store/actions/common'; @@ -54,16 +52,10 @@ export function AuthPage({backgroundImage}: AuthPageProps) { const currentDefaultImage = theme === 'dark' ? defaultBackgroundDark : defaultBackgroundLight; const currentImage = backgroundImage?.[theme] || currentDefaultImage; - const showBackgroundImage = - isEnabledFeature(Feature.EnableDLRebranding) && - [AUTH_ROUTE.SIGNIN, AUTH_ROUTE.SIGNUP].includes(pathname); + const showBackgroundImage = [AUTH_ROUTE.SIGNIN, AUTH_ROUTE.SIGNUP].includes(pathname); return ( - + {showBackgroundImage && ( { +export const Signin = ({alternativeAuthOptions}: SigninProps) => { const dispatch = useDispatch(); const [errorMessage, setErrorMessage] = React.useState(null); const formData = useSelector(selectFormData); - const isEnabledRebranding = isEnabledFeature(Feature.EnableDLRebranding); - const theme = useThemeType(); - const updatedLogo = theme === 'dark' ? darkLogo : lightLogo; - const logo = isEnabledRebranding ? updatedLogo : defaultLogoIcon; + const logo = theme === 'dark' ? darkLogo : lightLogo; const handleSigninError = (error: SdkError) => { // TODO: use code @@ -70,11 +64,7 @@ export const Signin = ({alternativeAuthOptions, logoIcon}: SigninProps) => { }, [errorMessage]); return ( - + { onChange={handleFormChange} onSubmit={handleSubmit} > - {isEnabledRebranding ? ( - - ) : ( - - - {i18n('title_product')} - - )} - + + {errorMessage && } diff --git a/src/ui/units/auth/components/Signup/Signup.scss b/src/ui/units/auth/components/Signup/Signup.scss index 4fa880ec69..cb4d2c5935 100644 --- a/src/ui/units/auth/components/Signup/Signup.scss +++ b/src/ui/units/auth/components/Signup/Signup.scss @@ -1,22 +1,13 @@ .dl-signup { $class: &; height: 100%; - background-color: var(--g-color-base-misc-light); &__form-container { background-color: var(--g-color-base-background); - border-radius: var(--g-border-radius-l); + border-radius: 32px; width: 720px; min-height: 200px; padding: 48px; - } - - &_rebranding { - background-color: unset; - - #{$class}__form-container { - box-shadow: 0 30px 100px 0 rgba(0, 0, 0, 0.25); - border-radius: 32px; - } + box-shadow: 0 30px 100px 0 rgba(0, 0, 0, 0.25); } } diff --git a/src/ui/units/auth/components/Signup/Signup.tsx b/src/ui/units/auth/components/Signup/Signup.tsx index 07c1236b8a..91cabf83ce 100644 --- a/src/ui/units/auth/components/Signup/Signup.tsx +++ b/src/ui/units/auth/components/Signup/Signup.tsx @@ -4,9 +4,7 @@ import {Alert, Flex, Text} from '@gravity-ui/uikit'; import block from 'bem-cn-lite'; import {I18n} from 'i18n'; import {useDispatch} from 'react-redux'; -import {Feature} from 'shared/types'; import {InterpolatedText} from 'ui/components/InterpolatedText/InterpolatedText'; -import {isEnabledFeature} from 'ui/utils/isEnabledFeature'; import { resetUserInfoFormValidation, @@ -54,11 +52,7 @@ export const Signup = () => { }; return ( - +