update ItemColor.js, default.js, src/components/ThemeColor/index.js and tailwind.config.js

src/components/ThemeColor/default.js

@@ -20,7 +20,12 @@ const defaultTheme = {
   warningText: "#000000",
   error: "#ff4600",
   errorText: "#000000",
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1536px",
 };
 const classNames =
-  "bg-primary text-primaryText bg-secondary text-secondaryText bg-primaryDark  bg-primaryLight  text-primaryDark text-primaryLight bg-primaryDark  bg-secondaryLight  text-secondaryDark text-secondaryLight bg-secondaryDark  text-secondaryDark bg-background text-backgroundText bg-surface text-surfaceText border-surfaceBorder bg-info text-infoText bg-success text-successText bg-warning text-warningText bg-error text-errorText";
+  "sm:sm md:md lg:lg xl:xl 2xl:2xl bg-primary text-primaryText bg-secondary text-secondaryText bg-primaryDark  bg-primaryLight  text-primaryDark text-primaryLight bg-primaryDark  bg-secondaryLight  text-secondaryDark text-secondaryLight bg-secondaryDark  text-secondaryDark bg-background text-backgroundText bg-surface text-surfaceText border-surfaceBorder bg-info text-infoText bg-success text-successText bg-warning text-warningText bg-error text-errorText";
 export default defaultTheme;

src/components/ThemeColor/index.js

@@ -3,6 +3,7 @@ import SwitchDesign from "../SwitchDesign/Switch";
 import putTheme from "./util/putTheme";
 import defaultTheme from "./default";
 import Picker from "./util/Picker";
+import Button from "../ButtonDesign/Button";
 import ColorCard from "./ColorCard";
 
 import { useForm } from "react-hook-form";
@@ -15,7 +16,7 @@ const ThemeColor = ({ inputFields }) => {
   putTheme(theme);
 
   return (
-    <div className="ltr w-full  flex flex-col items-center bg-[#e1f5ff] rounded-sm border border-[#b8dff3]">
+    <div className="ltr w-full flex flex-col items-center bg-background rounded-sm border border-[#b8dff3]">
       <h2 className="mt-4 text-2xl text-blue-900 font-sansbold">
         Theme Properties
       </h2>
@@ -58,6 +59,10 @@ const ThemeColor = ({ inputFields }) => {
               />
             </div>
           ))}
+          <Button
+            text="ثبت "
+            className="w-1/2 mx-auto bg-secondary text-white mt-4 rounded py-2"
+          />
         </div>
         {/* left */}
         <div className="flex-grow flex flex-col flex-1 p-4">

tailwind.config.js

@@ -28,19 +28,19 @@ module.exports = {
       info: "var(--theme-info)",
       infoText: "var(--theme-infoText)",
       success: "var(--theme-success)",
-      successText: "var(--theme-successText)",
+      successText: "var(--them2xl2xle-successText)",
       warning: "var(--theme-warning)",
       warningText: "var(--theme-warningText)",
       error: "var(--theme-error)",
       errorText: "var(--theme-errorText)",
     },
-    // screens: {
+    screens: {
-    //   sm: "var(--theme-sm)",
+      sm: "var(--theme-sm)",
-    //   md: "var(--theme-md)",
+      md: "var(--theme-md)",
-    //   lg: "var(--theme-lg)",
+      lg: "var(--theme-lg)",
-    //   xl: "var(--theme-xl)",
+      xl: "var(--theme-xl)",
-    //   "2xl": "var(--theme-2xl)",
+      "2xl": "var(--theme-2xl)",
-    // },
+    },
   },
   plugins: [
     require("@themesberg/flowbite/plugin"),