Skip to content

Commit 155f16e

Browse files
AdnanarodiyaAdnanarodiya
committed
Update styles and components for improved UI; add new gradients and button effects, modify layout background color, and enhance button accessibility.
1 parent c33131f commit 155f16e

File tree

8 files changed

+69
-28
lines changed

8 files changed

+69
-28
lines changed

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
/.pnp
66
.pnp.js
77
package-lock.json
8+
.env*
89

910
# testing
1011
/coverage
@@ -33,4 +34,4 @@ yarn-error.log*
3334

3435
# vercel
3536
.vercel
36-
.env*.local
37+
.env*.local

‎src/app/(public)/_components/button.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,15 @@ export function Button({
1414
<div className="relative inline-block group w-fit">
1515
<button
1616
className={cn(
17-
'bg-hacktoberfest-black m-1 hover:bg-hacktoberfest-dark-green btn btn-md md:btn-lg text-hacktoberfest-light rounded-2xl leading-none border-none',
17+
'text-sm font-bold inline-flex justify-center items-center uppercase py-3 px-4 text-center text-white bg-primary-btn-gradient shadow-primary-btn-shadow hover:bg-primary-btn-hover-gradient min-w-20 transition-all duration-300 ease-in-out',
1818
className
1919
)}
2020
{...props}
2121
>
22-
{children}
22+
<p className="btn-clip group-hover:opacity-0 transition-opacity duration-300"></p>
23+
<span className="relative z-20 flex justify-center items-center text-hacktoberfest-light gap-2 font-bold">
24+
{children}
25+
</span>
2326
</button>
2427
</div>
2528
);

‎src/app/(public)/_components/header.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export async function Header() {
1313

1414
return (
1515
<header className="fixed top-0 left-0 w-full z-50 py-3 px-6">
16-
<div className="border border-hacktoberfest-light-blue rounded-lg py-4 px-6 container mx-auto bg-[radial-gradient(85.48%_85.48%_at_50%_0%,rgb(64,63,125)_0%,rgb(from_rgb(28,28,63)_r_g_b/_0)_100%)] backdrop-blur-md shadow-lg">
16+
<div className="border border-hacktoberfest-light-blue rounded-lg py-4 px-6 container mx-auto backdrop-blur-md shadow-lg">
1717
<div className="flex justify-between items-center">
1818
<Link href="/" className="z-5">
1919
<LogoIconsSvg />

‎src/app/(public)/_components/hero.tsx

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,14 @@ export function Hero() {
2424
}
2525

2626
return (
27-
<div className="relative min-h-screen bg-(radial-gradient(85.48% 85.48% at 50% 0%, rgb(64, 63, 125) 0%, rgb(from rgb(28, 28, 63) r g b / 0) 100%)) ">
28-
{/* <div className="text-center hero-content">
29-
<div className="max-w-md">
30-
<h1 className="mb-5 text-5xl font-medium uppercase text-hacktoberfest-light-pink">
27+
<div className="relative min-h-screen bg-[radial-gradient(85.48%_85.48%_at_50%_0%,rgb(64,63,125)_0%,rgb(from_rgb(28,28,63)_r_g_b/_0)_100%)] ">
28+
<div className="z-50 flex justify-center items-center text-center h-screen">
29+
<div className="max-w-md space-y-5">
30+
<h1 className="text-5xl font-medium uppercase text-hacktoberfest-light-pink">
3131
Search your language
3232
</h1>
3333
<form
34-
className="items-center w-full max-w-xs mx-auto my-5 form-control"
34+
className="items-center w-full max-w-xs mx-auto form-control"
3535
onSubmit={handleSearch}
3636
>
3737
<div className="flex w-full">
@@ -51,15 +51,15 @@ export function Hero() {
5151
</button>
5252
</div>
5353
</form>
54-
<p className="mb-5 font-medium uppercase text-hacktoberfest-light">
54+
<p className="font-medium uppercase text-hacktoberfest-light">
5555
Or select the programming language you would like to find
5656
repositories for.
5757
</p>
58-
59-
{mainLanguages.map(language => (
60-
<LanguageButton key={language} language={language} />
61-
))}
62-
58+
<div className="flex flex-wrap gap-6 items-center justify-center ">
59+
{mainLanguages.map(language => (
60+
<LanguageButton key={language} language={language} />
61+
))}
62+
</div>
6363
<div className="dropdown dropdown-top">
6464
<Button tabIndex={0} className="umami--click--otherlangs-button">
6565
Other languages
@@ -79,8 +79,8 @@ export function Hero() {
7979
</ul>
8080
</div>
8181
</div>
82-
</div> */}
83-
<div className="absolute top-0 left-0 w-full h-full">
82+
</div>
83+
<div className="absolute top-0 left-0 w-full h-full -z-10">
8484
<HeroSectionSvg className="w-full h-full" />
8585
</div>
8686
</div>

‎src/app/(public)/_components/language-button.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export function LanguageButton({ language }: LanguageButtonProps) {
1111

1212
return (
1313
<Link href={`/repos/${lan}`}>
14-
<Button className="flex items-center gap-3">
14+
<Button>
1515
<svg className="w-5 h-4">{Icons[lan === 'c++' ? 'cpp' : lan]}</svg>
1616
{language}
1717
</Button>

‎src/app/layout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const spaceGrotesk = Space_Grotesk({
1818
export default function RootLayout({ children }: React.PropsWithChildren) {
1919
return (
2020
<html className={spaceGrotesk.variable}>
21-
<body className="font-sans font-normal bg-hacktoberfest-dark-green">
21+
<body className="font-sans font-normal bg-hacktoberfest-blue">
2222
{children}
2323
<Footer />
2424
<SessionProvider>

‎src/styles/globals.css

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,43 @@ a {
1717
}
1818

1919
.btn-clip {
20+
--corner-size: 5px;
21+
--border-width: 1px;
22+
--full-width: calc(var(--corner-size) + var(--border-width));
23+
position: absolute;
24+
inset: -2px;
25+
background-color: white;
2026
clip-path: polygon(
21-
12px 0px,
22-
100% 0px,
23-
100% 72%,
24-
calc(100% - 12px) 100%,
27+
0px var(--full-width),
28+
var(--border-width) var(--full-width),
29+
var(--border-width) var(--border-width),
30+
var(--full-width) var(--border-width),
31+
var(--full-width) 0px,
32+
0px 0px,
2533
0px 100%,
26-
0px 12px
34+
100% 100%,
35+
100% 0px,
36+
calc(100% - var(--full-width)) 0px,
37+
calc(100% - var(--full-width)) var(--border-width),
38+
calc(100% - var(--border-width)) var(--border-width),
39+
calc(100% - var(--border-width)) var(--full-width),
40+
100% var(--full-width),
41+
100% calc(100% - var(--full-width)),
42+
calc(100% - var(--border-width)) calc(100% - var(--full-width)),
43+
calc(100% - var(--border-width)) calc(100% - var(--border-width)),
44+
calc(100% - var(--full-width)) calc(100% - var(--border-width)),
45+
calc(100% - var(--full-width)) 100%,
46+
var(--full-width) 100%,
47+
var(--full-width) calc(100% - var(--border-width)),
48+
var(--border-width) calc(100% - var(--border-width)),
49+
var(--border-width) calc(100% - var(--full-width)),
50+
0px calc(100% - var(--full-width)),
51+
0px var(--full-width)
2752
);
28-
border-radius: 2px;
53+
transition:
54+
inset 300ms ease-in-out,
55+
clip-path 300ms ease-in-out,
56+
color 300ms ease-in-out;
2957
}
3058

3159
.container-query {

‎tailwind.config.ts

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,11 @@ const config = {
1313
},
1414
backgroundImage: {
1515
'gradient-radial':
16-
'radial-gradient(30% 50% at center 50%, var(--tw-gradient-stops))'
16+
'radial-gradient(30% 50% at center 50%, var(--tw-gradient-stops))',
17+
'primary-btn-hover-gradient':
18+
'linear-gradient(270deg, rgb(194, 194, 255) 0%, rgb(90, 90, 181) 100%)',
19+
'primary-btn-gradient':
20+
'linear-gradient(90deg,rgb(from rgb(90, 90, 181) r g b / 0.15) 0%,rgb(from rgb(194, 194, 255) r g b / 0.15) 100%)'
1721
},
1822
backgroundSize: {
1923
'50': '50%',
@@ -23,17 +27,22 @@ const config = {
2327
sm: '0 1px 2px var(--tw-shadow-color)',
2428
DEFAULT:
2529
'0 0 10px var(--tw-shadow-color), 0 0 20px var(--tw-shadow-color)',
26-
lg: '0 8px 16px var(--tw-shadow-color)'
30+
lg: '0 8px 16px var(--tw-shadow-color)',
31+
'button-shadow': 'transparent 0px 0px 0px 1px',
32+
'primary-btn-shadow':
33+
'rgb(from rgb(208, 204, 227) r g b / 0.25) 0px 0px 0px 1px'
2734
},
2835
colors: {
2936
hacktoberfest: {
3037
black: '#1C1C1C',
3138
green: '#50DA4C',
39+
blue: '#1c1c3f',
3240
pink: '#FF8BFF',
33-
light: '#FEFDF8',
41+
light: '#d0cce3',
3442
beige: '#F3F0E0',
3543
'dark-green': '#183717',
3644
'light-green': '#D8FFD8',
45+
'light-blue': '#403f7d',
3746
'deep-pink': '#C401C4',
3847
'light-pink': '#FFDBFF'
3948
}

0 commit comments

Comments
 (0)