improvements

This commit is contained in:
Jing Hua 2023-03-04 12:06:10 +08:00
parent 60401a491e
commit ae835c1791
5 changed files with 37 additions and 15 deletions

View file

@ -19,7 +19,7 @@
/>
<meta name="twitter:title" content="ChatGPTFreeApp" />
<meta name="twitter:card" content="summary_large_image" />
<title>ChatGPT Free</title>
<title>Free ChatGPT</title>
</head>
<body>
<div id="root"></div>

View file

@ -314,6 +314,7 @@ const EditView = ({
<button
className='btn relative btn-primary mr-2'
onClick={() => {
if (_content === '') return;
const updatedMessages: MessageInterface[] = JSON.parse(
JSON.stringify(messages)
);

View file

@ -60,7 +60,7 @@ const NewMessageButton = ({ messageIndex }: { messageIndex: number }) => {
};
return (
<div className='h-0 relative' key={messageIndex}>
<div className='h-0 w-0 relative' key={messageIndex}>
<div
className='absolute top-0 right-0 translate-x-1/2 translate-y-[-50%] text-gray-600 dark:text-white cursor-pointer bg-gray-200 dark:bg-gray-600/80 rounded-full p-1 text-sm hover:bg-gray-300 dark:hover:bg-gray-800/80 transition-bg duration-200'
onClick={addMessage}

View file

@ -107,7 +107,7 @@ const ConfigMenu = () => {
</div>
<input
type='text'
className='text-white p-3 text-sm border-none bg-gray-600 rounded-md p-0 m-0 w-full mr-0 h-8 focus:outline-none'
className='text-gray-800 dark:text-white p-3 text-sm border-none bg-gray-200 dark:bg-gray-600 rounded-md p-0 m-0 w-full mr-0 h-8 focus:outline-none'
value={_apiKey}
onChange={(e) => {
_setApiKey(e.target.value);
@ -132,6 +132,13 @@ const ConfigMenu = () => {
here
</a>
</div>
<div className='min-w-fit text-gray-900 dark:text-gray-300 text-sm mt-4'>
We prioritize the security of your API key and handle it with
utmost care. Your key is exclusively stored on your browser and
never shared with any third-party entity. It is solely used for
the intended purpose of accessing the OpenAI API and not for any
other unauthorized use.
</div>
</div>
<div className='flex items-center justify-center p-6 gap-4'>

View file

@ -12,26 +12,40 @@ const getOppositeTheme = (theme: Theme): Theme => {
}
};
const ThemeSwitcher = () => {
const [theme, setTheme] = useState<Theme>('dark');
const [theme, setTheme] = useState<Theme>();
const switchTheme = () => {
setTheme(getOppositeTheme(theme));
setTheme(getOppositeTheme(theme!));
};
useEffect(() => {
document.documentElement.className = theme;
const _theme = localStorage.getItem('theme');
if (_theme === 'light' || _theme === 'dark') {
setTheme(_theme);
} else {
setTheme('dark');
}
}, []);
useEffect(() => {
if (theme) {
document.documentElement.className = theme;
localStorage.setItem('theme', theme);
}
}, [theme]);
return (
<a
className='flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm'
onClick={switchTheme}
>
{theme === 'dark' ? <SunIcon /> : <MoonIcon />}
{getOppositeTheme(theme).charAt(0).toUpperCase() +
getOppositeTheme(theme).slice(1)}{' '}
mode
</a>
theme && (
<a
className='flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm'
onClick={switchTheme}
>
{theme === 'dark' ? <SunIcon /> : <MoonIcon />}
{getOppositeTheme(theme).charAt(0).toUpperCase() +
getOppositeTheme(theme).slice(1)}{' '}
mode
</a>
)
);
};