style refine

lama_cleaner/app/src/components/Header/Header.tsx

@@ -1,27 +1,36 @@
 import { ArrowLeftIcon } from '@heroicons/react/outline'
 import React from 'react'
-import { useSetRecoilState } from 'recoil'
+import { useRecoilState } from 'recoil'
 import { fileState } from '../../store/Atoms'
 import Button from '../shared/Button'
 import Shortcuts from '../Shortcuts/Shortcuts'
 import useResolution from '../../hooks/useResolution'
+import { ThemeChanger } from './ThemeChanger'
 
 const Header = () => {
-  const setFile = useSetRecoilState(fileState)
+  const [file, setFile] = useRecoilState(fileState)
   const resolution = useResolution()
 
   const renderHeader = () => {
     return (
       <header>
-        <Button
-          icon={<ArrowLeftIcon />}
-          onClick={() => {
-            setFile(undefined)
-          }}
-        >
-          {resolution === 'desktop' ? 'Start New' : undefined}
-        </Button>
-        <Shortcuts />
+        <div style={{ visibility: file ? 'visible' : 'hidden' }}>
+          <Button
+            icon={<ArrowLeftIcon />}
+            onClick={() => {
+              setFile(undefined)
+            }}
+            style={{ border: 0 }}
+          >
+            {resolution === 'desktop' ? 'Start New' : undefined}
+          </Button>
+        </div>
+        <div className="header-icons-wrapper">
+          <div style={{ visibility: file ? 'visible' : 'hidden' }}>
+            <Shortcuts />
+          </div>
+          <ThemeChanger />
+        </div>
       </header>
     )
   }