update src/components/ThemeColor/index.js

src/components/ThemeColor/index.js

@@ -37,7 +37,7 @@ const ThemeColor = () => {
           <p className="text-[#64b6df] text-lg font-sansbold ">
             Original Colors
           </p>
-          <div className="flex flex-row justify-between mt-2">
+          <div className="flex flex-row justify-between mt-2 gap-x-5">
             <ColorCard
               theme={theme}
               item="primary"
@@ -80,7 +80,7 @@ const ColorCard = ({ theme, text, dark, light, item, setItem }) => {
   return (
     <div className="flex flex-col gap-y-3">
       <div
-        className={`flex flex-col cursor-pointer rounded-lg relative p-4 bg-${item} ${
+        className={`w-[344px] h-[130px] flex flex-col cursor-pointer rounded-sm relative p-4 bg-${item} ${
           text ? `text-${item}Text` : ""
         }`}
         onClick={() => setItem(item)}
@@ -98,11 +98,11 @@ const ColorCard = ({ theme, text, dark, light, item, setItem }) => {
           />
         )}
       </div>
-      <div className="flex flex-row gap-x-3">
+      <div className="flex flex-row justify-around">
         {" "}
         {dark ? (
           <div
-            className={`flex-col cursor-pointer rounded-lg relative p-4 bg-${item}Dark ${
+            className={`flex-col cursor-pointer rounded-sm relative p-4 w-[160px] h-[75px] bg-${item}Dark ${
               text ? `text-${item}Text` : ""
             }`}
             onClick={() => setItem(item + "Dark")}
@@ -116,7 +116,7 @@ const ColorCard = ({ theme, text, dark, light, item, setItem }) => {
         ) : null}
         {light ? (
           <div
-            className={`flex-col cursor-pointer rounded-lg relative p-4 bg-${item}Light ${
+            className={`flex flex-col cursor-pointer rounded-sm relative p-4 w-[160px] h-[75px]  bg-${item}Light ${
               text ? `text-${item}Text` : ""
             }`}
             onClick={() => setItem(item + "Light")}