srizan/archived-osu-radio
1
0
Fork 0
mirror of https://github.com/SrIzan10/osu-radio.git synced 2026-05-01 10:55:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

redo tw config, tw-button

Browse Source
This commit is contained in:
Tnixc
2024-10-11 23:08:06 -04:00
parent 8b81eaec1e
commit 778f176310
6 changed files with 77 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/renderer/src/components/button/Button.tsx
View File

@@ -1,26 +1,40 @@
import "./styles.css";
import { Component, JSX, mergeProps } from "solid-js";
import { Component, JSX, splitProps } from "solid-js";
type Props = JSX.IntrinsicElements["button"] & {
variant?: "primary" | "secondary";
size?: "medium" | "large";
type ButtonVariant = "accent" | "primary" | "secondary" | "ghost";
type ButtonSize = "medium" | "large";
interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
variant?: ButtonVariant;
size?: ButtonSize;
}
const Button: Component<ButtonProps> = (props) => {
const [local, others] = splitProps(props, ["variant", "size", "class", "children"]);
const variant = () => local.variant || "primary";
const size = () => local.size || "medium";
const baseClasses = "rounded-lg transition-colors duration-200 ease-in-out font-medium";
const variantClasses = {
accent: "bg-accent text-text ",
primary: "bg-red text-thick-material hover:bg-text/40",
secondary: "bg-surface text-text",
ghost: "bg-transparent text-text",
};
const Button: Component<Props> = (props) => {
const defaultProps: Props = {
variant: "primary",
size: "medium",
type: "button",
const sizeClasses = {
medium: "px-4 py-2",
large: "px-7 py-3 font-bold",
};
const mergedProps = mergeProps(defaultProps, props);
const { children, variant: _, size: __, ...restProps } = mergedProps;
const buttonClasses = () =>
`${baseClasses} ${variantClasses[variant()]} ${sizeClasses[size()]} ${local.class || ''}`;
return (
<button
{...restProps}
class={`button ${mergedProps.variant} ${mergedProps.size} ${mergedProps.class ?? ""}`}
{...others}
class={buttonClasses()}
>
{children}
{local.children}
</button>
);
};

80
src/renderer/src/global.css
View File

@@ -4,67 +4,39 @@
:root {
/* Light theme */
--color-thick-material-light: rgba(240, 240, 240, 0.95);
--color-regular-material-light: rgba(230, 230, 230, 0.8);
--color-text-light: #1a1a1a;
--color-subtext-light: rgba(26, 26, 26, 0.6);
--color-stroke-light: rgba(0, 0, 0, 0.1);
--color-overlay-light: rgba(200, 200, 200, 0.85);
--color-accent-light: #7c4dff;
--color-surface-light: rgba(180, 180, 180, 0.2);
--color-black-light: #ffffff;
--color-red-light: #d32f2f;
--color-green-light: #388e3c;
--color-thin-material-light: rgba(255, 255, 255, 0.5);
/* Dark theme (original colors) */
--color-thick-material-dark: rgba(13, 13, 13, 0.95);
--color-regular-material-dark: rgba(18, 18, 18, 0.8);
--color-text-dark: #eff1f5;
--color-subtext-dark: rgba(239, 241, 245, 0.6);
--color-stroke-dark: rgba(242, 244, 252, 0.1);
--color-overlay-dark: rgba(161, 162, 171, 0.85);
--color-accent-dark: #9366ed;
--color-surface-dark: rgba(132, 137, 143, 0.2);
--color-black-dark: #0e0e0e;
--color-red-dark: #ed6666;
--color-green-dark: #78cc32;
--color-thin-material-dark: rgba(0, 0, 0, 0.5);
--color-thick-material: 240, 240, 240;
--color-regular-material: 230, 230, 230;
--color-text: 26, 26, 26;
--color-subtext: 26, 26, 26;
--color-stroke: 0, 0, 0;
--color-overlay: 200, 200, 200;
--color-accent: 124, 77, 255;
--color-surface: 180, 180, 180;
--color-black: 255, 255, 255;
--color-red: 211, 47, 47;
--color-green: 56, 142, 60;
--color-thin-material: 255, 255, 255;
}
:root {
--color-thick-material: var(--color-thick-material-light);
--color-regular-material: var(--color-regular-material-light);
--color-text: var(--color-text-light);
--color-subtext: var(--color-subtext-light);
--color-stroke: var(--color-stroke-light);
--color-overlay: var(--color-overlay-light);
--color-accent: var(--color-accent-light);
--color-surface: var(--color-surface-light);
--color-black: var(--color-black-light);
--color-red: var(--color-red-light);
--color-green: var(--color-green-light);
--color-thin-material: var(--color-thin-material-light);
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--color-thick-material: var(--color-thick-material-dark);
--color-regular-material: var(--color-regular-material-dark);
--color-text: var(--color-text-dark);
--color-subtext: var(--color-subtext-dark);
--color-stroke: var(--color-stroke-dark);
--color-overlay: var(--color-overlay-dark);
--color-accent: var(--color-accent-dark);
--color-surface: var(--color-surface-dark);
--color-black: var(--color-black-dark);
--color-red: var(--color-red-dark);
--color-green: var(--color-green-dark);
--color-thin-material: var(--color-thin-material-dark);
/* Dark theme */
--color-thick-material: 13, 13, 13;
--color-regular-material: 18, 18, 18;
--color-text: 239, 241, 245;
--color-subtext: 239, 241, 245;
--color-stroke: 242, 244, 252;
--color-overlay: 161, 162, 171;
--color-accent: 147, 102, 237;
--color-surface: 132, 137, 143;
--color-black: 14, 14, 14;
--color-red: 237, 102, 102;
--color-green: 120, 204, 50;
--color-thin-material: 0, 0, 0;
}
}
@font-face {
font-family: "Nunito";
src:

6
src/renderer/src/scenes/dir-select-scene/DirSelectScene.tsx
View File

@@ -35,7 +35,7 @@ export default function DirSelectScene() {
};
return (
<div class="dir-select relative grid h-screen place-items-center p-8">
<style>
<style>jj
{`
.dir-select{
background: #D5C3E811;
@@ -50,8 +50,8 @@ export default function DirSelectScene() {
}
`}{" "}
</style>
<div class="flex h-full max-h-[720px] w-full max-w-[860px] flex-col justify-between gap-12 overflow-y-auto rounded-lg border border-stroke bg-regular-material p-8 shadow-2xl">
<h1 class="pt-12 text-center text-2xl text-text">Welcome to osu! radio</h1>
<div class="flex h-full max-h-[720px] w-full max-w-[860px] flex-col justify-between gap-12 overflow-y-auto rounded-lg border border-stroke/10 bg-regular-material p-8 shadow-2xl">
<h1 class="pt-12 text-center text-2xl text-red-400">Welcome to osu! radio</h1>
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-1.5">

2
src/renderer/src/scenes/main-scene/MainScene.tsx
View File

@@ -76,7 +76,7 @@ const NavItem: Component<NavItemProps> = ({ children, value, icon }) => {
const TabContent: Component = () => {
return (
<div class="bg-opacity-72 h-full w-[480px] min-w-[320px] overflow-y-auto border-r border-stroke bg-regular-material">
<div class="bg-opacity-72 h-full w-[480px] min-w-[320px] overflow-y-auto border-r border-stroke/10 bg-regular-material">
<Switch fallback={<div>Tab not found</div>}>
<Match when={mainActiveTab() === TABS.SONGS.value}>
<SongList isAllSongs={true} />

27
tailwind.config.js
View File

@@ -1,22 +1,23 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ["./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
transparent: "transparent",
"thick-material": "var(--color-thick-material)",
"regular-material": "var(--color-regular-material)",
text: "var(--color-text)",
subtext: "var(--color-subtext)",
stroke: "var(--color-stroke)",
overlay: "var(--color-overlay)",
accent: "var(--color-accent)",
surface: "var(--color-surface)",
black: "var(--color-black)",
red: "var(--color-red)",
green: "var(--color-green)",
"thin-material": "var(--color-thin-material)",
"thick-material": 'rgba(var(--color-thick-material), 0.9)',
"regular-material": 'rgba(var(--color-regular-material), 0.8)',
"thin-material": 'rgba(var(--color-thin-material), 0.5)',
text: 'rgba(var(--color-text))',
subtext: 'rgba(var(--color-subtext), 0.7)',
stroke: 'rgba(var(--color-stroke), 0.1)',
overlay: 'rgba(var(--color-overlay), 0.55)',
accent: 'rgba(var(--color-accent))',
surface: 'rgba(var(--color-surface), 0.2)',
black: 'rgba(var(--color-black))',
red: 'rgba(var(--color-red))',
green: 'rgba(var(--color-green))',
},
},
},
@@ -24,5 +25,5 @@ export default {
extend: {},
},
plugins: [],
darkMode: "media", // or 'class' if you prefer manual dark mode switching
darkMode: "media",
};

3
tsconfig.json
View File

@@ -1,5 +1,8 @@
{
"files": [],
"compilerOptions": {
"jsx": "react"
},
"references": [
{
"path": "./tsconfig.node.json"