From f699125c7cc5f8cfb9d3db5ecf45ad1ba2fdb8e6 Mon Sep 17 00:00:00 2001 From: LynithDev <61880709+LynithDev@users.noreply.github.com> Date: Sun, 17 Mar 2024 12:51:37 +0100 Subject: [PATCH] feat: Added custom scrollbar --- index.html | 24 ++++++++++---------- package.json | 2 ++ pnpm-lock.yaml | 20 ++++++++++++++++ src/{fonts.ts => global_assets.ts} | 3 +++ src/globals.css | 8 +++++++ src/index.tsx | 4 ++-- src/ui/App.tsx | 8 +++++-- src/ui/components/base/Button.module.scss | 6 ++--- src/ui/components/base/Tag.module.scss | 2 +- src/ui/components/base/TextField.module.scss | 2 +- src/ui/components/overlay/AccountPopup.tsx | 8 +++---- src/ui/pages/Home.tsx | 2 +- tailwind.config.ts | 4 ++-- 13 files changed, 65 insertions(+), 28 deletions(-) rename src/{fonts.ts => global_assets.ts} (60%) diff --git a/index.html b/index.html index fa995ca7..531d7ed4 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,17 @@ - - - - - - Polyfrost Launcher - + + + + + + Polyfrost Launcher + - - -
+ + +
- - + + diff --git a/package.json b/package.json index dfc81e07..4506c4c4 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,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", + "overlayscrollbars": "^2.6.1", + "overlayscrollbars-solid": "^0.5.3", "solid-js": "^1.8.15", "solid-transition-group": "^0.2.3", "uuid": "^9.0.1" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9853e9eb..b820fa91 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,12 @@ dependencies: '@untitled-theme/icons-solid': specifier: ^0.6.0 version: 0.6.0(solid-js@1.8.15) + overlayscrollbars: + specifier: ^2.6.1 + version: 2.6.1 + overlayscrollbars-solid: + specifier: ^0.5.3 + version: 0.5.3(overlayscrollbars@2.6.1)(solid-js@1.8.15) solid-js: specifier: ^1.8.15 version: 1.8.15 @@ -3834,6 +3840,20 @@ packages: type-check: 0.4.0 dev: true + /overlayscrollbars-solid@0.5.3(overlayscrollbars@2.6.1)(solid-js@1.8.15): + resolution: {integrity: sha512-KVTmdyeDctH6eAsagSw3c0LDG6cGmVxES6cBFQT6BxBP0zhWLccSZQaSIXAZP91JIcicWUxRxPmqaJf50SOugA==} + peerDependencies: + overlayscrollbars: ^2.0.0 + solid-js: ^1.7.0 + dependencies: + overlayscrollbars: 2.6.1 + solid-js: 1.8.15 + dev: false + + /overlayscrollbars@2.6.1: + resolution: {integrity: sha512-V+ZAqWMYMyGBJNRDEcdRC7Ch+WT9RBx9hY8bfJSMyFObQeJoecs1Vqg7ZAzBVcpN6sCUXFAZldCbeySwmmD0RA==} + dev: false + /p-limit@2.3.0: resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==} engines: {node: '>=6'} diff --git a/src/fonts.ts b/src/global_assets.ts similarity index 60% rename from src/fonts.ts rename to src/global_assets.ts index c7488af2..94d8bda1 100644 --- a/src/fonts.ts +++ b/src/global_assets.ts @@ -1,3 +1,6 @@ import '@fontsource/poppins/400.css'; import '@fontsource/poppins/500.css'; import '@fontsource/poppins/600.css'; + +import 'overlayscrollbars/overlayscrollbars.css'; +import './globals.css'; diff --git a/src/globals.css b/src/globals.css index 92026811..b217256e 100644 --- a/src/globals.css +++ b/src/globals.css @@ -17,3 +17,11 @@ h1 { @apply text-2xl font-semibold; } h2 { @apply text-xxl font-semibold; } h3 { @apply text-xl font-medium; } h4 { @apply text-lg font-medium; } + +.os-scrollbar { + --os-size: 10px; + --os-track-border-radius: theme(borderRadius.lg); + --os-handle-bg: theme(colors.gray[0.05]); + --os-handle-bg-hover: theme(colors.gray[0.10]); + --os-handle-bg-active: theme(colors.gray[0.05]); +} \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 78eb568d..aa0f7ba9 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,8 +1,8 @@ /* @refresh reload */ import { render } from 'solid-js/web'; -import './globals.css'; -import './fonts'; +import './global_assets'; + import { Route, Router } from '@solidjs/router'; import App from './ui/App'; import HomePage from './ui/pages/Home'; diff --git a/src/ui/App.tsx b/src/ui/App.tsx index f184cb70..5e1446e5 100644 --- a/src/ui/App.tsx +++ b/src/ui/App.tsx @@ -1,5 +1,6 @@ import type { ParentProps } from 'solid-js'; import { Transition } from 'solid-transition-group'; +import { OverlayScrollbarsComponent } from 'overlayscrollbars-solid'; import environment from '../utils/environment'; import WindowFrame from './components/native/WindowFrame'; import Navbar from './components/Navbar'; @@ -19,15 +20,18 @@ function App(props: ParentProps) {
+ {/* This was a pain to do */}
-
+ {props.children} -
+
+
+ ); } diff --git a/src/ui/components/base/Button.module.scss b/src/ui/components/base/Button.module.scss index 4d0ffbc2..e5c0b7fb 100644 --- a/src/ui/components/base/Button.module.scss +++ b/src/ui/components/base/Button.module.scss @@ -7,7 +7,7 @@ } &__secondary { - @apply border border-gray-.5; + @apply border border-gray-0.05; @apply text-fg-primary hover:text-fg-primary-hover active:text-fg-primary-pressed disabled:text-fg-primary-disabled; @apply bg-component-bg hover:bg-component-bg-hover active:bg-component-bg-pressed disabled:bg-component-bg-disabled; } @@ -17,11 +17,11 @@ } &__ghost { - @apply hover:bg-gray-.5 active:bg-gray-.10; + @apply hover:bg-gray-0.05 active:bg-gray-0.10; } &__icon { - @apply p-1.5 hover:bg-gray-.5 active:bg-gray-.10 aspect-square box-border; + @apply p-1.5 hover:bg-gray-0.05 active:bg-gray-0.10 aspect-square box-border; & > * { @apply w-full h-full; diff --git a/src/ui/components/base/Tag.module.scss b/src/ui/components/base/Tag.module.scss index eb17854e..f9b902f0 100644 --- a/src/ui/components/base/Tag.module.scss +++ b/src/ui/components/base/Tag.module.scss @@ -1,6 +1,6 @@ .tag { @apply flex flex-row justify-center items-center gap-x-2; - @apply bg-component-bg/60 border border-gray-.5 text-fg-secondary text-sm font-medium backdrop-blur-md rounded-lg px-2.5 py-0.5; + @apply bg-component-bg/60 border border-gray-0.05 text-fg-secondary text-sm font-medium backdrop-blur-md rounded-lg px-2.5 py-0.5; } .icon > * { diff --git a/src/ui/components/base/TextField.module.scss b/src/ui/components/base/TextField.module.scss index 60e5a8e5..b7a307d0 100644 --- a/src/ui/components/base/TextField.module.scss +++ b/src/ui/components/base/TextField.module.scss @@ -1,6 +1,6 @@ .textfield { @apply bg-component-bg [&:not(:focus-within)]:hover:bg-component-bg-hover focus-within:bg-component-bg-pressed disabled:bg-component-bg-disabled; - @apply border border-gray-.5 text-fg-primary fill-fg-primary; + @apply border border-gray-0.05 text-fg-primary fill-fg-primary; @apply rounded-lg px-2.5 py-1.5; @apply flex flex-row gap-x-1.5; diff --git a/src/ui/components/overlay/AccountPopup.tsx b/src/ui/components/overlay/AccountPopup.tsx index 1754b679..e78ffc2e 100644 --- a/src/ui/components/overlay/AccountPopup.tsx +++ b/src/ui/components/overlay/AccountPopup.tsx @@ -10,7 +10,7 @@ interface AccountComponentProps { function AccountComponent(props: AccountComponentProps) { return ( -
+
@@ -32,17 +32,17 @@ function AccountComponent(props: AccountComponentProps) { function AccountPopup(props: Popup.PopupProps) { return ( -
+
-
+
-
+
diff --git a/src/ui/pages/Home.tsx b/src/ui/pages/Home.tsx index a8fd6b53..0d66834c 100644 --- a/src/ui/pages/Home.tsx +++ b/src/ui/pages/Home.tsx @@ -68,7 +68,7 @@ interface InstanceCardProps { function InstanceCard(props: InstanceCardProps) { return ( -
+