Merge pull request #26 from NoxLoveYa/main

update(dashboard): added EpiCoins svg (Credits icon)

web/src/assets/svg/epicoin.svg.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+export default function EpiCoin({ fillColor = "#EAB308" }) { // Default to yellowish color
+    return (
+        <svg
+            onClick={() => window.open("https://github.com/EliotAmn/tekbetter-server", "_blank")}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 1024 1024"
+            className="cursor-pointer"
+        >
+            <g
+                transform="translate(0.000000,1024.000000) scale(0.100000,-0.100000)"
+                fill={fillColor}
+                stroke="none"
+            >
+                <path d="M4810 10009 c-300 -20 -583 -64 -870 -135 -651 -160 -1298 -475 -1825 -888 -775 -607 -1336 -1402 -1649 -2338 -253 -758 -311 -1606 -165 -2406 141 -774 472 -1512 953 -2127 541 -692 1245 -1222 2056 -1547 1000 -401 2115 -456 3160 -157 988 282 1871 880 2516 1704 373 477 664 1043 835 1625 263 896 263 1864 0 2760 -304 1035 -956 1955 -1840 2594 -489 354 -1083 631 -1661 776 -493 123 -1029 172 -1510 139z m675 -824 c1260 -110 2401 -807 3084 -1884 652 -1026 811 -2312 427 -3466 -437 -1312 -1530 -2332 -2861 -2669 -373 -95 -587 -121 -1010 -121 -336 0 -415 5 -665 46 -1143 186 -2163 861 -2789 1848 -336 527 -538 1107 -613 1756 -17 146 -17 704 0 850 41 353 116 674 229 979 513 1386 1718 2383 3174 2626 294 49 706 63 1024 35z" />
+                <path d="M3220 7905 c-185 -27 -348 -107 -445 -218 -59 -67 -109 -171 -142 -293 l-27 -99 -6 -820 c-7 -843 -7 -851 -47 -928 -25 -50 -61 -57 -283 -57 l-200 0 0 -300 0 -300 200 0 c222 0 258 -7 283 -57 40 -76 40 -85 47 -928 6 -803 7 -822 29 -905 57 -219 165 -363 334 -444 158 -76 274 -96 570 -96 l207 0 0 299 0 300 -207 3 c-193 3 -211 5 -255 26 -88 43 -82 -12 -89 882 -4 537 -10 805 -18 848 -25 133 -88 295 -136 352 -11 13 -7 26 26 80 42 68 90 206 110 311 8 44 14 307 18 844 5 608 9 787 19 810 39 89 92 105 344 105 l188 0 0 300 0 300 -217 -1 c-120 -1 -256 -7 -303 -14z" />
+                <path d="M6610 7621 l0 -301 188 0 c250 0 300 -15 340 -100 15 -31 17 -121 23 -830 5 -698 8 -804 23 -870 21 -95 70 -221 107 -281 l29 -46 -44 -84 c-53 -100 -90 -220 -105 -344 -7 -58 -11 -344 -11 -802 0 -476 -4 -729 -11 -763 -25 -119 -79 -140 -351 -140 l-188 0 0 -300 0 -300 208 0 c294 0 411 20 567 95 145 69 246 185 301 345 57 164 57 149 63 1035 l6 820 25 50 c40 80 57 85 298 85 l202 0 0 300 0 300 -207 0 c-242 0 -258 5 -296 88 -22 47 -22 52 -28 867 -6 886 -5 870 -63 1033 -75 217 -236 353 -486 413 -82 20 -129 23 -342 27 l-248 4 0 -301z" />
+                <path d="M4769 6929 c-225 -13 -398 -56 -554 -138 -240 -125 -381 -304 -447 -567 -29 -118 -32 -346 -5 -474 34 -161 107 -307 203 -410 l44 -47 -31 -29 c-74 -70 -158 -212 -197 -334 -35 -109 -46 -189 -45 -345 0 -128 4 -164 26 -248 88 -332 326 -553 696 -648 178 -46 263 -49 1198 -49 l883 0 0 400 0 400 -866 0 c-934 0 -958 1 -1036 53 -52 34 -79 101 -80 191 0 133 50 193 184 220 66 14 195 16 928 16 l850 0 -2 373 -3 372 -890 5 c-822 5 -893 6 -935 23 -56 22 -78 42 -101 92 -21 45 -25 139 -9 197 15 51 56 97 110 122 44 21 57 21 945 26 l900 5 0 400 0 400 -820 1 c-451 1 -877 -2 -946 -7z" />
+            </g>
+        </svg>
+    );
+}

web/src/pages/module/ModulePage.tsx

@@ -1,11 +1,13 @@
 import {BasicBox} from "../../comps/WindowElem";
 import React, {useEffect} from "react";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import EpiCoin from "../../assets/svg/epicoin.svg";
+
 import {
     faBrain,
     faCalendarCheck,
     faCheckCircle,
-    faCoins,
+    faBitcoinSign,
     faHammer, faHourglass,
     faMinusCircle, faPlus, faQuestionCircle,
     faUserGraduate,
@@ -16,7 +18,6 @@ import getModules from "../../api/module.api";
 import LoadingComp from "../../comps/LoadingComp";
 import Button from "../../comps/Button";
 
-
 function RoadBlock(props: {
     children: React.ReactNode,
     title: string,
@@ -46,7 +47,9 @@ function RoadBlock(props: {
                 {
                     props.current_credits < props.required_credits! ?
                         <FontAwesomeIcon icon={faWarning} className={"text-red-600"}/> :
-                        <FontAwesomeIcon icon={faCoins}/>
+                        <div className={"w-6 h-6"}>
+                            <EpiCoin/>
+                        </div>
                 }
                 {props.required_credits !== null ?
                     <h2 className={"flex flex-row items-center gap-1"}>{props.current_credits}/{props.required_credits}
@@ -232,7 +235,9 @@ export default function ModulePage(): React.ReactElement {
 
                 <TopCard title={"Your credits"} icon={faUserGraduate} isOk={true}>
                     <div className={"flex flex-row items-center gap-2 text-2xl"}>
-                        <FontAwesomeIcon icon={faCoins} className={"text-yellow-500"}/>
+                        <div className={"w-6 h-6"}>
+                            <EpiCoin/>
+                        </div>
                         <p className={"font-bold text"}>{api_data.credits}</p>
                     </div>
                 </TopCard>
@@ -241,7 +246,9 @@ export default function ModulePage(): React.ReactElement {
                          isOk={api_data.credits + getStrategyCredits() >= api_data.required_credits}>
                     <p className={"italic text-xs text"}>To validate your year</p>
                     <div className={"flex flex-row items-center gap-2 text-2xl"}>
-                        <FontAwesomeIcon icon={faCoins} className={"text-yellow-500"}/>
+                        <div className={"w-6 h-6"}>
+                            <EpiCoin/>
+                        </div>
                         <div className={"flex text flex-row items-baseline"}>
                             <p className={"font-bold"}>{api_data.credits + getStrategyCredits()}</p>
                             <p className={"text-xs"}>/{api_data.required_credits} required</p>