alternative tangled frontend (extremely wip)

refactor: readjust sizing

serenity b2fdfb52 4bce9883

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