devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated the platform colors to the new ones

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-07-22 07:18:28 +01:00
parent 16ea0b497e
commit 6ade34d243
22 changed files with 102 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Exercises/FillBlanks.tsx
View File

@@ -31,7 +31,7 @@ function WordsDrawer({words, isOpen, blankId, previouslySelectedWord, onCancel,
isOpen ? "visible opacity-100" : "invisible opacity-0",
)}>
<div className="w-full flex gap-2">
<div className="rounded-full w-6 h-6 flex items-center justify-center text-white bg-mti-green-light">{blankId}</div>
<div className="rounded-full w-6 h-6 flex items-center justify-center text-white bg-mti-purple-light">{blankId}</div>
<span> Choose the correct word:</span>
</div>
<div className="grid grid-cols-6 gap-6">
@@ -41,8 +41,8 @@ function WordsDrawer({words, isOpen, blankId, previouslySelectedWord, onCancel,
onClick={() => setSelectedWord((prev) => (prev === word ? undefined : word))}
className={clsx(
"rounded-full py-3 text-center transition duration-300 ease-in-out",
selectedWord === word ? "text-white bg-mti-green-light" : "bg-mti-green-ultralight",
!isDisabled && "hover:text-white hover:bg-mti-green",
selectedWord === word ? "text-white bg-mti-purple-light" : "bg-mti-purple-ultralight",
!isDisabled && "hover:text-white hover:bg-mti-purple",
"disabled:cursor-not-allowed disabled:text-mti-gray-dim",
)}
disabled={isDisabled}>
@@ -101,10 +101,10 @@ export default function FillBlanks({
return (
<button
className={clsx(
"rounded-full hover:text-white hover:bg-mti-green transition duration-300 ease-in-out my-1",
!userSolution && "w-6 h-6 text-center text-mti-green-light bg-mti-green-ultralight",
currentBlankId === id && "text-white !bg-mti-green-light ",
userSolution && "px-5 py-2 text-center text-white bg-mti-green-light",
"rounded-full hover:text-white hover:bg-mti-purple transition duration-300 ease-in-out my-1",
!userSolution && "w-6 h-6 text-center text-mti-purple-light bg-mti-purple-ultralight",
currentBlankId === id && "text-white !bg-mti-purple-light ",
userSolution && "px-5 py-2 text-center text-white bg-mti-purple-light",
)}
onClick={() => setCurrentBlankId(id)}>
{userSolution ? userSolution.solution : id}

6
src/components/Exercises/MatchSentences.tsx
View File

@@ -51,9 +51,9 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
id={id}
onClick={() => setSelectedQuestion((prev) => (prev === id ? undefined : id))}
className={clsx(
"bg-mti-green-ultralight text-mti-green hover:text-white hover:bg-mti-green w-8 h-8 rounded-full z-10",
"bg-mti-purple-ultralight text-mti-purple hover:text-white hover:bg-mti-purple w-8 h-8 rounded-full z-10",
"transition duration-300 ease-in-out",
selectedQuestion === id && "!text-white !bg-mti-green",
selectedQuestion === id && "!text-white !bg-mti-purple",
id,
)}>
{id}
@@ -68,7 +68,7 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
id={id}
onClick={() => selectOption(id)}
className={clsx(
"bg-mti-green-ultralight text-mti-green hover:text-white hover:bg-mti-green w-8 h-8 rounded-full z-10",
"bg-mti-purple-ultralight text-mti-purple hover:text-white hover:bg-mti-purple w-8 h-8 rounded-full z-10",
"transition duration-300 ease-in-out",
id,
)}>

4
src/components/Exercises/MultipleChoice.tsx
View File

@@ -23,7 +23,7 @@ function Question({
onClick={() => (onSelectOption ? onSelectOption(option.id) : null)}
className={clsx(
"flex flex-col items-center border border-mti-gray-platinum p-4 px-8 rounded-xl gap-4 cursor-pointer bg-white relative",
userSolution === option.id && "border-mti-green-light",
userSolution === option.id && "border-mti-purple-light",
)}>
<span className={clsx("text-sm", userSolution !== option.id && "opacity-50")}>{option.id}</span>
<img src={option.src!} alt={`Option ${option.id}`} />
@@ -36,7 +36,7 @@ function Question({
onClick={() => (onSelectOption ? onSelectOption(option.id) : null)}
className={clsx(
"flex border p-4 rounded-xl gap-2 cursor-pointer bg-white text-sm",
userSolution === option.id && "border-mti-green-light",
userSolution === option.id && "border-mti-purple-light",
)}>
<span className="font-semibold">{option.id}.</span>
<span>{option.text}</span>

6
src/components/Exercises/Speaking.tsx
View File

@@ -103,7 +103,7 @@ export default function Speaking({id, title, text, type, prompts, onNext, onBack
setIsRecording(false);
stopRecording();
}}
className="text-mti-green-light w-8 h-8 cursor-pointer"
className="text-mti-purple-light w-8 h-8 cursor-pointer"
/>
</div>
</>
@@ -128,14 +128,14 @@ export default function Speaking({id, title, text, type, prompts, onNext, onBack
setIsRecording(true);
resumeRecording();
}}
className="text-mti-green-light w-8 h-8 cursor-pointer"
className="text-mti-purple-light w-8 h-8 cursor-pointer"
/>
<BsCheckCircleFill
onClick={() => {
setIsRecording(false);
stopRecording();
}}
className="text-mti-green-light w-8 h-8 cursor-pointer"
className="text-mti-purple-light w-8 h-8 cursor-pointer"
/>
</div>
</>