diff --git a/README.md b/README.md index e5866174a..1b20c6417 100644 --- a/README.md +++ b/README.md @@ -51,7 +51,7 @@ Contributions are what makes the open source community such an amazing place to ## License -Distributed under the MIT License. See `LICENSE` for more information. +Distributed under the MIT License. See `LICENSE` for more information diff --git a/package.json b/package.json index d1726f42b..3995dafb0 100644 --- a/package.json +++ b/package.json @@ -110,6 +110,6 @@ ] }, "engines": { - "node": "^19" + "node": "^20" } } diff --git a/src/App.tsx b/src/App.tsx index 08d8e3dda..12e0236ec 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -63,6 +63,7 @@ export const ApplicationInitializer: React.FC = () => { light: `#F0F2F5`, hosky: '#1D1D1D', snek: '#1D1D1D', + comet: '#ED6D52', get system() { return isDarkOsTheme() ? this.dark : this.light; }, diff --git a/src/assets/images/comet-bg.png b/src/assets/images/comet-bg.png new file mode 100644 index 000000000..bdeb60872 Binary files /dev/null and b/src/assets/images/comet-bg.png differ diff --git a/src/assets/styles/styles.less b/src/assets/styles/styles.less index 6f7895bde..1b38d4f50 100644 --- a/src/assets/styles/styles.less +++ b/src/assets/styles/styles.less @@ -5,6 +5,7 @@ @import './themes/hosky.less'; @import './themes/system'; @import './variables/gradients.less'; +@import './themes/comet.less'; :root { --w3m-z-index: 1001 !important; diff --git a/src/assets/styles/themes/comet.less b/src/assets/styles/themes/comet.less new file mode 100644 index 000000000..bf68c9af6 --- /dev/null +++ b/src/assets/styles/themes/comet.less @@ -0,0 +1,80 @@ +@import '~@ergolabs/ui-kit/dist/styles/colors/colors.dark'; +@import '~@ergolabs/ui-kit/dist/styles/variables.dark'; +@import '~@ergolabs/ui-kit/dist/styles/variables.light'; + +.comet { + @comet-primary-color: #ED6D52; + @comet-primary-color-hover: #CC412A; + @comet-secondary-color: #E05B3B; + @comet-grey-color: #BAB3B0; + + + + .darkTheme(); + --spectrum-glow-image: url("../../images/comet-bg.png"); + --spectrum-glow-image-width: 100%; + + --spectrum-primary-color: @comet-primary-color; + --spectrum-primary-color-hover: @comet-primary-color-hover; + --spectrum-primary-color-active: @comet-primary-color; + + --spectrum-connect-wallet-btn-color: @comet-grey-color !important; + --spectrum-connect-wallet-btn-bg: rgba(237, 109, 82 , 0.5); + --spectrum-connect-wallet-btn-border: transparent; + + + + + --spectrum-header-gradient-background: @comet-secondary-color; + + --spectrum-claim-spf-background: @comet-primary-color; + + .ant-progress-bg { + background: linear-gradient(264.34deg, @comet-primary-color 2.83%, @comet-secondary-color 98.67%); + } + + + + .ant-tabs-tab.ant-tabs-tab-active { + outline: 2px solid black !important; + } + + + + .ant-tabs.ant-tabs_glass .ant-tabs-nav-list { + border: 2px solid black !important; + } + + + header { + .ant-tabs { + border-radius: var(--spectrum-border-radius-l); + } + } + + + .comet-theme-images { + display: block !important; + } + + .social-links { + svg { + color: @comet-primary-color; + } + } + + .connect-wallet-btn { + color: @comet-secondary-color !important; + } + + --spectrum-yield-farming-badge-background: @comet-grey-color; + + --spectrum-logo-color: var(--spectrum-primary-text); + --spectrum-asset-box-border-color: #303030; + --spectrum-progress-standart-background-bg: #141414; + --spectrum-text-white: #dbdbdb; + --spectrum-text-teriary: #dbdbdb; + --spectrum-ido-notifcation-background: #37306d; + --spectrum-claim-spf-notifcation-background: var(--spectrum-claim-spf-background); + --spectrum-claim-spf-box-border-color: #635ca4; +} diff --git a/src/components/ThemeSwitch/ThemeSwitch.tsx b/src/components/ThemeSwitch/ThemeSwitch.tsx index d72316b67..987bef65c 100644 --- a/src/components/ThemeSwitch/ThemeSwitch.tsx +++ b/src/components/ThemeSwitch/ThemeSwitch.tsx @@ -12,6 +12,7 @@ import { user } from '@spectrumlabs/analytics'; import { FC, useCallback } from 'react'; import { Theme, useApplicationSettings } from '../../context'; +import CometLogo from './comet-logo.png'; import HoskyLogo from './hoski-logo.jpeg'; import SnekLogo from './snek-logo.jpeg'; @@ -34,6 +35,20 @@ export const ThemeSwitch: FC = () => { const DropdownOverlay = (): JSX.Element => { return ( + handleChangeTheme('comet')}> + + + comet logo + + Comet theme + + handleChangeTheme('snek')}> diff --git a/src/components/ThemeSwitch/comet-logo.png b/src/components/ThemeSwitch/comet-logo.png new file mode 100644 index 000000000..445fa5fe9 Binary files /dev/null and b/src/components/ThemeSwitch/comet-logo.png differ diff --git a/src/context/AppicationSettingsContext.tsx b/src/context/AppicationSettingsContext.tsx index aa04be67b..20762a696 100644 --- a/src/context/AppicationSettingsContext.tsx +++ b/src/context/AppicationSettingsContext.tsx @@ -8,7 +8,7 @@ import { DEFAULT_LOCALE, SupportedLocale } from '../common/constants/locales'; import { localStorageManager } from '../common/utils/localStorageManager'; import { isDarkOsTheme } from '../utils/osTheme'; -export type Theme = 'light' | 'dark' | 'system' | 'snek' | 'hosky'; +export type Theme = 'light' | 'dark' | 'system' | 'snek' | 'hosky' | 'comet'; export type Settings = { explorerUrl: string;