update ItemColor.js and src/components/ThemeColor/index.js

src/components/ThemeColor/index.js

@@ -24,9 +24,9 @@ const ThemeColor = () => {
       </p>
       <div className="w-full flex flex-row-reverse items-center justify-between mt-7 divide-x-2 divide-[#b8dff3] divide-x-reverse">
         {/* right */}
-        <div className="w-1/2 flex-grow flex-1 flex flex-col p-4">fsd</div>
+        <div className="flex-grow flex flex-col p-4"></div>
         {/* left */}
-        <div className="w-1/2 flex-grow flex-1 flex flex-col p-4">
+        <div className="flex-grow flex flex-col flex-1 p-4">
           <div className="w-full flex flex-row-reverse items-center justify-between">
             <div className="flex flex-row-reverse items-center justify-between">
               <span className="text-xs ml-2">Dark</span> <SwitchDesign />
@@ -34,11 +34,10 @@ const ThemeColor = () => {
             <p className="text-2xl">The Color System</p>
           </div>
           <hr className="my-2 border border-[#b8dff3]" />
-
           <p className="text-[#64b6df] text-lg font-sansbold ">
             Original Colors
           </p>
-          <div className="flex flex-row justify-between gap-x-10 mt-2">
+          <div className="flex flex-row justify-between mt-2">
             <ColorCard
               theme={theme}
               item="primary"
@@ -79,7 +78,7 @@ export default ThemeColor;
 
 const ColorCard = ({ theme, text, dark, light, item, setItem }) => {
   return (
-    <div className="flex-1 flex flex-col gap-y-3">
+    <div className="flex flex-col gap-y-3">
       <div
         className={`flex flex-col cursor-pointer rounded-lg relative p-4 bg-${item} ${
           text ? `text-${item}Text` : ""
@@ -133,20 +132,3 @@ const ColorCard = ({ theme, text, dark, light, item, setItem }) => {
     </div>
   );
 };
-
-// <div style={{ background: background }} className="h-screen w-full">
-//   {current != null && <h1>Copied {current}</h1>}
-//   <div className=" flex flex-row item-center justify-center">
-//     {colors.map((color, index) => (
-//       <div key={index} className="card">
-//         <div
-//           style={{ background: color }}
-//           className="box w-20 h-20 rounded p-5 cursor-pointer"
-//           onClick={() => setBackground(color)}
-//         >
-//           fdsfsds
-//         </div>
-//       </div>
-//     ))}
-//   </div>
-// </div>