update ColorCard.js and default.js

src/components/ThemeColor/ColorCard.js

@@ -13,15 +13,16 @@ 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} />
+        <div className="flex flex-row items-center justify-between mt-5 ">
           {text && (
             <ItemColor
-            className="self-end text-sm"
+              className="text-sm"
               item={item + "Text"}
               theme={theme}
               onClick={(e) => {
@@ -32,7 +33,7 @@ const ColorCard = ({
           )}
           {borderColor && (
             <ItemColor
-            className="self-start text-sm"
+              className="text-sm"
               item={item + "Border"}
               theme={theme}
               onClick={(e) => {
@@ -42,6 +43,7 @@ const ColorCard = ({
             />
           )}
         </div>
+      </div>
       <div className="flex flex-row justify-between">
         {" "}
         {dark ? (

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";