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>
</>

2
src/components/Low/AudioPlayer.tsx
View File

@@ -7,7 +7,7 @@ import ProgressBar from "./ProgressBar";
interface Props {
src: string;
color: "blue" | "orange" | "green" | Module;
color: "red" | "rose" | "purple" | Module;
autoPlay?: boolean;
disabled?: boolean;
onEnd?: () => void;

8
src/components/Low/Button.tsx
View File

@@ -13,14 +13,14 @@ interface Props {
export default function Button({color = "green", variant = "solid", disabled = false, className, children, onClick}: Props) {
const colorClassNames: {[key in typeof color]: {[key in typeof variant]: string}} = {
green: {
solid: "bg-mti-green-light text-white hover:bg-mti-green disabled:text-mti-green disabled:bg-mti-green-ultralight selection:bg-mti-green-dark",
solid: "bg-mti-purple-light text-white hover:bg-mti-purple disabled:text-mti-purple disabled:bg-mti-purple-ultralight selection:bg-mti-purple-dark",
outline:
"bg-transparent text-mti-green-light border border-mti-green-light hover:bg-mti-green-light disabled:text-mti-green disabled:bg-mti-green-ultralight selection:bg-mti-green-dark hover:text-white selection:text-white",
"bg-transparent text-mti-purple-light border border-mti-purple-light hover:bg-mti-purple-light disabled:text-mti-purple disabled:bg-mti-purple-ultralight selection:bg-mti-purple-dark hover:text-white selection:text-white",
},
blue: {
solid: "bg-mti-blue-light text-white hover:bg-mti-blue disabled:text-mti-blue disabled:bg-mti-blue-ultralight selection:bg-mti-blue-dark",
solid: "bg-mti-red-light text-white hover:bg-mti-red disabled:text-mti-red disabled:bg-mti-red-ultralight selection:bg-mti-red-dark",
outline:
"bg-transparent text-mti-blue-light border border-mti-blue-light hover:bg-mti-blue-light disabled:text-mti-blue disabled:bg-mti-blue-ultralight selection:bg-mti-blue-dark hover:text-white selection:text-white",
"bg-transparent text-mti-red-light border border-mti-red-light hover:bg-mti-red-light disabled:text-mti-red disabled:bg-mti-red-ultralight selection:bg-mti-red-dark hover:text-white selection:text-white",
},
orange: {
solid: "bg-mti-orange-light text-white hover:bg-mti-orange disabled:text-mti-orange disabled:bg-mti-orange-ultralight selection:bg-mti-orange-dark",

8
src/components/Low/ProgressBar.tsx
View File

@@ -4,16 +4,16 @@ import clsx from "clsx";
interface Props {
label: string;
percentage: number;
color: "blue" | "orange" | "green" | Module;
color: "red" | "rose" | "purple" | Module;
useColor?: boolean;
className?: string;
}
export default function ProgressBar({label, percentage, color, useColor = false, className}: Props) {
const progressColorClass: {[key in typeof color]: string} = {
blue: "bg-mti-blue-light",
orange: "bg-mti-orange-light",
green: "bg-mti-green-light",
red: "bg-mti-red-light",
rose: "bg-mti-rose-light",
purple: "bg-mti-purple-light",
reading: "bg-ielts-reading",
listening: "bg-ielts-listening",
writing: "bg-ielts-writing",

4
src/components/Sidebar.tsx
View File

@@ -24,8 +24,8 @@ const Nav = ({Icon, label, path, keyPath}: NavProps) => (
<Link
href={keyPath}
className={clsx(
"p-4 px-8 rounded-full flex gap-4 items-center cursor-pointer text-gray-500 hover:bg-mti-green-light hover:text-white transition duration-300 ease-in-out",
path === keyPath && "bg-mti-green-light text-white",
"p-4 px-8 rounded-full flex gap-4 items-center cursor-pointer text-gray-500 hover:bg-mti-purple-light hover:text-white transition duration-300 ease-in-out",
path === keyPath && "bg-mti-purple-light text-white",
)}>
<Icon size={20} />
<span className="text-lg font-semibold">{label}</span>

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

@@ -18,7 +18,7 @@ export default function FillBlanksSolutions({prompt, solutions, text, userSoluti
return (
<button
className={clsx(
"rounded-full hover:text-white hover:bg-mti-blue transition duration-300 ease-in-out my-1 px-5 py-2 text-center text-white bg-mti-blue-light",
"rounded-full hover:text-white hover:bg-mti-red transition duration-300 ease-in-out my-1 px-5 py-2 text-center text-white bg-mti-red-light",
)}>
{solution.solution}
</button>
@@ -29,8 +29,8 @@ export default function FillBlanksSolutions({prompt, solutions, text, userSoluti
return (
<button
className={clsx(
"rounded-full hover:text-white hover:bg-mti-green transition duration-300 ease-in-out my-1",
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 && "px-5 py-2 text-center text-white bg-mti-purple-light",
)}>
{solution.solution}
</button>
@@ -50,8 +50,8 @@ export default function FillBlanksSolutions({prompt, solutions, text, userSoluti
<button
className={clsx(
"rounded-full hover:text-white hover:bg-mti-green transition duration-300 ease-in-out my-1",
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 && "px-5 py-2 text-center text-white bg-mti-purple-light",
)}>
{solution.solution}
</button>
@@ -84,11 +84,11 @@ export default function FillBlanksSolutions({prompt, solutions, text, userSoluti
</span>
<div className="flex gap-4 items-center">
<div className="flex gap-2 items-center">
<div className="w-4 h-4 rounded-full bg-mti-green" />
<div className="w-4 h-4 rounded-full bg-mti-purple" />
Correct
</div>
<div className="flex gap-2 items-center">
<div className="w-4 h-4 rounded-full bg-mti-blue" />
<div className="w-4 h-4 rounded-full bg-mti-red" />
Unanswered
</div>
<div className="flex gap-2 items-center">

10
src/components/Solutions/MatchSentences.tsx
View File

@@ -31,8 +31,8 @@ export default function MatchSentencesSolutions({options, prompt, sentences, use
className={clsx(
"w-8 h-8 rounded-full z-10 text-white",
"transition duration-300 ease-in-out",
!userSolutions.find((x) => x.question === id) && "!bg-mti-blue",
userSolutions.find((x) => x.question === id)?.option === solution && "bg-mti-green",
!userSolutions.find((x) => x.question === id) && "!bg-mti-red",
userSolutions.find((x) => x.question === id)?.option === solution && "bg-mti-purple",
userSolutions.find((x) => x.question === id)?.option !== solution && "bg-mti-orange",
)}>
{id}
@@ -46,7 +46,7 @@ export default function MatchSentencesSolutions({options, prompt, sentences, use
<button
id={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}
@@ -73,10 +73,10 @@ export default function MatchSentencesSolutions({options, prompt, sentences, use
</div>
<div className="flex gap-4 items-center">
<div className="flex gap-2 items-center">
<div className="w-4 h-4 rounded-full bg-mti-green" /> Correct
<div className="w-4 h-4 rounded-full bg-mti-purple" /> Correct
</div>
<div className="flex gap-2 items-center">
<div className="w-4 h-4 rounded-full bg-mti-blue" /> Unanswered
<div className="w-4 h-4 rounded-full bg-mti-red" /> Unanswered
</div>
<div className="flex gap-2 items-center">
<div className="w-4 h-4 rounded-full bg-mti-orange" /> Wrong

8
src/components/Solutions/MultipleChoice.tsx
View File

@@ -14,11 +14,11 @@ function Question({
}: MultipleChoiceQuestion & {userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean}) {
const optionColor = (option: string) => {
if (option === solution && !userSolution) {
return "!border-mti-blue-light !text-mti-blue-light";
return "!border-mti-red-light !text-mti-red-light";
}
if (option === solution) {
return "!border-mti-green-light !text-mti-green-light";
return "!border-mti-purple-light !text-mti-purple-light";
}
return userSolution === option ? "!border-mti-orange-light !text-mti-orange-light" : "";
@@ -87,11 +87,11 @@ export default function MultipleChoice({prompt, questions, userSolutions, onNext
</div>
<div className="flex gap-4 items-center">
<div className="flex gap-2 items-center">
<div className="w-4 h-4 rounded-full bg-mti-green" />
<div className="w-4 h-4 rounded-full bg-mti-purple" />
Correct
</div>
<div className="flex gap-2 items-center">
<div className="w-4 h-4 rounded-full bg-mti-blue" />
<div className="w-4 h-4 rounded-full bg-mti-red" />
Unanswered
</div>
<div className="flex gap-2 items-center">

8
src/components/Solutions/WriteBlanks.tsx
View File

@@ -39,10 +39,10 @@ function Blank({
const getSolutionStyling = () => {
if (!userSolution) {
return "bg-mti-blue-ultralight text-mti-blue-light";
return "bg-mti-red-ultralight text-mti-red-light";
}
return "bg-mti-green-ultralight text-mti-green-light";
return "bg-mti-purple-ultralight text-mti-purple-light";
};
return (
@@ -112,11 +112,11 @@ export default function WriteBlanksSolutions({
</span>
<div className="flex gap-4 items-center">
<div className="flex gap-2 items-center">
<div className="w-4 h-4 rounded-full bg-mti-green" />
<div className="w-4 h-4 rounded-full bg-mti-purple" />
Correct
</div>
<div className="flex gap-2 items-center">
<div className="w-4 h-4 rounded-full bg-mti-blue" />
<div className="w-4 h-4 rounded-full bg-mti-red" />
Unanswered
</div>
<div className="flex gap-2 items-center">