Skip to content

Commit 67a18a2

Browse files
AlemTuzlakAlemTuzlak
authored
Added dark mode styling, improved link component and date handling (#31)
Fixes # # Description Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change. ## Type of change Please mark relevant options with an `x` in the brackets. - [ ] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [ ] This change requires a documentation update - [ ] Algorithm update - updates algorithm documentation/questions/answers etc. - [ ] Other (please describe): # How Has This Been Tested? Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration - [ ] Integration tests - [ ] Unit tests - [ ] Manual tests - [ ] No tests required # Reviewer checklist Mark everything that needs to be checked before merging the PR. - [ ] Check if the UI is working as expected and is satisfactory - [ ] Check if the code is well documented - [ ] Check if the behavior is what is expected - [ ] Check if the code is well tested - [ ] Check if the code is readable and well formatted - [ ] Additional checks (document below if any) # Screenshots (if appropriate): # Questions (if appropriate):
1 parent 3fe05ab commit 67a18a2

File tree

10 files changed

+122
-57
lines changed

10 files changed

+122
-57
lines changed

‎app/library/language-switcher/LanguageSwitcher.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useTranslation } from "react-i18next"
2-
import { Link, useLocation } from "react-router"
2+
import { useLocation } from "react-router"
33
import { supportedLanguages } from "~/localization/resource"
4+
import { Link } from "../link"
45

56
const LanguageSwitcher = () => {
67
const { i18n } = useTranslation()
@@ -11,7 +12,7 @@ const LanguageSwitcher = () => {
1112
<div className="flex gap-2 p-2 fixed top-0 right-0 w-min z-10">
1213
{supportedLanguages.map((language) => (
1314
<Link
14-
className="text-blue-500 hover:underline transition-all"
15+
className="text-blue-500 dark:text-white hover:underline transition-all"
1516
key={language}
1617
to={`${to}?lng=${language}`}
1718
onClick={() => i18n.changeLanguage(language)}

‎app/library/link/README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Link
2+
3+
This is a simple link component that wraps the `Link` component from `react-router` and provides view transitions and prefetching by default.
4+
5+
6+
## Benefits
7+
8+
- You prefetch other routes before the user clicks on the link.
9+
- You get view transitions for free on every navigation.

‎app/library/link/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./link"

‎app/library/link/link.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { Link as ReactRouterLink, type LinkProps as ReactRouterLinkProps } from "react-router"
2+
3+
interface LinkProps extends ReactRouterLinkProps {}
4+
5+
export const Link = ({ prefetch = "intent", viewTransition = true, ...props }: LinkProps) => {
6+
return <ReactRouterLink prefetch={prefetch} viewTransition={viewTransition} {...props} />
7+
}

‎app/root.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,11 @@ export const ErrorBoundary = () => {
5959
const errorStatusCode = isRouteErrorResponse(error) ? error.status : "500"
6060

6161
return (
62-
<div className="placeholder-index relative h-full min-h-screen w-screen flex items-center justify-center dark:bg-white sm:pb-16 sm:pt-8">
62+
<div className="placeholder-index relative h-full min-h-screen w-screen flex items-center bg-gradient-to-b from-gray-50 to-gray-100 dark:from-blue-950 dark:to-blue-900 justify-center dark:bg-white sm:pb-16 sm:pt-8">
6363
<div className="relative mx-auto max-w-[90rem] sm:px-6 lg:px-8">
6464
<div className="relative min-h-72 flex flex-col justify-center sm:overflow-hidden sm:rounded-2xl p-1 md:p-4 lg:p-6">
6565
<h1 className="text-center w-full text-red-600 text-2xl pb-2">{t(`error.${errorStatusCode}.title`)}</h1>
66-
<p className="text-lg text-center w-full">{t(`error.${errorStatusCode}.description`)}</p>
66+
<p className="text-lg dark:text-white text-center w-full">{t(`error.${errorStatusCode}.description`)}</p>
6767
</div>
6868
</div>
6969
</div>

‎app/routes/$.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
import { useTranslation } from "react-i18next"
2-
import { Link, useNavigate } from "react-router"
2+
import { useNavigate } from "react-router"
33
import { Icon } from "~/library/icon/Icon"
4+
import { Link } from "~/library/link"
45

56
export default function Route404() {
67
const navigate = useNavigate()
78
const { t } = useTranslation()
89

910
return (
10-
<div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 flex items-center justify-center p-4">
11+
<div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 dark:from-blue-950 dark:to-blue-900 dark:text-white flex items-center justify-center p-4">
1112
<div className="max-w-2xl w-full text-center">
1213
<div className="mb-8 flex justify-center">
1314
<Icon name="Ghost" className="h-24 w-24 text-indigo-600 animate-float" />
1415
</div>
1516

16-
<h1 className="text-6xl font-bold text-gray-900 mb-4">404</h1>
17-
<h2 className="text-3xl font-semibold text-gray-800 mb-4">{t("error.404.title")}</h2>
18-
<p className="text-gray-600 mb-8 text-lg">{t("error.404.description")}</p>
17+
<h1 className="text-6xl font-bold dark:text-white text-gray-900 mb-4">404</h1>
18+
<h2 className="text-3xl font-semibold dark:text-white text-gray-800 mb-4">{t("error.404.title")}</h2>
19+
<p className="text-gray-600 dark:text-white mb-8 text-lg">{t("error.404.description")}</p>
1920

2021
<div className="flex flex-col sm:flex-row gap-4 justify-center">
2122
<button

‎app/routes/_index.browser.test.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
11
import * as Module from "./_index"
22

3+
const routeComponentProps = {
4+
loaderData: { timezoneDate: "2021-01-01T00:00:00.000Z" },
5+
params: {},
6+
// biome-ignore lint/suspicious/noExplicitAny: Matches are not used
7+
matches: [] as any,
8+
}
39
describe("Home route", () => {
410
it("should render the home page text properly in english", async ({ renderStub }) => {
511
const { getByText } = await renderStub({
612
entries: [
713
{
814
id: "home",
915
path: "/",
10-
Component: Module.default,
16+
Component: () => Module.default(routeComponentProps),
1117
},
1218
],
1319
})
@@ -25,7 +31,8 @@ describe("Home route", () => {
2531
{
2632
id: "home",
2733
path: "/",
28-
Component: Module.default,
34+
35+
Component: () => Module.default(routeComponentProps),
2936
},
3037
],
3138
i18n: {

0 commit comments

Comments
 (0)