fix(frontend): invisible card and accessibility contrast issue

bounswe · Dec 13, 2024 · 4134a4f · 4134a4f
1 parent 2aabc8a
commit 4134a4f
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 31 deletions.
diff --git a/frontend/src/components/AnswerCard.tsx b/frontend/src/components/AnswerCard.tsx
@@ -24,7 +24,7 @@ export const AnswerCard: React.FC<AnswerCardProps> = ({
   author,
 }) => {
   return (
-    <Card className="border-none #e5e5e5 px-6 py-8 shadow-sm">
+    <Card className="border-none bg-neutral-100 px-6 py-8 shadow-sm">
       <div className="flex flex-col gap-6">
         <h3 className="line-clamp-2 text-xl font-semibold text-gray-800">
           {title}

diff --git a/frontend/src/components/AnswerItem.tsx b/frontend/src/components/AnswerItem.tsx
@@ -21,7 +21,7 @@ export const AnswerItem: React.FC<AnswerItemProps> = ({
   const { token } = useAuthStore();
 
   return (
-    <Card className="border-none #e5e5e5 px-6 py-8 shadow-sm">
+    <Card className="border-none bg-neutral-100 px-6 py-8 shadow-sm">
       <div className="flex flex-col gap-4">
         <ContentWithSnippets content={answer.content} />
         <div className="flex items-center justify-between">

diff --git a/frontend/src/components/ExerciseCard.tsx b/frontend/src/components/ExerciseCard.tsx
@@ -20,15 +20,15 @@ export const ExerciseCard: React.FC<ExerciseCardProps> = ({
   link,
 }) => {
   return (
-    <Card className="flex flex-1 border-none #e5e5e5 px-6 py-8 shadow-sm">
+    <Card className="flex flex-1 border-none bg-neutral-100 px-6 py-8 shadow-sm">
       <div className="flex flex-col gap-6">
         <h3 className="line-clamp-2 text-xl font-semibold text-gray-800">
           {title}
         </h3>
         <p className="line-clamp-3 text-sm font-light text-gray-600">
           {description}
         </p>
-        <div className="flex flex-col gap-3 text-xs text-gray-500">
+        <div className="flex flex-col gap-3 text-xs text-gray-800">
           <div className="flex items-center gap-1">
             <span className="font-semibold">Difficulty:</span>
             <span>{difficulty}</span>

diff --git a/frontend/src/components/QuestionCard.tsx b/frontend/src/components/QuestionCard.tsx
@@ -27,7 +27,7 @@ export const QuestionCard = React.forwardRef<HTMLDivElement, QuestionCardProps>(
   ({ id, title, content, votes, answerCount, author, difficulty }, ref) => {
     return (
       <Card
-        className="flex flex-1 border-none #e5e5e5 px-6 py-8 shadow-sm"
+        className="flex flex-1 border-none bg-neutral-100 px-6 py-8 shadow-sm"
         ref={ref}
       >
         <div className="flex flex-col gap-6">
@@ -65,7 +65,7 @@ export const QuestionCard = React.forwardRef<HTMLDivElement, QuestionCardProps>(
             )}
             <Link
               to={`/question/${id}`}
-              className="flex items-center text-sm font-medium text-gray-800 hover:underline p-2"
+              className="flex items-center p-2 text-sm font-medium text-gray-800 hover:underline"
             >
               Go to question
               <ArrowRight className="ml-1 h-4 w-4" />

diff --git a/frontend/src/components/TagCard.tsx b/frontend/src/components/TagCard.tsx
@@ -12,7 +12,7 @@ export const TagCard = React.forwardRef<HTMLDivElement, TagCardProps>(
   ({ tag }, ref) => {
     return (
       <Card
-        className="flex-1 border-none #e5e5e5 px-6 py-8 shadow-sm"
+        className="flex-1 border-none bg-neutral-100 px-6 py-8 shadow-sm"
         ref={ref}
       >
         <div className="flex flex-col gap-6">

diff --git a/mobile/app/question/[questionId].tsx b/mobile/app/question/[questionId].tsx
@@ -27,7 +27,14 @@ import {
 } from "@/services/api/programmingForumComponents";
 import useAuthStore from "@/services/auth";
 import { Link, useLocalSearchParams, useRouter } from "expo-router";
-import { ArrowLeftIcon, BookmarkIcon, Flag, MessageSquare, ThumbsUp, Trash } from "lucide-react-native";
+import {
+  ArrowLeftIcon,
+  BookmarkIcon,
+  Flag,
+  MessageSquare,
+  ThumbsUp,
+  Trash,
+} from "lucide-react-native";
 import { useEffect, useState } from "react";
 import { ScrollView, View } from "react-native";
 export default function QuestionPage() {
@@ -49,13 +56,15 @@ export default function QuestionPage() {
     }
   );
   const data = result?.data;
-  const question = data! || {}; 
+  const question = data! || {};
 
   const { mutateAsync: deleteQuestion } = useDeleteQuestionById();
   const { selfProfile, token } = useAuthStore();
 
   const [optimisticVotes, setOptimisticVotes] = useState<number | null>(null);
-  const [optimisticBookmarked, setOptimisticBookmarked] = useState<boolean>(question.bookmarked ?? false);
+  const [optimisticBookmarked, setOptimisticBookmarked] = useState<boolean>(
+    question.bookmarked ?? false
+  );
 
   useEffect(() => {
     setOptimisticBookmarked(question.bookmarked ?? false);
@@ -89,21 +98,25 @@ export default function QuestionPage() {
     },
   });
 
-  const { mutateAsync: bookmarkQuestion, isPending: isPendingBookmark } = useBookmarkQuestion({
-    onMutate: async () => {
-      setOptimisticBookmarked(true);
-    },
-    onSuccess: () => {
-      refetch().then(() => {
+  const { mutateAsync: bookmarkQuestion, isPending: isPendingBookmark } =
+    useBookmarkQuestion({
+      onMutate: async () => {
         setOptimisticBookmarked(true);
-      });
-    },
-    onError: () => {
-      setOptimisticBookmarked(false);
-    },
-  });
+      },
+      onSuccess: () => {
+        refetch().then(() => {
+          setOptimisticBookmarked(true);
+        });
+      },
+      onError: () => {
+        setOptimisticBookmarked(false);
+      },
+    });
 
-  const { mutateAsync: unbookmarkQuestion, isPending: isPendingRemoveBookmark} = useRemoveQuestionBookmark({
+  const {
+    mutateAsync: unbookmarkQuestion,
+    isPending: isPendingRemoveBookmark,
+  } = useRemoveQuestionBookmark({
     onMutate: async () => {
       setOptimisticBookmarked(false);
     },
@@ -117,7 +130,6 @@ export default function QuestionPage() {
     },
   });
 
-
   if (isLoading) {
     return <FullscreenLoading overlay />;
   }
@@ -142,7 +154,7 @@ export default function QuestionPage() {
     } else {
       bookmarkQuestion({ pathParams: { questionId: question.id } });
     }
-  }
+  };
 
   return (
     <VStack className="flex-1 px-2 my-8 mt-8">
@@ -158,7 +170,7 @@ export default function QuestionPage() {
         <Button
           onPress={handleBookmark}
           disabled={isPendingBookmark || isPendingRemoveBookmark}
-          size="sm" 
+          size="sm"
           variant={optimisticBookmarked ? "solid" : "outline"}
           className="self-end mt-5 mr-6"
         >
@@ -316,7 +328,7 @@ export default function QuestionPage() {
           </Text>
         </View>
 
-        <View className="rounded-lg #e5e5e5 p-4">
+        <View className="rounded-lg bg-neutral-100 p-4">
           <Text className="whitespace-pre-wrap">{question.content}</Text>
         </View>
 

diff --git a/mobile/components/AnswerCard.tsx b/mobile/components/AnswerCard.tsx
@@ -26,7 +26,7 @@ export const AnswerCard: React.FC<AnswerCardProps> = ({
   author,
 }) => {
   return (
-    <Card className="border-none #e5e5e5 px-6 py-8 shadow-sm">
+    <Card className="border-none bg-neutral-100 px-6 py-8 shadow-sm">
       <View className="flex flex-col gap-6">
         <Text className="line-clamp-2 text-xl font-semibold text-gray-800">
           {title}

diff --git a/mobile/components/AnswerItem.tsx b/mobile/components/AnswerItem.tsx
@@ -23,7 +23,7 @@ export const AnswerItem: React.FC<AnswerItemProps> = ({
   const { token } = useAuthStore();
 
   return (
-    <Card className="border-none #e5e5e5 px-6 py-8 shadow-sm">
+    <Card className="border-none bg-neutral-100 px-6 py-8 shadow-sm">
       <View className="flex flex-col gap-4">
         <ContentWithSnippets content={answer.content} />
         <HStack className="flex items-center justify-between">

diff --git a/mobile/components/ui/card/styles.tsx b/mobile/components/ui/card/styles.tsx
@@ -1,6 +1,6 @@
 import { isWeb } from "@gluestack-ui/nativewind-utils/IsWeb";
 import { tva } from "@gluestack-ui/nativewind-utils/tva";
-const baseStyle = isWeb ? "flex flex-col relative z-0" : "#e5e5e5 ";
+const baseStyle = isWeb ? "flex flex-col relative z-0" : "bg-neutral-100 ";
 
 export const cardStyle = tva({
   base: baseStyle,
@@ -11,7 +11,7 @@ export const cardStyle = tva({
       lg: "p-6 rounded-xl",
     },
     variant: {
-      elevated: "#e5e5e5 shadow-xl",
+      elevated: "bg-neutral-100 shadow-xl",
       outline: "border border-outline-200 ",
       ghost: "rounded-none",
       filled: "bg-background-50",