fix(UseGuid): update Card and UseGuide components layout (#4453)

- Adjust Card component width and remove border radius - Modify operations styling in Card component - Update UseGuide component spacing and background Signed-off-by: leioy <[email protected]>
kubesphere · Jan 22, 2025 · 22b150a · 22b150a
1 parent 0e934fa
commit 22b150a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 15 deletions.
diff --git a/packages/shared/src/components/Apps/AppsDashBoard/Card.tsx b/packages/shared/src/components/Apps/AppsDashBoard/Card.tsx
@@ -6,15 +6,7 @@ const CardWrapper = styled.div`
   justify-content: center;
   flex-direction: column;
   background: #fff;
-  border-radius: 4px;
-  box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06);
-  @media (max-width: 768px) {
-    padding-left: 0;
-  }
-
-  @media (min-width: 1164px) {
-    padding-left: 117px;
-  }
+  width: 1258px;
 `;
 
 const CardHeader = styled.div`
@@ -27,13 +19,18 @@ const CardHeader = styled.div`
     display: flex;
     align-items: center;
     gap: 8px;
-    font-size: 14px;
+    font-size: 12px;
     font-weight: 600;
     color: #242e42;
   }
 `;
 
-const CardContent = styled.div``;
+const CardOperations = styled.div`
+  display: inline-flex;
+  align-items: center;
+  width: 20px;
+  height: 20px;
+`;
 
 interface CardProps {
   title: React.ReactNode;
@@ -46,9 +43,9 @@ export const Card: React.FC<CardProps> = ({ title, operations, children }) => {
     <CardWrapper>
       <CardHeader>
         <div className="title">{title}</div>
-        {operations && <div className="operations">{operations}</div>}
+        {operations && <CardOperations>{operations}</CardOperations>}
       </CardHeader>
-      <CardContent>{children}</CardContent>
+      <div>{children}</div>
     </CardWrapper>
   );
 };

diff --git a/packages/shared/src/components/Apps/AppsDashBoard/UseGuide.tsx b/packages/shared/src/components/Apps/AppsDashBoard/UseGuide.tsx
@@ -6,10 +6,14 @@ import { openpitrixStore } from '../../../stores';
 
 const GuideWrapper = styled.div`
   margin-bottom: 12px;
+  background-color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 `;
 
 const GuideContent = styled.div`
-  padding: 12px 20px;
+  padding: 0 20px 12px;
 `;
 
 const StepList = styled.div`
@@ -41,7 +45,7 @@ const Step = styled.div`
   .step-icon {
     width: 40px;
     height: 40px;
-    margin-right: 8px;
+    margin-right: 12px;
   }
 
   .step-content {