From 9a56b1b9a55a8eee47ddc640e457db4361ac535e Mon Sep 17 00:00:00 2001
From: muerwre <gotham48@gmail.com>
Date: Fri, 26 Jul 2019 18:33:54 +0700
Subject: [PATCH] image example

---
 src/components/main/SidePane/styles.scss      |  2 +-
 src/components/node/Comment/styles.scss       |  2 +-
 .../examples/ImageExample/index.tsx           |  8 ++++++--
 .../examples/ImageExample/styles.scss         | 19 +++++++++++++++++--
 src/styles/colors.scss                        |  5 +++++
 5 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/components/main/SidePane/styles.scss b/src/components/main/SidePane/styles.scss
index 75995843..28d98ac3 100644
--- a/src/components/main/SidePane/styles.scss
+++ b/src/components/main/SidePane/styles.scss
@@ -14,7 +14,7 @@
   width: 54px;
   border-radius: $panel_radius;
   margin: ($gap / 2) 0;
-  background: #191919;
+  background: $panel_bg;
   box-sizing: border-box;
 
   &:global(.logo) {
diff --git a/src/components/node/Comment/styles.scss b/src/components/node/Comment/styles.scss
index 8448bb5a..3dab603c 100644
--- a/src/components/node/Comment/styles.scss
+++ b/src/components/node/Comment/styles.scss
@@ -1,5 +1,5 @@
 .wrap {
-  background: #191919;
+  background: $comment_bg;
   min-height: 200px;
   display: flex;
 }
diff --git a/src/containers/examples/ImageExample/index.tsx b/src/containers/examples/ImageExample/index.tsx
index ff8ea2a7..89d5d22e 100644
--- a/src/containers/examples/ImageExample/index.tsx
+++ b/src/containers/examples/ImageExample/index.tsx
@@ -9,9 +9,13 @@ import { Comment } from "~/components/node/Comment";
 interface IProps {}
 
 const ImageExample: FC<IProps> = () => (
-    <Card>
+    <Card className={styles.node}>
       <Group>
-        <div className={styles.image_container} />
+        <div
+          className={styles.image_container}
+        >
+          <img className={styles.image} src="http://37.192.131.144/full/photos/photo-20120702-99383.jpg" />
+        </div>
 
         <Padder horizontal>
           <Group horizontal>
diff --git a/src/containers/examples/ImageExample/styles.scss b/src/containers/examples/ImageExample/styles.scss
index f8ca3404..2a51cb19 100644
--- a/src/containers/examples/ImageExample/styles.scss
+++ b/src/containers/examples/ImageExample/styles.scss
@@ -1,7 +1,14 @@
 .image_container {
   width: 100%;
-  height: 600px;
-  background: #131313;
+  background: $node_image_bg;
+  border-radius: $panel_radius 0 0 $panel_radius;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .image {
+    max-height: 800px;
+  }
 }
 
 .comments {
@@ -11,3 +18,11 @@
 .panel {
   flex: 1 3;
 }
+
+.node {
+  background: $node_bg;
+}
+
+.image {
+  background: red;
+}
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index d1a7fc9a..cb0d00c7 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -20,3 +20,8 @@ $text_sign: 22px;
 
 $input_bg_color: transparentize(black, 0.8);
 $button_bg_color: #ff3344;
+
+$comment_bg: #191919;
+$panel_bg: #191919;
+$node_bg: #111111;
+$node_image_bg: #131313;