added responsive design and light mode support

commune-os · Jul 10, 2024 · 6d4561d · 6d4561d
1 parent 1e081d7
commit 6d4561d
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 18 deletions.
diff --git a/.env.local b/.env.local
@@ -25,6 +25,6 @@ PUBLIC_DICEBEAR_STYLE="bottts"
 
 MICROSOFT_APPLICATION_ID=""
 
-PUBLIC_GH_CLIENT_ID=
+PUBLIC_GH_CLIENT_ID=Ov23liRulzA2gt49J3xk
 PUBLIC_GH_REDIRECT_URI=http://localhost:9523/account/github/
-GH_CLIENT_SECRET=
+GH_CLIENT_SECRET=31d5271df7fad71b508919bcfb92b57d8e690812
diff --git a/src/routes/(app)/account/github/+page.svelte b/src/routes/(app)/account/github/+page.svelte
@@ -7,7 +7,7 @@
 	const githubAuthUrl = `${GH_OAUTH_URI}?client_id=${clientId}&redirect_uri=${encodeURIComponent(redirectUri)}`;
 </script>
 
-<div class="flex justify-center py-10">
+<div class="flex justify-center px-4 py-10 md:px-0">
 	<a href={githubAuthUrl} class="rounded-md bg-gray-700 px-4 py-3 text-white hover:bg-gray-800"
 		>Connect with Github</a
 	>

diff --git a/src/routes/(app)/account/github/LanguageTag.svelte b/src/routes/(app)/account/github/LanguageTag.svelte
@@ -2,6 +2,8 @@
 	export let language: string;
 </script>
 
-<div class="rounded-md bg-gray-800 px-4 py-2 text-white">
+<div
+	class="rounded-md bg-gray-200 px-4 py-2 text-sm font-medium text-gray-800 dark:bg-gray-800 dark:text-white"
+>
 	{language}
 </div>
diff --git a/src/routes/(app)/account/github/Repository.svelte b/src/routes/(app)/account/github/Repository.svelte
@@ -4,26 +4,28 @@
 	export let repo: GithubRepo;
 </script>
 
-<article class={`rounded-md border  border-gray-700 p-4`}>
+<article class={`rounded-md border  border-gray-300 p-4 dark:border-gray-700`}>
 	<div class={`justify-beeen flex items-center`}>
 		<a
 			target="_blank"
 			href={repo.html_url}
-			class={`block flex-1 font-bold text-blue-400 hover:underline`}
+			class={`block flex-1 font-bold text-blue-500 hover:underline dark:text-blue-400`}
 		>
 			{repo.name}
 		</a>
 
-		<p class={`rounded-full border border-gray-700 px-2 py-1 text-xs`}>
+		<p
+			class={`rounded-full border border-gray-300 px-2 py-1 text-xs font-semibold capitalize dark:border-gray-700`}
+		>
 			{repo.visibility}
 		</p>
 	</div>
 
-	<p class={`mt-4 text-sm text-gray-400`}>{repo.description}</p>
+	<p class={`mt-4 text-sm text-gray-600 dark:text-gray-400`}>{repo.description}</p>
 
 	<div class={`mt-4 flex items-center space-x-4`}>
 		<div>
-			<p class={`text-sm text-gray-400`}>{repo.language}</p>
+			<p class={`text-sm font-medium text-gray-600 dark:text-gray-400`}>{repo.language}</p>
 		</div>
 		<div class={`flex items-center space-x-2`}>
 			<div>
@@ -40,7 +42,7 @@
 					></path>
 				</svg>
 			</div>
-			<p class={`text-xs text-gray-300`}>{repo.stargazers_count}</p>
+			<p class={`text-xs text-gray-600 dark:text-gray-300`}>{repo.stargazers_count}</p>
 		</div>
 		<div class={`flex items-center space-x-2`}>
 			<div>
@@ -60,7 +62,7 @@
 					></path>
 				</svg>
 			</div>
-			<p class={`text-xs text-gray-300`}>{repo.forks_count}</p>
+			<p class={`text-xs text-gray-600 dark:text-gray-300`}>{repo.forks_count}</p>
 		</div>
 	</div>
 </article>
diff --git a/src/routes/(app)/account/github/UserInfoItem.svelte b/src/routes/(app)/account/github/UserInfoItem.svelte
@@ -6,7 +6,7 @@
 <a
 	href={href || '#'}
 	target={href ? '_blank' : '_self'}
-	class="flex items-center space-x-2 text-gray-300"
+	class="flex items-center space-x-2 text-gray-600 dark:text-gray-300"
 >
 	<slot />
 	<p class="">{label}</p>

diff --git a/src/routes/(app)/account/github/profile/+page.svelte b/src/routes/(app)/account/github/profile/+page.svelte
@@ -11,28 +11,28 @@
 	const user = data.user;
 </script>
 
-<div class="container mx-auto flex flex-col gap-8 py-8">
+<div class="container mx-auto flex flex-col gap-8 px-4 py-8 md:px-0">
 	<section>
 		<div>
 			<img src={user.avatar_url} alt={user.name} class={`aspect-square h-64 w-64 rounded-full`} />
 
 			<div class={`mt-4`}>
 				<h2 class={`text-2xl font-bold`}>{user.name}</h2>
-				<h2 class={`text-xl text-gray-400`}>{user.login}</h2>
+				<h2 class={`text-xl text-gray-700 dark:text-gray-400`}>{user.login}</h2>
 			</div>
-			<p class={`mt-4 max-w-md text-gray-300`}>{user.bio}</p>
+			<p class={`mt-4 max-w-md text-gray-600 dark:text-gray-300`}>{user.bio}</p>
 
 			<div class={`mt-4 flex items-center space-x-2`}>
 				<a href={`/${user.login}/followers`} class={`flex items-center space-x-1 hover:underline`}>
 					<p class={`font-bold`}>{user.followers}</p>
-					<p class={`text-sm text-gray-300`}>
+					<p class={`text-sm text-gray-600 dark:text-gray-300`}>
 						{user.followers > 1 ? 'followers' : 'follower'}
 					</p>
 				</a>
 				<span>&bull;</span>
 				<a href={`/${user.login}/following`} class={`flex items-center space-x-1 hover:underline`}>
 					<p class={`font-bold`}>{user.following}</p>
-					<p class={`text-sm text-gray-300`}>
+					<p class={`text-sm text-gray-600 dark:text-gray-300`}>
 						{user.following > 1 ? 'followings' : 'following'}
 					</p>
 				</a>
@@ -78,7 +78,7 @@
 
 	<section>
 		<h3 class="text-xl font-medium">Repositories</h3>
-		<div class="mt-4 grid grid-cols-3 gap-4">
+		<div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
 			{#each data.repos as repo}
 				<Repository {repo} />
 			{/each}