Skip to content

Commit 61d20eb

Browse files
herin7herin7
committed
Icon Updated
1 parent b6f4c57 commit 61d20eb

2 files changed

Lines changed: 60 additions & 16 deletions

File tree

‎gitforme/src/PageContent/AppHeader.jsx‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
// AppHeader.jsx
2-
import { GitHubIcon } from "../components/Iconsfile";
1+
import { GitHubIcon, LoginIcon, LogoutIcon } from "../components/Iconsfile";
32

43
export const AppHeader = ({ isAuthenticated, user, onLogout, onLogin, repoUrl, setRepoUrl, oncook }) => (
54
<header className="sticky top-0 z-30 bg-white/70 backdrop-blur-xl border-b-2 border-black">
@@ -30,6 +29,7 @@ export const AppHeader = ({ isAuthenticated, user, onLogout, onLogin, repoUrl, s
3029
</div>
3130

3231
<div className="flex items-center gap-4 flex-shrink-0">
32+
{/* This button correctly keeps the GitHubIcon */}
3333
<a
3434
href="https://github.com/herin7/gitforme"
3535
target="_blank"
@@ -43,29 +43,32 @@ export const AppHeader = ({ isAuthenticated, user, onLogout, onLogin, repoUrl, s
4343
{isAuthenticated ? (
4444
<>
4545
<span className="font-semibold hidden lg:inline">Hi, {user?.username}!</span>
46-
<button onClick={onLogout} className="px-3 py-1.5 bg-white border-2 border-black rounded-lg hover:bg-gray-100 transition-colors font-semibold shadow-[3px_3px_0px_rgba(0,0,0,1)] active:shadow-none active:translate-x-0.5 active:translate-y-0.5">
47-
Logout
46+
{/* Added a LogoutIcon for consistency */}
47+
<button onClick={onLogout} className="flex items-center gap-2 px-3 py-1.5 bg-white border-2 border-black rounded-lg hover:bg-gray-100 transition-colors font-semibold shadow-[3px_3px_0px_rgba(0,0,0,1)] active:shadow-none active:translate-x-0.5 active:translate-y-0.5">
48+
<LogoutIcon />
49+
<span className="hidden md:inline">Logout</span>
4850
</button>
4951
</>
5052
) : (
53+
/* This button now uses the LoginIcon */
5154
<button onClick={onLogin} className="flex items-center gap-2 px-3 py-1.5 bg-white border-2 border-black rounded-lg hover:bg-gray-100 transition-colors font-semibold shadow-[3px_3px_0px_rgba(0,0,0,1)] active:shadow-none active:translate-x-0.5 active:translate-y-0.5">
52-
<GitHubIcon />
55+
<LoginIcon />
5356
<span className="hidden md:inline">Login</span>
5457
</button>
5558
)}
5659
<div className="flex flex-col items-center">
57-
<a href="https://www.producthunt.com/products/gitforme?embed=true&utm_source=badge-featured&utm_medium=badge&utm_source=badge-gitforme" target="_blank" rel="noopener noreferrer">
58-
<img
59-
src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=995370&theme=neutral&t=1753038206402"
60-
alt="GitForme - Understand any GitHub repository in minutes, not days. | Product Hunt"
61-
style={{width: '150px', height: '35px'}}
62-
width="250"
63-
height="54"
64-
/>
65-
</a>
66-
</div>
60+
<a href="https://www.producthunt.com/products/gitforme?embed=true&utm_source=badge-featured&utm_medium=badge&utm_source=badge-gitforme" target="_blank" rel="noopener noreferrer">
61+
<img
62+
src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=995370&theme=neutral"
63+
alt="GitForme - Understand any GitHub repository in minutes, not days. | Product Hunt"
64+
style={{width: '150px', height: '35px'}}
65+
width="250"
66+
height="54"
67+
/>
68+
</a>
69+
</div>
6770
</div>
6871
</div>
6972
</div>
7073
</header>
71-
);
74+
);

‎gitforme/src/components/Iconsfile.jsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,48 @@ export const GitHubIcon = () => (
55
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
66
</svg>
77
);
8+
export const LoginIcon = (props) => (
9+
<svg
10+
xmlns="http://www.w3.org/2000/svg"
11+
width="24"
12+
height="24"
13+
viewBox="0 0 24 24"
14+
fill="none"
15+
stroke="currentColor"
16+
strokeWidth="2"
17+
strokeLinecap="round"
18+
strokeLinejoin="round"
19+
{...props}
20+
>
21+
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" />
22+
<polyline points="10 17 15 12 10 7" />
23+
<line x1="15" y1="12" x2="3" y2="12" />
24+
</svg>
25+
);
826

27+
/**
28+
* Logout Icon Component
29+
* Represents a "logout" action, typically an arrow leaving a doorway.
30+
* @param {object} props - Standard React component props.
31+
*/
32+
export const LogoutIcon = (props) => (
33+
<svg
34+
xmlns="http://www.w3.org/2000/svg"
35+
width="24"
36+
height="24"
37+
viewBox="0 0 24 24"
38+
fill="none"
39+
stroke="currentColor"
40+
strokeWidth="2"
41+
strokeLinecap="round"
42+
strokeLinejoin="round"
43+
{...props}
44+
>
45+
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
46+
<polyline points="16 17 21 12 16 7" />
47+
<line x1="21" y1="12" x2="9" y2="12" />
48+
</svg>
49+
);
950
export const SparkleIcon = ({ className }) => (
1051
<svg className={`absolute ${className}`} width="60" height="60" viewBox="0 0 117 117" fill="none" xmlns="http://www.w3.org/2000/svg">
1152
<path d="M58.5 0L68.0312 24.9066L89.1658 20.3342L84.5934 41.4688L109.5 51L84.5934 60.5312L89.1658 81.6658L68.0312 77.0934L58.5 102L48.9688 77.0934L27.8342 81.6658L32.4066 60.5312L7.5 51L32.4066 41.4688L27.8342 20.3342L48.9688 24.9066L58.5 0Z" fill="#FFC700" />

0 commit comments

Comments
 (0)