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

18
src/pages/index.tsx
View File

@@ -90,20 +90,20 @@ export default function Home() {
<ProgressBar
label={`Level ${calculateAverageLevel(user.levels).toFixed(1)}`}
percentage={100}
color="blue"
color="purple"
className="max-w-xs w-32 self-end h-10"
/>
</div>
<ProgressBar
label=""
percentage={Math.round((calculateAverageLevel(user.levels) * 100) / calculateAverageLevel(user.desiredLevels))}
color="blue"
color="red"
className="w-full h-3 drop-shadow-lg"
/>
<div className="flex justify-between w-full mt-8">
<div className="flex gap-4 items-center">
<div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
<BsFileEarmarkText className="w-8 h-8 text-mti-blue-light" />
<BsFileEarmarkText className="w-8 h-8 text-mti-red-light" />
</div>
<div className="flex flex-col">
<span className="font-bold text-xl">{totalExams(stats)}</span>
@@ -112,7 +112,7 @@ export default function Home() {
</div>
<div className="flex gap-4 items-center">
<div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
<BsPencil className="w-8 h-8 text-mti-blue-light" />
<BsPencil className="w-8 h-8 text-mti-red-light" />
</div>
<div className="flex flex-col">
<span className="font-bold text-xl">{stats.length}</span>
@@ -121,7 +121,7 @@ export default function Home() {
</div>
<div className="flex gap-4 items-center">
<div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
<BsStar className="w-8 h-8 text-mti-blue-light" />
<BsStar className="w-8 h-8 text-mti-red-light" />
</div>
<div className="flex flex-col">
<span className="font-bold text-xl">{averageScore(stats)}%</span>
@@ -158,7 +158,7 @@ export default function Home() {
</div>
<div className="pl-14">
<ProgressBar
color="blue"
color="red"
label=""
percentage={Math.round((user.levels.reading * 100) / user.desiredLevels.reading)}
className="w-full h-2"
@@ -179,7 +179,7 @@ export default function Home() {
</div>
<div className="pl-14">
<ProgressBar
color="blue"
color="red"
label=""
percentage={Math.round((user.levels.writing * 100) / user.desiredLevels.writing)}
className="w-full h-2"
@@ -200,7 +200,7 @@ export default function Home() {
</div>
<div className="pl-14">
<ProgressBar
color="blue"
color="red"
label=""
percentage={Math.round((user.levels.listening * 100) / user.desiredLevels.listening)}
className="w-full h-2"
@@ -221,7 +221,7 @@ export default function Home() {
</div>
<div className="pl-14">
<ProgressBar
color="blue"
color="red"
label=""
percentage={Math.round((user.levels.speaking * 100) / user.desiredLevels.speaking)}
className="w-full h-2"

8
src/pages/login.tsx
View File

@@ -71,15 +71,15 @@ export default function Login() {
<input type="checkbox" className="hidden" />
<div
className={clsx(
"w-4 h-4 rounded-sm flex items-center justify-center border border-mti-green-light bg-white",
"w-4 h-4 rounded-sm flex items-center justify-center border border-mti-purple-light bg-white",
"transition duration-300 ease-in-out",
rememberPassword && "!bg-mti-green-light ",
rememberPassword && "!bg-mti-purple-light ",
)}>
<BsCheck color="white" className="w-full h-full" />
</div>
<span>Remember my password</span>
</div>
<Link href="/forgot-password" className="text-mti-green-light text-xs">
<Link href="/forgot-password" className="text-mti-purple-light text-xs">
Forgot Password?
</Link>
</div>
@@ -94,7 +94,7 @@ export default function Login() {
</form>
<span className="text-mti-gray-cool text-sm font-normal mt-8">
Don&apos;t have an account?{" "}
<Link className="text-mti-green-light" href="/register">
<Link className="text-mti-purple-light" href="/register">
Sign up
</Link>
</span>

2
src/pages/profile.tsx
View File

@@ -119,7 +119,7 @@ export default function Home() {
alt={user.name}
className="aspect-square h-48 w-48 rounded-full drop-shadow-xl self-end"
/>
<span className="cursor-pointer text-mti-green-light text-sm">Change picture</span>
<span className="cursor-pointer text-mti-purple-light text-sm">Change picture</span>
</div>
</div>
<div className="flex flex-col gap-4 mt-8 mb-20">

20
src/pages/record.tsx
View File

@@ -162,8 +162,8 @@ export default function History({user}: {user: User}) {
key={timestamp}
className={clsx(
"flex flex-col gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300",
correct / total >= 0.7 && "hover:border-mti-green",
correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-blue",
correct / total >= 0.7 && "hover:border-mti-purple",
correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
correct / total < 0.3 && "hover:border-mti-orange",
)}
onClick={selectExam}
@@ -172,8 +172,8 @@ export default function History({user}: {user: User}) {
<span className="font-medium">{formatTimestamp(timestamp)}</span>
<span
className={clsx(
correct / total >= 0.7 && "text-mti-green",
correct / total >= 0.3 && correct / total < 0.7 && "text-mti-blue",
correct / total >= 0.7 && "text-mti-purple",
correct / total >= 0.3 && correct / total < 0.7 && "text-mti-red",
correct / total < 0.3 && "text-mti-orange",
)}>
Level{" "}
@@ -236,27 +236,27 @@ export default function History({user}: {user: User}) {
<div className="flex gap-4">
<button
className={clsx(
"bg-mti-green-ultralight text-mti-green px-4 py-2 rounded-full hover:text-white hover:bg-mti-green-light",
"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
"transition duration-300 ease-in-out",
filter === "months" && "!bg-mti-green-light !text-white",
filter === "months" && "!bg-mti-purple-light !text-white",
)}
onClick={() => toggleFilter("months")}>
Last month
</button>
<button
className={clsx(
"bg-mti-green-ultralight text-mti-green px-4 py-2 rounded-full hover:text-white hover:bg-mti-green-light",
"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
"transition duration-300 ease-in-out",
filter === "weeks" && "!bg-mti-green-light !text-white",
filter === "weeks" && "!bg-mti-purple-light !text-white",
)}
onClick={() => toggleFilter("weeks")}>
Last week
</button>
<button
className={clsx(
"bg-mti-green-ultralight text-mti-green px-4 py-2 rounded-full hover:text-white hover:bg-mti-green-light",
"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
"transition duration-300 ease-in-out",
filter === "days" && "!bg-mti-green-light !text-white",
filter === "days" && "!bg-mti-purple-light !text-white",
)}
onClick={() => toggleFilter("days")}>
Last day

2
src/pages/register.tsx
View File

@@ -56,7 +56,7 @@ export default function Register() {
)}
</Button>
</form>
<Link className="text-mti-green-light text-sm font-normal" href="/login">
<Link className="text-mti-purple-light text-sm font-normal" href="/login">
Sign in instead
</Link>
</section>

10
src/pages/stats.tsx
View File

@@ -79,20 +79,20 @@ export default function Stats() {
<ProgressBar
label={`Level ${calculateAverageLevel(user.levels).toFixed(1)}`}
percentage={100}
color="blue"
color="red"
className="max-w-xs w-32 self-end h-10"
/>
</div>
<ProgressBar
label=""
percentage={Math.round((calculateAverageLevel(user.levels) * 100) / calculateAverageLevel(user.desiredLevels))}
color="blue"
color="red"
className="w-full h-3 drop-shadow-lg"
/>
<div className="flex justify-between w-full mt-8">
<div className="flex gap-4 items-center">
<div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
<BsFileEarmarkText className="w-8 h-8 text-mti-blue-light" />
<BsFileEarmarkText className="w-8 h-8 text-mti-red-light" />
</div>
<div className="flex flex-col">
<span className="font-bold text-xl">{Object.keys(groupBySession(stats)).length}</span>
@@ -101,7 +101,7 @@ export default function Stats() {
</div>
<div className="flex gap-4 items-center">
<div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
<BsPencil className="w-8 h-8 text-mti-blue-light" />
<BsPencil className="w-8 h-8 text-mti-red-light" />
</div>
<div className="flex flex-col">
<span className="font-bold text-xl">{stats.length}</span>
@@ -110,7 +110,7 @@ export default function Stats() {
</div>
<div className="flex gap-4 items-center">
<div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
<BsStar className="w-8 h-8 text-mti-blue-light" />
<BsStar className="w-8 h-8 text-mti-red-light" />
</div>
<div className="flex flex-col">
<span className="font-bold text-xl">{averageScore(stats)}%</span>

6
src/pages/test.tsx
View File

@@ -118,7 +118,7 @@ export default function Page() {
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>
</>
@@ -143,14 +143,14 @@ export default function Page() {
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>
</>