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

- Updated the colors of the application;

Browse Source 
- Added the ability for a user to partially update their profile
This commit is contained in:
Tiago Ribeiro
2023-07-22 10:11:10 +01:00
parent 6ade34d243
commit 581adbb56e
19 changed files with 152 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/BlankQuestionsModal.tsx
View File

@@ -40,10 +40,10 @@ export default function BlankQuestionsModal({isOpen, onClose}: Props) {
Are you sure you want to continue without completing those questions?
</span>
<div className="w-full flex justify-between mt-8">
<Button color="green" onClick={() => onClose(false)} variant="outline" className="max-w-[200px] self-end w-full">
<Button color="purple" onClick={() => onClose(false)} variant="outline" className="max-w-[200px] self-end w-full">
Go Back
</Button>
<Button color="green" onClick={() => onClose(true)} className="max-w-[200px] self-end w-full">
<Button color="purple" onClick={() => onClose(true)} className="max-w-[200px] self-end w-full">
Continue
</Button>
</div>

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

@@ -51,10 +51,10 @@ function WordsDrawer({words, isOpen, blankId, previouslySelectedWord, onCancel,
))}
</div>
<div className="flex justify-between w-full">
<Button color="green" variant="outline" className="max-w-[200px] w-full" onClick={onCancel}>
<Button color="purple" variant="outline" className="max-w-[200px] w-full" onClick={onCancel}>
Back
</Button>
<Button color="green" className="max-w-[200px] w-full" onClick={() => onAnswer(selectedWord!)} disabled={!selectedWord}>
<Button color="purple" className="max-w-[200px] w-full" onClick={() => onAnswer(selectedWord!)} disabled={!selectedWord}>
Confirm
</Button>
</div>

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

@@ -94,11 +94,11 @@ export default function MultipleChoice({id, prompt, type, questions, userSolutio
</div>
<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
<Button color="green" variant="outline" onClick={back} className="max-w-[200px] w-full">
<Button color="purple" variant="outline" onClick={back} className="max-w-[200px] w-full">
Back
</Button>
<Button color="green" onClick={next} className="max-w-[200px] self-end w-full">
<Button color="purple" onClick={next} className="max-w-[200px] self-end w-full">
Next
</Button>
</div>

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

@@ -3,26 +3,26 @@ import {ReactNode} from "react";
interface Props {
children: ReactNode;
color?: "orange" | "green" | "blue";
color?: "rose" | "purple" | "red";
variant?: "outline" | "solid";
className?: string;
disabled?: boolean;
onClick?: () => void;
}
export default function Button({color = "green", variant = "solid", disabled = false, className, children, onClick}: Props) {
export default function Button({color = "purple", variant = "solid", disabled = false, className, children, onClick}: Props) {
const colorClassNames: {[key in typeof color]: {[key in typeof variant]: string}} = {
green: {
purple: {
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-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: {
red: {
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-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: {
rose: {
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",
outline:
"bg-transparent text-mti-orange-light border border-mti-orange-light hover:bg-mti-orange-light disabled:text-mti-orange disabled:bg-mti-orange-ultralight selection:bg-mti-orange-dark hover:text-white selection:text-white",

2
src/components/Navbar.tsx
View File

@@ -10,7 +10,7 @@ interface Props {
export default function Navbar({user}: Props) {
return (
<header className="w-full bg-transparent py-4 gap-2 flex items-center">
<h1 className="font-bold text-2xl w-1/6 px-8">eCrop</h1>
<h1 className="font-bold text-2xl w-1/6 px-8">EnCoach</h1>
<div className="flex justify-between w-5/6 mr-8">
<input type="text" placeholder="Search..." className="rounded-full py-4 px-6 border border-mti-gray-platinum outline-none" />
<Link href="/profile" className="flex gap-3 items-center justify-end">

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

@@ -99,11 +99,11 @@ export default function FillBlanksSolutions({prompt, solutions, text, userSoluti
</div>
<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
<Button color="green" variant="outline" onClick={onBack} className="max-w-[200px] w-full">
<Button color="purple" variant="outline" onClick={onBack} className="max-w-[200px] w-full">
Back
</Button>
<Button color="green" onClick={() => onNext()} className="max-w-[200px] self-end w-full">
<Button color="purple" onClick={() => onNext()} className="max-w-[200px] self-end w-full">
Next
</Button>
</div>

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

@@ -85,11 +85,11 @@ export default function MatchSentencesSolutions({options, prompt, sentences, use
</div>
<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
<Button color="green" variant="outline" onClick={() => onBack()} className="max-w-[200px] w-full">
<Button color="purple" variant="outline" onClick={() => onBack()} className="max-w-[200px] w-full">
Back
</Button>
<Button color="green" onClick={() => onNext()} className="max-w-[200px] self-end w-full">
<Button color="purple" onClick={() => onNext()} className="max-w-[200px] self-end w-full">
Next
</Button>
</div>

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

@@ -102,11 +102,11 @@ export default function MultipleChoice({prompt, questions, userSolutions, onNext
</div>
<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
<Button color="green" variant="outline" onClick={back} className="max-w-[200px] w-full">
<Button color="purple" variant="outline" onClick={back} className="max-w-[200px] w-full">
Back
</Button>
<Button color="green" onClick={next} className="max-w-[200px] self-end w-full">
<Button color="purple" onClick={next} className="max-w-[200px] self-end w-full">
Next
</Button>
</div>

4
src/components/Solutions/Speaking.tsx
View File

@@ -71,11 +71,11 @@ export default function Speaking({title, text, prompts, userSolutions, onNext, o
</div>
<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
<Button color="green" variant="outline" onClick={onBack} className="max-w-[200px] w-full">
<Button color="purple" variant="outline" onClick={onBack} className="max-w-[200px] w-full">
Back
</Button>
<Button color="green" onClick={() => onNext()} className="max-w-[200px] self-end w-full">
<Button color="purple" onClick={() => onNext()} className="max-w-[200px] self-end w-full">
Next
</Button>
</div>

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

@@ -127,11 +127,11 @@ export default function WriteBlanksSolutions({
</div>
<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
<Button color="green" variant="outline" onClick={() => onBack()} className="max-w-[200px] w-full">
<Button color="purple" variant="outline" onClick={() => onBack()} className="max-w-[200px] w-full">
Back
</Button>
<Button color="green" onClick={() => onNext()} className="max-w-[200px] self-end w-full">
<Button color="purple" onClick={() => onNext()} className="max-w-[200px] self-end w-full">
Next
</Button>
</div>

4
src/components/Solutions/Writing.tsx
View File

@@ -96,11 +96,11 @@ export default function Writing({id, prompt, info, attachment, userSolutions, on
</div>
<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
<Button color="green" variant="outline" onClick={onBack} className="max-w-[200px] w-full">
<Button color="purple" variant="outline" onClick={onBack} className="max-w-[200px] w-full">
Back
</Button>
<Button color="green" onClick={() => onNext()} className="max-w-[200px] self-end w-full">
<Button color="purple" onClick={() => onNext()} className="max-w-[200px] self-end w-full">
Next
</Button>
</div>