Complete GUI Refactor # Patch 1

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

@@ -1,29 +1,18 @@
-.theme-changer {
-  border: none;
-  border-radius: 50%;
-  width: 30px;
-  height: 30px;
-  background: transparent;
-  box-shadow: inset 4px 10px 0px rgb(80, 80, 80);
-  transform: rotate(-75deg);
-  transition: all 0.2s ease-in;
-  margin: 1rem;
+.theme-toggle-ui {
   position: absolute;
-  right: 1rem;
-  top: 0.25rem;
+  right: 2.5rem;
+  top: 1rem;
   z-index: 10;
-  outline: none;
+  transition: all 0.2s ease-in;
+  user-select: none;
 
-  &:hover {
+  .theme-btn {
     cursor: pointer;
-  }
-}
-
-[data-theme='dark'] {
-  .theme-changer {
-    background: rgb(255, 190, 0);
-    box-shadow: none;
-    transform: rotate(-75deg);
     outline: none;
+
+    svg {
+      width: 36px;
+      height: 36px;
+    }
   }
 }

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

@@ -1,5 +1,6 @@
 import React from 'react'
 import { atom, useRecoilState } from 'recoil'
+import { SunIcon, MoonIcon } from '@heroicons/react/outline'
 
 export const themeState = atom({
   key: 'themeState',
@@ -15,11 +16,20 @@ export const ThemeChanger = () => {
   }
 
   return (
-    <button
-      type="button"
-      className="theme-changer"
-      onClick={themeSwitchHandler}
-      aria-label="Switch Theme"
-    />
+    <div className="theme-toggle-ui">
+      <div
+        className="theme-btn"
+        onClick={themeSwitchHandler}
+        role="button"
+        tabIndex={0}
+        aria-hidden="true"
+      >
+        {theme === 'light' ? (
+          <MoonIcon />
+        ) : (
+          <SunIcon style={{ color: 'rgb(255, 190, 0)' }} />
+        )}
+      </div>
+    </div>
   )
 }