diff --git a/components/SvgWidget.tsx b/components/SvgWidget.tsx index a1d387e..356702b 100644 --- a/components/SvgWidget.tsx +++ b/components/SvgWidget.tsx @@ -115,13 +115,13 @@ export default function SvgWidget({ response, theme, sort }): JSX.Element { }; const duoIcons = [ - { icon: Duo_Waving, viewBox: "-30 0 330 330" }, - { icon: Duo_PencilBoarding, viewBox: "40 50 225 200" }, - { icon: Duo_Jolly, viewBox: "0 0 185 180", style: 'flip' }, - { icon: Duo_Excited, viewBox: "0 -15 160 240", style: 'flip' }, - { icon: Duo_Daunting, viewBox: "0 0 190 150" }, - { icon: Duo_Cannonball, viewBox: "0 0 160 150" }, - { icon: Duo_Amour, viewBox: "0 0 185 30", style: 'flip' }, + { icon: Duo_Waving, viewBox: "0 -3 148 174" }, + { icon: Duo_PencilBoarding, viewBox: "0 -48 225 183" }, + { icon: Duo_Jolly, viewBox: "0 -27 189 200", style: 'flip' }, + { icon: Duo_Excited, viewBox: "0 -10 162 220", style: 'flip' }, + { icon: Duo_Daunting, viewBox: "0 -58 191 204" }, + { icon: Duo_Cannonball, viewBox: "0 0 158 171" }, + { icon: Duo_Amour, viewBox: "0 -69 194 123", style: 'flip' }, ]; // Randomly generate a Duo icon const randomIndex = Math.floor(Math.random() * 7); @@ -130,56 +130,64 @@ export default function SvgWidget({ response, theme, sort }): JSX.Element { const iconStyle = duoIcons[randomIndex].style; // Display top 3 languages with most crowns response.courses = response.courses.slice(0, Math.min(3, response.courses.length)); - const cardStyle = theme ? { "background": `${themes[theme].background}!important`, color: `${themes[theme].colorPrimary}` } : null; + const fillParent = { + "height": "100%", + "width": "100%", + "box-sizing": "border-box" + } + const cardStyle = theme ? { + "background": `${themes[theme].background}!important`, + color: `${themes[theme].colorPrimary}`, + ...fillParent + } : fillParent; + const courseStyle = theme ? { color: `${themes[theme].colorSecondary}` } : null; return ( -
-
-
-
+
+
+
- + {response.streak} Day streak - - - {response.totalXp} XP + + + {response.totalXp} XP -
-
- {response.courses.map((course: Course) => { - const FlagComponent = flagComponents[course.learningLanguage] || flagComponents.world; - return ( -
- {sort ? ( - <> -
- -
- {numberFormatter(course.xp)} - - ) : ( - <> -
- -
- {numberFormatter(course.crowns)} - - )} - - -
- ); - })} -
- {iconStyle === 'flip' ? - : - } +
+ {response.courses.map((course: Course) => { + const FlagComponent = flagComponents[course.learningLanguage] || flagComponents.world; + return ( +
+ {sort ? ( + <> +
+ +
+ {numberFormatter(course.xp)} + + ) : ( + <> +
+ +
+ {numberFormatter(course.crowns)} + + )} + +
+ ); + })} +
+ {iconStyle === 'flip' ? + : + }
diff --git a/public/svg/Duo_Amour.svg b/public/svg/Duo_Amour.svg index d66e45a..eb9d6da 100644 --- a/public/svg/Duo_Amour.svg +++ b/public/svg/Duo_Amour.svg @@ -1 +1,216 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/svg/Duo_Daunting.svg b/public/svg/Duo_Daunting.svg index 738498b..4fb2f5c 100644 --- a/public/svg/Duo_Daunting.svg +++ b/public/svg/Duo_Daunting.svg @@ -1 +1,175 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/svg/Duo_Excited.svg b/public/svg/Duo_Excited.svg index d4c393b..882c898 100644 --- a/public/svg/Duo_Excited.svg +++ b/public/svg/Duo_Excited.svg @@ -1 +1,253 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/svg/Duo_Jolly.svg b/public/svg/Duo_Jolly.svg index a716357..b1f8fce 100644 --- a/public/svg/Duo_Jolly.svg +++ b/public/svg/Duo_Jolly.svg @@ -1 +1,193 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/svg/Duo_PencilBoarding.svg b/public/svg/Duo_PencilBoarding.svg index 2691913..4641a11 100644 --- a/public/svg/Duo_PencilBoarding.svg +++ b/public/svg/Duo_PencilBoarding.svg @@ -1,26 +1,209 @@ - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/svg/Duo_waving.svg b/public/svg/Duo_waving.svg index bbac715..b76313c 100644 --- a/public/svg/Duo_waving.svg +++ b/public/svg/Duo_waving.svg @@ -1,31 +1,152 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +