Fix theme consistency, i18n completeness, CSS variable naming, and hardcoded strings

src/components/home/user-view.tsx

@@ -124,7 +124,7 @@ export default async function UserView({ userId, username, look }: UserViewProps
           </div>
           <div className="flex items-center gap-3 px-3">
             {onlineFriends.length === 0 ? (
-              <p className="mb-3 block w-full text-center text-xs font-medium text-gray-500 dark:text-white md:mb-0 md:text-left">
+              <p className="mb-3 block w-full text-center text-xs font-medium md:mb-0 md:text-left" style={{ color: "var(--color-text-muted)" }}>
                 {t("noFriendsOnline")}
               </p>
             ) : (
@@ -178,7 +178,7 @@ export default async function UserView({ userId, username, look }: UserViewProps
               <div className="p-3">
                 <h3 className="text-sm font-semibold">{latestArticle.title}</h3>
                 {latestArticle.shortStory && (
-                  <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                  <p className="mt-1 text-xs" style={{ color: "var(--color-text-muted)" }}>
                     {excerpt(latestArticle.shortStory, 100)}
                   </p>
                 )}