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

@@ -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',

web/src/components/ui/container.tsx

@@ -8,7 +8,7 @@ export function Container({
   return (
     <div
       className={cn(
-        'px-2 py-1 bg-backgroundInverseStandard text-backgroundInverseStandard-foreground inline-flex items-center rounded-sm gap-2',
+        'px-2 py-1 bg-colors-background-inverse-standard  inline-flex items-center rounded-sm gap-2',
         className,
       )}
       {...props}

web/src/components/ui/segmented .tsx

@@ -47,8 +47,10 @@ export function Segmented({
             key={actualValue}
             className={cn(
               'inline-flex items-center px-3 py-2 text-sm font-medium rounded-sm cursor-pointer',
-
-              { 'bg-backgroundCoreStandard': value === actualValue },
+              {
+                'bg-colors-background-inverse-strong': value === actualValue,
+                'text-colors-text-inverse-strong': value === actualValue,
+              },
             )}
             onClick={() => onChange?.(actualValue)}
           >

web/src/layouts/next-header.tsx

@@ -72,7 +72,10 @@ export function Header() {
           className="w-[100] h-[100] mr-[12]"
           onClick={handleLogoClick}
         />
-        <Button variant="secondary">
+        <Button
+          variant="secondary"
+          className="bg-colors-background-inverse-standard"
+        >
           <Github />
           21.5k stars
           <Star />
@@ -87,13 +90,13 @@ export function Header() {
         ></Segmented>
       </div>
       <div className="flex items-center gap-4">
-        <Container>
+        <Container className="bg-colors-background-inverse-standard">
           V 0.13.0
           <Button variant="secondary" className="size-8">
             <ChevronDown />
           </Button>
         </Container>
-        <Container className="px-3 py-2">
+        <Container className="px-3 py-2 bg-colors-background-inverse-standard">
           <Avatar className="w-[30px] h-[30px]">
             <AvatarImage src="https://github.com/shadcn.png" />
             <AvatarFallback>CN</AvatarFallback>

web/src/layouts/next.tsx

@@ -3,7 +3,7 @@ import { Header } from './next-header';
 
 export default function NextLayout() {
   return (
-    <section className="h-full flex flex-col">
+    <section className="h-full flex flex-col text-colors-text-neutral-strong">
       <Header></Header>
       <Outlet />
     </section>

web/src/pages/dataset/settings/index.tsx

@@ -1,3 +1,8 @@
 export default function DatasetSettings() {
-  return <div>DatasetSettings</div>;
+  return (
+    <section>
+      <span className="text-3xl font-bold ">Basic settings</span>
+      <span className="text-3xl font-bold ">Advanced settings</span>
+    </section>
+  );
 }

web/src/pages/home/applications.tsx

@@ -65,19 +65,22 @@ export function Applications() {
   return (
     <section className="mt-12">
       <div className="flex justify-between items-center mb-6">
-        <h2 className="text-2xl font-bold">Applications</h2>
+        <h2 className="text-2xl font-bold ">Applications</h2>
         <Segmented
           options={options}
           value={val}
           onChange={handleChange}
-          className="bg-colors-background-inverse-standard"
+          className="bg-colors-background-inverse-standard text-colors-text-neutral-standard"
         ></Segmented>
       </div>
       <div className="grid grid-cols-4 gap-6">
         {[...Array(12)].map((_, i) => {
           const app = applications[i % 4];
           return (
-            <Card key={i} className="bg-colors-background-inverse-weak">
+            <Card
+              key={i}
+              className="bg-colors-background-inverse-weak border-colors-outline-neutral-standard"
+            >
               <CardContent className="p-4 flex items-center gap-6">
                 <div className="w-[70px] h-[70px] rounded-xl flex items-center justify-center bg-gradient-to-br from-[#45A7FA] via-[#AE63E3] to-[#4433FF]">
                   {app.icon}
@@ -87,7 +90,7 @@ export function Applications() {
                   <p className="text-sm opacity-80">{app.type}</p>
                   <p className="text-sm opacity-80">{app.date}</p>
                 </div>
-                <Button variant="secondary" size="icon">
+                <Button variant="icon" size="icon">
                   <ChevronRight className="h-6 w-6" />
                 </Button>
               </CardContent>

web/src/pages/home/datasets.tsx

@@ -45,7 +45,7 @@ export function Datasets() {
         {datasets.map((dataset) => (
           <Card
             key={dataset.id}
-            className="bg-colors-background-inverse-weak flex-1"
+            className="bg-colors-background-inverse-weak flex-1 border-colors-outline-neutral-standard"
           >
             <CardContent className="p-4">
               <div className="flex justify-between mb-4">
@@ -69,7 +69,7 @@ export function Datasets() {
                     Created {dataset.created}
                   </p>
                 </div>
-                <Button variant="secondary" size="icon">
+                <Button variant="icon" size="icon">
                   <ChevronRight className="h-6 w-6" />
                 </Button>
               </div>

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 (
-    <div className="text-white mx-8">
-      <HomeHeader></HomeHeader>
+    <div className="mx-8">
       <section>
         <Banner></Banner>
         <Datasets></Datasets>

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',

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)',

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);
   }
 }