Merge branch 'pr/daidr/333' into dev

# Conflicts:
#	src/css/tailwind.css

src/components/common/AchievementModal.tsx

@@ -103,10 +103,10 @@ export const AchievementModal: React.FC<{
             />
           </Tilt>
           <div className="inline-flex flex-col flex-1 min-w-0 w-full space-y-1">
-            <span className="capitalize text-4xl font-medium truncate">
+            <span className="capitalize text-black text-4xl font-medium truncate">
               {group.info.title} {achievement && `#${achievement.tokenId}`}
             </span>
-            <span className="text-lg text-gray-100 capitalize truncate">
+            <span className="text-lg text-black capitalize truncate">
               {
                 (achievement || achievementMintable || achievementComming)!.info
                   .description

src/components/common/CharacterCard.tsx

@@ -51,7 +51,7 @@ export const CharacterCard: React.FC<{
   return (
     <span
       className={cn(
-        "border-gray-100 rounded-lg text-sm block cursor-default",
+        "border-border border rounded-lg text-sm block cursor-default",
         style === "flat" ? "" : "p-4 bg-white shadow-xl",
         simple ? "space-y-1" : "space-y-2",
       )}

src/components/common/ConnectButton.tsx

@@ -278,7 +278,7 @@ export const ConnectButton: React.FC<{
                   }
                   dropdown={
                     <div
-                      className={`text-gray-600 bg-white rounded-lg ring-1 ring-zinc-100 min-w-[140px] shadow-md py-2 ${
+                      className={`text-gray-600 bg-white rounded-lg ring-1 ring-border min-w-[140px] shadow-md py-2 ${
                         size === "base" ? "text-base" : "text-sm"
                       } mt-1`}
                     >

src/components/common/Logo.tsx

@@ -43,6 +43,7 @@ export const Logo: React.FC<{
             width: width || 100,
             height: height || 100,
           }}
+          className="xlog-lottie-logo"
         />
       )
   }

src/components/dashboard/PagesManagerMenu.tsx

@@ -166,7 +166,7 @@ export const PagesManagerMenu: FC<{
   }, [])
 
   return (
-    <Menu.Items className="text-sm absolute z-20 right-0 bg-white shadow-modal rounded-lg overflow-hidden py-2 w-64">
+    <Menu.Items className="text-sm absolute z-20 right-0 bg-white shadow-modal rounded-lg overflow-hidden py-2 w-64 ring-1 ring-border">
       {items.map((item) => {
         return (
           <Menu.Item key={item.text}>

src/components/site/SiteHeader.tsx

@@ -259,7 +259,7 @@ export const SiteHeader: React.FC<{
                         </Button>
                       }
                       dropdown={
-                        <div className="text-gray-600 bg-white rounded-lg ring-1 ring-zinc-100 shadow-md py-2 text-sm">
+                        <div className="text-gray-600 bg-white rounded-lg ring-1 ring-border shadow-md py-2 text-sm">
                           {moreMenuItems.map((item) => {
                             return (
                               <UniLink

src/css/tailwind.css

@@ -21,6 +21,10 @@
   border-color: var(--border-color);
 }
 
+html.dark {
+  color-scheme: dark;
+}
+
 ::-webkit-scrollbar {
   width: 10px;
   height: 10px;
@@ -385,3 +389,7 @@ textarea.input {
   border-right-color: currentColor;
   @apply animate-spin;
 }
+
+.xlog-lottie-logo path[fill="rgb(0,0,0)"] {
+  @apply fill-current;
+}