feat: optimize style of card component.

src/components/Card.js

@@ -1,11 +1,13 @@
 import React from 'react';
-import clsx from 'classnames';
 import styled from 'styled-components';
 
 export default function Card({ className, children }) {
-  return <CardRoot className={clsx('card', className)}>{children}</CardRoot>;
+  return <CardRoot className={className}>{children}</CardRoot>;
 }
 
 const CardRoot = styled.div`
   padding: 15px;
+  margin: 15px;
+  background: #fff;
+  border: 1px solid #d2dce2;
 `;

src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsHeader.js

@@ -28,11 +28,6 @@ export default function CustomerDetailsHeader() {
           <h3 class="big-number">{customer.formatted_balance}</h3>
         </DetailItem>
 
-        <DetailItem
-          label={<T id={'customer.drawer.label.customer_name'} />}
-          name={'name'}
-          children={customer?.display_name}
-        />
         <DetailItem
           label={<T id={'customer.drawer.label.customer_type'} />}
           name={'type'}
@@ -44,6 +39,13 @@ export default function CustomerDetailsHeader() {
       </DetailsMenu>
 
       <DetailsMenu direction={'horizantal'} minLabelSize={'175px'}>
+        <DetailItem
+          label={<T id={'customer.drawer.label.customer_name'} />}
+          name={'name'}
+        >
+          <strong>{customer?.display_name}</strong>
+        </DetailItem>
+
         <DetailItem
           label={<T id={'customer.drawer.label.company_name'} />}
           children={defaultTo(customer?.company_name, '--')}

src/containers/Drawers/VendorDetailsDrawer/VendorDetailsHeader.js

@@ -28,17 +28,19 @@ export default function VendorDetailsHeader() {
           <h3 class="big-number">{vendor.formatted_balance}</h3>
         </DetailItem>
 
-        <DetailItem
-          label={<T id={'vendor.drawer.label.vendor'} />}
-          name={'name'}
-          children={vendor?.display_name}
-        />
         <DetailItem label={<T id={'vendor.drawer.label.unused_credits'} />}>
           0
         </DetailItem>
       </DetailsMenu>
 
       <DetailsMenu direction={'horizantal'} minLabelSize={'175px'}>
+        <DetailItem
+          label={<T id={'vendor.drawer.label.vendor'} />}
+          name={'name'}
+        >
+          <strong>{vendor?.display_name}</strong>
+        </DetailItem>
+
         <DetailItem
           label={<T id={'vendor.drawer.label.company_name'} />}
           children={defaultTo(vendor?.company_name, '--')}

src/style/App.scss

@@ -22,7 +22,6 @@
 @import 'components/resizer';
 @import 'components/CloudSpinner';
 @import 'components/Alert';
-@import 'components/Card';
 @import 'components/Toast';
 @import 'components/PageForm';
 @import 'components/Tooltip';

src/style/components/Card.scss

@@ -1,5 +0,0 @@
-
-.card{
-  background: #fff;
-  border: 1px solid #d2dce2;
-}