diff --git a/components/DialogBox.js b/components/DialogBox.js index c46c5e4..33d3a53 100644 --- a/components/DialogBox.js +++ b/components/DialogBox.js @@ -10,17 +10,33 @@ import { Input, ModalFooter, Button, + Switch, + Box, + Flex } from "@chakra-ui/react"; +import { useState } from "react"; + function DialogBox({isOpen, onClose, newChat}) { + // State for theme toggle + const [darkMode, setDarkMode] = useState(true); + return ( <> - + - + + + setDarkMode(!darkMode)} + colorScheme="blue" + size="sm" + /> + @@ -36,13 +52,13 @@ function DialogBox({isOpen, onClose, newChat}) { > Enter email of the recipient - + - @@ -51,4 +67,4 @@ function DialogBox({isOpen, onClose, newChat}) { ); } -export default DialogBox; +export default DialogBox; \ No newline at end of file diff --git a/components/Login.js b/components/Login.js index cdb30e6..1cf6bb2 100644 --- a/components/Login.js +++ b/components/Login.js @@ -1,19 +1,23 @@ import { ChatIcon } from "@chakra-ui/icons" -import { Box, Button, Center, Stack, useToast, Flex, Text } from "@chakra-ui/react" +import { Box, Button, Center, Stack, useToast, Flex, Text, Switch } from "@chakra-ui/react" import { useSignInWithGoogle } from "react-firebase-hooks/auth" import Head from "next/head" import { auth } from "../firebaseconfig" +import { useState } from "react" const Login = () => { const toast = useToast(); const [signInWithGoogle] = useSignInWithGoogle(auth); + + // State for theme toggle + const [darkMode, setDarkMode] = useState(true); return ( <> Login to Comms -
+
  • @@ -26,12 +30,12 @@ const Login = () => {
-
+
- Comms + Comms { rounded = "xl" > - + -
+ + setDarkMode(!darkMode)} + colorScheme="blue" + size="sm" + /> + {darkMode ? "Dark" : "Light"} Mode + ) } diff --git a/components/Sidebar.js b/components/Sidebar.js index fa58d7d..e43e611 100644 --- a/components/Sidebar.js +++ b/components/Sidebar.js @@ -1,5 +1,7 @@ +import React, { useState } from "react" // import { CloseIcon } from "@chakra-ui/icons" -import { Avatar, Button, Flex, Text, useDisclosure } from "@chakra-ui/react" +import { Avatar, Button, Flex, Text, useDisclosure, Switch, Box } from "@chakra-ui/react" +import { motion } from "framer-motion" import { useAuthState } from 'react-firebase-hooks/auth'; import { auth, db } from "../firebaseconfig"; import { useCollection } from 'react-firebase-hooks/firestore'; @@ -7,6 +9,7 @@ import { collection, addDoc } from "firebase/firestore"; import getOtherEmail from "../utils/getOtherEmail"; import {useRouter} from "next/router"; import DialogBox from "./DialogBox.js"; +import { useTheme } from "./ThemeProvider"; const Sidebar = () => { const [user] = useAuthState(auth); @@ -15,6 +18,11 @@ const Sidebar = () => { const router = useRouter(); const { isOpen, onClose, onOpen } = useDisclosure(); + // State for sidebar collapse + const [isCollapsed, setIsCollapsed] = useState(false); + // Use theme from context + const { darkMode, toggleTheme, themeColors } = useTheme(); + const redirect = (id) => { router.push(`/chat/${id}`); } @@ -24,10 +32,10 @@ const Sidebar = () => { chats?.filter(chat => chat.users.includes(user.email)) .map ( chat => - redirect(chat.id)}> - - {getOtherEmail(chat.users, user)} + + {!isCollapsed && {getOtherEmail(chat.users, user)}} ) ) @@ -41,20 +49,22 @@ const Sidebar = () => { } } - // const closeSidebar = () => { - // console.log("close sidebar"); - // } - return ( <> {} + { align = "center" p = {3} > - - {user.displayName} + + {!isCollapsed && {user.displayName}} + + + + - {/* } size = "sm" color = "#1E293B" onClick={closeSidebar()}/> */} - + {!isCollapsed && ( + + )} {chatList()} + ) } diff --git a/components/ThemeProvider.js b/components/ThemeProvider.js new file mode 100644 index 0000000..5025de6 --- /dev/null +++ b/components/ThemeProvider.js @@ -0,0 +1,43 @@ +import React, { createContext, useState, useContext } from "react"; +import { Box } from "@chakra-ui/react"; + +const ThemeContext = createContext(); + +export const useTheme = () => { + return useContext(ThemeContext); +}; + +export const ThemeProvider = ({ children }) => { + const [darkMode, setDarkMode] = useState(true); + + const toggleTheme = () => { + setDarkMode(!darkMode); + }; + + // Define theme colors based on dark mode + const themeColors = { + background: darkMode ? "gray.900" : "white", + text: darkMode ? "white" : "black", + sidebarBg: darkMode ? "gray.900" : "white", + sidebarBorder: darkMode ? "gray.700" : "gray.300", + sidebarHover: darkMode ? "gray.700" : "gray.200", + topbarBorder: darkMode ? "gray.700" : "gray.300", + messageSenderBg: darkMode ? "gray.700" : "gray.100", + messageReceiverBg: darkMode ? "blue.500" : "blue.100", + newChatButtonBg: darkMode ? "blue.500" : "blue.100", + newChatButtonColor: darkMode ? "white" : "blue.900", + newChatButtonHover: darkMode ? "blue.600" : "blue.200" + }; + + return ( + + + {children} + + + ); +}; \ No newline at end of file diff --git a/next-env.d.ts b/next-env.d.ts new file mode 100644 index 0000000..a4a7b3f --- /dev/null +++ b/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information. diff --git a/package-lock.json b/package-lock.json index f737f0e..99a3b31 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "sass": "^1.79.5" }, "devDependencies": { + "@types/react": "18.3.26", "eslint": "^8.57.1", "eslint-config-next": "^14.2.15" } @@ -208,6 +209,7 @@ "resolved": "https://registry.npmjs.org/@chakra-ui/react/-/react-2.10.2.tgz", "integrity": "sha512-TfIHTqTlxTHYJZBtpiR5EZasPUrLYKJxdbHkdOJb5G1OQ+2c5kKl5XA7c2pMtsEptzb7KxAAIB62t3hxdfWp1w==", "license": "MIT", + "peer": true, "dependencies": { "@chakra-ui/hooks": "2.4.2", "@chakra-ui/styled-system": "2.11.2", @@ -233,6 +235,7 @@ "resolved": "https://registry.npmjs.org/@chakra-ui/styled-system/-/styled-system-2.11.2.tgz", "integrity": "sha512-y++z2Uop+hjfZX9mbH88F1ikazPv32asD2er56zMJBemUAzweXnHTpiCQbluEDSUDhqmghVZAdb+5L4XLbsRxA==", "license": "MIT", + "peer": true, "dependencies": { "@chakra-ui/utils": "2.2.2", "csstype": "^3.1.2" @@ -337,6 +340,7 @@ "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.3.tgz", "integrity": "sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==", "license": "MIT", + "peer": true, "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.12.0", @@ -380,6 +384,7 @@ "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.13.0.tgz", "integrity": "sha512-tkzkY7nQhW/zC4hztlwucpT8QEZ6eUzpXDRhww/Eej4tFfO0FxQYWRyg/c5CCXa4d/f174kqeXYjuQRnhzf6dA==", "license": "MIT", + "peer": true, "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.12.0", @@ -457,7 +462,6 @@ "integrity": "sha512-fTxvnS1sRMu3+JjXwJG0j/i4RT9u4qJ+lqS/yCGap4lH4zZGzQ7tu+xZqQmcMZq5OBZDL4QRxQzRjkWcGt8IVw==", "dev": true, "license": "Apache-2.0", - "peer": true, "dependencies": { "@eslint/object-schema": "^2.1.4", "debug": "^4.3.1", @@ -473,7 +477,6 @@ "integrity": "sha512-8I2Q8ykA4J0x0o7cg67FPVnehcqWTBehu/lmY+bolPFHGjh49YzGBMXTvpqVgEbBdvNCSxj6iFgiIyHzf03lzg==", "dev": true, "license": "Apache-2.0", - "peer": true, "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } @@ -524,7 +527,6 @@ "integrity": "sha512-eohesHH8WFRUprDNyEREgqP6beG6htMeUYeCpkEgBCieCMme5r9zFWjzAJp//9S+Kub4rqE+jXe9Cp1a7IYIIA==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } @@ -535,7 +537,6 @@ "integrity": "sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==", "dev": true, "license": "Apache-2.0", - "peer": true, "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } @@ -546,7 +547,6 @@ "integrity": "sha512-vH9PiIMMwvhCx31Af3HiGzsVNULDbyVkHXwlemn/B0TFj/00ho3y55efXrUZTfQipxoHC5u4xq6zblww1zm1Ig==", "dev": true, "license": "Apache-2.0", - "peer": true, "dependencies": { "levn": "^0.4.1" }, @@ -597,6 +597,7 @@ "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.10.13.tgz", "integrity": "sha512-OZiDAEK/lDB6xy/XzYAyJJkaDqmQ+BCtOEPLqFvxWKUz5JbBmej7IiiRHdtiIOD/twW7O5AxVsfaaGA/V1bNsA==", "license": "Apache-2.0", + "peer": true, "dependencies": { "@firebase/component": "0.6.9", "@firebase/logger": "0.4.2", @@ -654,6 +655,7 @@ "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.2.43.tgz", "integrity": "sha512-HM96ZyIblXjAC7TzE8wIk2QhHlSvksYkQ4Ukh1GmEenzkucSNUmUX4QvoKrqeWsLEQ8hdcojABeCV8ybVyZmeg==", "license": "Apache-2.0", + "peer": true, "dependencies": { "@firebase/app": "0.10.13", "@firebase/component": "0.6.9", @@ -666,7 +668,8 @@ "version": "0.9.2", "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.9.2.tgz", "integrity": "sha512-oMEZ1TDlBz479lmABwWsWjzHwheQKiAgnuKxE0pz0IXCVx7/rtlkx1fQ6GfgK24WCrxDKMplZrT50Kh04iMbXQ==", - "license": "Apache-2.0" + "license": "Apache-2.0", + "peer": true }, "node_modules/@firebase/auth": { "version": "1.7.9", @@ -1087,6 +1090,7 @@ "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.10.0.tgz", "integrity": "sha512-xKtx4A668icQqoANRxyDLBLz51TAbDP9KRfpbKGxiCAW346d0BeJe5vN6/hKxxmWwnZ0mautyv39JxviwwQMOQ==", "license": "Apache-2.0", + "peer": true, "dependencies": { "tslib": "^2.1.0" } @@ -1154,7 +1158,6 @@ "integrity": "sha512-2cbWIHbZVEweE853g8jymffCA+NCMiuqeECeBBLm8dg2oFdjuGJhgN4UAbI+6v0CKbbhvtXA4qV8YR5Ji86nmw==", "dev": true, "license": "Apache-2.0", - "peer": true, "engines": { "node": ">=18.18.0" } @@ -1165,7 +1168,6 @@ "integrity": "sha512-KSPA4umqSG4LHYRodq31VDwKAvaTF4xmVlzM8Aeh4PlU1JQ3IG0wiA8C25d3RQ9nJyM3mBHyI53K06VVL/oFFg==", "dev": true, "license": "Apache-2.0", - "peer": true, "dependencies": { "@humanfs/core": "^0.19.0", "@humanwhocodes/retry": "^0.3.0" @@ -1218,7 +1220,6 @@ "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==", "dev": true, "license": "Apache-2.0", - "peer": true, "engines": { "node": ">=18.18" }, @@ -1923,16 +1924,14 @@ "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@types/json-schema": { "version": "7.0.15", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@types/json5": { "version": "0.0.29", @@ -1971,6 +1970,25 @@ "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==", "license": "MIT" }, + "node_modules/@types/prop-types": { + "version": "15.7.15", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz", + "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==", + "devOptional": true, + "license": "MIT" + }, + "node_modules/@types/react": { + "version": "18.3.26", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.26.tgz", + "integrity": "sha512-RFA/bURkcKzx/X9oumPG9Vp3D3JUgus/d0b67KB0t5S/raciymilkOa66olh78MUI92QLbEJevO7rvqU/kjwKA==", + "devOptional": true, + "license": "MIT", + "peer": true, + "dependencies": { + "@types/prop-types": "*", + "csstype": "^3.0.2" + } + }, "node_modules/@typescript-eslint/scope-manager": { "version": "8.9.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.9.0.tgz", @@ -2020,7 +2038,6 @@ "integrity": "sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "ajv": "^6.12.4", "debug": "^4.3.2", @@ -2068,7 +2085,6 @@ "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "color-convert": "^2.0.1" }, @@ -2085,7 +2101,6 @@ "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" @@ -2103,7 +2118,6 @@ "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "color-name": "~1.1.4" }, @@ -2116,8 +2130,7 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@typescript-eslint/type-utils/node_modules/eslint": { "version": "9.12.0", @@ -2187,7 +2200,6 @@ "integrity": "sha512-14dSvlhaVhKKsa9Fx1l8A17s7ah7Ef7wCakJ10LYk6+GYmP9yDti2oq2SEwcyndt6knfcZyhyxwY3i9yL78EQw==", "dev": true, "license": "BSD-2-Clause", - "peer": true, "dependencies": { "esrecurse": "^4.3.0", "estraverse": "^5.2.0" @@ -2205,7 +2217,6 @@ "integrity": "sha512-Q7lok0mqMUSf5a/AdAZkA5a/gHcO6snwQClVNNvFKCAVlxXucdU8pKydU5ZVZjBx5xr37vGbFFWtLQYreLzrZg==", "dev": true, "license": "Apache-2.0", - "peer": true, "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" }, @@ -2219,7 +2230,6 @@ "integrity": "sha512-upbkBJbckcCNBDBDXEbuhjbP68n+scUd3k/U2EkyM9nw+I/jPiL4cLF/Al06CF96wRltFda16sxDFrxsI1v0/g==", "dev": true, "license": "BSD-2-Clause", - "peer": true, "dependencies": { "acorn": "^8.12.0", "acorn-jsx": "^5.3.2", @@ -2238,7 +2248,6 @@ "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "flat-cache": "^4.0.0" }, @@ -2252,7 +2261,6 @@ "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "flatted": "^3.2.9", "keyv": "^4.5.4" @@ -2267,7 +2275,6 @@ "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=18" }, @@ -2281,7 +2288,6 @@ "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=8" } @@ -2292,7 +2298,6 @@ "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "has-flag": "^4.0.0" }, @@ -2434,6 +2439,7 @@ "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==", "dev": true, "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -2805,9 +2811,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001668", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001668.tgz", - "integrity": "sha512-nWLrdxqCdblixUO+27JtGJJE/txpJlyUy5YN1u53wLZkP0emYCo5zgS6QYft7VUYR42LGgi/S5hdLZTrnyIddw==", + "version": "1.0.30001750", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001750.tgz", + "integrity": "sha512-cuom0g5sdX6rw00qOoLNSFCJ9/mYIsuSOA+yzpDw8eopiFqcVwQvZHqov0vmEighRxX++cfC0Vg1G+1Iy/mSpQ==", "funding": [ { "type": "opencollective", @@ -3469,6 +3475,7 @@ "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", @@ -3610,6 +3617,7 @@ "integrity": "sha512-U+BLn2rqTTHnc4FL3FJjxaXptTxmf9sNftJK62XLz4+GxG3hLHm/SUNaaXP5Y4uTiuYoL5YLy4JBCJe3+t8awQ==", "dev": true, "license": "BSD-2-Clause", + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.9.0", "@typescript-eslint/types": "8.9.0", @@ -3725,6 +3733,7 @@ "integrity": "sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@rtsao/scc": "^1.1.0", "array-includes": "^3.1.8", @@ -4206,6 +4215,7 @@ "resolved": "https://registry.npmjs.org/firebase/-/firebase-10.14.1.tgz", "integrity": "sha512-0KZxU+Ela9rUCULqFsUUOYYkjh7OM1EWdIfG6///MtXd0t2/uUIf0iNV5i0KariMhRQ5jve/OY985nrAXFaZeQ==", "license": "Apache-2.0", + "peer": true, "dependencies": { "@firebase/analytics": "0.10.8", "@firebase/analytics-compat": "0.2.14", @@ -4303,6 +4313,7 @@ "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.11.8.tgz", "integrity": "sha512-mnGQNEoz99GtFXBBPw+Ag5K4FcfP5XrXxrxHz+iE4Lmg7W3sf2gKmGuvfkZCW/yIfcdv5vJd6KiSPETH1Pw68Q==", "license": "MIT", + "peer": true, "dependencies": { "tslib": "^2.4.0" }, @@ -5998,6 +6009,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", "license": "MIT", + "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -6022,6 +6034,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", "license": "MIT", + "peer": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" @@ -6386,6 +6399,7 @@ "resolved": "https://registry.npmjs.org/sass/-/sass-1.79.5.tgz", "integrity": "sha512-W1h5kp6bdhqFh2tk3DsI771MoEJjvrSY/2ihJRJS4pjIyfJCw0nTsxqhnrUzaLMOJjFchj8rOvraI/YUVjtx5g==", "license": "MIT", + "peer": true, "dependencies": { "@parcel/watcher": "^2.4.1", "chokidar": "^4.0.0", diff --git a/package.json b/package.json index 3687a85..c41a3ed 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "sass": "^1.79.5" }, "devDependencies": { + "@types/react": "18.3.26", "eslint": "^8.57.1", "eslint-config-next": "^14.2.15" } diff --git a/pages/_app.js b/pages/_app.js index f0db499..ffeb402 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -3,6 +3,7 @@ import { useAuthState } from 'react-firebase-hooks/auth'; import { auth } from "../firebaseconfig"; import Login from "../components/Login"; import '../styles/globals.scss'; +import { ThemeProvider } from "../components/ThemeProvider"; function MyApp({ Component, pageProps }) { const [user, loading, error] = useAuthState(auth); @@ -10,9 +11,11 @@ function MyApp({ Component, pageProps }) { if(loading) { return ( -
- -
+ +
+ +
+ ) } @@ -20,16 +23,20 @@ function MyApp({ Component, pageProps }) { if(!user) { return ( - + + + ) } return ( - + + + ) } -export default MyApp +export default MyApp \ No newline at end of file diff --git a/pages/chat/[id].js b/pages/chat/[id].js index 92cd2ac..761f0d4 100644 --- a/pages/chat/[id].js +++ b/pages/chat/[id].js @@ -1,5 +1,5 @@ import { ArrowRightIcon } from "@chakra-ui/icons" -import { Avatar, Flex, Heading, IconButton, Input, Button, Text, FormControl, useToast } from "@chakra-ui/react" +import { Avatar, Flex, Heading, IconButton, Input, Button, Text, FormControl, useToast, useColorModeValue } from "@chakra-ui/react" import Sidebar from "../../components/Sidebar" import Head from "next/head" import { useAuthState } from 'react-firebase-hooks/auth'; @@ -10,17 +10,19 @@ import { useCollectionData, useDocumentData } from 'react-firebase-hooks/firesto import { collection, orderBy, query, doc, addDoc, serverTimestamp } from "firebase/firestore" import getOtherEmail from "../../utils/getOtherEmail"; import { useState, useRef, useEffect } from "react"; +import { useTheme } from "../../components/ThemeProvider"; const Topbar = ({username}) => { const toast = useToast(); const router = useRouter(); + const { themeColors } = useTheme(); return ( - + {username} -