Added themes menu

src-tauri/Cargo.toml

@@ -1,5 +1,5 @@
 [package]
-name = "Passdom"
+name = "passdom"
 version = "0.1.0"
 description = "Secure Your Data"
 authors = ["man2k"]
@@ -28,8 +28,6 @@ dirs = "4.0.0"
 steganography = "*"
 argon2 = "0.5.1"
 chrono = "0.4.27"
-anyhow = "1.0.75"
-thiserror = "1.0.48"
 
 [features]
 # this feature is used for production builds or when `devPath` points to the filesystem

src-tauri/src/main.rs

@@ -75,7 +75,7 @@ fn steganograph(
         buffer[..pos].copy_from_slice(&plaintext);
         let cipher = Aes256Cbc::new_from_slices(&key, &iv).unwrap();
         let ciphertext = match cipher.encrypt(&mut buffer, pos) {
-            Err(e) => return Err("encryption failed".to_string()),
+            Err(_e) => return Err("encryption failed".to_string()),
             Ok(e) => e,
         };
         let finalchipher = [ciphertext, &iv].concat();
@@ -144,7 +144,7 @@ fn desteganograph(
     // DECRYPTION
     let plaintext2 = clean_buffer;
     let (content, ivv) = match panic::catch_unwind(|| plaintext2.split_at(plaintext2.len() - 16)) {
-        Err(e) => {
+        Err(_e) => {
             return Err("invalid image".to_string());
         }
         Ok((content, ivv)) => (content, ivv),
@@ -154,7 +154,7 @@ fn desteganograph(
     let fkey = keygenargon(password, 32, ivv.try_into().unwrap()).unwrap();
     let cipher = Aes256Cbc::new_from_slices(&fkey, &ivv).unwrap();
     let decrypted_ciphertext = match cipher.decrypt(&mut buffer) {
-        Err(e) => return Err("decryption failed".to_string()),
+        Err(_e) => return Err("decryption failed".to_string()),
         Ok(e) => e,
     };
     let s = std::str::from_utf8(&decrypted_ciphertext).unwrap();

src/App.tsx

@@ -1,21 +1,46 @@
 import Navbar from "./components/Navbar";
 import { Route, Routes } from "react-router-dom";
 import { Home, Encrypt, Decrypt, Steganograph, DeSteganograph } from "./pages";
-import { FC } from "react";
+import { FC, useState } from "react";
 import Encode from "./pages/Encode";
 import Decode from "./pages/Decode";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
+import { themes } from "./constants";
 
 const App: FC = () => {
+  const [theme, setTheme] = useState<string>("luxury");
+
+  const handleTheme = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setTheme(e.target.value);
+  };
+
   return (
     <div
-      data-theme="halloween"
+      data-theme={theme}
       className="min-w-full min-h-screen whitespace-nowrap overflow-hidden"
     >
       <div className="flex justify-center items-center w-full">
-        <div className="xl:max-w-[1920px] w-full">
-          <Navbar />
+        <div className="xl:max-w-[1920px] w-full flex">
+          <Navbar>
+            <select
+              className="select select-accent flex ml-[1150px] absolute mt-2 bg-inherit p-2s w-[100px] rounded-full border-0 text-slate-300"
+              onChange={handleTheme}
+            >
+              <option
+                disabled
+                selected
+                className="bg-gray-800 text-white border-0 mt-2"
+              >
+                {theme}
+              </option>
+              {themes.map((theme) => (
+                <option className="bg-gray-800 text-white border-0 mt-2">
+                  {theme}
+                </option>
+              ))}
+            </select>
+          </Navbar>
         </div>
       </div>
       <ToastContainer

src/components/Navbar.tsx

@@ -2,8 +2,11 @@ import { navLinks } from "../constants";
 import { Link } from "react-router-dom";
 import { FC } from "react";
 import logo from "/blacklogo.png";
+interface NavbarProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
 
-const Navbar: FC = () => {
+const Navbar: FC<NavbarProps> = ({ children }: NavbarProps) => {
   return (
     <nav className="w-full flex justify-center fixed z-10 mt-1">
       <div className="left-0 absolute">
@@ -57,6 +60,7 @@ const Navbar: FC = () => {
           />
         </svg>
       </ul>
+      {children}
     </nav>
   );
 };

src/constants/index.ts

@@ -25,6 +25,38 @@ export const navLinks = [
     },
 ]
 
+export const themes= [
+    "light",
+    "dark",
+    "luxury",
+    "dracula",
+    "retro",
+    "cyberpunk",
+    "valentine",
+    "halloween",
+    "garden",
+    "forest",
+    "black",
+    "business",
+    "night",
+    "coffee",
+    "aqua",
+    // "cupcake",
+    // "bumblebee",
+    // "emerald",
+    // "corporate",
+    // "synthwave",
+    // "lofi",
+    // "pastel",
+    // "fantasy",
+    // "wireframe",
+    // "cmyk",
+    // "autumn",
+    // "acid",
+    // "lemonade",
+    // "winter",
+  ];
+
 export const ChipherList = [
     {
       label: "aes-128-cbc",

src/pages/DeSteganograph.tsx

@@ -13,12 +13,12 @@ const DeSteganograph: FC = () => {
   const [data, setData] = useState<string>("");
   const [password, setPassword] = useState<string>("");
   const [savePath, setSavePath] = useState<string | null>("");
-  useEffect(() => {
-    setImgPath("");
-    setData("");
-    setPassword("");
-    setSavePath("");
-  }, [data]);
+  // useEffect(() => {
+  //   setImgPath("");
+  // setData("");
+  //   setPassword("");
+  //   setSavePath("");
+  // }, [data]);
   const successMsgFile = (message: string) => (
     <div>
       <form>
@@ -33,7 +33,7 @@ const DeSteganograph: FC = () => {
               let tmp = (e.target as HTMLSpanElement).innerText;
               (e.target as HTMLSpanElement).innerText = "copied to clipboard..";
               setTimeout(() => {
-                (e.target as HTMLSpanElement).innerText = data;
+                (e.target as HTMLSpanElement).innerText = message;
               }, 900);
             }
           }}

tailwind.config.js

@@ -9,33 +9,33 @@ export default {
     themes: [
       "light",
       "dark",
-      "cupcake",
-      "bumblebee",
-      "emerald",
-      "corporate",
-      "synthwave",
+      "luxury",
+      "dracula",
       "retro",
       "cyberpunk",
       "valentine",
       "halloween",
       "garden",
       "forest",
-      "aqua",
-      "lofi",
-      "pastel",
-      "fantasy",
-      "wireframe",
       "black",
-      "luxury",
-      "dracula",
-      "cmyk",
-      "autumn",
       "business",
-      "acid",
-      "lemonade",
       "night",
       "coffee",
-      "winter",
+      "aqua",
+      // "cupcake",
+      // "bumblebee",
+      // "emerald",
+      // "corporate",
+      // "synthwave",
+      // "lofi",
+      // "pastel",
+      // "fantasy",
+      // "wireframe",
+      // "cmyk",
+      // "autumn",
+      // "acid",
+      // "lemonade",
+      // "winter",
     ],
     base: true,
     styled: true,