alternative tangled frontend (extremely wip)

refactor: readjust sizing

serenity b2fdfb52 4bce9883

+21 -13
+8 -4
src/components/Auth/SignIn.tsx
··· 42 42 }); 43 43 }; 44 44 45 - const loginIcon = <LucideLogIn />; 45 + const loginIcon = <LucideLogIn height={16} width={16} />; 46 46 47 47 return ( 48 48 <div className="bg-surface0 border-surface1 m-36 flex max-w-1/4 flex-col items-center rounded-md border-1 px-6 py-4"> 49 49 <LucideCircleUserRound 50 - height={28} 51 - width={28} 50 + height={24} 51 + width={24} 52 52 className="mt-4 mb-1" 53 53 /> 54 54 <h2 className="text-xl font-semibold tracking-wide">Sign In</h2> ··· 81 81 </div> 82 82 </div> 83 83 <div className="border-surface1 group has-[:focus]:border-accent flex items-center overflow-hidden rounded-sm border transition-all"> 84 - <LucideAtSign className="text-subtext group-has-[:focus]:text-accent h-full w-max px-2 transition-all" /> 84 + <LucideAtSign 85 + className="text-subtext group-has-[:focus]:text-accent h-full w-max px-2 transition-all" 86 + height={16} 87 + width={16} 88 + /> 85 89 <div className="bg-surface1 group-has-[:focus]:bg-accent w-px self-stretch transition-all" /> 86 90 <input 87 91 placeholder="akshay.tngl.sh"
+1 -1
src/components/Auth/SignOutButton.tsx
··· 14 14 15 15 return ( 16 16 <Button 17 - icon={<LucideLogOut />} 17 + icon={<LucideLogOut height={16} width={16} />} 18 18 label="Sign Out" 19 19 className="hover:bg-surface1 cursor-pointer rounded-b-sm p-2 pl-4 transition-all" 20 20 labelClassName="text-sm text-negative"
+8 -4
src/components/Homepage/TrendingFeed.tsx
··· 42 42 <div className="flex items-center gap-2"> 43 43 <div className="flex items-center gap-1.5"> 44 44 <h1 className="text-xl font-semibold">Trending</h1> 45 - <LucideTrendingUp /> 45 + <LucideTrendingUp height={16} width={16} /> 46 46 </div> 47 - <LucideDot className="text-overlay0" /> 47 + <LucideDot 48 + className="text-overlay0" 49 + height={16} 50 + width={16} 51 + /> 48 52 <p> 49 53 Powered by{" "} 50 54 <UnderlineLink ··· 87 91 // because sometimes stitch doesn't post the star counts 88 92 if (isNaN(parseInt(starCount))) return undefined; 89 93 90 - const repoIcon = <LucideBookMarked />; 94 + const repoIcon = <LucideBookMarked height={16} width={16} />; 91 95 92 96 return ( 93 97 <div ··· 107 111 <p className="text-subtext max-w-164">{repoDesc}</p> 108 112 </div> 109 113 <button className="bg-surface1 border-overlay0 group flex cursor-pointer items-center gap-1 rounded-sm border p-1 px-2 transition-all"> 110 - <LucideStar className="group-hover:text-accent-alt transition-all" /> 114 + <LucideStar className="group-hover:text-accent-alt transition-all" height={16} width={16} /> 111 115 <p className="group-hover:text-accent-alt font-semibold transition-all"> 112 116 {starCount} 113 117 </p>
+1 -1
src/components/Icons/Branding/StrandIcon.tsx
··· 1 1 import { LucideSpool } from "lucide-react"; 2 2 3 3 export const StrandIcon = () => { 4 - return <LucideSpool />; 4 + return <LucideSpool height={18} width={18} />; 5 5 };
+1 -1
src/components/Nav/NavBarAuthed.tsx
··· 67 67 68 68 const AvatarButton = <Avatar uri={uri} />; 69 69 70 - const profileIcon = <LucideCircleUserRound/> 70 + const profileIcon = <LucideCircleUserRound height={16} width={16} />; 71 71 72 72 return ( 73 73 <DropdownModal
+1 -1
src/components/Nav/NavBarUnauthed.tsx
··· 20 20 <UnderlineIconRouterLink 21 21 to="/login" 22 22 label="Sign In" 23 - icon={<LucideLogIn />} 23 + icon={<LucideLogIn height={16} width={16} />} 24 24 iconClassName="text-crust" 25 25 labelClassName="text-crust" 26 26 underlineClassName="bg-crust"
+1 -1
src/routes/_layout/index.tsx
··· 54 54 <UnderlineIconRouterLink 55 55 to="/login" 56 56 label="Sign In" 57 - icon={<LucideLogIn />} 57 + icon={<LucideLogIn height={16} width={16} />} 58 58 iconClassName="text-crust" 59 59 labelClassName="text-crust" 60 60 underlineClassName="bg-crust"