rotated colors

src/components/containers/Card/index.tsx

@@ -2,15 +2,18 @@ import React, { FC } from 'react';
 import classNames = require("classnames");
 import * as styles from './styles.scss';
 
-type IProps = React.HTMLAttributes<HTMLDivElement> & {}
+type IProps = React.HTMLAttributes<HTMLDivElement> & {
+  seamless?: boolean;
+}
 
 const Card: FC<IProps> = ({
   className,
   children,
+  seamless,
   ...props
 }) => (
     <div
-      className={classNames(styles.card, className)}
+      className={classNames(styles.card, className, { seamless })}
       {...props}
     >
       {children}

src/components/containers/Card/styles.scss

@@ -1,6 +1,11 @@
 .card {
   background-color: #111111;
   border-radius: $panel_radius;
+  padding: $gap;
 
   @include outer_shadow();
+
+  &:global(.seamless) {
+    padding: 0;
+  }
 }

src/components/containers/Grid/index.tsx

@@ -22,7 +22,7 @@ const Grid: FC<IProps> = ({
   style = {},
   columns = 'auto',
   rows = 'auto',
-  gap = 20,
+  gap = 10,
   ...props
 }) => (
   <div

src/components/containers/Panel/index.tsx

@@ -3,15 +3,16 @@ import * as styles from './styles.scss';
 import classNames = require("classnames");
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
-
+  seamless?: boolean;
 }
 
 const Panel: FC<IProps> = ({
   className,
   children,
+  seamless,
   ...props
 }) => (
-    <div className={classNames(styles.panel, className)} {...props}>
+    <div className={classNames(styles.panel, className, { seamless })} {...props}>
       {children}
     </div>
 );

src/components/containers/Panel/styles.scss

@@ -1,3 +1,7 @@
 .panel {
+  padding: $gap;
+
   @include outer_shadow();
+
+  &:global(.seamless) { padding: 0; }
 }

src/components/containers/TagField/styles.scss

@@ -1,5 +1,4 @@
 .wrap {
-  flex: 1;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;