From de2b4a2ef5620331e6fd8dc25a5bd951648d0d2f Mon Sep 17 00:00:00 2001 From: LynithDev <61880709+LynithDev@users.noreply.github.com> Date: Sat, 16 Mar 2024 15:41:38 +0100 Subject: [PATCH] feat: Page transitions --- package.json | 3 +- pnpm-lock.yaml | 39 ++++++++++++++ src/globals.css | 12 ++--- src/index.tsx | 4 ++ src/ui/App.tsx | 64 ++++++++++++++++++++++- src/ui/components/Navbar.tsx | 34 ++++++++++++ src/ui/components/base/Button.module.scss | 1 + src/ui/pages/Browser.tsx | 9 ++++ src/ui/pages/Updates.tsx | 9 ++++ tailwind.config.js | 26 ++++++++- 10 files changed, 190 insertions(+), 11 deletions(-) create mode 100644 src/ui/components/Navbar.tsx create mode 100644 src/ui/pages/Browser.tsx create mode 100644 src/ui/pages/Updates.tsx diff --git a/package.json b/package.json index 8322bd06..c65d0e3c 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,8 @@ "@tauri-apps/api": "2.0.0-beta.5", "@tauri-apps/plugin-shell": "2.0.0-beta.2", "@untitled-theme/icons-solid": "^0.6.0", - "solid-js": "^1.7.8" + "solid-js": "^1.7.8", + "solid-transition-group": "^0.2.3" }, "devDependencies": { "@solid/eslint-config-base": "^0.6.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f54dfceb..4685b688 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,9 @@ dependencies: solid-js: specifier: ^1.7.8 version: 1.8.15 + solid-transition-group: + specifier: ^0.2.3 + version: 0.2.3(solid-js@1.8.15) devDependencies: '@solid/eslint-config-base': @@ -747,6 +750,31 @@ packages: dev: true optional: true + /@solid-primitives/refs@1.0.8(solid-js@1.8.15): + resolution: {integrity: sha512-+jIsWG8/nYvhaCoG2Vg6CJOLgTmPKFbaCrNQKWfChalgUf9WrVxWw0CdJb3yX15n5lUcQ0jBo6qYtuVVmBLpBw==} + peerDependencies: + solid-js: ^1.6.12 + dependencies: + '@solid-primitives/utils': 6.2.3(solid-js@1.8.15) + solid-js: 1.8.15 + dev: false + + /@solid-primitives/transition-group@1.0.5(solid-js@1.8.15): + resolution: {integrity: sha512-G3FuqvL13kQ55WzWPX2ewiXdZ/1iboiX53195sq7bbkDbXqP6TYKiadwEdsaDogW5rPnPYAym3+xnsNplQJRKQ==} + peerDependencies: + solid-js: ^1.6.12 + dependencies: + solid-js: 1.8.15 + dev: false + + /@solid-primitives/utils@6.2.3(solid-js@1.8.15): + resolution: {integrity: sha512-CqAwKb2T5Vi72+rhebSsqNZ9o67buYRdEJrIFzRXz3U59QqezuuxPsyzTSVCacwS5Pf109VRsgCJQoxKRoECZQ==} + peerDependencies: + solid-js: ^1.6.12 + dependencies: + solid-js: 1.8.15 + dev: false + /@solid/eslint-config-base@0.6.0(@typescript-eslint/eslint-plugin@7.2.0)(@typescript-eslint/parser@7.2.0)(eslint-config-airbnb-base@15.0.0)(eslint-config-prettier@9.1.0)(eslint-plugin-import@2.29.1)(eslint-plugin-jest@27.9.0)(eslint-plugin-prettier@5.1.3)(eslint@8.57.0): resolution: {integrity: sha512-9bRRTP7tlJI5wjeFFxiT79RRnJ1ploXfHmzzvHK4uk1c0+dkW+gUA1OC9TYtsLQhRDcpzoLUW1gXPgRBHl7WpQ==} peerDependencies: @@ -3241,6 +3269,17 @@ packages: solid-js: 1.8.15 dev: true + /solid-transition-group@0.2.3(solid-js@1.8.15): + resolution: {integrity: sha512-iB72c9N5Kz9ykRqIXl0lQohOau4t0dhel9kjwFvx81UZJbVwaChMuBuyhiZmK24b8aKEK0w3uFM96ZxzcyZGdg==} + engines: {node: '>=18.0.0', pnpm: '>=8.6.0'} + peerDependencies: + solid-js: ^1.6.12 + dependencies: + '@solid-primitives/refs': 1.0.8(solid-js@1.8.15) + '@solid-primitives/transition-group': 1.0.5(solid-js@1.8.15) + solid-js: 1.8.15 + dev: false + /source-map-js@1.0.2: resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} engines: {node: '>=0.10.0'} diff --git a/src/globals.css b/src/globals.css index f9ef8baf..5f220c94 100644 --- a/src/globals.css +++ b/src/globals.css @@ -2,15 +2,15 @@ @tailwind components; @tailwind utilities; -body { - @apply text-gray-400 text-md; +body { + @apply font-sans text-fg-primary text-md; } /* start lynith's native experience */ -* { user-select: none; } -*:hover { cursor: default; } +* { user-select: none; cursor: default !important; } +*:hover { cursor: default !important; } /* end lynith's native experience */ h1 { @apply text-2xl font-bold; } -h2 { @apply text-xxl font-bold; } -h3 { @apply text-xl font-bold; } +h2 { @apply text-xxl font-semibold; } +h3 { @apply text-xl font-medium; } diff --git a/src/index.tsx b/src/index.tsx index 80d90230..73878ee7 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -6,9 +6,13 @@ import './globals.css'; import { Route, Router } from '@solidjs/router'; import App from './ui/App'; import HomePage from './ui/pages/Home'; +import BrowserPage from './ui/pages/Browser'; +import UpdatesPage from './ui/pages/Updates'; render(() => ( + + ), document.getElementById('root') as HTMLElement); diff --git a/src/ui/App.tsx b/src/ui/App.tsx index 426af9c8..a84825e8 100644 --- a/src/ui/App.tsx +++ b/src/ui/App.tsx @@ -1,13 +1,73 @@ import { ParentProps } from 'solid-js'; +import { Transition } from 'solid-transition-group'; import WindowFrame from './components/native/WindowFrame'; +import Navbar from './components/Navbar'; function App(props: ParentProps) { return ( -
+
- {props.children} + +
+ { /* eslint-disable-next-line @typescript-eslint/no-use-before-define */ } + + {props.children} + +
); } export default App; + +function AnimatedRoutes(props: ParentProps) { + const keyframesEnter = [ + { + opacity: 0, + transform: 'translateX(-100px)', + }, + { + opacity: 1, + transform: 'translateX(0px)', + }, + ]; + + const keyframesExit = [ + { + opacity: 1, + transform: 'translateX(0px)', + }, + { + opacity: 0, + transform: 'translateX(100px)', + }, + ]; + + return ( + { + const animation = element.animate( + keyframesEnter, + { + duration: 100, + }, + ); + + animation.onfinish = done; + }} + onExit={(element, done) => { + const animation = element.animate( + keyframesExit, + { + duration: 100, + }, + ); + + animation.onfinish = done; + }} + > + {props.children} + + ); +} diff --git a/src/ui/components/Navbar.tsx b/src/ui/components/Navbar.tsx new file mode 100644 index 00000000..453e1297 --- /dev/null +++ b/src/ui/components/Navbar.tsx @@ -0,0 +1,34 @@ +import { A } from '@solidjs/router'; + +type NavbarButtonProps = { + path: string, + label: string, +}; + +function NavbarButton(props: NavbarButtonProps) { + return ( + + {props.label} + + ); +} + +function Navbar() { + return ( +
+
+ + + +
+
+ ); +} + +export default Navbar; diff --git a/src/ui/components/base/Button.module.scss b/src/ui/components/base/Button.module.scss index 39eb0df8..0a830f1c 100644 --- a/src/ui/components/base/Button.module.scss +++ b/src/ui/components/base/Button.module.scss @@ -1,4 +1,5 @@ .button { + cursor: default !important; @apply py-2 px-4 rounded-lg; &__primary { diff --git a/src/ui/pages/Browser.tsx b/src/ui/pages/Browser.tsx new file mode 100644 index 00000000..b7153492 --- /dev/null +++ b/src/ui/pages/Browser.tsx @@ -0,0 +1,9 @@ +function BrowserPage() { + return ( +

+ Browser +

+ ); +} + +export default BrowserPage; diff --git a/src/ui/pages/Updates.tsx b/src/ui/pages/Updates.tsx new file mode 100644 index 00000000..63356fc5 --- /dev/null +++ b/src/ui/pages/Updates.tsx @@ -0,0 +1,9 @@ +function UpdatesPage() { + return ( +

+ Updates +

+ ); +} + +export default UpdatesPage; diff --git a/tailwind.config.js b/tailwind.config.js index 1c23f115..148ece1f 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -2,6 +2,10 @@ export default { content: ['./src/**/*.{js,ts,jsx,tsx}'], theme: { + fontFamily: { + sans: 'Poppins', + }, + fontSize: { // Based off 16px sm: '0.688rem', @@ -11,17 +15,31 @@ export default { xxl: '1.5rem', '2xl': '2rem', }, + colors: { white: '#ffffff', black: '#000000', - slate: '#9BA1A6', gray: { - 400: '#D5DBFF', '.5': '#FFFFFF0D', '.10': '#FFFFFF1A', }, + fg: { + primary: { + DEFAULT: '#D5DBFF', + hover: '#D5DBFFD9', + pressed: '#E1E5FF', + disabled: '#E1E5FF80', + }, + secondary: { + DEFAULT: '#78818D', + hover: '#5F6874', + pressed: '#828D9B', + disabled: '#78818D80', + }, + }, + brand: { DEFAULT: '#2B4BFF', hover: '#2843DD', @@ -56,6 +74,10 @@ export default { secondary: '#192026', }, extend: { + height: { + 15: '60px', + }, + animation: { 'fade-in': 'fadeIn 150ms easeOutExpo forwards', 'fade-out': 'fadeOut 150ms easeOutExpo forwards',