gitea/amati
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: index.lazy change color using bg primary from index.css

Browse Source
This commit is contained in:
abiyasa05 2024-10-31 15:08:33 +07:00
parent b52a07eb42
commit ab6c448361
1 changed files with 23 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx
View File

@ -14,6 +14,7 @@ import {
CardDescription, CardDescription,
CardHeader, CardHeader,
} from "@/shadcn/components/ui/card"; } from "@/shadcn/components/ui/card";
import { Button } from "@/shadcn/components/ui/button";
import { Textarea } from "@/shadcn/components/ui/textarea"; import { Textarea } from "@/shadcn/components/ui/textarea";
import { Label } from "@/shadcn/components/ui/label"; import { Label } from "@/shadcn/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/shadcn/components/ui/radio-group"; import { RadioGroup, RadioGroupItem } from "@/shadcn/components/ui/radio-group";
@ -697,10 +698,10 @@ export default function AssessmentPage() {
{question.options.map((option: any) => ( {question.options.map((option: any) => (
<div <div
key={option.optionId} key={option.optionId}
className={`cursor-pointer transition-transform transform hover:scale-105 shadow-md hover:shadow-lg flex items-center border rounded-lg p-3 text-sm ${ className={`cursor-pointer transition-transform transform hover:scale-105 shadow-md hover:shadow-lg flex items-center border-4 rounded-lg p-3 text-sm ${
answers[question.questionId] === option.optionId answers[question.questionId] === option.optionId
? "bg-blue-500 text-white" ? "bg-[--primary-color] text-white border-[--primary-color]"
: "bg-gray-200 text-black" : "bg-gray-200 text-black border-gray-200"
}`} }`}
onClick={() => handleAnswerChange(question.questionId, option.optionId)} onClick={() => handleAnswerChange(question.questionId, option.optionId)}
> >
@ -708,7 +709,7 @@ export default function AssessmentPage() {
value={option.optionId} value={option.optionId}
id={option.optionId} id={option.optionId}
checked={answers[question.questionId] === option.optionId} checked={answers[question.questionId] === option.optionId}
className="bg-white checked:bg-white checked:border-blue-500 pointer-events-none rounded-full" className="bg-white checked:bg-white checked:border-[--primary-color] pointer-events-none rounded-full"
/> />
<Label <Label
htmlFor={option.optionId} htmlFor={option.optionId}
@ -830,7 +831,7 @@ export default function AssessmentPage() {
<button <button
className={`w-9 h-9 border rounded-sm flex items-center justify-center relative text-md className={`w-9 h-9 border rounded-sm flex items-center justify-center relative text-md
${answers[questionId] && flaggedQuestions[questionId] ? "bg-white text-black" : ""} ${answers[questionId] && flaggedQuestions[questionId] ? "bg-white text-black" : ""}
${answers[questionId] && !flaggedQuestions[questionId] ? "bg-blue-500 text-white" : ""} ${answers[questionId] && !flaggedQuestions[questionId] ? "bg-[--primary-color] text-white" : ""}
${!answers[questionId] && !flaggedQuestions[questionId] ? "bg-transparent text-black" : ""} ${!answers[questionId] && !flaggedQuestions[questionId] ? "bg-transparent text-black" : ""}
${flaggedQuestions[questionId] ? "border-gray-50" : ""}`} ${flaggedQuestions[questionId] ? "border-gray-50" : ""}`}
onClick={() => scrollToQuestion(questionId)} onClick={() => scrollToQuestion(questionId)}
@ -864,7 +865,7 @@ export default function AssessmentPage() {
<div className="mt-4"> <div className="mt-4">
<Card> <Card>
<CardHeader> <CardHeader>
<Text className="font-extrabold text-center">Nilai Sementara</Text> <Text className="text-lg font-extrabold text-center">Nilai Sementara</Text>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
@ -876,9 +877,9 @@ export default function AssessmentPage() {
return ( return (
<div key={aspect.aspectId} className="flex justify-between items-center"> <div key={aspect.aspectId} className="flex justify-between items-center">
<Text className="text-base text-gray-400">{aspect.aspectName}</Text> <Text className="text-lg text-gray-700">{aspect.aspectName}</Text>
<Text <Text
className={`text-base font-bold ${ className={`text-lg font-bold ${
aspectScoreValue >= 4.01 aspectScoreValue >= 4.01
? "text-green-700" ? "text-green-700"
: aspectScoreValue >= 3.01 : aspectScoreValue >= 3.01
@ -896,7 +897,7 @@ export default function AssessmentPage() {
); );
}) })
) : ( ) : (
<Text className="text-base text-gray-400">Data aspek ini kosong</Text> <Text className="text-base text-gray-700">Data aspek ini kosong</Text>
)} )}
</CardDescription> </CardDescription>
@ -910,8 +911,8 @@ export default function AssessmentPage() {
const subAspectScoreValue = parseFloat(subAspectScore); const subAspectScoreValue = parseFloat(subAspectScore);
return ( return (
<div key={subAspect.subAspectId} className="flex justify-between items-center"> <div key={subAspect.subAspectId} className="flex justify-between items-center my-2">
<Text className="text-sm text-gray-400">{subAspect.subAspectName}</Text> <Text className="text-sm text-gray-700">{subAspect.subAspectName}</Text>
<Text <Text
className={`text-sm font-bold ${ className={`text-sm font-bold ${
subAspectScoreValue >= 4.01 subAspectScoreValue >= 4.01
@ -931,19 +932,19 @@ export default function AssessmentPage() {
); );
}) })
) : ( ) : (
<Text className="text-sm text-gray-400">Data sub-aspek ini kosong</Text> <Text className="text-sm text-gray-700">Data sub-aspek ini kosong</Text>
)} )}
</CardContent>
{/* Tombol Selesai */} {/* Tombol Selesai */}
<div className="mt-4 mb-4 ml-4 mr-4"> <div className="pt-4">
<button <Button
onClick={handleFinishClick} onClick={handleFinishClick}
className="bg-blue-500 text-white font-bold rounded-md py-2 w-full text-sm" className="bg-[--primary-color] text-white font-bold rounded-md w-full text-sm"
> >
Selesai Selesai
</button> </Button>
</div> </div>
</CardContent>
{/* Modal untuk konfirmasi selesai asesmen */} {/* Modal untuk konfirmasi selesai asesmen */}
<FinishAssessmentModal <FinishAssessmentModal