From 54980337e47a72745be840c79def9a13ac3ddc29 Mon Sep 17 00:00:00 2001 From: balibabu Date: Tue, 3 Dec 2024 18:59:11 +0800 Subject: [PATCH] Feat: Modify the style of the home page in bright mode #3221 (#3832) ### What problem does this PR solve? Feat: Modify the style of the home page in bright mode #3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality) --- web/src/components/ui/button.tsx | 1 + web/src/components/ui/container.tsx | 2 +- web/src/components/ui/segmented .tsx | 6 ++++-- web/src/layouts/next-header.tsx | 9 ++++++--- web/src/layouts/next.tsx | 2 +- web/src/pages/dataset/settings/index.tsx | 7 ++++++- web/src/pages/home/applications.tsx | 11 +++++++---- web/src/pages/home/datasets.tsx | 4 ++-- web/src/pages/home/index.tsx | 4 +--- web/src/routes.ts | 8 +++++++- web/tailwind.config.js | 10 +++++++++- web/tailwind.css | 15 +++++++++++---- 12 files changed, 56 insertions(+), 23 deletions(-) diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx index a4fc760e4..1bf8b4699 100644 --- a/web/src/components/ui/button.tsx +++ b/web/src/components/ui/button.tsx @@ -20,6 +20,7 @@ const buttonVariants = cva( link: 'text-primary underline-offset-4 hover:underline', tertiary: 'bg-colors-text-core-standard text-foreground hover:bg-colors-text-core-standard/80', + icon: 'bg-colors-background-inverse-standard text-foreground hover:bg-colors-background-inverse-standard/80', }, size: { default: 'h-10 px-4 py-2', diff --git a/web/src/components/ui/container.tsx b/web/src/components/ui/container.tsx index 7c69e97f2..a24dcd9d2 100644 --- a/web/src/components/ui/container.tsx +++ b/web/src/components/ui/container.tsx @@ -8,7 +8,7 @@ export function Container({ return (
onChange?.(actualValue)} > diff --git a/web/src/layouts/next-header.tsx b/web/src/layouts/next-header.tsx index fd4d35a5d..d65cc1160 100644 --- a/web/src/layouts/next-header.tsx +++ b/web/src/layouts/next-header.tsx @@ -72,7 +72,10 @@ export function Header() { className="w-[100] h-[100] mr-[12]" onClick={handleLogoClick} /> -
- + V 0.13.0 - + CN diff --git a/web/src/layouts/next.tsx b/web/src/layouts/next.tsx index d92a3ff07..f98ee225c 100644 --- a/web/src/layouts/next.tsx +++ b/web/src/layouts/next.tsx @@ -3,7 +3,7 @@ import { Header } from './next-header'; export default function NextLayout() { return ( -
+
diff --git a/web/src/pages/dataset/settings/index.tsx b/web/src/pages/dataset/settings/index.tsx index 26c27a1ec..e89980a0a 100644 --- a/web/src/pages/dataset/settings/index.tsx +++ b/web/src/pages/dataset/settings/index.tsx @@ -1,3 +1,8 @@ export default function DatasetSettings() { - return
DatasetSettings
; + return ( +
+ Basic settings + Advanced settings +
+ ); } diff --git a/web/src/pages/home/applications.tsx b/web/src/pages/home/applications.tsx index c3ca5935e..03b4253b2 100644 --- a/web/src/pages/home/applications.tsx +++ b/web/src/pages/home/applications.tsx @@ -65,19 +65,22 @@ export function Applications() { return (
-

Applications

+

Applications

{[...Array(12)].map((_, i) => { const app = applications[i % 4]; return ( - +
{app.icon} @@ -87,7 +90,7 @@ export function Applications() {

{app.type}

{app.date}

- diff --git a/web/src/pages/home/datasets.tsx b/web/src/pages/home/datasets.tsx index 4fd0bf20d..c23cbfa5c 100644 --- a/web/src/pages/home/datasets.tsx +++ b/web/src/pages/home/datasets.tsx @@ -45,7 +45,7 @@ export function Datasets() { {datasets.map((dataset) => (
@@ -69,7 +69,7 @@ export function Datasets() { Created {dataset.created}

-
diff --git a/web/src/pages/home/index.tsx b/web/src/pages/home/index.tsx index a9ddff63b..f8082ccde 100644 --- a/web/src/pages/home/index.tsx +++ b/web/src/pages/home/index.tsx @@ -1,12 +1,10 @@ import { Applications } from './applications'; import { Banner } from './banner'; import { Datasets } from './datasets'; -import { HomeHeader } from './header'; const Home = () => { return ( -
- +
diff --git a/web/src/routes.ts b/web/src/routes.ts index ead85a006..6a1fdddf6 100644 --- a/web/src/routes.ts +++ b/web/src/routes.ts @@ -129,7 +129,13 @@ const routes = [ { path: '/home', layout: false, - component: '@/pages/home', + component: '@/layouts/next', + routes: [ + { + path: '/home', + component: '@/pages/home', + }, + ], }, { path: '/datasets', diff --git a/web/tailwind.config.js b/web/tailwind.config.js index 1d6a15d70..e10accd4e 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -23,17 +23,20 @@ module.exports = { input: 'hsl(var(--input))', ring: 'hsl(var(--ring))', background: 'var(--background)', - foreground: 'hsl(var(--foreground))', + foreground: 'var(--colors-text-neutral-strong)', buttonBlueText: 'var(--button-blue-text)', 'colors-outline-sentiment-primary': 'var(--colors-outline-sentiment-primary)', 'colors-outline-neutral-strong': 'var(--colors-outline-neutral-strong)', + 'colors-outline-neutral-standard': + 'var(--colors-outline-neutral-standard)', 'colors-text-core-standard': 'var(--colors-text-core-standard)', 'colors-text-neutral-strong': 'var(--colors-text-neutral-strong)', 'colors-text-neutral-standard': 'var(--colors-text-neutral-standard)', 'colors-text-functional-danger': 'var(--colors-text-functional-danger)', + 'colors-text-inverse-strong': 'var(--colors-text-inverse-strong)', primary: { DEFAULT: 'hsl(var(--primary))', @@ -80,6 +83,11 @@ module.exports = { foreground: 'var(--background-core-weak-foreground)', }, + 'colors-background-inverse-standard': { + DEFAULT: 'var(--colors-background-inverse-standard)', + foreground: 'var(--colors-background-inverse-standard-foreground)', + }, + 'color-background-brand-default': { DEFAULT: 'var(--color-background-brand-default)', foreground: 'var(--background-inverse-standard-foreground)', diff --git a/web/tailwind.css b/web/tailwind.css index c42f613a3..603c083f0 100644 --- a/web/tailwind.css +++ b/web/tailwind.css @@ -35,18 +35,23 @@ --radius: 0.5rem; - --background-inverse-standard: rgba(58, 56, 65, 0.15); + --background-inverse-standard: rgba(230, 227, 246, 0.15); --background-inverse-standard-foreground: rgb(92, 81, 81); + --colors-background-inverse-standard: rgba(29, 26, 44, 0.1); + --colors-background-inverse-strong: rgba(11, 10, 18, 0.8); + --colors-background-inverse-weak: rgba(17, 16, 23, 0.1); --button-blue-text: rgb(22, 119, 255); --colors-outline-sentiment-primary: rgba(127, 105, 255, 1); --colors-outline-neutral-strong: rgba(112, 107, 107, 0.15); + --colors-outline-neutral-standard: rgba(53, 51, 65, 0.1); --colors-text-core-standard: rgba(127, 105, 255, 1); - --colors-text-neutral-strong: rgb(130, 121, 121); - --colors-text-neutral-standard: rgba(230, 227, 246, 1); + --colors-text-neutral-strong: rgba(17, 16, 23, 1); + --colors-text-neutral-standard: rgba(53, 51, 65, 1); --colors-text-functional-danger: rgba(255, 81, 81, 1); + --colors-text-inverse-strong: rgba(255, 255, 255, 1); } .dark { @@ -111,7 +116,7 @@ 0.5 ); --colors-background-inverse-standard: rgba(230, 227, 246, 0.15); - --colors-background-inverse-strong: rgba(255, 255, 255, 0.15); + --colors-background-inverse-strong: rgba(255, 255, 255, 0.8); --colors-background-inverse-weak: rgba(184, 181, 203, 0.15); --colors-background-neutral-standard: rgba(11, 10, 18, 1); --colors-background-neutral-strong: rgba(29, 26, 44, 1); @@ -119,11 +124,13 @@ --colors-outline-sentiment-primary: rgba(146, 118, 255, 1); --colors-outline-neutral-strong: rgba(255, 255, 255, 0.15); + --colors-outline-neutral-standard: rgba(230, 227, 246, 0.1); --colors-text-core-standard: rgba(137, 126, 255, 1); --colors-text-neutral-strong: rgba(255, 255, 255, 1); --colors-text-neutral-standard: rgba(230, 227, 246, 1); --colors-text-functional-danger: rgba(255, 81, 81, 1); + --colors-text-inverse-strong: rgba(17, 16, 23, 1); } }