From 0466e695bd8fccfc91a1a2cd49f01997153aa07c Mon Sep 17 00:00:00 2001
From: VictorS67 <185000048@qq.com>
Date: Wed, 17 Jan 2024 23:23:57 -0500
Subject: [PATCH] update color theme

---
 packages/app/src/App.tsx                   | 13 +++--
 packages/app/src/components/AppGuesser.tsx | 63 ----------------------
 packages/app/src/theme.tsx                 | 28 ++++++++++
 3 files changed, 34 insertions(+), 70 deletions(-)
 delete mode 100644 packages/app/src/components/AppGuesser.tsx
 create mode 100644 packages/app/src/theme.tsx

diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index 7ef203d7..4157d377 100644
--- a/packages/app/src/App.tsx
+++ b/packages/app/src/App.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 import {
   RecoilRoot,
@@ -6,13 +6,12 @@ import {
   selector,
   useRecoilState,
   useRecoilValue,
-} from 'recoil';
+} from "recoil";
 
-import '@atlaskit/css-reset';
-import { AppGuesser } from './components/AppGuesser';
-import { EncreStudio } from './components/EncreStudio';
-import logo from './logo.svg';
-import './App.css';
+import "@atlaskit/css-reset";
+import { EncreStudio } from "./components/EncreStudio";
+import logo from "./logo.svg";
+import "./App.css";
 
 function App() {
   return (
diff --git a/packages/app/src/components/AppGuesser.tsx b/packages/app/src/components/AppGuesser.tsx
deleted file mode 100644
index ead3933e..00000000
--- a/packages/app/src/components/AppGuesser.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React, { FC, useState } from 'react';
-
-import { css } from '@emotion/react';
-import Box from '@mui/joy/Box';
-import Button from '@mui/joy/Button';
-import Textarea from '@mui/joy/Textarea';
-import clsx from 'clsx';
-import { useSetRecoilState } from 'recoil';
-
-import { userInputGuesserModalState } from '../state/userInput';
-
-const styles = css`
-  width: 100vw;
-  height: 100vh;
-  position: relative;
-  overflow: hidden;
-  z-index: 0;
-`;
-
-export const AppGuesser: FC = () => {
-  const [userInput, setUserInput] = useState('');
-  const setUserInputResult = useSetRecoilState(userInputGuesserModalState);
-
-  const handleInput = (e: any) => {
-    setUserInput(e.target.value);
-  };
-
-  const handleClick = (e: any) => {
-    if (userInput.length > 0) setUserInputResult(userInput);
-  };
-
-  return (
-    <div css={styles}>
-      <span>What would you like to create?</span>
-      <Textarea
-        placeholder="Type something here…"
-        onChange={handleInput}
-        minRows={3}
-        endDecorator={
-          <Box
-            className="guess-box-footer"
-            sx={{
-              display: 'flex',
-              gap: 'var(--Textarea-paddingBlock)',
-              pt: 'var(--Textarea-paddingBlock)',
-              borderTop: '1px solid',
-              borderColor: 'divider',
-              flex: 'auto',
-            }}
-          >
-            <Button sx={{ ml: 'auto' }} onClick={handleClick}>
-              Send
-            </Button>
-          </Box>
-        }
-        sx={{
-          width: 300,
-          pl: '10px',
-        }}
-      />
-    </div>
-  );
-};
diff --git a/packages/app/src/theme.tsx b/packages/app/src/theme.tsx
new file mode 100644
index 00000000..9b3042b8
--- /dev/null
+++ b/packages/app/src/theme.tsx
@@ -0,0 +1,28 @@
+import { createTheme } from "@atlaskit/theme";
+
+const lightThemeColors = {
+  text: "#FF0000",
+};
+
+const darkThemeColors = {
+  text: "#FF0000",
+};
+
+const lightTheme = createTheme(() => ({
+  canvasBGColor: '#F8F8F8',
+  canvasGridColor: '#49494A',
+
+  cardPriBGColor: '#FFFFFF',
+  cardSecBGColor: '#F0F0F0',
+  cardPriColor: '#005FB8'
+}));
+
+const darkTheme = createTheme(() => ({
+  canvasBGColor: '#202020',
+  canvasGridColor: '#474748',
+
+  cardPriBGColor: '#3D3D3D',
+  cardSecBGColor: '#212121'
+}));
+
+export { lightTheme, darkTheme };