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
});
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" />
0
0
0
0
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" />
0
0
0
0
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"