Генерирование пароля без нажатия на кнопку (#2)

* Добавление шрифтов в конфиг #1

* Удаление кнопки генерации пароля #1

src/App.tsx

@@ -2,12 +2,11 @@ import "./index.css";
 import Password from "./components/Password";
 import LengthSet from "./components/LengthSet";
 import Settings from "./components/Settings";
-import GeneratePassword from "./components/GeneratePassword";
 
 const App: React.FC = () => {
   return (
-    <div className="flex items-center justify-center h-screen w-screen bg-gradient-to-r from-violet-500 to-fuchsia-500 font-serif">
-      <div className="bg-sky-800 w-[25rem] mx-5 rounded-lg p-4 flex flex-col gap-y-5">
+    <div className="grid place-items-center min-h-full w-full bg-gradient-to-r from-violet-500 to-fuchsia-500 p-5">
+      <div className="bg-[#0a0e31] w-full max-w-[400px] rounded-lg p-5 flex flex-col gap-y-5">
         <header className="text-2xl font-extrabold text-center">
           <h1>Password Generator</h1>
         </header>
@@ -16,7 +15,6 @@ const App: React.FC = () => {
           <LengthSet />
           <Settings />
         </main>
-        <GeneratePassword />
       </div>
     </div>
   );

src/components/LengthSet.tsx

@@ -1,12 +1,23 @@
+import { useEffect } from "react";
 import useAppSelector from "../hooks/useAppSelector";
 import useActions from "../hooks/useActions";
 
 function LengthSet() {
-  const { setLength } = useActions();
+  const { toggleCopied, generatePass, setLength } = useActions();
   const length = useAppSelector((state) => state.generate.length);
 
+  useEffect(() => {
+    generatePass();
+  }, [generatePass]);
+
+  const handleGeneratePassword = (e: React.ChangeEvent<HTMLInputElement>) => {
+    toggleCopied(false);
+    generatePass();
+    setLength(+e.target.value);
+  };
+
   return (
-    <div className="flex flex-col rounded-md bg-sky-700 gap-y-2 p-2">
+    <div className="flex flex-col rounded-md bg-white/5 gap-y-2 p-2">
       <h3 className="justify-center gap-x-2 flex items-center">
         Length: <strong>{length}</strong>
       </h3>
@@ -18,7 +29,7 @@ function LengthSet() {
           min={4}
           max={30}
           value={length}
-          onChange={(e) => setLength(+e.target.value)}
+          onChange={(e) => handleGeneratePassword(e)}
         />
         <span>30</span>
       </div>

src/components/Option.tsx

@@ -13,14 +13,14 @@ const Option: React.FC<OptionProps> = ({ name }) => {
 
   return (
     <div
-      className={classNames(
-        "bg-sky-700 rounded-md py-2 px-2 flex items-center",
-        { "opacity-50": disabled }
-      )}
+      className={classNames("bg-white/5 rounded-md", {
+        "opacity-50": disabled,
+      })}
     >
       <input
         className="opacity-0 absolute"
         type="checkbox"
+        hidden
         id={name}
         defaultChecked={checked}
         disabled={disabled}
@@ -32,20 +32,26 @@ const Option: React.FC<OptionProps> = ({ name }) => {
         }}
       />
       <label
-        className="flex items-center justify-between w-full flex-row"
+        className={classNames(
+          "flex items-center justify-between p-2 flex-row",
+          {
+            "cursor-pointer": !disabled,
+            "cursor-not-allowed": disabled,
+          }
+        )}
         htmlFor={name}
       >
         <span className="font-bold">Include {name}</span>
         <div className="relative content-[''] h-8 w-12">
           <span
             className={classNames(
               "absolute h-full w-full rounded-3xl",
-              checked ? "bg-sky-200" : "bg-slate-400"
+              checked ? "bg-[#5d68e2]" : "bg-white/75"
             )}
           />
           <span
             className={classNames(
-              "absolute h-6 w-6 rounded-3xl bg-sky-600 top-1 transition-all translate-x-1",
+              "absolute h-6 w-6 rounded-3xl bg-white top-1 transition-all translate-x-1",
               {
                 "translate-x-5": checked,
               }

src/components/Password.tsx

@@ -13,10 +13,8 @@ const Password: React.FC = () => {
   };
 
   return (
-    <div className="relative text-center bg-sky-500 rounded-md py-4 px-1">
-      <div className="text-black text-xs sm:text-base">
-        {pass || "CLICK GENERATE"}
-      </div>
+    <div className="relative text-center bg-white/5 rounded-md py-5 px-1">
+      <div className="text-xs sm:text-base">{pass || "CLICK GENERATE"}</div>
       <button
         className={classNames(
           "absolute text-white -bottom-1 text-xs text-opacity-80 cursor-pointer transition-all left-2",

src/index.css

@@ -1,3 +1,13 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&display=swap');
+
+:root {
+  @apply text-white font-main
+}
+
+#root {
+  @apply h-screen
+}

src/index.tsx

@@ -8,9 +8,9 @@ const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
 root.render(
-  <Provider store={store}>
-    <React.StrictMode>
+  <React.StrictMode>
+    <Provider store={store}>
       <App />
-    </React.StrictMode>
-  </Provider>
+    </Provider>
+  </React.StrictMode>
 );

src/store/slices/copySlice.ts

@@ -3,13 +3,10 @@ import { CopyState } from "../../types/copyState";
 const copySlice = createSlice({
   name: "copy",
   initialState: {
-    showButtons: false,
+    showButtons: true,
     copied: false,
   } as CopyState,
   reducers: {
-    toggleButtons: (state) => {
-      state.showButtons = true;
-    },
     toggleCopied: (state, action: PayloadAction<boolean>) => {
       state.copied = action.payload;
     },

tailwind.config.js

@@ -2,7 +2,11 @@
 module.exports = {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        main: ["Montserrat", "sans-serif"],
+      },
+    },
   },
   plugins: [],
 };