feat(app): Custom Fonts and more UI improvements

ful1e5 · Jan 3, 2024 · 18f0930 · 18f0930
1 parent 40fb632
commit 18f0930
Show file tree

Hide file tree

Showing 12 changed files with 66 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [unreleased]
 
+### What's New?
+
+-   Interactive Cursor size component
+-   Using `geist` fonts
+-   Custom `404` (not-found) page
+
 ## [v1.0.0] - 30 December 2023
 
 ### What's New?

diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "@vercel/kv": "^1.0.0",
     "concurrently": "^8.0.1",
     "figma-api": "^1.11.0",
+    "geist": "^1.2.0",
     "jsonwebtoken": "^8.5.1",
     "next": "^14.0.0",
     "next-auth": "^4.24.3",

diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
@@ -104,10 +104,10 @@ export default function HomePage() {
       </div>
 
       <BannerSVG
-        base='#adb9d5'
-        outline='#738281'
+        base='#1e5c38'
+        outline='#99f97f'
         watch={{
-          bg: '#444444',
+          bg: '#75b48f',
           c1: '#32a0da',
           c2: '#7eba41',
           c3: '#f05024',

diff --git a/src/app/(home)/globals.css → src/app/globals.css b/src/app/(home)/globals.css → src/app/globals.css
@@ -61,6 +61,7 @@
   -webkit-appearance: none;
   margin: 0;
 }
+
 .remove-arrow {
   -moz-appearance: textfield;
 }
diff --git a/src/app/(home)/layout.tsx → src/app/layout.tsx b/src/app/(home)/layout.tsx → src/app/layout.tsx
@@ -1,4 +1,7 @@
-import '@app/(home)/globals.css';
+import '@app/globals.css';
+
+import { GeistSans } from 'geist/font/sans';
+import { GeistMono } from 'geist/font/mono';
 
 import React from 'react';
 import { Metadata } from 'next';
@@ -24,7 +27,7 @@ type Props = {
 
 export default function RootLayout({ children }: Props) {
   return (
-    <html lang='en'>
+    <html lang='en' className={`${GeistSans.variable} ${GeistMono.variable}`}>
       <Providers>
         <body className='dark'>
           <NavBar />

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import '@app/(home)/globals.css';
+import '@app/globals.css';
 import { signIn } from 'next-auth/react';
 
 export default function LoginPage() {

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -0,0 +1,22 @@
+export default function NotFound() {
+  return (
+    <main>
+      <div className='container m-auto px-3 pt-6 pb-24'>
+        <div className='h-[300px] sm:h-[400px] md:h-[600px] bg-gradient-radial from-10% from-blue-300/[.07] via-40% via-blue-400/[.07] to-60% flex flex-col justify-center items-center'>
+          <section className='text-center'>
+            <h1 className='mt-20 text-[82px] md:text-[200px] font-black'>
+              4O4
+            </h1>
+            <h4 className='mt-6 md:mt-10 text-2xl md:text-3xl font-bold'>
+              Something is wrong
+            </h4>
+            <h2 className='mt-1 text-sm md:text-lg'>
+              The page you are looking for was moved, removed, renamed or might
+              never existed!
+            </h2>
+          </section>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/src/components/Cursors/error.tsx b/src/components/Cursors/error.tsx
@@ -6,8 +6,6 @@ import Link from 'next/link';
 
 import { bugReportTemplate } from '@utils/bug-report';
 
-import { ErrorSVG } from '@components/svgs';
-
 import { BUG_REPORT_ENDPOINT } from '@root/configs';
 
 import { Color } from 'bibata/app';
@@ -40,17 +38,19 @@ ${JSON.stringify(props.color, null, 2)}
   const [reported, setReported] = useState(false);
 
   return (
-    <div className='container h-72 flex flex-col gap-2 fill-red-300 items-center justify-center'>
-      <ErrorSVG size={60} />
-      <div className='max-w-sm font-bold text-red-300 text-center'>
+    <div className='container h-[300px] md:h-[500px] flex flex-col gap-2  items-center text-center justify-center'>
+      <h1 className='text-[28px] md:text-[68px] xl:text-[96px] font-black text-red-400'>
+        Error Occured!
+      </h1>
+      <div className='-translate-y-3 md:-translate-y-7 max-w-sm text-red-50 font-semibold tracking-tight text-lg md:text-2xl'>
         {props.message}
       </div>
 
       {show && !reported ? (
         <>
-          <div className='mt-2 mb-2 flex justify-center gap-2'>
+          <div className='mt-10 flex justify-center gap-2 md:gap-6'>
             <Link
-              className='bg-red-500 hover:bg-red-400 px-4 py-2 rounded-xl '
+              className='bg-red-500 hover:bg-red-300 px-6 py-3 border border-white/[.2] rounded-full'
               target='_blank'
               onClick={() => {
                 setShow(false);
@@ -60,14 +60,14 @@ ${JSON.stringify(props.color, null, 2)}
               Report Issue
             </Link>
             <button
-              className='ring-1 ring-white/[.2] hover:bg-white/[.1] px-4 py-2 rounded-xl'
+              className='ring-1 ring-white/[.2] hover:bg-white/[.1] px-6 py-3 rounded-full'
               onClick={() => setShow(false)}>
               Cancel
             </button>
           </div>
         </>
       ) : (
-        reported && <p>Thanks for Reporting</p>
+        reported && <p className='mt-1'>Thanks for Reporting</p>
       )}
     </div>
   );

diff --git a/src/components/SizePicker.tsx b/src/components/SizePicker.tsx
@@ -116,7 +116,9 @@ export const SizePicker: React.FC<Props> = (props) => {
                 key={t}
                 onClick={() => {
                   setSize(t);
-                  handleChange();
+                  props.onChange(t);
+                  setErrorText('');
+                  setEditMode(false);
                 }}
                 className={`p-1 py-2 sm:p-3 rounded-full text-center transition ring-1 ring-white/[.2] hover:scale-110 hover:bg-white/[.1] hover:text-white ${
                   selected

diff --git a/src/utils/bug-report.ts b/src/utils/bug-report.ts
@@ -3,13 +3,14 @@ export const bugReportTemplate = (title: string, logs: any): string => {
 
   return encodeURIComponent(`### Error
 ${title}
-
 ${
-  sha &&
-  `### Refrence
-https://github.com/ful1e5/bibata/commit/${sha}`
+  sha
+    ? `
+### Refrence
+https://github.com/ful1e5/bibata/commit/${sha}
+`
+    : ''
 }
-
 ### Logs
 
 \`\`\`text

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -16,6 +16,10 @@ module.exports = {
   darkMode: 'class',
   theme: {
     extend: {
+      fontFamily: {
+        sans: ['var(--font-geist-sans)'],
+        mono: ['var(--font-geist-mono)']
+      },
       backgroundImage: {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))'
       },

diff --git a/yarn.lock b/yarn.lock
@@ -1425,6 +1425,11 @@ functions-have-names@^1.2.3:
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
 
+geist@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/geist/-/geist-1.2.0.tgz#2cbd1bdb3daff44b7ef9078aca0ec3c5bd97e917"
+  integrity sha512-RZsgCkGnSi1IV1Ozg3s6Ou4r/jzLff9+47ChjpJ5yX8ncEC/RwdStGwhdFzDcnSv0xU0+9J/fTX5Kht0NajTXA==
+
 get-caller-file@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"