mbeps · mbeps · Dec 10, 2025 · Dec 10, 2025 · Dec 10, 2025 · Dec 10, 2025
diff --git a/app/providers.tsx b/app/providers.tsx
@@ -3,8 +3,8 @@
 import { theme } from "@/chakra/theme";
 import Layout from "@/components/layout/Layout";
 import { ColorModeProvider } from "@/components/ui/color-mode";
-import { toaster } from "@/hooks/useCustomToast";
-import { ChakraProvider, Toaster } from "@chakra-ui/react";
+import { Toaster } from "@/components/ui/toaster";
+import { ChakraProvider } from "@chakra-ui/react";
 import { Provider as JotaiProvider } from "jotai";
 import { useEffect, useState } from "react";
 import EmotionRegistry from "./emotion-registry";
@@ -29,46 +29,7 @@ export function Providers({ children }: { children: React.ReactNode }) {
           <ColorModeProvider>
             <Layout>{children}</Layout>
           </ColorModeProvider>
-          {mounted && (
-            // @ts-ignore
-            <Toaster toaster={toaster}>
-              {(toast: any) => {
-                const type = toast.type || "info";
-                const colors: any = {
-                  success: "green",
-                  error: "red",
-                  warning: "orange",
-                  info: "blue",
-                };
-                const colorScheme = colors[type];
-
-                return (
-                  <div
-                    style={{
-                      background: `var(--chakra-colors-${colorScheme}-500)`,
-                      color: "white",
-                      padding: "12px 16px",
-                      borderRadius: "6px",
-                      boxShadow: "0 4px 6px rgba(0,0,0,0.1)",
-                      marginBottom: "8px",
-                      display: "flex",
-                      flexDirection: "column",
-                      minWidth: "300px",
-                    }}
-                  >
-                    <div style={{ fontWeight: "600", marginBottom: "4px" }}>
-                      {toast.title}
-                    </div>
-                    {toast.description && (
-                      <div style={{ fontSize: "0.9em" }}>
-                        {toast.description}
-                      </div>
-                    )}
-                  </div>
-                );
-              }}
-            </Toaster>
-          )}
+          {mounted && <Toaster />}
         </ChakraProvider>
       </EmotionRegistry>
     </JotaiProvider>

diff --git a/components/community/community-header/CommunityHeader.tsx b/components/community/community-header/CommunityHeader.tsx
@@ -1,13 +1,14 @@
 import { Community } from "@/types/community";
 import { Box, Flex } from "@chakra-ui/react";
-import React from "react";
+import React, { useState } from "react";
 import useCommunityState from "@/hooks/community/useCommunityState";
 import useCommunityMembershipActions from "@/hooks/community/useCommunityMembershipActions";
 import CommunityIcon from "./CommunityIcon";
 import CommunityName from "./CommunityName";
 import JoinOrLeaveButton from "./JoinOrLeaveButton";
 import CommunitySettings from "./CommunitySettings";
 import CommunityMembersButton from "./CommunityMembersButton";
+import ConfirmationDialog from "@/components/modal/ConfirmationDialog";
 
 /**
  * @param {communityData} - data required to be displayed
@@ -36,6 +37,21 @@ const CommunityHeader: React.FC<HeaderProps> = ({ communityData }) => {
   const isJoined = !!communityStateValue.mySnippets.find(
     (item) => item.communityId === communityData.id
   );
+  const [leaveConfirmationOpen, setLeaveConfirmationOpen] = useState(false);
+
+  const handleJoinOrLeave = () => {
+    if (isJoined) {
+      setLeaveConfirmationOpen(true);
+    } else {
+      onJoinOrLeaveCommunity(communityData, isJoined);
+    }
+  };
+
+  const onConfirmLeave = async () => {
+    await onJoinOrLeaveCommunity(communityData, isJoined);
+    setLeaveConfirmationOpen(false);
+  };
+
   return (
     <Flex direction="column" width="100%" height="120px">
       <Box height="30%" bg="red.500" />
@@ -66,12 +82,21 @@ const CommunityHeader: React.FC<HeaderProps> = ({ communityData }) => {
               <CommunitySettings communityData={communityData} />
               <JoinOrLeaveButton
                 isJoined={isJoined}
-                onClick={() => onJoinOrLeaveCommunity(communityData, isJoined)}
+                onClick={handleJoinOrLeave}
               />
             </Flex>
           </Flex>
         </Flex>
       </Flex>
+      <ConfirmationDialog
+        open={leaveConfirmationOpen}
+        onClose={() => setLeaveConfirmationOpen(false)}
+        onConfirm={onConfirmLeave}
+        title="Unsubscribe from Community"
+        body={`Are you sure you want to unsubscribe from r/${communityData.id}?`}
+        confirmButtonText="Unsubscribe"
+        isLoading={loading}
+      />
     </Flex>
   );
 };

diff --git a/components/modal/ConfirmationDialog.tsx b/components/modal/ConfirmationDialog.tsx
@@ -0,0 +1,89 @@
+import {
+  Button,
+  DialogActionTrigger,
+  DialogBackdrop,
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogPositioner,
+  DialogRoot,
+  DialogTitle,
+  Portal,
+} from "@chakra-ui/react";
+import React from "react";
+
+interface ConfirmationDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  body: string;
+  confirmButtonText?: string;
+  cancelButtonText?: string;
+  isLoading?: boolean;
+}
+
+const ConfirmationDialog: React.FC<ConfirmationDialogProps> = ({
+  open,
+  onClose,
+  onConfirm,
+  title,
+  body,
+  confirmButtonText = "Confirm",
+  cancelButtonText = "Cancel",
+  isLoading = false,
+}) => {
+  return (
+    <DialogRoot
+      open={open}
+      onOpenChange={(details: { open: boolean }) => !details.open && onClose()}
+      placement="center"
+    >
+      <Portal>
+        <DialogBackdrop />
+        <DialogPositioner>
+          <DialogContent borderRadius={"xl"}>
+            <DialogHeader>
+              <DialogTitle>{title}</DialogTitle>
+            </DialogHeader>
+            <DialogBody>{body}</DialogBody>
+            <DialogFooter>
+              <DialogActionTrigger asChild>
+                <Button
+                  variant="outline"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onClose();
+                  }}
+                  disabled={isLoading}
+                >
+                  {cancelButtonText}
+                </Button>
+              </DialogActionTrigger>
+              <Button
+                colorPalette="red"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onConfirm();
+                }}
+                loading={isLoading}
+              >
+                {confirmButtonText}
+              </Button>
+            </DialogFooter>
+            <DialogCloseTrigger
+              onClick={(e: React.MouseEvent) => {
+                e.stopPropagation();
+                onClose();
+              }}
+            />
+          </DialogContent>
+        </DialogPositioner>
+      </Portal>
+    </DialogRoot>
+  );
+};
+
+export default ConfirmationDialog;
diff --git a/components/modal/auth/Login.tsx b/components/modal/auth/Login.tsx
@@ -6,6 +6,7 @@ import { authModalStateAtom } from "../../../atoms/authModalAtom";
 import { auth } from "../../../firebase/clientApp";
 import { FIREBASE_ERRORS } from "../../../firebase/errors";
 import InputField from "./InputField";
+import { PasswordInput } from "@/components/ui/password-input";
 
 type LoginProps = {};
 
@@ -78,11 +79,27 @@ const Login: React.FC<LoginProps> = () => {
         onChange={onChange}
       />
 
-      <InputField
+      <PasswordInput
         name="password"
         placeholder="Password"
-        type="password"
         onChange={onChange}
+        required
+        rootProps={{ mb: 2 }}
+        fontSize="10pt"
+        bg={{ base: "gray.50", _dark: "gray.800" }}
+        borderColor={{ base: "gray.200", _dark: "gray.600" }}
+        _placeholder={{ color: "gray.500" }}
+        _hover={{
+          bg: { base: "white", _dark: "gray.700" },
+          border: "1px solid",
+          borderColor: { base: "red.500", _dark: "red.400" },
+        }}
+        _focus={{
+          outline: "none",
+          bg: { base: "white", _dark: "gray.700" },
+          border: "1px solid",
+          borderColor: { base: "red.500", _dark: "red.400" },
+        }}
       />
 
       <Text

diff --git a/components/modal/auth/Signup.tsx b/components/modal/auth/Signup.tsx
@@ -7,6 +7,7 @@ import { authModalStateAtom } from "../../../atoms/authModalAtom";
 import { auth } from "../../../firebase/clientApp";
 import { FIREBASE_ERRORS } from "../../../firebase/errors";
 import InputField from "./InputField";
+import { PasswordInput } from "@/components/ui/password-input";
 
 /**
  * Allows the user to create an account by inputting the required credentials (email and password).
@@ -86,18 +87,50 @@ const SignUp = () => {
         onChange={onChange}
       />
 
-      <InputField
+      <PasswordInput
         name="password"
         placeholder="Password"
-        type="password"
         onChange={onChange}
+        required
+        rootProps={{ mb: 2 }}
+        fontSize="10pt"
+        bg={{ base: "gray.50", _dark: "gray.800" }}
+        borderColor={{ base: "gray.200", _dark: "gray.600" }}
+        _placeholder={{ color: "gray.500" }}
+        _hover={{
+          bg: { base: "white", _dark: "gray.700" },
+          border: "1px solid",
+          borderColor: { base: "red.500", _dark: "red.400" },
+        }}
+        _focus={{
+          outline: "none",
+          bg: { base: "white", _dark: "gray.700" },
+          border: "1px solid",
+          borderColor: { base: "red.500", _dark: "red.400" },
+        }}
       />
 
-      <InputField
+      <PasswordInput
         name="confirmPassword"
         placeholder="Confirm Password"
-        type="password"
         onChange={onChange}
+        required
+        rootProps={{ mb: 2 }}
+        fontSize="10pt"
+        bg={{ base: "gray.50", _dark: "gray.800" }}
+        borderColor={{ base: "gray.200", _dark: "gray.600" }}
+        _placeholder={{ color: "gray.500" }}
+        _hover={{
+          bg: { base: "white", _dark: "gray.700" },
+          border: "1px solid",
+          borderColor: { base: "red.500", _dark: "red.400" },
+        }}
+        _focus={{
+          outline: "none",
+          bg: { base: "white", _dark: "gray.700" },
+          border: "1px solid",
+          borderColor: { base: "red.500", _dark: "red.400" },
+        }}
       />
 
       {/* If there is error than the error is shown */}