Merge pull request #784 from remap-keys/xmas-2023

Happy Xmas 2023.

src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SnackbarProvider } from 'notistack';
-import './App.css';
+// import './App.css';
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 import Configure from './components/configure/Configure.container';
 import Hid from './services/hid/ui/Hid';

src/components/catalog/header/Header.tsx

@@ -53,7 +53,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
           </div>
           <div className="catalog-header-logo">
             <a href="/">
-              <Logo width={100} />
+              <Logo width={100} color={'#2d6858'} />
             </a>
           </div>
           <div className="catalog-header-buttons">

src/components/configure/header/Header.tsx

@@ -223,7 +223,11 @@ export default class Header extends React.Component<HeaderProps, HeaderState> {
               onMouseEnter={this.startLogoAnim.bind(this)}
               onMouseLeave={this.endLogoAnim.bind(this)}
             >
-              <Logo width={100} animation={this.state.logoAnimation} />
+              <Logo
+                width={100}
+                animation={this.state.logoAnimation}
+                color={'#2d6858'}
+              />
             </a>
           </div>
 

src/components/keyboards/header/Header.tsx

@@ -98,7 +98,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
     return (
       <header className="keyboards-header">
         <a href="/" className="keyboards-header-logo">
-          <Logo width={100} />
+          <Logo width={100} color={'#2d6858'} />
         </a>
         <div className="keyboards-header-menu-button">
           {this.renderAvatarIcon()}

src/components/organizations/header/Header.tsx

@@ -98,7 +98,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
     return (
       <header className="organizations-header">
         <a href="/" className="organizations-header-logo">
-          <Logo width={100} />
+          <Logo width={100} color={'#2d6858'} />
         </a>
         <div className="organizations-header-menu-button">
           {this.renderAvatarIcon()}

src/components/top/Top.tsx

@@ -11,6 +11,7 @@ import textMatrix from '../../assets/images/top/text-matrix.png';
 import macro from '../../assets/images/top/macro.png';
 import firmwareWriting from '../../assets/images/top/firmware-writing.png';
 import buildFirmware from '../../assets/images/top/build-firmware.png';
+import xmasLogo from '../../assets/images/top/xmas-logo.svg';
 import Footer from '../common/footer/Footer.container';
 import { Logo } from '../common/logo/Logo';
 import './Top.scss';
@@ -124,7 +125,7 @@ export default function Top(props: TopPropsType) {
               color="textPrimary"
               gutterBottom
             >
-              <Logo width={256} color={'black'} />
+              <img src={xmasLogo} height={64} alt="Remap Xmas Logo" />
             </Typography>
             <Typography
               variant="h5"

src/index.tsx

@@ -11,6 +11,7 @@ import reportWebVitals from './reportWebVitals';
 import { errorReportingLogger } from './utils/ErrorReportingLogger';
 import OGP from './components/common/ogp/OGP.container';
 import { HelmetProvider } from 'react-helmet-async';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 const store = createStore(
   reducers,
@@ -20,12 +21,22 @@ const store = createStore(
   )
 );
 
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#2d6858',
+    },
+  },
+});
+
 ReactDOM.render(
   <Provider store={store}>
     <React.StrictMode>
       <HelmetProvider>
         <OGP />
-        <App />
+        <ThemeProvider theme={theme}>
+          <App />
+        </ThemeProvider>
       </HelmetProvider>
     </React.StrictMode>
   </Provider>,