radiuses

src/components/main/Header/index.tsx

@@ -31,13 +31,13 @@ const HeaderUnconnected: FC<IProps> = ({ username, is_user, showDialog }) => {
       <Filler />
 
       <div className={style.plugs}>
-        <Link to="/">flow</Link>
-        <Link to="/examples/image">image</Link>
         <div onClick={onOpenEditor}>editor</div>
+        <Link to="/">flow</Link>
       </div>
 
       {is_user && (
         <Group horizontal className={style.user_button}>
+          <div>{username}</div>
           <div className={style.user_avatar} />
         </Group>
       )}

src/components/node/Comment/index.tsx

@@ -27,8 +27,8 @@ const Comment: FC<IProps> = ({ comment, is_empty, is_loading, className, photo,
     {comment.files && comment.files.length > 0 && (
       <div className={styles.images}>
         {comment.files.map(file => (
-          <div>
+          <div key={file.id}>
-            <img src={getURL(file.url)} />
+            <img src={getURL(file.url)} alt={file.name} />
           </div>
         ))}
       </div>

src/components/node/Comment/styles.scss

@@ -15,6 +15,6 @@
   @include flexbin(150px, 10px);
 
   img {
-    border-radius: 4px;
+    border-radius: $radius;
   }
 }

src/components/node/NodePanel/index.tsx

@@ -2,16 +2,19 @@ import React, { FC } from 'react';
 import * as styles from './styles.scss';
 import { Group } from '~/components/containers/Group';
 import { Filler } from '~/components/containers/Filler';
-import {Icon} from "~/components/input/Icon";
+import { Icon } from '~/components/input/Icon';
+import { INode } from '~/redux/types';
 
-interface IProps {}
+interface IProps {
+  node: INode;
+}
 
-const NodePanel: FC<IProps> = () => (
+const NodePanel: FC<IProps> = ({ node: { title, user } }) => (
   <div className={styles.wrap}>
     <Group horizontal className={styles.panel}>
       <Filler>
-        <div className={styles.title}>Node title</div>
+        <div className={styles.title}>{title || '...'}</div>
-        <div className={styles.name}>~author</div>
+        {user && user.username && <div className={styles.name}>~ {user.username}</div>}
       </Filler>
     </Group>
 

src/components/node/NodePanel/styles.scss

@@ -19,7 +19,7 @@
 }
 
 .name {
-  font: $font_12_regular;
+  font: $font_14_regular;
   color: transparentize(white, 0.5);
 }
 

src/containers/dialogs/ScrollDialog/styles.scss

@@ -111,7 +111,7 @@
 
 .children {
   background: $content_bg;
-  border-radius: $radius;
+  border-radius: $radius $radius 0 0;
 }
 
 .top_cap {
@@ -124,7 +124,7 @@
 
   &::after {
     position: absolute;
-    content: " ";
+    content: ' ';
     width: 100%;
     height: $radius;
     background: linear-gradient($content_bg, transparentize($content_bg, 1));
@@ -207,4 +207,4 @@
   &::before {
     animation: spin_2 0.5s forwards;
   }
-}
+}

src/containers/node/NodeLayout/index.tsx

@@ -58,7 +58,7 @@ const NodeLayoutUnconnected: FC<IProps> = ({
     <Card className={styles.node} seamless>
       {block && createElement(block, { node, is_loading })}
 
-      <NodePanel />
+      <NodePanel node={node} />
 
       <Group>
         <Padder>

src/redux/node/constants.ts

@@ -31,7 +31,7 @@ export const EMPTY_BLOCK: IBlock = {
 export const EMPTY_NODE: INode = {
   id: null,
 
-  user_id: null,
+  user: null,
 
   title: '',
   files: [],

src/redux/types.ts

@@ -93,7 +93,7 @@ export interface IBlock {
 
 export interface INode {
   id?: number;
-  user_id: UUID;
+  user: Partial<IUser>;
 
   title: string;
   files: IFile[];

src/styles/variables.scss

@@ -7,7 +7,7 @@ $gap: 10px;
 $spc: $gap * 2;
 
 $radius: 6px;
-$cell_radius: 4px;
+$cell_radius: 6px;
 $panel_radius: $radius;
 
 $input_height: 36px;