From a5f450d80f5da7ee53e1028007b3515f13af29a6 Mon Sep 17 00:00:00 2001
From: Elias Schneider <login@eliasschneider.com>
Date: Wed, 11 May 2022 15:32:28 +0200
Subject: [PATCH] Add dark mode toggle

---
 .setup/data/collections.ts                  |  2 +-
 src/components/navBar/ActionAvatar.tsx      |  9 +++++--
 src/components/navBar/ToggleThemeButton.tsx | 27 ++++++++-------------
 src/pages/_app.tsx                          |  1 -
 4 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/.setup/data/collections.ts b/.setup/data/collections.ts
index 0e6bfd34..c86ada94 100644
--- a/.setup/data/collections.ts
+++ b/.setup/data/collections.ts
@@ -5,7 +5,7 @@ export default [
     $write: [],
     name: "Shares",
     enabled: true,
-    permission: "collection",
+    permission: "document",
     attributes: [
       {
         key: "securityID",
diff --git a/src/components/navBar/ActionAvatar.tsx b/src/components/navBar/ActionAvatar.tsx
index e73182db..d49f4507 100644
--- a/src/components/navBar/ActionAvatar.tsx
+++ b/src/components/navBar/ActionAvatar.tsx
@@ -1,7 +1,8 @@
-import { ActionIcon, Avatar, Menu } from "@mantine/core";
+import { ActionIcon, Avatar, Menu, Switch } from "@mantine/core";
 import { NextLink } from "@mantine/next";
-import { DoorExit, Link } from "tabler-icons-react";
+import { DoorExit, Link, Moon } from "tabler-icons-react";
 import aw from "../../utils/appwrite.util";
+import ToggleThemeButton from "./ToggleThemeButton";
 
 const ActionAvatar = () => {
   return (
@@ -36,6 +37,10 @@ const ActionAvatar = () => {
       >
         Sign out
       </Menu.Item>
+      <Menu.Label>Settings</Menu.Label>
+      <Menu.Item icon={<Moon size={14} />}>
+        <ToggleThemeButton />
+      </Menu.Item>
     </Menu>
   );
 };
diff --git a/src/components/navBar/ToggleThemeButton.tsx b/src/components/navBar/ToggleThemeButton.tsx
index c04db742..6542d7ba 100644
--- a/src/components/navBar/ToggleThemeButton.tsx
+++ b/src/components/navBar/ToggleThemeButton.tsx
@@ -1,25 +1,18 @@
-import { ActionIcon, useMantineColorScheme } from "@mantine/core";
-import { Sun, MoonStars } from "tabler-icons-react";
+import { Switch, useMantineColorScheme } from "@mantine/core";
 
 const ToggleThemeButton = () => {
   const { colorScheme, toggleColorScheme } = useMantineColorScheme();
 
   return (
-    <ActionIcon
-      onClick={() => toggleColorScheme()}
-      sx={(theme) => ({
-        backgroundColor:
-          theme.colorScheme === "dark"
-            ? theme.colors.dark[6]
-            : theme.colors.gray[0],
-        color:
-          theme.colorScheme === "dark"
-            ? theme.colors.yellow[4]
-            : theme.colors.violet,
-      })}
-    >
-      {colorScheme === "dark" ? <Sun size={18} /> : <MoonStars size={18} />}
-    </ActionIcon>
+    <Switch
+      size="sm"
+      checked={colorScheme == "dark"}
+      onClick={(v) =>
+        toggleColorScheme(v.currentTarget.checked ? "dark" : "light")
+      }
+      onLabel="ON"
+      offLabel="OFF"
+    />
   );
 };
 
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 204c367a..cfe50be2 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,7 +1,6 @@
 import {
   ColorScheme,
   Container,
-  Group,
   LoadingOverlay,
   MantineProvider,
   Stack,