update ColorCard.js and default.js

src/components/ThemeColor/ColorCard.js

@@ -13,34 +13,36 @@ const ColorCard = ({
   return (
     <div className="flex flex-col gap-y-3">
       <div
-        className={`w-[344px] h-[130px] flex flex-col border-2 cursor-pointer rounded-sm 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` : ""
-        } ${borderColor ? `border-${item}Border` : ""} `}
+        } ${borderColor ? ` border border-${item}Border` : ""} `}
         onClick={() => setItem(item)}
       >
         <ItemColor className=" text-2xl font-bold" item={item} theme={theme} />
-        {text && (
+        <div className="flex flex-row items-center justify-between mt-5 ">
-          <ItemColor
+          {text && (
-            className="self-end text-sm"
+            <ItemColor
-            item={item + "Text"}
+              className="text-sm"
-            theme={theme}
+              item={item + "Text"}
-            onClick={(e) => {
+              theme={theme}
-              e.stopPropagation();
+              onClick={(e) => {
-              setItem(item + "Text");
+                e.stopPropagation();
-            }}
+                setItem(item + "Text");
-          />
+              }}
-        )}
+            />
-        {borderColor && (
+          )}
-          <ItemColor
+          {borderColor && (
-            className="self-start text-sm"
+            <ItemColor
-            item={item + "Border"}
+              className="text-sm"
-            theme={theme}
+              item={item + "Border"}
-            onClick={(e) => {
+              theme={theme}
-              e.stopPropagation();
+              onClick={(e) => {
-              setItem(item + "Border");
+                e.stopPropagation();
-            }}
+                setItem(item + "Border");
-          />
+              }}
-        )}
+            />
+          )}
+        </div>
       </div>
       <div className="flex flex-row justify-between">
         {" "}

src/components/ThemeColor/default.js

@@ -11,7 +11,7 @@ const defaultTheme = {
   backgroundText: "#000000",
   surface: "#6eb1d2",
   surfaceText: "#000000",
-  surfaceBorder: "#166a95",
+  surfaceBorder: "#FF08AD",
 };
 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";