Added Comet Theme

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
 
 <!-- MARKDOWN LINKS & IMAGES -->
 <!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->

package.json

@@ -110,6 +110,6 @@
     ]
   },
   "engines": {
-    "node": "^19"
+    "node": "^20"
   }
 }

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;
       },

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;

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;
+}

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 (
       <Menu>
+        <Menu.Item onClick={() => handleChangeTheme('comet')}>
+          <Flex>
+            <Flex.Item marginRight={2}>
+              <img
+                style={{ borderRadius: '999px' }}
+                alt="comet logo"
+                src={CometLogo}
+                width={21}
+                height={21}
+              />
+            </Flex.Item>
+            <Flex.Item>Comet theme</Flex.Item>
+          </Flex>
+        </Menu.Item>
         <Menu.Item onClick={() => handleChangeTheme('snek')}>
           <Flex>
             <Flex.Item marginRight={2}>

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;