tangled
alpha
login
or
join now
isuggest.selfce.st
/
strand
3
fork
atom
alternative tangled frontend (extremely wip)
3
fork
atom
overview
issues
pulls
pipelines
refactor: readjust sizing
serenity
2 weeks ago
b2fdfb52
4bce9883
+21
-13
7 changed files
expand all
collapse all
unified
split
src
components
Auth
SignIn.tsx
SignOutButton.tsx
Homepage
TrendingFeed.tsx
Icons
Branding
StrandIcon.tsx
Nav
NavBarAuthed.tsx
NavBarUnauthed.tsx
routes
_layout
index.tsx
+8
-4
src/components/Auth/SignIn.tsx
···
42
42
});
43
43
};
44
44
45
45
-
const loginIcon = <LucideLogIn />;
45
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
50
-
height={28}
51
51
-
width={28}
50
50
+
height={24}
51
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
84
-
<LucideAtSign className="text-subtext group-has-[:focus]:text-accent h-full w-max px-2 transition-all" />
84
84
+
<LucideAtSign
85
85
+
className="text-subtext group-has-[:focus]:text-accent h-full w-max px-2 transition-all"
86
86
+
height={16}
87
87
+
width={16}
88
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
17
-
icon={<LucideLogOut />}
17
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
45
-
<LucideTrendingUp />
45
45
+
<LucideTrendingUp height={16} width={16} />
46
46
</div>
47
47
-
<LucideDot className="text-overlay0" />
47
47
+
<LucideDot
48
48
+
className="text-overlay0"
49
49
+
height={16}
50
50
+
width={16}
51
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
90
-
const repoIcon = <LucideBookMarked />;
94
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
110
-
<LucideStar className="group-hover:text-accent-alt transition-all" />
114
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
4
-
return <LucideSpool />;
4
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
70
-
const profileIcon = <LucideCircleUserRound/>
70
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
23
-
icon={<LucideLogIn />}
23
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
57
-
icon={<LucideLogIn />}
57
57
+
icon={<LucideLogIn height={16} width={16} />}
58
58
iconClassName="text-crust"
59
59
labelClassName="text-crust"
60
60
underlineClassName="bg-crust"