Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: generate error page #78

Merged
merged 14 commits into from
Feb 3, 2024
Merged

feat: generate error page #78

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
81fd4a4
feat(gurubu-client): add error handling pages
hslc00 Jan 29, 2024
6149cc8
feat(gurubu-client): add left-arrow.svg and GoBackButton component
hslc00 Jan 29, 2024
7073bcf
style(gurubu-client): add error page styles and update greeting and n…
hslc00 Jan 29, 2024
bf46231
fix(gurubu-client): Fix error and not-found styles import typo
hsglc Jan 30, 2024
4fc6280
fix(gurubu-client): fix conflicts
hsglc Jan 30, 2024
9b535bf
fix(gurubu-client): add NotFound component and styles for room not fo…
hslc00 Jan 30, 2024
1b500f0
style(gurubu-client): update styles in not-found.scss and variables.scss
hsglc Jan 31, 2024
2142b64
fix(gurubu-client): fix conflicts
hsglc Jan 31, 2024
4115d89
styles(gurubu-client): update styles in not-found.scss and variables.…
hsglc Jan 31, 2024
7a6437f
styles(gurubu-client): change font-size and font-weight
hsglc Feb 1, 2024
c7c31fd
styles(gurubu-client): change line-height
hsglc Feb 1, 2024
10997bc
fix(gurubu-client): format files
hsglc Feb 1, 2024
aaad8e9
fix(gurubu-client): remove extra lines
hsglc Feb 2, 2024
1414b76
fix(gurubu-client): resolve conflicts
hsglc Feb 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions gurubu-client/public/left-arrow.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 19 additions & 0 deletions gurubu-client/src/app/components/error/go-back-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
"use client";

import Image from "next/image";
import { useRouter } from "next/navigation";

export const GoBackButton = () => {
const router = useRouter();

return (
<button
className="not-found-page__navigation__go-back"
onClick={() => {
router.back();
}}>
<Image priority src="/left-arrow.svg" alt="left-arrow" width={24} height={24} />
Go back
</button>
);
};
23 changes: 23 additions & 0 deletions gurubu-client/src/app/error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
"use client";

import Link from "next/link";
import { GoBackButton } from "./components/error/go-back-button";
import "./styles/error/style.scss";

export default function GlobalError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
return (
<main className="not-found-page">
<h1 className="not-found-page__title">500 error</h1>
<h2 className="not-found-page__subtitle">{error && error.message}</h2>
<p className="not-found-page__description">
We searched high and low, but couldn’t find what you’re looking for. Let’s find a better place for you to go.
</p>
<div className="not-found-page__navigation">
<GoBackButton />
<Link className="not-found-page__navigation__take-me-home" href="/">
Take me home
</Link>
</div>
</main>
);
}
26 changes: 26 additions & 0 deletions gurubu-client/src/app/not-found.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import Link from "next/link";
import { GoBackButton } from "./components/error/go-back-button";
import "./styles/error/style.scss";

export default function NotFound() {
return (
<html>
<body>
<main className="not-found-page">
<h1 className="not-found-page__title">404 error</h1>
<h2 className="not-found-page__subtitle">We lost this page</h2>
<p className="not-found-page__description">
We searched high and low, but couldn’t find what you’re looking for. Let’s find a better place for you to
go.
</p>
<div className="not-found-page__navigation">
<GoBackButton />
<Link className="not-found-page__navigation__take-me-home" href="/">
Take me home
</Link>
</div>
</main>
</body>
</html>
);
}
2 changes: 1 addition & 1 deletion gurubu-client/src/app/room/[id]/not-found.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,4 @@ export default function NotFound() {
</Link>
</div>
);
}
}
70 changes: 70 additions & 0 deletions gurubu-client/src/app/styles/error/not-found.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
.not-found-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;

&__title {
color: $primary-700;
line-height: $line-height-paragraph-4;
font-weight: $semibold;
font-size: $font-size-paragraph-3;
padding-bottom: $space-medium;
}
&__subtitle {
color: $gray-900;
line-height: $line-height-header-1;
font-weight: $semibold;
font-size: $font-size-header-1;
padding-bottom: $space-xlarge;
letter-spacing: $letter-spacing-1;
text-align: center;
}
&__description {
color: $gray-600;
line-height: $line-height-paragraph-2;
font-weight: $regular;
font-size: $font-size-body-4;
padding-bottom: $space-xxxlarge;
max-width: 576px;
text-align: center;
}

&__navigation {
display: flex;
align-items: center;
justify-content: center;
gap: $space-medium;

&__go-back {
padding: 16px 28px;
border-radius: $radius-large;
border: 1px solid $gray-300;
display: flex;
align-items: center;
gap: $space-medium;
color: $gray-700;
font-weight: $semibold;
font-size: $font-size-paragraph-2;
cursor: pointer;
height: 60px;
background: $white;
}
&__take-me-home {
height: 60px;
border-radius: $radius-large;
padding: 16px 28px;
background: $primary-600;
color: $white;
font-weight: $semibold;
font-size: $font-size-paragraph-2;
border: 1px solid $primary-600;
display: flex;
align-items: center;
}
}
&__link:hover {
background-color: $yellow-400;
}
}
5 changes: 5 additions & 0 deletions gurubu-client/src/app/styles/error/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@import "../variables.scss";
@import "../mixins.scss";
@import "./not-found.scss";


8 changes: 4 additions & 4 deletions gurubu-client/src/app/styles/page/greeting.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@
}
&__title {
color: $blue-900;
font-size: $font-size-header-3;
line-height: $line-height-header-3;
font-size: $font-size-header-4;
line-height: $line-height-header-4;
font-weight: $black;

@include media(xl){
font-size: $font-size-header-1;
line-height: $line-height-header-1;
font-size: $font-size-header-2;
line-height: $line-height-header-2;
}
}
&__description {
Expand Down
6 changes: 3 additions & 3 deletions gurubu-client/src/app/styles/room/nickname-form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,14 @@
gap: $space-xsmall;
font-family: var(--font-space-grotesk);
color: $black;
font-size: $font-size-header-3;
font-weight: $font-size-header-3;
font-size: $font-size-header-5;
font-weight: $bold;
margin-bottom: $space-xlarge;
}
&__title {
color: $title-color;
font-size: $font-size-paragraph-2;
line-height: $line-height-header-3;
line-height: $line-height-header-4;
font-weight: $semibold;
}
&__input-wrapper {
Expand Down
31 changes: 22 additions & 9 deletions gurubu-client/src/app/styles/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ $voting-card-color: linear-gradient(
#ced3e8 101.29%
);

$primary-700: #6941C6;
$primary-600: #7F56D9;

$title-color: #101828;

$blue-900: #091133;
Expand All @@ -33,11 +36,11 @@ $blue-100: #e7ecff;

$gray-900: #141719;
$gray-800: #393e41;
$gray-700: #454e54;
$gray-600: #5d6970;
$gray-700: #344054;
$gray-600: #475467;
$gray-500: #76848c;
$gray-400: #939ea4;
$gray-300: #b0b8bc;
$gray-300: #D0D5DD;
$gray-200: #cdd1d4;
$gray-100: #e9ebec;
$gray-50: #fbfbfd;
Expand All @@ -62,13 +65,16 @@ $success-500: #17B26A;
$red-700: #DC2626;

// font size
$font-size-header-1: 50px;
armagandalkiran marked this conversation as resolved.
Show resolved Hide resolved
$font-size-header-2: 42px;
$font-size-header-3: 26px;
$font-size-header-1: 60px;
$font-size-header-2: 50px;
$font-size-header-3: 42px;
$font-size-header-4: 26px;
$font-size-header-5: 24px;

$font-size-body-1: 48px;
$font-size-body-2: 36px;
$font-size-body-3: 28px;
$font-size-body-4: 20px;

$font-size-paragraph-1: 22px;
$font-size-paragraph-2: 18px;
Expand All @@ -77,9 +83,10 @@ $font-size-paragraph-4: 14px;
$font-size-paragraph-5: 12px;

// line height
$line-height-header-1: 66px;
$line-height-header-2: 60px;
$line-height-header-3: 38px;
$line-height-header-1: 72px;
$line-height-header-2: 66px;
$line-height-header-3: 60px;
$line-height-header-4: 38px;

$line-height-body-1: 48px;
$line-height-body-2: 38px;
Expand Down Expand Up @@ -115,6 +122,12 @@ $space-xxlarge: 32px;
$space-xxxlarge: 48px;
$space-xxxxlarge: 96px;

$space-body: 384px;

// letter-spacing

$letter-spacing-1: -1.2px;

$space-body: 384px;
// radius

Expand Down