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/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>