image example

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) {

src/components/node/Comment/styles.scss

@@ -1,5 +1,5 @@
 .wrap {
-  background: #191919;
+  background: $comment_bg;
   min-height: 200px;
   display: flex;
 }

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>

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;
+}

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;