Skip to content

Commit fcd29d7

Browse files
setchysetchy
committed
refactor: extract styles to tailwind
Signed-off-by: Adam Setch <[email protected]>
1 parent bb8e7d1 commit fcd29d7

File tree

12 files changed

+105
-69
lines changed

12 files changed

+105
-69
lines changed

‎src/components/DownloadButton.astro‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
import { Icon } from "astro-icon/components";
3+
4+
export interface Props {
5+
item: {
6+
url: string;
7+
name: string;
8+
};
9+
}
10+
11+
const { item } = Astro.props;
12+
---
13+
14+
<a
15+
href={item.url}
16+
class:list={[
17+
"mb-3 px-4 py-3 mr-4",
18+
"font-semibold rounded-md",
19+
"bg-gitify-download-rest",
20+
"hover:bg-gitify-download-hover",
21+
]}
22+
>
23+
<div class="flex flex-row gap-2 items-center">
24+
<Icon name="line-md:cloud-alt-download-filled" size={24} />
25+
<span>{item.name}</span>
26+
</div>
27+
</a>

‎src/components/Footer.astro‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const isHomepage = currentPathname === "/";
99

1010
<div
1111
class:list={[
12-
"bg-gray-800 text-white text-sm py-10 px-3",
12+
"bg-gitify-footer text-white text-sm py-10 px-3",
1313
isHomepage ? "mt-0" : "mt-12",
1414
]}
1515
>
@@ -19,13 +19,15 @@ const isHomepage = currentPathname === "/";
1919
rel="noopener noreferrer"
2020
href=`${URLs.GITHUB.REPO}`
2121
aria-label="GitHub Repository"
22-
class="mt-1 mb-4 mx-2 p-1 text-white hover:text-gray-400"
22+
class="mt-1 mb-4 mx-2 p-1"
2323
>
2424
<Icon name="mdi:github" size={32} />
2525
</a>
2626

2727
<div class="my-3">
28-
Copyright © <a href="/">Gitify Team</a>
28+
Copyright © <a href={siteMetadata.author.site}
29+
>{siteMetadata.author.name}</a
30+
>
2931
{new Date().getFullYear()}
3032
</div>
3133
</div>

‎src/components/GitHubRepo.astro‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -44,27 +44,31 @@ const loadRepoStats = async (): Promise<RepoStats> => {
4444
const { forks, stars, latestReleaseName } = await loadRepoStats();
4545
---
4646

47-
<a href={URLs.GITHUB.REPO}
48-
target="_blank"
49-
rel="noopener noreferrer"
50-
aria-label="GitHub Repository"
51-
class="text-white hover:text-gray-300 hover:no-underline"
47+
<a
48+
href={URLs.GITHUB.REPO}
49+
target="_blank"
50+
rel="noopener noreferrer"
51+
aria-label="GitHub Repository"
52+
class="hover:text-gitify-repo-hover hover:no-underline"
5253
>
5354
<section class="flex flex-row gap-2 items-center">
5455
<Icon name="mdi:github" size={32} class="w-6 sm:w-10" />
5556
<div class="font-light max-sm:hidden">
5657
<div class="text-sm">{siteMetadata.repo.fullName}</div>
5758
<div class="flex flex-row gap-2 text-xs">
5859
<div class="flex flex-row gap-0.5 items-center">
59-
<Icon name="mdi:tag-outline" /> {latestReleaseName}
60+
<Icon name="mdi:tag-outline" />
61+
{latestReleaseName}
6062
</div>
6163
<div class="flex flex-1 gap-0.5 items-center">
62-
<Icon name="mdi:star-outline" /> {stars}
64+
<Icon name="mdi:star-outline" />
65+
{stars}
6366
</div>
6467
<div class="flex flex-1 gap-0.5 items-center">
65-
<Icon name="mdi:source-branch" /> {forks}
68+
<Icon name="mdi:source-branch" />
69+
{forks}
6670
</div>
6771
</div>
6872
</div>
6973
</section>
70-
</a>
74+
</a>

‎src/components/Hero.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import Logo from "~/components/Logo.astro";
77
import { siteMetadata } from "~/constants";
88
---
99

10-
<div class="bg-gray-100">
10+
<div class="bg-gitify-hero">
1111
<div
1212
class="container flex flex-col md:flex-row lg:items-center max-w-5xl mx-auto px-12 py-8 lg:py-16"
1313
>

‎src/components/LatestRelease.astro‎

Lines changed: 14 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import type {
1010
HeroData,
1111
ReleaseAsset,
1212
} from "~/types";
13+
import DownloadButton from "./DownloadButton.astro";
1314
1415
const octokit = new Octokit();
1516
@@ -103,19 +104,7 @@ const { downloadLinks, version, releaseDate } = await loadInitialData();
103104
<>
104105
<div class="sm:flex md:grid md:grid-cols-2">
105106
{downloadLinks.primary.map((item) => (
106-
<a
107-
href={item.url}
108-
class:list={[
109-
"flex items-center mb-3 px-4 py-3 mr-4",
110-
"font-semibold text-white hover:text-white",
111-
"rounded-md bg-green-700 hover:bg-green-800 ",
112-
]}
113-
>
114-
<div class="flex flex-row gap-2 items-center">
115-
<Icon name="line-md:cloud-alt-download-filled" size={24} />
116-
<span>{item.name}</span>
117-
</div>
118-
</a>
107+
<DownloadButton item={item} />
119108
))}
120109
</div>
121110
<div class="w-80 flex flex-col gap-2">
@@ -129,7 +118,10 @@ const { downloadLinks, version, releaseDate } = await loadInitialData();
129118
<ul class="list-disc list-inside mt-2 ml-4">
130119
{downloadLinks.alt.map((platform) => (
131120
<li class="mb-2.5">
132-
<a href={platform.url || URLs.GITHUB.LATEST_RELEASE}>
121+
<a
122+
class="text-gitify-download-link"
123+
href={platform.url || URLs.GITHUB.LATEST_RELEASE}
124+
>
133125
{platform.name}
134126
</a>
135127
</li>
@@ -140,22 +132,14 @@ const { downloadLinks, version, releaseDate } = await loadInitialData();
140132
</div>
141133
</>
142134
) : (
143-
<>
144-
<div class="flex">
145-
<a
146-
class="flex items-center mb-3 px-4 py-3 font-semibold text-white rounded-md bg-green-700 hover:bg-green-800"
147-
href={URLs.GITHUB.LATEST_RELEASE}
148-
>
149-
<div class="flex flex-row gap-2 items-center">
150-
<Icon name="line-md:cloud-alt-download-filled" size={24} />
151-
<span>View GitHub Releases</span>
152-
</div>
153-
</a>
154-
</div>
155-
<div>
156-
<div>Couldn't retrieve latest version.</div>
157-
</div>
158-
</>
135+
<div class="flex">
136+
<DownloadButton
137+
item={{
138+
url: URLs.GITHUB.LATEST_RELEASE,
139+
name: "View GitHub Releases",
140+
}}
141+
/>
142+
</div>
159143
)
160144
}
161145
</div>

‎src/components/Navbar.astro‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ const { currentPathname } = Astro.props;
77
const isHomepage = currentPathname === "/";
88
---
99

10-
<nav class:list={["py-8 px-8", isHomepage && "bg-gray-100"]}>
10+
<nav class:list={["py-8 px-8", isHomepage && "bg-gitify-hero"]}>
1111
<div class="container max-w-5xl lg:mx-auto">
1212
<div
13-
class="bg-navbar rounded-lg flex items-center justify-between px-8 lg:px-12 py-4 lg:py-6"
13+
class="bg-gitify-navbar rounded-lg flex items-center justify-between px-8 lg:px-12 py-4 lg:py-6"
1414
>
1515
<div class="flex items-center flex-shrink-0 text-white mr-6">
1616
<a href="/" aria-label={siteMetadata.title}>
@@ -27,9 +27,9 @@ const isHomepage = currentPathname === "/";
2727
href={item.path}
2828
class:list={[
2929
"py-1.5 lg:py-2 px-2 lg:px-3",
30-
"text-white font-light hover:text-gray-300",
30+
"font-light",
3131
currentPathname === item.path
32-
? "border rounded-lg border-white text-white"
32+
? "border rounded-lg border-white"
3333
: "",
3434
]}
3535
>

‎src/layouts/SectionRow.astro‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,15 @@ const {
2424

2525
<div
2626
class:list={[
27-
'flex px-12 py-16 lg:py-24',
28-
isDark ? 'bg-gray-800 text-white' : 'bg-gray-50',
27+
"flex px-12 py-16 lg:py-24",
28+
isDark ? "bg-gitify-section-dark text-white" : "bg-gitify-section-light",
2929
]}
3030
>
3131
<div
3232
class:list={[
33-
'container max-w-5xl mx-auto flex flex-col items-center lg:space-x-36',
34-
!isReversed ? 'lg:flex-row' : 'lg:flex-row-reverse',
35-
isReversed && 'lg:space-x-reverse',
33+
"container max-w-5xl mx-auto flex flex-col items-center lg:space-x-36",
34+
!isReversed ? "lg:flex-row" : "lg:flex-row-reverse",
35+
isReversed && "lg:space-x-reverse",
3636
]}
3737
>
3838
<div class="flex-1">

‎src/pages/404.astro‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,13 @@ import Layout from "~/layouts/Layout.astro";
99
>
1010
<img class="w-1/2 md:1/3 lg:w-1/4" src="/images/404.png" />
1111
<div class="flex flex-col items-center justify-center">
12-
<p class="text-3xl md:text-4xl lg:text-5xl text-gray-800 mt-12">
13-
Page Not Found
14-
</p>
15-
<p class="md:text-lg lg:text-xl text-gray-600 mt-8">
12+
<p class="text-3xl md:text-4xl lg:text-5xl mt-12">Page Not Found</p>
13+
<p class="md:text-lg lg:text-xl mt-8">
1614
Sorry, the page you are looking for could not be found.
1715
</p>
1816
<a
1917
href="/"
20-
class="bg-blue-600 hover:bg-blue-700 text-white hover:text-blue-300 px-4 py-2 mt-12 rounded transition duration-150"
18+
class="bg-gitify-button-rest hover:bg-gitify-button-hover px-4 py-2 mt-12 rounded transition duration-150"
2119
title="Return Home"
2220
>
2321
<span>&#8592 Return Home</span>

‎src/pages/callback.astro‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,17 @@ import Layout from "~/layouts/Layout.astro";
77
<div
88
class="w-full h-screens py-16 flex flex-col items-center justify-center"
99
>
10-
<img
11-
class="w-1/2 md:1/3 lg:w-1/4 text-blue-600"
12-
src="/images/callback.svg"
13-
/>
10+
<img class="w-1/2 md:1/3 lg:w-1/4" src="/images/callback.svg" />
1411
<div class="flex flex-col items-center justify-center">
15-
<p class="text-3xl md:text-4xl lg:text-5xl text-gray-800 mt-12">
12+
<p class="text-3xl md:text-4xl lg:text-5xl mt-12">
1613
This is a callback page.
1714
</p>
18-
<p class="md:text-lg lg:text-xl text-gray-600 mt-8">
15+
<p class="md:text-lg lg:text-xl mt-8">
1916
There's not much to see in this page.
2017
</p>
2118
<a
2219
href="/"
23-
class="flex items-center space-x-2 bg-blue-600 hover:bg-blue-700 text-gray-100 px-4 py-2 mt-12 rounded transition duration-150"
20+
class="bg-gitify-button-rest hover:bg-gitify-button-hover px-4 py-2 mt-12 rounded transition duration-150"
2421
title="Return Home"
2522
>
2623
<span>&#8592 Return Home</span>

‎src/pages/index.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ import SectionRow from "~/layouts/SectionRow.astro";
3838
<div class="flex flex-wrap justify-center md:max-w-lg mt-12 lg:mt-0">
3939
{
4040
openSourceLibs.map((item) => (
41-
<div class="hover:bg-gray-200 p-2 m-2 rounded-lg">
41+
<div class="hover:bg-gitify-icon-hover p-2 m-2 rounded-lg">
4242
<a href={item.link} target="_blank" rel="noopener noreferrer">
4343
<Icon
4444
name={item.svg}

0 commit comments

Comments
 (0)