comments mock

src/components/containers/Card/index.tsx

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+import classNames = require("classnames");
+import * as styles from './styles.scss';
+
+type IProps = React.HTMLAttributes<HTMLDivElement> & {}
+
+const Card: FC<IProps> = ({
+  className,
+  children,
+}) => (
+    <div className={classNames(styles.card, className)}>
+      {children}
+    </div>
+);
+
+export { Card };

src/components/containers/Card/styles.scss

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

src/components/containers/Grid/index.tsx

@@ -0,0 +1,53 @@
+import React, { FC } from 'react';
+import classNames from 'classnames';
+import * as styles from './styles.scss';
+
+type IProps = React.HTMLAttributes<HTMLDivElement> & {
+  horizontal?: boolean;
+  vertical?: boolean;
+  columns?: string;
+  rows?: string;
+  size?: string;
+  square?: boolean;
+  gap?: number;
+};
+
+const Grid: FC<IProps> = ({
+  children,
+  className = '',
+  horizontal = false,
+  vertical = false,
+  square = false,
+  size = 'auto',
+  style = {},
+  columns = 'auto',
+  rows = 'auto',
+  gap = 20,
+  ...props
+}) => (
+  <div
+    className={classNames(
+      styles.grid,
+      className,
+      {
+        [styles.horizontal]: horizontal,
+        [styles.vertical]: !horizontal,
+        [styles.square]: square,
+      },
+    )}
+    style={{
+      ...style,
+      gridTemplateColumns: square ? `repeat(auto-fill, ${(columns !== 'auto' && columns) || size})` : columns,
+      gridTemplateRows: square ? `repeat(auto-fill, ${(rows !== 'auto' && rows) || size})` : rows,
+      gridAutoRows: rows,
+      gridAutoColumns: columns,
+      gridRowGap: gap,
+      gridColumnGap: gap,
+    }}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export { Grid };

src/components/containers/Grid/styles.scss

@@ -0,0 +1,18 @@
+.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  grid-row-gap: $gap;
+  grid-column-gap: $gap;
+  grid-auto-flow: row;
+  grid-auto-rows: auto;
+  grid-auto-columns: auto;
+
+  &.horizontal {
+    grid-auto-flow: column;
+  }
+
+  &.square {
+    grid-auto-flow: dense;
+  }
+}

src/components/containers/Group/index.tsx

@@ -0,0 +1,39 @@
+import React, { FC } from 'react';
+import classNames from 'classnames';
+import * as styles from './styles.scss';
+
+type IProps = React.HTMLAttributes<HTMLDivElement> & {
+  horizontal?: boolean;
+  top?: boolean;
+  bottom?: boolean;
+  wrap?: boolean;
+};
+
+const Group: FC<IProps> = ({
+  children,
+  className = '',
+  horizontal = false,
+  top = false,
+  bottom = false,
+  wrap = false,
+ ...props
+}) => (
+  <div
+    className={classNames(
+      styles.group,
+      {
+        [styles.horizontal]: horizontal,
+        [styles.vertical]: !horizontal,
+        [styles.top]: top,
+        [styles.bottom]: bottom,
+        [styles.wrap]: wrap,
+      },
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export { Group };

src/components/containers/Group/styles.scss

@@ -0,0 +1,42 @@
+.group {
+  display: flex;
+
+  > :global(.group_filler) {
+    flex: 1;
+  }
+
+  &.vertical {
+    flex-direction: column;
+
+    & > * {
+      margin: $gap/2 0;
+
+      &:first-child { margin-top: 0; }
+      &:last-child { margin-bottom: 0; }
+    }
+  }
+
+  &.horizontal {
+    flex-direction: row;
+    align-items: center;
+
+    &.top {
+      align-items: flex-start;
+    }
+
+    &.bottom {
+      align-items: flex-end;
+    }
+
+    & > * {
+      margin: 0 $gap;
+
+      &:first-child { margin-left: 0; }
+      &:last-child { margin-right: 0; }
+    }
+  }
+
+  &.wrap {
+    flex-wrap: wrap;
+  }
+}

src/components/containers/Padder/index.tsx

@@ -0,0 +1,29 @@
+import React, { FC } from 'react';
+import * as styles from './styles.scss';
+import classNames = require("classnames");
+
+type IProps = React.HTMLAttributes<HTMLDivElement> &  {
+  padding?: number;
+  vertical?: boolean;
+  horizontal?: boolean;
+}
+
+const Padder: FC<IProps> = ({
+  padding,
+  children,
+  className,
+  style = {},
+  vertical,
+  horizontal,
+  ...props
+}) => (
+    <div
+      className={classNames(styles.padder, className, { vertical, horizontal })}
+      style={padding ? { ...style, padding } : style}
+      {...props}
+    >
+      {children}
+    </div>
+);
+
+export { Padder };

src/components/containers/Padder/styles.scss

@@ -0,0 +1,13 @@
+.padder {
+  padding: $gap;
+
+  &:global(.horizontal) {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  &:global(.vertical) {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}

src/components/flow/Cell/index.tsx

@@ -15,7 +15,6 @@ const Cell: FC<IProps> = ({
   height = 1,
   title,
   is_hero,
-  is_stamp,
 }) => (
     <div
       className={classNames(styles.cell, { is_hero })}

src/components/flow/Cell/styles.scss

@@ -9,7 +9,7 @@
 
   &:global(.is_hero) {
     .title {
-      font-size: 48px;
+      font: $font_hero_title;
     }
   }
 
@@ -17,9 +17,7 @@
 }
 
 .title {
-  font-family: $font;
-  font-weight: 700;
-  font-size: 24px;
+  font: $font_cell_title;
 
   text-transform: uppercase;
   height: 1em;

src/components/flow/TestGrid/styles.scss

@@ -1,7 +1,6 @@
 $cols: $content_width / $cell;
 
 .grid {
-  //display: grid;
   padding: $gap / 2;
   margin: 0 (-$gap / 2);
 }

src/components/main/SidePane/index.tsx

@@ -33,7 +33,11 @@ export const SidePane: FC<IProps> = ({
 
   return (
     <div className={styles.pane} style={{ transform: `translate(${left}px, 0px)` }}>
-      <div className={classNames(styles.group, 'logo')} />
+      <div
+        className={classNames(styles.group, 'logo')}
+      >
+        <div>V</div>
+      </div>
 
       <div className={styles.group}>
         <div className={styles.btn} />

src/components/main/SidePane/styles.scss

@@ -16,18 +16,20 @@
   margin: ($gap / 2) 0;
   background: #191919;
   box-sizing: border-box;
-  box-shadow: #222222 0 0 0 1px;
 
   &:global(.logo) {
-    color: white;
     height: (54px * 1.5) + $gap / 2;
     background: white;
     background-size: 140px;
     font-weight: 600;
     font-size: 14px;
     text-align: center;
-    padding-top: 66px;
     box-shadow: inset #111111 0 -1px, inset #222222 0 1px;
+    color: black;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font: $font_24_semibold;
   }
 
   .btn {
@@ -47,8 +49,9 @@
 
 .btn {
   height: 54px;
-  box-shadow: inset #111111 0 -1px, inset #222222 0 1px;
+  box-shadow: inset transparentize(black, 0.9) 0 -1px, inset transparentize(white, 0.95) 0 1px;
   border-radius: $panel_radius;
+  background: #191919;
 }
 
 .flexy {

src/components/node/Comment/index.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+import { Card } from "~/components/containers/Card";
+import * as styles from './styles.scss';
+
+interface IProps {}
+
+const Comment: FC<IProps> = () => (
+    <Card className={styles.wrap}>
+      <div className={styles.thumb}>
+        <div className={styles.thumb_image} />
+      </div>
+
+      <div className={styles.text}>
+        Lorem Ipsum
+      </div>
+    </Card>
+);
+
+export { Comment };

src/components/node/Comment/styles.scss

@@ -0,0 +1,22 @@
+.wrap {
+  background: #191919;
+  min-height: 200px;
+  display: flex;
+}
+
+.text {
+  padding: $gap;
+  flex: 1;
+}
+
+.thumb {
+  flex: 0 0 64px;
+  background: transparentize(black, 0.9);
+  border-radius: $panel_radius 0 0 $panel_radius;
+}
+
+.thumb_image {
+  height: 64px;
+  background: transparentize(white, 0.97);
+  border-radius: $panel_radius 0 0 $panel_radius;
+}

src/containers/examples/ImageExample/index.tsx

@@ -1,9 +1,37 @@
 import React, { FC } from 'react';
+import { Card } from "~/components/containers/Card";
+import * as styles from './styles.scss';
+import { Group } from "~/components/containers/Group";
+import { Padder } from "~/components/containers/Padder";
+import range from 'ramda/es/range';
+import { Comment } from "~/components/node/Comment";
 
 interface IProps {}
 
 const ImageExample: FC<IProps> = () => (
-    <div>image example</div>
+    <Card>
+      <Group>
+        <div className={styles.image_container} />
+
+        <Padder horizontal>
+          <Group horizontal>
+            <Group className={styles.comments}>
+              {
+                range(1,6).map(el => (
+                  <Comment
+                    key={el}
+                  />
+                ))
+              }
+            </Group>
+
+            <div className={styles.panel}>
+
+            </div>
+          </Group>
+        </Padder>
+      </Group>
+    </Card>
 );
 
 export { ImageExample };

src/containers/examples/ImageExample/styles.scss

@@ -0,0 +1,13 @@
+.image_container {
+  width: 100%;
+  height: 600px;
+  background: #131313;
+}
+
+.comments {
+  flex: 3 1;
+}
+
+.panel {
+  flex: 1 3;
+}

src/styles/variables.scss

@@ -14,8 +14,35 @@ $input_height: 32px;
 $input_radius: 2px;
 
 $info_height: 24px;
+
+$semibold: 600;
+$regular: 400;
+$medium: 500;
+$light: 300;
+$extra_light: 200;
+
 $font: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
+$font_48_semibold: $semibold 48px $font;
+$font_24_semibold: $semibold 24px $font;
+$font_24_regular: $regular 24px $font;
+$font_18_regular: $regular 18px $font;
+$font_18_extra_light: $extra_light 18px $font;
+$font_18_semibold: $semibold 18px $font;
+$font_16_regular: $regular 16px $font;
+$font_16_semibold: $semibold 16px $font;
+$font_14_regular: $regular 14px $font;
+$font_14_semibold: $semibold 14px $font;
+$font_14_medium: $medium 14px $font;
+$font_12_medium: $medium 12px $font;
+$font_12_semibold: $semibold 12px $font;
+$font_12_regular: $regular 12px $font;
+$font_10_regular: $regular 10px $font;
+$font_10_semibold: $semibold 10px $font;
+
+$font_cell_title: $font_24_semibold;
+$font_hero_title: $font_48_semibold;
+
 @mixin outer_shadow() {
   box-shadow: inset transparentize(white, 0.95) 0 1px,
               inset transparentize(black, 0.5) 0 -1px;