style refine

lama_cleaner/app/src/components/Header/Header.scss

@@ -1,16 +1,25 @@
 header {
-  grid-area: main-content;
+  height: 60px;
   padding: 1rem 2rem;
   position: absolute;
   top: 0;
-  display: grid;
-  grid-template-columns: repeat(2, max-content);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   width: 100%;
-  grid-template-columns: repeat(2, auto);
+  z-index: 20;
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid rgb(100, 100, 120, 0.2);
 }
 
 .shortcuts {
-  justify-self: end;
-  margin-right: 4rem;
   z-index: 1;
 }
+
+.header-icons-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  justify-self: end;
+}

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>
     )
   }

lama_cleaner/app/src/components/Header/ThemeChanger.scss

@@ -0,0 +1,18 @@
+.theme-toggle-ui {
+  z-index: 10;
+  transition: all 0.2s ease-in;
+  user-select: none;
+
+  .theme-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    outline: none;
+
+    svg {
+      width: 22px;
+      height: 22px;
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+import React, { useEffect } from 'react'
+import { atom, useRecoilState } from 'recoil'
+import { SunIcon, MoonIcon } from '@heroicons/react/outline'
+
+export const themeState = atom({
+  key: 'themeState',
+  default: 'light',
+})
+
+export const ThemeChanger = () => {
+  const [theme, setTheme] = useRecoilState(themeState)
+
+  useEffect(() => {
+    const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
+    if (darkThemeMq.matches) {
+      setTheme('dark')
+    } else {
+      setTheme('light')
+    }
+  }, [])
+
+  const themeSwitchHandler = () => {
+    const newTheme = theme === 'light' ? 'dark' : 'light'
+    setTheme(newTheme)
+  }
+
+  return (
+    <div className="theme-toggle-ui">
+      <div
+        className="theme-btn"
+        onClick={themeSwitchHandler}
+        role="button"
+        tabIndex={0}
+        aria-hidden="true"
+      >
+        {theme === 'light' ? (
+          <MoonIcon />
+        ) : (
+          <SunIcon style={{ color: '#ffcc00' }} />
+        )}
+      </div>
+    </div>
+  )
+}