From e594b4be18b78ee9c9721f2578c1ca504a25a275 Mon Sep 17 00:00:00 2001 From: riyadhafraa <49757212-riyadhafraa@users.noreply.replit.com> Date: Mon, 20 Apr 2026 10:25:54 +0000 Subject: [PATCH] feat(ui): redesign TeaBoy OS to light premium SaaS theme MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Theme overhaul (artifacts/teaboy-os/src/index.css): - New light palette: background #F8FAFC, white cards, slate-200 borders - Typography: IBM Plex Sans Arabic loaded via Google Fonts (Arabic-first, RTL) - Soft glassmorphism: rgba(255,255,255,0.7) + 12px blur (vs heavy dark blur) - Box shadows: 0 8px 30px rgba(15,23,42,0.05) (very soft, premium) - .os-bg: light bg with two animated gradient blobs (soft purple top-left, soft teal bottom-right) — Apple/SaaS style backdrop - New helper classes: .topbar-glass (clean light header), .dock-glass (floating macOS-like dock, lighter blur), .card-hover (lift) - Gradient icon tiles: .icon-tile-{blue,purple,green,orange,pink,teal} using soft from→to gradients per spec Pages: - home.tsx: AppIcon now uses gradient icon tiles mapped from app.color; status bar uses .topbar-glass; bottom dock uses .dock-glass - All pages: bulk-replaced dark-glass utilities so they read on light bg: hover:bg-white/10 → hover:bg-slate-100, bg-white/10 → bg-white/70, border-white/10 → border-slate-200/70, border-white/20 → border-slate-200, bg-black/50 (modal backdrops) → bg-slate-900/30 --- artifacts/teaboy-os/index.html | 2 +- artifacts/teaboy-os/public/opengraph.jpg | Bin 17877 -> 20347 bytes artifacts/teaboy-os/src/index.css | 168 +++++++++++++----- artifacts/teaboy-os/src/pages/admin.tsx | 24 +-- artifacts/teaboy-os/src/pages/chat.tsx | 16 +- artifacts/teaboy-os/src/pages/home.tsx | 27 +-- artifacts/teaboy-os/src/pages/login.tsx | 4 +- .../teaboy-os/src/pages/notifications.tsx | 4 +- artifacts/teaboy-os/src/pages/register.tsx | 10 +- artifacts/teaboy-os/src/pages/services.tsx | 4 +- 10 files changed, 177 insertions(+), 82 deletions(-) diff --git a/artifacts/teaboy-os/index.html b/artifacts/teaboy-os/index.html index db7d31d8..30c8997e 100644 --- a/artifacts/teaboy-os/index.html +++ b/artifacts/teaboy-os/index.html @@ -7,7 +7,7 @@ - +
diff --git a/artifacts/teaboy-os/public/opengraph.jpg b/artifacts/teaboy-os/public/opengraph.jpg index 894cfe237cce1508d3674b3ec6cd89580e75ea0a..294918dc3149ee7daf10188dba7aca47b0f65895 100644 GIT binary patch literal 20347 zcmeIa2Ut_fx-h%~0Ro~Xl7OH{j0h1Cflve~0f|^>5dtbjX#t|3R22jxib7DVC<#4i z2#JD-bP!Yoq>2!bs-jehs5AkAe?{GA?{n_i`<(ln`#t~vf6tvfYu2o(@4PefwwcM& z>!r5izq>2Z; z77YNRW&nUk;z3M7HPI62W!FGkn4Jg_AR=WTXPu>zY|OyZh=+kERK#&`c1Q@h?huN6 z3w4r32rEH${D7_qcp4pgK! ^cOPu3D|FFn$HvCD$_F=vM$~>urB8T`Zr9Dd@02fdY`nSj z!?%*Am)W$z*suq4H6UMWJHuTR`}JOV 2voxV}-*NQ0x@D%0QU+;4t-u)<_^}ogcuSQ*C-syWs=R15dy}gf( z_;B2|u{ml4V}nWScPrDuU0&@j$I#@BU23n3WmzT48e0cWygD7rPb>(@=f?+>jpPt@ zv8*$_*%~d=H5a>P%kRE!zu%QupzGfIHB1W>If9?d=nhODR=6FW{wLcGuo09 78Q5)1=^M@n5n>2QM(6%2ys!m0Yy?Sc^S+sz5k EHOzvJt%&Qk|-os*||J=q#E z!-WB<4>!@yjNE>I=;b6XS-b3b&7!e#)+Lvm3G_ aRAp*3B&xflJ}-nDs`rYh zwLiN!b?;3sPNO+#r`}xX8%=(FtKmogil9^0%>&yXM;y|9Nb{{aaU}W8O!IB!%U;2h z4j=5RqxaKur$QOVkBgr;+x1>*U3UdJhqE|2@KI}xbRV;+VsB{at&n^grIgas@7v3a zre|Z^a}YSGmTkAU+$}3T tl>m@NF`@7Y~?@VKE z&C4$eT|>iP$FAhu=FZ~JI9!Zg>@eQp5q`S-P@V8xnSuFq@!XmX9|uMkZ4`L#`i=9O zUv?@S+UoF?x|p*Pv5*~cp>}RIwBn}N)X9@q_<@r;<{kCC?`g)|XH{p8q^3VKdhC)j z09kNZw_)CCVfnSGuTy8RD@Q;7X!Yp-R~oIK*LCO1X9m!; =`-FDk1-gs+Xl^?)NFn%qr@=DJmfalGL8A% zc{Zt5_=Dm5e>B%rgYrnwU1E` Yq zG=tVfpN+T2*L|o1UZG{Z@tRBzNwyGG)WuY5<=zduJWP%shC8hWg-_6j%7{WlY&WQ+ zUsHEA1NTb*x%&&5^Pd;^J@y|r2i6&?T^+IpEu47#5A_JW9&Oz~iv(bx@)HR|0{|Ui ziv@iMlnA$AQ>n6m1zk!7v+34D&v=m+;6lKFHeZ{%m>XD65`=U>c&jQjwDR}n{v!16 zbprCt89Y$QY@=ik-N^If#=B=CWK%_==}D#*@5723ON#id_Db8B%2I8UYc@MrRh;Cs zwOF*EhJ7ZzSW0RgQg3^82HEs)I1+eo;7i2$lMXs8T5sIJ`-HVgo!Q?>)<(W9aVi<| z+ZrOa$~YH%Z{qhEre^2trC=y+-AsB$3a%w(Q*>NW%%*&2N2Yjo!o=;ub&s1mTKYOs z{O!R#$s3WR01Ag^*HE?dR8~UF5>VP<#kud&_j-oXO3`Y4F}mSKg$04wX#S9F+{ih~ z!|C;2`g-Y3Pjt0H`no&^Zn1u&0;4yV6jSVsS^~lm+9WGCj{h^gglNtwmflF!WSRWC zj)SESi^kp*>jZ~xo^qu5#7Th7^vBRs_vqza3iC1~NK-g&MjIV47|%Jx`?2w ~ERAh`%Id%$t~31?6IV@~;3^C1=Yc5*R3>fJsk2bQOh!TNKpz4q*+6T-nV>`h z@D`CCFRmd`px!3Q+M%LkqRE8B!@&t&_rZxqm7uDT;!%S@{p-IN^WT&H%AWmuE}${U zHh{)1wjdFR;1RM0i?EGp3aQDw&K7oNB+t%go01YwcieV_tPxH7=BANyG;Ezq#))Zi z#?|+&jccPG?}^*P5BXwFK1s$YXbteqecGIp7e*GH`gw>?7c(xmy>5B7&d09RTFX{9 z+k#-25T|;4Vcivat97ZPN@EaDF7(sq21~6s6#;xL&_-zMY>O}s?17G|H75ste=){> zcjetP=ev2?ubf|v`f#|qK8(#Q#vnZ*1%z~OM@MO?{$L6(@h0U6i)ZUx!r}EYhUw8U z(cD SK{Vz1XN zpQ2CBZ;#WGJ6Y=I>l7RG+|J4nJm#mxdvAQSjOtHs7$~~56Zj*I`Ny-~CtvnxEPt9I zH~ mYMBP`NH@dCn)*nx&z zg=>OxLIBm%Or(zEAzAiWHvC@#@FT;&Yf2Ym_1(A6+@03SV{#^)i?i}6ZVg2328({T z6k~H^N|i_0wP9cW@{p8drPRh?nP7cJwwrc`uOlacg=^Mfa{P^BpS2$&jI lWHWh=fq|y zDT}JItLx;G6IuDrjDEEaXFA85!yo-*;lEQkCF?f3{ZntSGwXih{bUsKb*xqu;RVBA z+bYnqE^xsaML0CHwI!BrVHjL~naRr5=kuJK^oq4f&ifgo8If7l{<1MC-j}4oV}d>I zH;SFUIOfm>Mn7`3th^^V^dz%}CVjnuu^pPOHP)>B%*0l5oNQ@;Uq>@|)&YZCv>E#c z8{^(T3M{FT--N3LcQyoTK;HzVIBEg_;H_$iI38RIP|#*}?V6C8(g8brJRW-0LmXTg z7SZ4e7Kk-Oh%jhHsq?4>F`o_)H6_x7qJ=ww`Vs2iq3q8-e#ya_E4t2n#?EG}xT0Wb zujHLtunzxcCH@w_;^39fn`ir7Tb|k4` -eB zO7z1>kU0rs!2hN|M|y~w(G}rv*; KyIwRs_6l|xQYUtqJ>R`9${$H zc+I)Pe{1Wn0vKvT-j;eCFr?8ewYGKbXTINeD@>WKQD0VI0{QSdkD!&p7v*KIJUkxi zTr&TvXx+)rhHAaxvp+m_gD)Q!e*ZG0PA%T{d;C2`;3cf93|#{D79NVQ7I+pb4;!Aj z+nrOPEbx@X9;~Z)#qW4?U7|5l62v4w|11>Fb%w>A3W e>5eG&QLPh0Z#W{ zT~5=StNguNe;ranLcu%uNvplV ;w!FfQYYn zGzvvQ5uS>8xTy^kWQJw{dAFyh;_g+uQ8z)NqX-VAsK;)&2WYr80l+K*r3sIh1noS6 z6B0!bk*B})r&4q7?O*re-%Az8KBUD$IeTEBZ3)tbS(Vj}0ibs{Fh$O;x>Z7w_tJpt zn&@E3J87FSt9D(FQ2}|+rD!2>#YhYg2~g2gv 0V5Q;PadU5}`&4w`aF4+0&Fr0wKU8hCvx}LQ`Ge+e)4kN_Gq%~YW ze@+t(f=IoNK8um0MuMtZB?t$|2@^mLDFvi~0-LG?hDn=#`#*#~7*u8RX6!1^DhE)l z@q1vaq+Vfm2`MtusEU&?s<`6AhahaKljyqL7!}3y*VU<#b$e7m?82_cV%LNJBE&{h z*GsGdt?97Xn?Fz?g8`U(XaJO%W>^WE|7-00d#OS~s+gzg*oPn@gka^npp(qzJum=+ z$+S7otP>1$G|+H|StnVy3xte~!-6QqsO+i(Fnd(*M4zWd19cGec?t9?3@GY?b%3>C z0h$Dc3S{ov^8`KpcEgw;@;`MTQ;dZ@VDC{)18cfy6AYxZz78`%p!CmgL?Y N|xws2V5In5iduIIhFe((DAJuu~i%!i7cJ?d1UJ;9u?okVF{wkgpQ3Yty! rg$jjISLDKX@5dwXU>_0SKN{IU;t53C`}-ifU?OMrZ`z>6mOB3*0e$dI literal 17877 zcmeHu2Ut^Cx99;B932Z%R6t;01`rSifuMAM0d=IvgwVkskWfOAE+EBm94SVIL0TZd zfCfpZB8E^cAW{NS0@5vnPLMABos$FvoPYj%zk9#;?)To?fxXvWd+oK`I%}`J&OYmJ z*WUq$e$u(91F*0F01Nm7)<3Yky?E~2mCHXH=v>s*W)!>zz_9B_0C08l_Wb$$KZH%q z%!N7LF={|%Hg;aup!8n^knemu#2o-yPyP# )!xevB=`jWfA0x44tACsgt;9U zuml9#GGJ8*_Vd2x4bohOU{9l;&w=n&5SDP*0^4qZ?XG!3^mjoTRaX}us4XZ!J^t3- z4FLz!J>b6p;062)oCp2^jUUW|!95)SPR{`V+wWg+wut~hybS |=e0D$Wa0PMA(mx0m0=$kNDBmnly9sD@}E`U8C z3|s`<06RbigiZlJ0&)Osy&E_Ou ^Gi;|~%iBp@a%92^{b_w41`yO&FX zkC#v4KONSe0i1hS-|Pn1SVRC;P8K#!mh~!d0H6@Ev4CM?v;Yg+ZuVWQ9DBgh3x`1Q z1WWgE?A^6{7b_b`!@|n8i*q;oVQ!x9 Q8hsdcv zMHM|CKbMF7<5NcA_qKK*CqAeNC~P)E=d_z0Ec=lYY=xC|&u+F|Pzz9CVdZ4ob(jlm z!_ekW?w{?N-|s%_A#&>Gr|5#`>s`RNY%Jgq*f;?VVC@DA&Hov_($+|mnSlg$TY%PD za~lSL1a@c8+=76r(8DIMfnWh#(>7pcx;enFxE^AN_7-{;%`KUo^`Sgig%LJ^4Fos{ ze#b8v2-@h~*IYHf6fqW~N({jrw$)=0?dTuz>*6L+o8!a$manRm;$1?CAPe3$lY` zbN)7gtxd6 H2EWka%qrGO7QA(+yVq%WxUQ-U#j1+$a=g0$`W62UajEydCw`#Oxq}s({*$9)BIN zhC(=XP1iIi-6FtHm$n6PnRl$%*AugYgdrJ>cpEQzhAAjQ!mu~=JY#jhu7>WU1rf}` zeVp=goLus1hsbx()`&@QooG%ziqQ;QFwxDW`e@svhh1Q^lK9f-a)9XYuY4siH!H)u zXpBg}47cC#(ueGdoRq$(NE`X=G1ax-EfiM}vBQPk%~PidQUnKL#)r2o$jXSvOHTs> z)TOG;f-Ka^g^rZ%Qx!nOQy65jbh3q;4!4+O;ym_qF7vZDtUn1JkgOl=oEZL`%%l!{ zcKtMgQNhFbigA mvJyzsho0> ym0zUQ;#eaPO{An!AFaJIHJXtC=r`e3r9 zTLIG0WKD5`^FZenIar<)udBOwELSv3?uwUffwF#nhPIrXJQo+&@x$oV;S4b>&B#3y zBcm0frr~Zt(df*qugT+Gh{?Mcj&{PI!AI$`LE`csk#dlXDd?Mmd>N{{HGsmpQ5elq zQB6Gh88%Tf*BeH%Tn%Xz@{{e#CV7 N(Ab z`uojVC@VO3RRGe$JtokiQ)5x$b4l~9@bKjmi7WrmGZe7T Kl2^>PP&Sy4jq~(w*}TkiteOJO;goDUAh?6zsl^cu&g})A(N30MPcLuNMok=54&} zxbyt4*69*BN$fz?*z1uyx2?Z#Fg)^f7L$Iuh^@7-K(disgw{6HHW9y&I6Od!cX1h= zM>=riQWYELCEF8PlPL%V)XCDD504bSV8et0fOwyT2p|~-G~F61UYkytXTKq&R J)u>kE-!AqAhJfqwtS&-a zljRL7E`rt3F-<+k1VMOWnV~nwqis0%^3RvOu;$Wu+g=~@z78ve#{1s7q?!zekObT1 zuE6)h&uXe(;zc5GGGwEwDZeCq*BO4L1LOuXoFsm5-mf`N?2nH#zA3?-)21CFNwMy8 z>6jBONPn!@WJrC%>g38Lv*Jq%9Z&Ks@gmMd_r+keL+UyZB%70*tZUhSCjxgO>Gb<9 zj6!y;od*$L#1$eL>C?2P&|J|v(ax7slt1ljJWq%@B27`&t_xBRpH;RZ-i%C4Mfme0 zdofupB5f31_cQ8GUAjNRNy~4EuzTv-buJCsa8Imr0yQ(nI@pd&^p+e#P9I&YA3M3i z8E!n{u`GUdVB%5{JW5wvVI4sD=tu9T2Hq{@oy$1Y(=m(@6P@f>6Vz+y>{@Wli_Ftb z4qBK&SZcM(&pD~)RMfp~zE$K{9^%w$wd$~PI>mg@F4L@I`84%Zu}`xu<&Jzv89C$g zU{Qyh%EQ;L-%7nbrf6E58EEM_?WG%FvvgqC%iU!)hB`HvK;nT56y&L#EgiMHZHvg1 zZZ<;Am*^G7pu-Exa_z$^QKsmDRvypQpJ%E0cC6Vql%0!mD&u)kgiAX1xSsaD`lhCL ziweyMd0k2c4l4!@<+n`V_KEIp<*u*@0+Gjrv%Nj!qt5bGS8P&@-!C7`2nQw_e?lgC zzbah)cqNx_Kk2cXoof q~zU-4DE &L*XA#NP{+jqzb61{Ek6qAY zd)IvmeYqtrW`wvzydtIot9DS|cfix73p14m54MYQ?3+Xe=bE`G*~fZu*>@4qM%|II zlVVN-EeZFK#A}`LV|A5i&k{n>z`_)deracT*uZjay}e`g-6Ep~ibmk-I>3(g;&au1 z-pM^-5uZbe9+0sJ!;Uvsv?~YLCB;no!*Dzn8tODfA9q~%06|YN9BpgSQ$IUi-bt=Q zo+z?>wWc1CuDG_6r$0U)WHOVVYaTUNE{6;*_g5LB`4j34PxCm|jHMF{Or52$5|!Ve z@`-1t^STcG_0tOONK$6)BuR84>RhTHfBx&teRiEM3TvqfIMHTpjpYN!>osoQxn*f% z$p1lU&HQB|URGFnBA%4(_$))z*$N{`;*{eb#+?WsY VZL=hfDMSe_0BvyrFu%p$WXm%v z1U>M`*29;IdnXrtHOkk4aIZjYmti3ct>mUf#(ea*#&V80*W?MEF&0y=NO)49$D65R z)!6d(dZ077dsjE$&?`D?PGNX)gQp5{M7IwvuBkV9vm30)trzf8iK#dT{R>OU&-!Hi z4iw|<_KIYER1K*L`a>dNxisjt{l}h89vh19N$YUDLcfzdSL?Td8nz!?ax!fPbzH2< z6(?OSz^5JQub5(TR8c=z!7*aEto4QaI&k>f0y#61(7O&K+pGh)+|S;naEIn6`J#eU zA4A;+M2_5Wu(gswo2^t89xuz&?Xwv2&1s8tk?Shs`x|Y>d+?`nuOduhsOXhyIj#}M z1&g8_B+@kVaQWQnrKbD$obcX*OHaHq;$#9OUnEOQD%f71EH!#R*^*dVnIX#IU3w}> zDObC+`5|1tfCp~m{i^I!v1yWqm# p;J8T4K9TikXnqk;5J+%n)sY)3GpwWQ9gK znfTI-ntmrfaJTjDH)tO&9PL!`B*QY5F*mSqIqnYb# w?vWgW`!|1 ~ky17IhOswaJ zW^^#qlMXobj-#M?lC4`+qpR9Hx3_4iE2|e}kr7bYnm#daO&xvS#p`+9(lXLZzI-|W zRh#*+`KqC(OV8baETZqDfn2;#OOUd6rF3#xVpxaBg1FL5-L>qfD}Gb;lv{JE0(+5n zRnLT_WFu}P;QsM8`qUiq(qmYhk6#gX&N8Vtm_#Y)GBt)ZHe?8KiS@!B;T7;<5g-3h zXvHq}`bm+LdvfuW6y-RYiF3{zel$H#Pd)>CW`)nz@$Sjinj3u~vB}DrLA?~?lWu-q zov_hzsuZcBui;hFC{6+W-E;L^%UmiPQ8${KHG=nvudl^4yn@|@>t*3i9_r;Do&x;& z0Zviu&u7{Wu^^K6HF>O3)jqu--=>>QpE=3WA}`Varu_;%&)dTn%N4@24Y0Q{%IT)v z7g83MvtVYM!Sw^feC=O|^~?8`AM&4A2mDO}InGIXV>vFq+4cLyFAe}U50cu==n}ok zTaOEJ4UvOZ2t)1qXqC4KIOi01!g85~#oqG7BCl&Q6g@vVcN1HD)?gwo3x`y{r|Azi zD~P!!FZm+xRI+Y(Rl2QYCGTh-JbQ$Xf{U(Odb_A#<9b7Y&_+QJjtrL?!NDV`o}oOh z3^VOLtzo-%iuT96&HzkJmG{xBZeu$UiqD{ll@VOG)i}mYB*{ayfP6ScrTx3lzweDQ zmU&ZORfH%*&2^_|wc9G&Q`vENoQT+UUf?QoCjQ+#|NXiC%XDtc^H=8sPH^6LC~)RH z(~k+t$7UGkglBbFaZPWQ@1-AXsBboyx|)eI4o_?|?XOns!yuh9%!aT>ttvh!dDz*E z>-OGx>Z^v$EAXUMkB(D3T`77VoP5=WYnWh~=lS74S(kBg&Wc_SuS{)yreyX$6PLcb z*K_4YTH31git!@0$P?`WXGr$xoeFPBPl+DBgM%>Nw`kBlN(`nU7KsR0I({99OXzE? zY&}(7s1cro?P)U!^i+u~2v0R~zfqx&@WUmHgmuKn4=31l_gAgPN9WI1s6X!^mnS}f zRm@#&OI;%A)*ym7QQ>%f5psX`??9bfX@>}0D-J$#<67FphQK6$pm zDchiXcGl@M@w=5Xy}YASj~~OV6-!*~I$-$RRq_DB(yLW4ks6gT;_k~aC1gkQy84!2 z>joEW9F}->H{j`QKVox5--wb@iC4p`LV@I!>B-7pPX|7D@%#h1%`L#O)A;fA7s=y< zH60fdfs&CX6KPa)lkzl|{5PD3S2C}Kyc`F~GL>wpSK)>3HgJTQ;Lqq)?-3(Vy^ZlT z7LGKJ_x68klJW}lvvV027?mGFH7@W;X1wm;LFqan VjuB( zimUFaKErP RCVB z;Rw>Es=C}K3 bv`Yk%UYcNR&NGju=<8>i=P^sI^&RQ_9F>IH^~UUF0F>?hAJljW>&iW<|%NZ@t^3&@;^#s|*6}4=_;gMqCWUuGlUw%wZm!b#fl3$gtSJs+2 z->wIrKS_Q@o4jUW;L&Dl-B2DLe tWqU06y5>npRtHvUc0lmAkh8dFaY^DKo`sRUikCMzW|bjHvZc!LDn-5 ze>L5vs=p|nubuCphc`VGbcAf7p@Vc)wq2h|e4k#&hHISZi2@ZpoBD?9;_~o;P_qkW zbW4!Qg}vXImgMFdXno1q_3lckb?&@2!tgWFn{IO+^YE0lz1sQu6$wF@M@7cb43+g1 zwZ^!(M#61bCc2U=94AoGUd|5GK@$PWRcrh}4JErwbF+UU=anCLJrYR|-Pq!6kS}I> zLi`PGuwhKKZ*J0U19og@kiYo+>jP-u%O15sE(`(m2m+u0YS_OWxG %N($cV}N<^rYnEKOHs} zOY%6&n| ^ll6 aog%m5L<@m0ogw9ef4SvVQ&dTT~F4qEQ&53R&&031_ zN%zN$izr-r$|&v`N?kV%<=cJ4)5Iy$uDknKn{|8da;HzLGXaK6M4z<4;j{WZ$8yYP zoF1U?)|WKYOYiu$|B#Kr7r JhYRl*X#WKtf7L8p(kw&_j#2b!kw=*1D>8&--=4ygrRL zTQAxDBo$dY+#;@THKE}}=vf<8;wLS4Tqi~i_O4)L`jd)_=MbJ`<*_K`4%{?ogRgSF zZk{+^L>gC%iMdJYf?<893$v+~$@Sib1CNM2BibrmnL!#K45UXIEDJA{x=05lmF_3r zy6s+T`w?kf @`B{b`a6sewYf3bT3#h?%01lha&&x=xTPSAqFyBDgPBhW z=#bG_r{Q&=Hm|#z@T{q@MCx?=DMw 4}&nTt!Hm8<*)B{CcVM;Hw>G>pkB*~QO323{H;P`q*9#J6o$&)h_)>$`V#H6*l` zzo%%NVnn)6L`LiW%!|Qc<#&7|NW(ZcL-p``Arrm3U)|q*mZ^ourQfOtMopfWJj*;B zF(hF#PTPd&08^YmJ*=#-y+jzw(jy3f0@E62{Yg4a*@Y=a;Ms_F9`c>U8l~9lhq|NI zflP;kqr)TarpYZ|0Ic)I*TZGIJ4! >PcL_`QV 3)Ew_J$pC$(TD@ReM8-}CZc>U|e}3WBm#EvZ+~;0r;=C$}z0qiOe-R@}fB zY!B5d`N6k?%}(sU$MN@`VAiKss7`O$FPz^uVvzR=eD#Nck4=>ZsGsEh-D&r4f5lR% zgh3(3;2f#_fbXnLIkQoP%#M$~vp3973b*Xr{}*kWx_dJy^cY>>jl7`n%gaD!@0=K2 zcw&C`0q_5`PS*O;@Z%O}x2tAhvxdfNAy0FH-LCBEYj#V-k>#_sW+>{3>p vXFI+r!19QCzqx~5~IkY$mTWX^J;!JL8g^vLi%lfI@- z{&S9RYb$Tv4qm;B^06xSjSzDr>d9r35nks-4( *29&swtr6_CZ z!8!R>1qjdN)nY^oQ*YsV=9`Q1UCe8%duaMPy+nCLSs4aLFm~=(bjG#8`6!&3ClR_R zzG2H7c5Vkz11@DNqo}F~51A`O7;a#aMowrSoQcuDK&2)mQd^CaY+WqN3y-a^pU5p! zb$(39h;zn=;V}+@oLt%KfP#Tca `7f&hX|hNXO$dP;S3q@Yp%{F{KQ%*(Rx%fuinL8uDaTd$YV` zO2jCB1pGh;f{VWs^w*h%hbOc)OIR(C)S~@dCVt8>CpwoJyCMP>Vk2YWdYlh*CtcS8 zHF%EU19&UwhAa8D_eCGNW5Pvpa8QQ)l6VF&U{Osn(#|=N5FvrVAwyCU!a&=yN%W6b z1y2gx;eLFL_DN4>Ox!S8c=flgCtb0W<HTP6pAj$UQFNM5V7tO0Z)`OiJ+F{Yd4Y za8gi4{`}zRk8Y;r0T>uex4T>qpPqCdp)IdxnC)FvBd#@e{GiyF%-|61$W`Q6>}_-; zLIpOz+hSCjT<3^MpWvR+rEscD_}k{?@?GlA>UDk8KHt;*1Uy#w`(?yWqF}gA@Jw1e zmD@sYoDP^gt+$jr=`-t&^S*TCI`Gwo`)Q|w+@ZI&YDe(Ve?&ig({;e#YDbXbC+YM9 z@mpR`(+_ysdj=1Lx;*t& qIeXTtesC3hJF# z)wrB1Cv=-u*mPLacD|m!m1qjSp5NrURjGkUNaJnwOzhS?&ZK}& p?fR@x*lnt?wS(wKDTG+DYq@zjnbOqE??f-B-GBAz~VHJ zKD!RAxP?46jC8b$Jlg7hWh(a-#>Z(XxZ<7jKX;#H>iY3-KQnAbj#K%OdqbHVHmxCM zUKlixm>@k#18qiz0E9w$dISMb*y(ZEm0l-2;>C3Dg8Lu+EV2u7u9zm`Z1G4Zytrus zR!p$YH}-SXltiI#kYcNxMwiWp;qL|4 w12f4EdHysT93n(#~*_$IbZoK%P5UaseWfeW3sr% z;28dX-$6en3noW{J*I)h3>KnHj@SS3vX{w1fWeXL1+O6Oe_p4~ZjLX0qw5#7O1pRV zovqurrBZI~IIpV#E&}PW+)xIW2M-}|MTBahymCV*@YSu9tz!T0WFC47=wkmDGQaI5 zEhHuXTI|8wK~{AmM7Ib6$!J7R;Z>ph?76h+p5NY->mq{J)L{j=3l~X7L0q`#1>L9o zH(zADzS5M7b)#5z5!EB?^t_jbN{)NY9us=_zT?i(gwn}*{{lIrSX*&w^cf*#^Ofwi z_tWB{Lzk|^ruO*0?0-C6p+7?#%FRm(U*w9Od6-w%L=zJ6RQE1gG+V84;g^*fm{cDu zsc;h?&_CZ8S1F}Yd?WnzVoL|rVc~ebOIcn_*)nEy@h`bQXD~+*20sLA4cr((O&2cT zd7T`EJsE5q;?d1sU$>~zMEd_t|JNq`!%D=)dOS+nTrQ~r f}aFF@_u7195gpHbTzC!RVqLseA|?c zm8te{9;nfi&&905`(@cfMy`9?G>Y+#1z~@jLLyr}h6V=>Z=Phyj0<3NkLe@mk=S_@ z*s-O8iWR~@8|%N@Qt90O#m0Idlw;W9w{_sDM>%zJt*d)TrT9{`@z4lSU_Q?h7fiyV zX!zq?^PLwfb_<2A0|vW8N;Cz3(`2v&W0rxgeyUl@VC8&$?akEi@WQ87*~v-9xqXFh zN!}esS`?MHgZ_Co69MB_-?e&HeeA~%tpl-Eb$F5 qO^$v@9Qurcsu-DtrCFc j?*E(w#;zE`k-IM2OG`RlIC{cC6 z-2$gxjF+O}tZxi-vsQv83hvSBn|GSQ-_efcGkh5@c1pm%-*ttd?G@a5|6>9G+=Q;U ze7*Gou0)lmlAXs8dPWrMll@Eg;Z0o4MnP&^Bg^0Q+qg `xO|uXN=vu zzVvX>Vvt%QHIN(O9EDR1Qq63eIyF12Yb`){5kai96+&OL3^7D~I{VyXRXgwbL1fSD z^2(Xd!FiqMKUy9UYBOIs#3Uf9sjmb3-Y-?!@2JBLRS^^-%o~30*j+QnTe(YsQPH)@ zpz`_ueHG-OiP|#g{#}egbJ1tZwcnufg|l+yRUz~zUB=8ZD)fT0#CI>RljGwJ2Ia=Q z27&X+o AI$EC XHF`354{S2C|6Q9;aGeI GHC;Do9)AJTI=yDI_hS7 Ze{~4nwp?p z^8I~Ai!4bTO>*Fc63Auh54lV^6d?0gVxvQh^shB=8d!MncgWJ&W`BQW;(%n(xd60u zSXwq*rKw7cd$@bjfGpL~m_`wB%%LC=7?yFpJ{GxDg@$IGq>))vL&1@E>KwfUpWZxw zw?ur7n0J(xPT}gGlU=-oauwxXJQ6>|hZRvTNy $qUr?5snji8hWmz{edZ&s5_vpTwRzXRdn9_KHD z^mZvI_;^HCrdQF#NJp{He1a@cVxX0C6k+mNjG*w55*|sF%&cn;4D`g5rN)F|k!Kc% zFlW|*1*6QvgX@5xWCTtYUYQBLX=*jQ=l&ROg2=P|G$YlYxMosVK}e-tKbDI ^5w^CN8>v6YX;3)p$!fBSy%|= JDK+*5> =8NiH*E^m>gl3ZHVg@KCo!cl<;(r}L|mf(BQ_A65=`r0QFzV2#Vc3u2kN zmOnYCC*pdIn&n_0>@wm ;3bwkS+P{_ zvVVR=z>WHhMV@{8=*t2EY~T}b2YOQ9n&sb^fn4 H^mKEE0 zDz=~iK$wyHixsQ@F9z(sIAoM^ZTpkY!@_-b_o3ZCY_b9M47mT&I|%K+3E&lch6R?k zNdf}Gpa6Zz?}gyBjXdj@&zK<8juFzSpvRsbpgT@7?(|O~sJA!n;M0XZG;Qx5)-dn~ ziS3Be54Y^34x+3}!|%ifRF`@=Czpj6xGCm}_z*(QpU0gg-;2Yd!((2YD)f|g={6c@ zMi1nVBx6LJaSrCr(=pkeo}fQ&W;)=Q+` EFf>SQIdkcrsgDUv{iI52av0GdK65Xj& eGtNkgRolmc2zrSj0kBC9Xx}k9R z34i6R1iTYIG1F|;YpkW6ITcU>KCb}N=$Yqbe)m8>VQOz70+s6K{DF@n1aGQx@B`1S zAMWjRHPE?)Zt$XC@b$XE`2K{ IGk6f2d{bW$W-chVmzrjYkX%600s5BtjlL&UQArbK!ZiV%qf z*{$*_os~z*l~EPwGo%t_>%?9iZSH1$81DhaVmx?F7a8#ZGnU)ajlqd!wJthiMX;j7 zUhmY*&UASGm_LQWg%Klps<}9o8<%os$L7n@HU`f~ M@}nLZ zZB&97Xl`VnO@8YWNiWzO!{4bCItSK0S;FM-80(Y6BrUBPMWZG~!{NBmYUAmwe%r<+ z?{-&%xz>5_npUCCrUxkSqaiuD);+nu*xGuhT;#*U;_T%(siV1~?OG=NgfX<2a(n5% z;6pC23ekmhkc*japaS;=(@|i$fdVV+r25~7;^vpj{^-(Jl>4Ip*NybQj*9x`RVNl@ zbzAViXN+5Bl>u^XooEn6pVbYj*WrmRXYA>tN_o+Ld&at@0WYRnZltwT9HH`ry=&EY z%BkNTQJ!+Wh-+mo2+KL!wBY19jjAhGl4=pfVC*mnv*&h=$wQ&(6h0zrL*anC2oOq_ z87N{61>rBx2bclF!QUAlR_~_gc0`(6@{k0d)nl2K`7P|b^kK(u{`~KXO4x?Zop1jw zbn#8|+@ERc-U>mE5cg0F--$F4%tn8O|8A>eb`!kT3w^2mw_6=V%CLtSF|+EH b#vu7>{ULHqMj3rd!42-q%xo5b1RQm@wtb_{tRu`!p@gA;8Sxf06Z}fy zL4?8^bkLj#Z}HY|7SIWV_dnSn+)NpB%*=+;Q%1~0ZAsF$z;rNl%i=)&+Ov7?*;2r) z6w3Tmo0$cZZ6g$>;~6m>+!le0xjhJPt)9lnfC)Wp;|pO}fiIuOGe|-i2|Z>^z_w}F UQu=R&Y@3vA<;!4laJ}0l%Kk1ONa4 diff --git a/artifacts/teaboy-os/src/index.css b/artifacts/teaboy-os/src/index.css index bfafa6d0..21830740 100644 --- a/artifacts/teaboy-os/src/index.css +++ b/artifacts/teaboy-os/src/index.css @@ -60,39 +60,40 @@ --radius-xl: calc(var(--radius) + 4px); } -:root, .dark { - --background: 225 45% 8%; - --foreground: 220 20% 95%; - --card: 225 30% 15%; - --card-foreground: 220 20% 95%; - --popover: 225 30% 15%; - --popover-foreground: 220 20% 95%; - --primary: 230 80% 65%; - --primary-foreground: 225 45% 8%; - --secondary: 195 70% 55%; - --secondary-foreground: 225 45% 8%; - --muted: 225 25% 20%; - --muted-foreground: 220 20% 80%; - --accent: 280 70% 65%; - --accent-foreground: 225 45% 8%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 210 40% 98%; - --border: 225 25% 20%; - --input: 225 25% 20%; - --ring: 230 80% 65%; - - --sidebar: 225 30% 15%; - --sidebar-foreground: 220 20% 95%; - --sidebar-border: 225 25% 20%; - --sidebar-primary: 230 80% 65%; - --sidebar-primary-foreground: 225 45% 8%; - --sidebar-accent: 225 25% 20%; - --sidebar-accent-foreground: 220 20% 95%; - --sidebar-ring: 230 80% 65%; +:root { + /* Light, calm, premium SaaS palette */ + --background: 210 40% 98%; /* #F8FAFC */ + --foreground: 222 47% 11%; /* slate-900 */ + --card: 0 0% 100%; /* #FFFFFF */ + --card-foreground: 222 47% 11%; + --popover: 0 0% 100%; + --popover-foreground: 222 47% 11%; + --primary: 217 91% 60%; /* #3B82F6 */ + --primary-foreground: 0 0% 100%; + --secondary: 173 80% 40%; /* teal-500 */ + --secondary-foreground: 0 0% 100%; + --muted: 210 40% 96%; + --muted-foreground: 215 16% 47%; /* slate-500 */ + --accent: 262 83% 66%; /* violet-500 */ + --accent-foreground: 0 0% 100%; + --destructive: 0 84% 60%; + --destructive-foreground: 0 0% 100%; + --border: 214 32% 91%; /* #E2E8F0 */ + --input: 214 32% 91%; + --ring: 217 91% 60%; - --app-font-sans: "Inter", sans-serif; + --sidebar: 0 0% 100%; + --sidebar-foreground: 222 47% 11%; + --sidebar-border: 214 32% 91%; + --sidebar-primary: 217 91% 60%; + --sidebar-primary-foreground: 0 0% 100%; + --sidebar-accent: 210 40% 96%; + --sidebar-accent-foreground: 222 47% 11%; + --sidebar-ring: 217 91% 60%; + + --app-font-sans: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif; --app-font-serif: Georgia, serif; - --app-font-mono: Menlo, monospace; + --app-font-mono: "IBM Plex Mono", Menlo, monospace; --radius: 1rem; } @@ -101,22 +102,109 @@ @apply border-border; } body { - @apply font-sans antialiased bg-background text-foreground; + @apply font-sans antialiased text-foreground; + background-color: #F8FAFC; } } +/* Soft glassmorphism — light, very subtle blur */ .glass-panel { - @apply bg-white/10 dark:bg-black/20 backdrop-blur-xl border border-white/20 dark:border-white/10 shadow-lg; + background: rgba(255, 255, 255, 0.7); + backdrop-filter: blur(12px) saturate(140%); + -webkit-backdrop-filter: blur(12px) saturate(140%); + border: 1px solid #E2E8F0; + box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05); } +/* Light gradient background with floating blobs (Apple / SaaS style) */ .os-bg { - background: linear-gradient(135deg, hsl(230, 45%, 15%), hsl(195, 45%, 12%), hsl(280, 45%, 15%)); - background-size: 400% 400%; - animation: gradientBG 15s ease infinite; + position: relative; + background-color: #F8FAFC; + overflow-x: hidden; } -@keyframes gradientBG { - 0% { background-position: 0% 50%; } - 50% { background-position: 100% 50%; } - 100% { background-position: 0% 50%; } +.os-bg::before, +.os-bg::after { + content: ""; + position: fixed; + pointer-events: none; + z-index: 0; + border-radius: 9999px; + filter: blur(80px); + opacity: 0.55; +} + +.os-bg::before { + width: 520px; + height: 520px; + top: -160px; + left: -120px; + background: radial-gradient(circle at 30% 30%, #C7D2FE 0%, #A5B4FC 40%, transparent 70%); + animation: blobFloat 18s ease-in-out infinite alternate; +} + +.os-bg::after { + width: 560px; + height: 560px; + bottom: -200px; + right: -160px; + background: radial-gradient(circle at 60% 60%, #A7F3D0 0%, #99F6E4 35%, transparent 70%); + animation: blobFloat 22s ease-in-out infinite alternate-reverse; +} + +.os-bg > * { + position: relative; + z-index: 1; +} + +@keyframes blobFloat { + 0% { transform: translate(0, 0) scale(1); } + 50% { transform: translate(30px, -20px) scale(1.05); } + 100% { transform: translate(-20px, 25px) scale(0.98); } +} + +/* Gradient icon tile helpers */ +.icon-tile { + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 1rem; + box-shadow: 0 6px 18px rgba(59, 130, 246, 0.18); + transition: transform 0.2s ease, box-shadow 0.2s ease; +} +.icon-tile:hover { + transform: translateY(-2px); + box-shadow: 0 10px 24px rgba(59, 130, 246, 0.22); +} +.icon-tile-blue { background: linear-gradient(135deg, #60A5FA, #3B82F6); } +.icon-tile-purple { background: linear-gradient(135deg, #C084FC, #8B5CF6); } +.icon-tile-green { background: linear-gradient(135deg, #34D399, #10B981); } +.icon-tile-orange { background: linear-gradient(135deg, #FDBA74, #F59E0B); } +.icon-tile-pink { background: linear-gradient(135deg, #F9A8D4, #EC4899); } +.icon-tile-teal { background: linear-gradient(135deg, #5EEAD4, #14B8A6); } + +/* Top bar variant — flat very-light glass, no heavy border */ +.topbar-glass { + background: rgba(255, 255, 255, 0.75); + backdrop-filter: blur(16px) saturate(160%); + -webkit-backdrop-filter: blur(16px) saturate(160%); + border-bottom: 1px solid rgba(226, 232, 240, 0.7); +} + +/* Floating dock — macOS-like but lighter */ +.dock-glass { + background: rgba(255, 255, 255, 0.65); + backdrop-filter: blur(20px) saturate(180%); + -webkit-backdrop-filter: blur(20px) saturate(180%); + border: 1px solid rgba(226, 232, 240, 0.9); + box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08); +} + +/* Card hover lift */ +.card-hover { + transition: transform 0.2s ease, box-shadow 0.2s ease; +} +.card-hover:hover { + transform: translateY(-2px); + box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08); } diff --git a/artifacts/teaboy-os/src/pages/admin.tsx b/artifacts/teaboy-os/src/pages/admin.tsx index 2d3d2e0b..b1be35f2 100644 --- a/artifacts/teaboy-os/src/pages/admin.tsx +++ b/artifacts/teaboy-os/src/pages/admin.tsx @@ -159,10 +159,10 @@ export default function AdminPage() { return ( {/* Header */} -+@@ -174,7 +174,7 @@ export default function AdminPage() { {/* Edit App Modal */} {editingApp && ( -+))} @@ -208,7 +208,7 @@ export default function AdminPage() { {/* Edit Service Modal */} {editingService && ( -{editingApp.id ? t("admin.editApp") : t("admin.addApp")} @@ -194,7 +194,7 @@ export default function AdminPage() { setEditingApp({ ...editingApp, form: { ...editingApp.form, [field]: e.target.value } })} - className="bg-white/10 border-white/20" + className="bg-white/70 border-slate-200" />
+))} @@ -248,7 +248,7 @@ export default function AdminPage() { {/* Create User Modal */} {newUserForm && ( -{editingService.id ? t("admin.editService") : t("admin.addService")} @@ -227,7 +227,7 @@ export default function AdminPage() { setEditingService({ ...editingService, form: { ...editingService.form, [field]: e.target.value } })} - className="bg-white/10 border-white/20" + className="bg-white/70 border-slate-200" />
+{t("admin.addUser")}
@@ -256,7 +256,7 @@ export default function AdminPage() { setNewUserForm({ ...newUserForm, username: e.target.value })} - className="bg-white/10 border-white/20" + className="bg-white/70 border-slate-200" />@@ -265,7 +265,7 @@ export default function AdminPage() { type="email" value={newUserForm.email} onChange={(e) => setNewUserForm({ ...newUserForm, email: e.target.value })} - className="bg-white/10 border-white/20" + className="bg-white/70 border-slate-200" />@@ -274,7 +274,7 @@ export default function AdminPage() { type="password" value={newUserForm.password} onChange={(e) => setNewUserForm({ ...newUserForm, password: e.target.value })} - className="bg-white/10 border-white/20" + className="bg-white/70 border-slate-200" />@@ -338,7 +338,7 @@ export default function AdminPage() { sortOrder: app.sortOrder ?? 0, }, })} - className="p-1.5 hover:bg-white/10 rounded-lg text-muted-foreground hover:text-foreground" + className="p-1.5 hover:bg-slate-100 rounded-lg text-muted-foreground hover:text-foreground" >@@ -398,7 +398,7 @@ export default function AdminPage() { isAvailable: service.isAvailable ?? true, }, })} - className="p-1.5 hover:bg-white/10 rounded-lg text-muted-foreground hover:text-foreground" + className="p-1.5 hover:bg-slate-100 rounded-lg text-muted-foreground hover:text-foreground" > diff --git a/artifacts/teaboy-os/src/pages/chat.tsx b/artifacts/teaboy-os/src/pages/chat.tsx index 727490f7..78de046b 100644 --- a/artifacts/teaboy-os/src/pages/chat.tsx +++ b/artifacts/teaboy-os/src/pages/chat.tsx @@ -162,10 +162,10 @@ export default function ChatPage() { return ( {/* Header */} -+@@ -178,7 +178,7 @@ export default function ChatPage() { {!selectedConvId && ( @@ -187,14 +187,14 @@ export default function ChatPage() { {/* New Conversation Dialog */} {showNewConv && ( -+{t("chat.createConversation")}
{t("chat.searchUsers")}
{users?.filter((u) => u.id !== user?.id).map((u) => ( -