Merge pull request #897 from relative-ci/fix-ui

Fix UI
relative-ci · Sep 4, 2020 · 70a1d5e · 70a1d5e
2 parents 8cf54c3 + 2009fcf
commit 70a1d5e
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 35 deletions.
diff --git a/packages/ui/src/layout/sub-header/sub-header.jsx b/packages/ui/src/layout/sub-header/sub-header.jsx
@@ -3,51 +3,32 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 
 import { Container } from '../../ui/container';
+import { Box } from '../box';
 import css from './sub-header.module.css';
 
 const SIZE_SMALL = 'small';
 const SIZE_DEFAULT = 'default';
 const SIZES = [SIZE_SMALL, SIZE_DEFAULT];
 
 export const SubHeader = (props) => {
-  const {
-    className,
-    size,
-    subtitle,
-    title,
-    icon,
-    children,
-    rightSide,
-  } = props;
+  const { className, size, subtitle, title, icon, children, rightSide } = props;
 
   const rootClassName = cx(css.root, css[size], className);
 
   return (
-    <Container className={rootClassName}>
-      <div className={css.inner}>
-        {icon && (
-          <div className={css.icon}>
-            {icon}
+    <Box padding="small" className={rootClassName}>
+      <Container>
+        <div className={css.inner}>
+          {icon && <div className={css.icon}>{icon}</div>}
+          <div className={css.details}>
+            {subtitle && <p className={css.subtitle}>{subtitle}</p>}
+            <h1 className={css.title}>{title}</h1>
+            {children}
           </div>
-        )}
-        <div className={css.details}>
-          {subtitle && (
-            <p className={css.subtitle}>
-              {subtitle}
-            </p>
-          )}
-          <h1 className={css.title}>
-            {title}
-          </h1>
-          {children}
+          {rightSide && <div className={css.rightSide}>{rightSide}</div>}
         </div>
-        {rightSide && (
-          <div className={css.rightSide}>
-            {rightSide}
-          </div>
-        )}
-      </div>
-    </Container>
+      </Container>
+    </Box>
   );
 };
 

diff --git a/packages/ui/src/layout/sub-header/sub-header.module.css b/packages/ui/src/layout/sub-header/sub-header.module.css
@@ -1,6 +1,4 @@
 .root {
-  padding-top: var(--space-small);
-  padding-bottom: var(--space-small);
   border-bottom: 1px solid var(--color-outline);
   background: var(--color-highlight);
 }

diff --git a/packages/ui/src/ui/container/container.module.css b/packages/ui/src/ui/container/container.module.css
@@ -1,5 +1,5 @@
 .inner {
-  width: 100%;
+  width: calc(100% - var(--space--small) - var(--space-small));
   max-width: var(--max-width);
   margin: 0 auto;
 }