fix: fixed some issues at feat/dvt-list

intellica-tech · Dec 5, 2023 · 262cc15 · 262cc15
1 parent 5a6e72d
commit 262cc15
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 13 deletions.
diff --git a/superset-frontend/src/components/DvtList/dvt-list.module.tsx b/superset-frontend/src/components/DvtList/dvt-list.module.tsx
@@ -22,6 +22,7 @@ const StyledDvtList = styled.div`
   display: flex;
   flex-direction: column;
   gap: 11px;
+  border-radius: 12px;
   background-color: ${({ theme }) => theme.colors.dvt.grayscale.light2};
   height: 734px;
 `;
@@ -31,6 +32,7 @@ const StyledDvtListLabel = styled.div`
   letter-spacing: 0.2px;
   font-weight: bold;
   font-size: 12px;
+  padding-top: 10px;
   line-height: 14.63px;
   color: ${({ theme }) => theme.colors.grayscale.dark2};
 `;
@@ -39,20 +41,24 @@ const StyledDvtListScroll = styled.div`
   display: flex;
   overflow-y: auto;
   flex-direction: column;
-
+  
   &::-webkit-scrollbar {
-    background-color: ${({ theme }) => theme.colors.dvt.primary.light2};
-    width: 10px;
+    background-color: ${({ theme }) => theme.colors.dvt.grayscale.light1};
+    width: 6px;
+    border-radius: 12px;
+
   }
   &::-webkit-scrollbar-thumb {
-    background-color: ${({ theme }) => theme.colors.dvt.primary.base};
+    background-color: ${({ theme }) => theme.colors.dvt.grayscale.base};
     width: 4px;
+    border-radius: 12px;
   }
 `;
 
 const StyledDvtListItem = styled.div`
   display: flex;
   justify-content: space-between;
+  margin-right: 8px;
 `;
 
 export {

diff --git a/superset-frontend/src/components/DvtList/dvt-list.stories.tsx b/superset-frontend/src/components/DvtList/dvt-list.stories.tsx
@@ -21,12 +21,12 @@ import { Meta } from '@storybook/react';
 import DvtList, { DvtListProps } from '.';
 
 export default {
-  title: 'DvtComponents/Dvt-List',
+  title: 'Dvt-Components/Dvt-List',
   component: DvtList,
 } as Meta;
 
 export const Default = (args: DvtListProps) => (
-  <div style={{ width: '250px' }}>
+  <div style={{ width: '250px', backgroundColor: '#B8C1CC', padding:'20px' }}>
     <DvtList {...args} />
   </div>
 );
@@ -55,5 +55,8 @@ Default.args = {
     { id: 20, title: 'table_schema_subtitle', subtitle: 'string' },
     { id: 21, title: 'table_schema_subtitle', subtitle: 'string' },
     { id: 22, title: 'table_schema_subtitle', subtitle: 'string' },
+    { id: 23, title: 'table_schema_subtitle', subtitle: 'string' },
+    { id: 24, title: 'table_schema_subtitle', subtitle: 'string' },
+    { id: 25, title: 'table_schema_subtitle', subtitle: 'string' },
   ],
 };
diff --git a/superset-frontend/src/components/DvtList/index.tsx b/superset-frontend/src/components/DvtList/index.tsx
@@ -24,17 +24,19 @@ import {
   StyledDvtListScroll,
 } from './dvt-list.module';
 
+export interface DataProps {
+  id: number;
+  title: string;
+  subtitle: string;
+}
 export interface DvtListProps {
-  data: {
-    id: number;
-    title: string;
-    subtitle: string;
-  }[];
+  title: string;
+  data: DataProps[];
 }
 
-const DvtList: React.FC<DvtListProps> = ({ data }) => (
+const DvtList: React.FC<DvtListProps> = ({ data, title }) => (
   <StyledDvtList>
-    <StyledDvtListLabel>List Component</StyledDvtListLabel>
+    <StyledDvtListLabel>{title}</StyledDvtListLabel>
     <StyledDvtListScroll>
       {data.map(item => (
         <StyledDvtListItem>