Moving some css aside the right components

webapp/src/components/comment.scss

@@ -1,12 +1,47 @@
 .Comment {
-    .MenuWrapper {
+    display: flex;
-        display: none;
+    flex-direction: column;
-        position: absolute;
+    margin: 5px 0;
-        right: 0;
+
-    }
     &:hover {
         .MenuWrapper {
             display: block;
         }
     }
+
+    .MenuWrapper {
+        display: none;
+        position: absolute;
+        right: 0;
+    }
+
+    .comment-header {
+        display: flex;
+        flex-direction: row;
+
+        position: relative;
+    }
+
+    .comment-avatar {
+        width: 20px;
+        height: 20px;
+        border-radius: 100%;
+        box-shadow: rgba(15, 15, 15, 0.1) 0px 2px 4px;
+    }
+
+    .comment-username {
+        font-weight: bold;
+        margin: 0 5px;
+    }
+
+    .comment-date {
+        color: #cccccc;
+        font-size: 12px;
+    }
+
+    .comment-text {
+        color: rgb(55, 53, 47);
+        width: 100%;
+        padding-left: 25px;
+    }
 }

webapp/src/components/commentsList.scss

@@ -0,0 +1,25 @@
+.CommentsList {
+	display: flex;
+	flex-direction: column;
+
+	width: 100%;
+
+    .comment-avatar {
+        width: 20px;
+        height: 20px;
+        border-radius: 100%;
+        box-shadow: rgba(15, 15, 15, 0.1) 0px 2px 4px;
+    }
+
+    .commentrow {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .newcomment {
+        color: rgba(55, 53, 47, 0.8);
+        flex-grow: 1;
+        margin-left: 5px;
+    }
+}
+

webapp/src/components/commentsList.tsx

@@ -11,6 +11,8 @@ import mutator from '../mutator'
 import {Editable} from './editable'
 import Comment from './comment'
 
+import './commentsList.scss'
+
 type Props = {
     comments: readonly IBlock[]
     cardId: string
@@ -42,7 +44,7 @@ class CommentsList extends React.Component<Props> {
         const userImageUrl = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="fill: rgb(192, 192, 192);"><rect width="100" height="100" /></svg>'
 
         return (
-            <div className='commentlist'>
+            <div className='CommentsList'>
                 {comments.map((comment) => (
                     <Comment
                         key={comment.id}

webapp/src/components/dialog.scss

@@ -0,0 +1,43 @@
+.Dialog {
+    &.dialog-back {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 10;
+
+        background-color: rgba(90, 90, 90, 0.5);
+    }
+
+    .dialog {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #ffffff;
+        border-radius: 3px;
+        box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px;
+        margin: 72px auto;
+        padding: 0;
+        max-width: 975px;
+        height: calc(100% - 144px);
+
+        overflow-x: hidden;
+        overflow-y: auto;
+        > .toolbar {
+            display: flex;
+            flex-direction: row;
+            height: 30px;
+            margin: 10px
+        }
+        > .content {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            padding: 10px 126px 10px 126px;
+        }
+        > .content.fullwidth {
+            padding: 10px 0 10px 0;
+        }
+    }
+}

webapp/src/components/dialog.tsx

@@ -6,14 +6,28 @@ import MenuWrapper from '../widgets/menuWrapper'
 
 import Button from './button'
 
+import './dialog.scss'
+
 type Props = {
     children: React.ReactNode
     toolsMenu: React.ReactNode
     onClose: () => void
 }
 
-export default class Dialog extends React.Component<Props> {
+export default class Dialog extends React.PureComponent<Props> {
-    keydownHandler = (e: KeyboardEvent) => {
+    public componentDidMount(): void {
+        document.addEventListener('keydown', this.keydownHandler)
+    }
+
+    public componentWillUnmount(): void {
+        document.removeEventListener('keydown', this.keydownHandler)
+    }
+
+    private close(): void {
+        this.props.onClose()
+    }
+
+    private keydownHandler = (e: KeyboardEvent): void => {
         if (e.target !== document.body) {
             return
         }
@@ -24,20 +38,12 @@ export default class Dialog extends React.Component<Props> {
         }
     }
 
-    componentDidMount() {
+    public render(): JSX.Element {
-        document.addEventListener('keydown', this.keydownHandler)
-    }
-
-    componentWillUnmount() {
-        document.removeEventListener('keydown', this.keydownHandler)
-    }
-
-    render() {
         const {toolsMenu} = this.props
 
         return (
             <div
-                className='dialog-back'
+                className='Dialog dialog-back'
                 onMouseDown={(e) => {
                     if (e.target === e.currentTarget) {
                         this.close()
@@ -49,17 +55,13 @@ export default class Dialog extends React.Component<Props> {
                     <div className='toolbar'>
                         <div className='octo-spacer'/>
                         <MenuWrapper>
-                            <Button>...</Button>
+                            <Button>{'...'}</Button>
                             {toolsMenu}
                         </MenuWrapper>
                     </div>}
                     {this.props.children}
-                </div >
+                </div>
-            </div >
+            </div>
         )
     }
-
-    close() {
-        this.props.onClose()
-    }
 }

webapp/static/main.css

@@ -436,53 +436,6 @@ hr {
 	margin: 5px 5px;
 }
 
-/*-- Dialog --*/
-
-.dialog-back {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	z-index: 10;
-
-	background-color: rgba(90, 90, 90, 0.5);
-}
-
-.dialog {
-	display: flex;
-	flex-direction: column;
-
-	background-color: #ffffff;
-	border-radius: 3px;
-	box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px;
-	margin: 72px auto;
-	padding: 0;
-	max-width: 975px;
-	height: calc(100% - 144px);
-
-	overflow-x: hidden;
-	overflow-y: auto;
-}
-
-.dialog > .toolbar {
-	display: flex;
-	flex-direction: row;
-	height: 30px;
-	margin: 10px
-}
-
-.dialog > .content {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	padding: 10px 126px 10px 126px;
-}
-
-.dialog > .content.fullwidth {
-	padding: 10px 0 10px 0;
-}
-
 /* Icons */
 
 .octo-hovercontrols {
@@ -537,62 +490,6 @@ hr {
     color: #000000;
 }
 
-/*-- Comments --*/
-
-.dialog .commentlist {
-	display: flex;
-	flex-direction: column;
-
-	width: 100%;
-}
-
-.commentlist .commentrow {
-	display: flex;
-	flex-direction: row;
-}
-
-.commentlist .comment {
-	display: flex;
-	flex-direction: column;
-	margin: 5px 0;
-}
-
-.comment-header {
-	display: flex;
-	flex-direction: row;
-
-	position: relative;
-}
-
-.comment-avatar {
-	width: 20px;
-	height: 20px;
-	border-radius: 100%;
-	box-shadow: rgba(15, 15, 15, 0.1) 0px 2px 4px;
-}
-
-.comment-username {
-	font-weight: bold;
-	margin: 0 5px;
-}
-
-.comment-date {
-	color: #cccccc;
-	font-size: 12px;
-}
-
-.comment-text {
-	color: rgb(55, 53, 47);
-	width: 100%;
-	padding-left: 25px;
-}
-
-.commentlist .newcomment {
-	color: rgba(55, 53, 47, 0.8);
-	flex-grow: 1;
-	margin-left: 5px;
-}
-
 /*-- Property list --*/
 
 .octo-propertylist {