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

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",