From 078bf3b37a71d1242dba42e99387aa8a17d38b3e Mon Sep 17 00:00:00 2001 From: Esenwa Kachukwu Michael Date: Tue, 25 Feb 2025 10:16:32 +0100 Subject: [PATCH] Enhance frontend configuration and UI components - Add Playwright for browser testing - Integrate Tailwind CSS in Vite configuration - Update Button and Header components with refined styling - Add social media logo assets - Refactor file paths and button variants --- margin_frontend/package.json | 1 + margin_frontend/src/assets/img/DiscordLogo.png | Bin 0 -> 1369 bytes margin_frontend/src/assets/img/TelegramLogo.png | Bin 0 -> 1200 bytes margin_frontend/src/assets/img/XLogo.png | Bin 0 -> 849 bytes margin_frontend/src/routes/index.tsx | 6 +----- margin_frontend/src/ui/core/button.tsx | 7 ++++--- margin_frontend/src/ui/layout/footer.tsx | 6 +++--- margin_frontend/src/ui/layout/header.tsx | 2 +- margin_frontend/vite.config.ts | 6 ++++-- 9 files changed, 14 insertions(+), 14 deletions(-) create mode 100644 margin_frontend/src/assets/img/DiscordLogo.png create mode 100644 margin_frontend/src/assets/img/TelegramLogo.png create mode 100644 margin_frontend/src/assets/img/XLogo.png diff --git a/margin_frontend/package.json b/margin_frontend/package.json index bc2f70f8..c66a98ba 100644 --- a/margin_frontend/package.json +++ b/margin_frontend/package.json @@ -23,6 +23,7 @@ }, "devDependencies": { "@eslint/js": "^9.19.0", + "@playwright/test": "^1.50.1", "@types/react": "^19.0.10", "@types/react-dom": "^19.0.3", "@vitejs/plugin-react": "^4.3.4", diff --git a/margin_frontend/src/assets/img/DiscordLogo.png b/margin_frontend/src/assets/img/DiscordLogo.png new file mode 100644 index 0000000000000000000000000000000000000000..cc023055c5f30af3e06ec72af85992b7c1648d10 GIT binary patch literal 1369 zcmV-f1*ZCmP)UM6t=m!*%d|qgunzp#~#uQitJPwLBk&&9yQTt~2II$gq-de=iA9GXf*~Yv`kxX!f=4K5c6)o9>8ZWA zxFB65N^OVY`SS9T9{yK8v;F=3EiG?-eVzRgcqC|FY~S78-5;S)3L0>JeoiLW@;QUB zZR0VLLP5u{NaW|awAdlH3PhGClpP!#9HhnrIE99G_zt?A5M5ag6jKcb|L6|MjS~?N zIpZSFZ^rW*4Znt>d{40eeAcl}ndt8*T~ZIva1LPb2gNMaefRhGee=`fk$D>=!qfO< zYF%7-XMmw$o=_7_(-^Bg7%c|)1V zIs2JVCtn_TbKvaktc$@@t1RMw$EBe{H#ax)s&%>w;w z=6S}xas#Xy1Ec$-H9wCbu{fYgPN54nw2tm;JA}G3HPu*{PIdSyQ)cNL@c&pK~0o$5mr6%S_6-;xVckBY9xQ#5xZO18`|r)%!H^D?Gw0^L z@(jE)Qv0IwAUEJ8@y|H)olRCnT|S{a$U}(nuPzU16*IX~@~j?Vjm~R1oMK)|z-P|p zyU-|EEYp0@H74A_cgh?m`vHyMm|{Q34RDt~3M)%UD9^#xYaI!{uB{!R-^g88kIA3b zQJxx8VoIDRH@dkU$3k1qPx|%11j2q`!#QDP!p96=97|2;Es&o$LrXAqfHSVClddV* zD`-m*4s|U?fgv&qtu|7A;S6wWtdxp8irU{Yv=NnHZ2OKZ+_BOB$*8-zQhsEY-4~{i&@1F-gL&gijNRt!?IIx?f(bF%Vm}29N5vfLMxbCZw(-YQIonm{K|iDNG$h_ zC%iZ#5L{Yb=Za$d9$$*@I(XGTG?FLzw$8jj)p}5M36fc0h|vLgd}9e6zEz#6L4yVj b-WUG^{Y?qUVE;R+00000NkvXXu0mjfRzP@8 literal 0 HcmV?d00001 diff --git a/margin_frontend/src/assets/img/TelegramLogo.png b/margin_frontend/src/assets/img/TelegramLogo.png new file mode 100644 index 0000000000000000000000000000000000000000..46752bad4d19d090d7cb19aa037f266e216f1bb1 GIT binary patch literal 1200 zcmV;h1W)^kP)y?86{ssvR)AA#`AJv-aR=;R`1dvEgbsDnbmsvX zb!s?OsU-c%J-6?xL8%p1_`gw6-yHpZ|HsD0Mypb(O!oKpZ_WO1OW^+g-iOc~Jo<6l z`}=$I=;-K9j$2pX2#=4CHQX8>A0KVpf0+H%YSlB_zMMd8B5EqQpEef#q1pCjCZtWI zfyb7zXxoN^gM&GFKXnJBww18$6a->iU>oo$1QyWt1m@Dj{TTCnHsJl)Ht??zptd(R zH_!0lW4zWZLniue5(?JV)=u~K_Qnqn51qIX>jbv%lukf~KYY|SBtZKR5oKGGi$Ovc zu=6X?=En~(z0kH;DFlSJt>I5iO`?Z;6vILA2JfEeAET{_L^TtViV*!Fcf|JXs#*g4 z2)20u?fiy7U5oGmuJf0dm#xFY!#4c@*8pu^JOJ~q(O;Ls6Bt($&!J0(!aIi?j`)ucXj~_KQpOw~RUGhNI4byNr3G_!}7i(=~Q( z2XZExNZYXMz}BgWXF6&Ma%rEK5ulx7tIw2M+aUz{Wz)68s+jqdEmzUr%U1OMwvqY8ryj z{you0P0$&6aa$E)ITs^|5N*$B>lky2II0WB@q?>?lZY}gSwh3RbT&1$IT!1Q6s|VL z-l!ZIwJ4x~ZLwyMHGXD7y4IMP0%I{u!_zy!MQh4Y3ZwrHCev2sU}i$D0xt1wRRA$5 zlnFF9-{`&qiF36Cbp9CV*D==H%9>NCn4@_xBsyYq8$L49QDh;=0uIQue`2X>RAVfj zYuNS?bAnm`Ea1dzkY~=)1eoYpR*0r3DK0`nCNPi*^2{k?2Nbe&7dL7DBr!4$C8^Ma zJ^eb#8_h}~KrnGZYjq{gx^zhRMXujwu9AKm=Fw72YVYX-iCs7&!EqphAXJmq3)OC3h z!?%T5qkszwoEyp^U=jXWMG&(Gu)+%e4*medP=a?fO2=UU O0000gCIYh&cpU*af?Y>o9D!UsilfQEgrE?(1BLsyHSAbBXnJ}E z_M)$f(u0=NJ&&GWEu|_dDk|QSTG^kQ%_cdWPQPe3QEswEqtWa4`8YvtD+i zRzbvi$JDHcU7+F39;*y*jVR`7bW# zfir;dc)UNK&yU8b?qad{=xbBPdc8)#UE>s-pL4Et1^`B*(Uu(icDblte@2)4+SnlH zr*z#!AJhKV;c)n(n6Lr>G)!jdb(kd7=8<%X!`JNKM9zq&Q zk(jL7nS}E6laCFxe4Cs%TYg6Yj+GGa9sv1b^{kJ{;Sa^UZ?nOcoc~Q5J-LJBhj$Nv zJWFi#u`TagY|?y{jpjTM1pxA4qOnSdf(;g_B;Vi15`N+U@NlF(v$xEU5Tyt5cUe;+T;R$K>ADcy1ICN^MIzAelINK+LtM=W3cyxH zfJC65sV+G(LtM=e2Y@^dfu@XcuO)&|X1uZCAP&G%MR+tN!o8{)q5z6j1hizaig1r= z2JjBRRzB7P5<;T3?Sig0V0!CnVKstC7~8LR*-RfHWm-%%dKsAkx34k1ew0XOz8 zfrM5wuEF`h5v__)ln@+TGK2GhBU%-qC?Plmec+%;^;7-J4$(dz<-;UnnrDKKEEN?M b6?fzhOw(=G2(#ml00000NkvXXu0mjf^{#ik literal 0 HcmV?d00001 diff --git a/margin_frontend/src/routes/index.tsx b/margin_frontend/src/routes/index.tsx index 682928a7..0d7dee53 100644 --- a/margin_frontend/src/routes/index.tsx +++ b/margin_frontend/src/routes/index.tsx @@ -36,11 +36,7 @@ function Content() { Trade smarter, earn bigger, and grow your portfolio with confidence.

-
diff --git a/margin_frontend/src/ui/core/button.tsx b/margin_frontend/src/ui/core/button.tsx index c228fc81..a90c1daf 100644 --- a/margin_frontend/src/ui/core/button.tsx +++ b/margin_frontend/src/ui/core/button.tsx @@ -1,5 +1,6 @@ import { cva, type VariantProps } from "class-variance-authority"; import { ReactNode } from "react"; +import { cn } from "../../utils/cn"; const buttonVariants = cva( "inline-flex items-center justify-center uppercase cursor-pointer rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none", @@ -10,7 +11,7 @@ const buttonVariants = cva( destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: - "baseWhite border border-btnBorderColor text-baseWhite bg-background font-normal hover:bg-accent hover:text-accent-foreground", + "text-baseWhite border border-btnBorderColor text-baseWhite bg-transparent font-normal", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", @@ -18,7 +19,7 @@ const buttonVariants = cva( }, size: { sm: "h-8 px-3 text-sm", - md: "h-14 text-sm", + md: "h-12 text-sm", lg: "h-[72px] text-xl font-normal", }, }, @@ -44,7 +45,7 @@ export function Button({ }: ButtonProps) { return ( diff --git a/margin_frontend/vite.config.ts b/margin_frontend/vite.config.ts index e52a3aad..ed90572e 100644 --- a/margin_frontend/vite.config.ts +++ b/margin_frontend/vite.config.ts @@ -1,14 +1,16 @@ import { defineConfig } from "vitest/config"; import react from "@vitejs/plugin-react"; +import tailwindcss from "@tailwindcss/vite"; export default defineConfig({ - plugins: [react()], + plugins: [react(), tailwindcss()], test: { name: "react", browser: { enabled: true, - name: "chromium", provider: "playwright", + headless: true, }, + exclude: ["test/browser/**/*"], }, });