Merge branch 'preview'

package.json

@@ -18,7 +18,7 @@
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
-    "@tanstack/react-query": "^5.7.2",
+    "@tanstack/react-query": "^5.17.1",
     "@tiptap/extension-character-count": "^2.1.13",
     "@tiptap/extension-link": "^2.1.13",
     "@tiptap/extension-mention": "^2.1.13",
@@ -48,8 +48,8 @@
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.10",
-    "@types/node": "^20",
-    "@types/react": "^18",
+    "@types/node": "^20.10.6",
+    "@types/react": "^18.2.46",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
     "eslint": "^8",

src/containers/settings/contentFilteringContainer/ContentFilteringContainerSkeleton.tsx

@@ -1,6 +1,6 @@
 function HideAdultSwitchSkeleton() {
   return (
-    <div className="flex items-center gap-2 p-3 border border-x-0 md:border-x md:first:rounded-t-2xl md:last:rounded-b-2xl last:border-b even:[&:not(:last-child)]:border-b-0 odd:[&:not(:last-child)]:border-b-0 animate-pulse">
+    <div className="flex items-center gap-2 p-3 border border-x-0 md:border-x rounded-none md:rounded-2xl animate-pulse">
       <div className="w-10 h-6 rounded-full bg-gray-200" />
       <div className="w-8 h-6 rounded-full bg-gray-200" />
     </div>

src/containers/settings/settingsContainer/InviteCodes.tsx

@@ -30,10 +30,8 @@ export default function InviteCodes(props: Props) {
       <button
         disabled={codes.length === 0}
         onClick={() => setIsOpen((prev) => !prev)}
-        className={`flex items-center gap-2 p-3 mt-2 w-full md:rounded-b-none md:rounded-t-2xl border border-x-0 md:border-x hover:bg-neutral-50 disabled:opacity-30 disabled:contrast-75 disabled:hover:brightness-100 disabled:cursor-not-allowed ${
-          isOpen
-            ? "border-b-0"
-            : "rounded-none md:rounded-t-2xl md:rounded-b-2xl"
+        className={`flex items-center gap-2 p-3 mt-2 w-full border border-x-0 md:border-x rounded-none md:rounded-2xl hover:bg-neutral-50 disabled:opacity-30 disabled:contrast-75 disabled:hover:brightness-100 disabled:cursor-not-allowed ${
+          isOpen ? "border-b-0 md:rounded-b-none" : "md:rounded-2xl"
         }`}
       >
         <FaTicket className="text-neutral-600 text-xl" />

src/containers/settings/settingsContainer/SettingsContainer.tsx

@@ -1,7 +1,12 @@
 import Link from "next/link";
 import { FaSlidersH } from "react-icons/fa";
 import { ImBubbles2 } from "react-icons/im";
-import { BiHash, BiSolidEnvelope } from "react-icons/bi";
+import {
+  BiHash,
+  BiSolidCheckCircle,
+  BiSolidEnvelope,
+  BiSolidXCircle,
+} from "react-icons/bi";
 import { MdRemoveRedEye } from "react-icons/md";
 import { BiSolidBellOff } from "react-icons/bi";
 import { BsPersonFillSlash } from "react-icons/bs";
@@ -43,8 +48,19 @@ export default async function SettingsContainer() {
               <BiSolidEnvelope className="text-neutral-600 text-xl" />
               <span className="text-neutral-600 break-all">
                 {session?.user.email}{" "}
-                {isEmailConfirmed ? "(verified)" : "(not verified)"}
               </span>
+              {isEmailConfirmed && (
+                <small className="inline-flex gap-1 items-center px-2 py-1.5 rounded-full bg-green-600/10 font-bold text-[0.6rem] text-green-600">
+                  <BiSolidCheckCircle className="text-green-600 text-lg" />
+                  Verified
+                </small>
+              )}
+              {!isEmailConfirmed && (
+                <small className="inline-flex gap-1 items-center px-2 py-1.5 rounded-full bg-orange-600/10 font-bold text-[0.6rem] text-orange-600">
+                  <BiSolidXCircle className="text-orange-600 text-lg" />
+                  Not Verified
+                </small>
+              )}
             </div>
           </div>
         </section>

src/styles/globals.css

@@ -6,7 +6,7 @@
   :root {
     --foreground-rgb: 0, 0, 0;
     --background-color: #ffffff;
-  }  
+  }
 
   body {
     box-sizing: border-box;

tailwind.config.ts

@@ -4,13 +4,13 @@ const config: Config = {
   content: [
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/containers/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
       colors: {
         primary: { light: "#BF77FF", DEFAULT: "#A94AFF", dark: "#9721FF" },
-        secondary: "#ffba28",
       },
       borderWidth: {
         "3": "3px",