Small CSS optimizations (#3156)

packages/react-components/src/Badge.tsx

@@ -34,9 +34,7 @@ function Badge ({ className = '', color = 'normal', hover, icon, info, isSmall,
       className={`ui--Badge ${hover ? 'isTooltip' : ''} ${isSmall ? 'isSmall' : ''} ${onClick ? 'isClickable' : ''} ${color}Color ${className}`}
       onClick={onClick}
     >
-      <div className='badge'>
-        {info || (icon && <Icon icon={icon} />)}
-      </div>
+      {info || (icon && <Icon icon={icon} />)}
       {hover && (
         <Tooltip
           text={hover}
@@ -49,17 +47,18 @@ function Badge ({ className = '', color = 'normal', hover, icon, info, isSmall,
 
 export default React.memo(styled(Badge)`
   border-radius: 16px;
-  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
   color: #eee;
   display: inline-block;
   font-size: 12px;
   height: 22px;
+  line-height: 22px;
   margin-right: 0.25rem;
-  vertical-align: middle;
-  padding: 0 4px;
-  text-align: center;
-  width: 22px;
   min-width: 22px;
+  padding: 0 4px;
+  overflow: hidden;
+  text-align: center;
+  vertical-align: middle;
+  width: 22px;
 
   &.isTooltip {
     cursor: help;
@@ -76,7 +75,6 @@ export default React.memo(styled(Badge)`
   }
 
   &.isSmall {
-    box-shadow: none;
     font-size: 10px;
     height: 16px;
     line-height: 16px;
@@ -116,13 +114,4 @@ export default React.memo(styled(Badge)`
     background: transparent;
     box-shadow: none;
   }
-
-  & > * {
-    line-height: 22px;
-    overflow: hidden;
-  }
-
-  &.isSmall > * {
-    line-height: 16px;
-  }
 `);

packages/react-components/src/CardSummary.tsx

@@ -106,7 +106,7 @@ export default React.memo(styled(CardSummary)`
     font-size: 1.75rem;
     font-weight: 100;
     position: relative;
-    line-height: 1.75rem;
+    line-height: 1;
     text-align: right;
 
     > * {
@@ -122,9 +122,7 @@ export default React.memo(styled(CardSummary)`
     }
 
     > label {
-      line-height: 1rem;
       font-size: 0.95rem;
-      min-height: 1rem;
     }
 
     .progress {
@@ -135,7 +133,6 @@ export default React.memo(styled(CardSummary)`
     .isSecondary {
       font-size: 1.1rem;
       font-weight: normal;
-      line-height: 1.1rem;
       margin-top: 0.25rem;
     }
   }
@@ -146,7 +143,6 @@ export default React.memo(styled(CardSummary)`
 
     > div {
       font-size: 1.4rem;
-      line-height: 1.4rem;
     }
   }
 `);

packages/react-components/src/Table/Body.tsx

@@ -33,7 +33,6 @@ export default React.memo(styled(Body)`
   background: white;
 
   td {
-    // border-top: 1px solid #e4e6e8;
     padding: 0.75rem 1rem;
     text-align: left;
     vertical-align: middle;
@@ -147,16 +146,6 @@ export default React.memo(styled(Body)`
       background: #f9f8f7;
     }
 
-    // &.isHighlight {
-    //   &:nth-child(even) td {
-    //     background: #fffff4;
-    //   }
-
-    //   &:nth-child(odd) td {
-    //     background: #f4ffff;
-    //   }
-    // }
-
     &:first-child td {
       border-top: 1px solid #e4e6e8;
     }

packages/react-components/src/Table/Head.tsx

@@ -30,12 +30,11 @@ function Head ({ className = '', filter, header, isEmpty }: Props): React.ReactE
             key={index}
             onClick={onClick}
           >
-            {
-              index === 0
-                ? <h1>{label}</h1>
-                : isEmpty
-                  ? ''
-                  : label
+            {index === 0
+              ? <h1>{label}</h1>
+              : isEmpty
+                ? ''
+                : label
             }
           </th>
         )}