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 && (
-          <ItemColor
-            className="self-end text-sm"
-            item={item + "Text"}
-            theme={theme}
-            onClick={(e) => {
-              e.stopPropagation();
-              setItem(item + "Text");
-            }}
-          />
-        )}
-        {borderColor && (
-          <ItemColor
-            className="self-start text-sm"
-            item={item + "Border"}
-            theme={theme}
-            onClick={(e) => {
-              e.stopPropagation();
-              setItem(item + "Border");
-            }}
-          />
-        )}
+        <div className="flex flex-row items-center justify-between mt-5 ">
+          {text && (
+            <ItemColor
+              className="text-sm"
+              item={item + "Text"}
+              theme={theme}
+              onClick={(e) => {
+                e.stopPropagation();
+                setItem(item + "Text");
+              }}
+            />
+          )}
+          {borderColor && (
+            <ItemColor
+              className="text-sm"
+              item={item + "Border"}
+              theme={theme}
+              onClick={(e) => {
+                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";