tags

src/components/node/Comment/styles.scss

@@ -2,6 +2,7 @@
   background: $comment_bg;
   min-height: 200px;
   display: flex;
+  box-shadow: $comment_shadow;
 }
 
 .text {

src/components/node/NodePanel/styles.scss

@@ -52,7 +52,6 @@
 
 .mark {
   flex: 0 0 32px;
-  background: red;
   position: relative;
 
   &::after {
@@ -62,7 +61,7 @@
     right: 4px;
     width: 24px;
     height: 52px;
-    background: #ff3344;
+    background: $olive;
     box-shadow: transparentize(black, 0.8) 4px 2px;
   }
 }

src/components/node/Tag/index.tsx

@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+import * as styles from './styles.scss';
+import classNames = require("classnames");
+
+interface IProps {
+  title: string;
+  color?: 'red' | 'blue' | 'green' | 'olive' | 'black';
+}
+
+const Tag: FC<IProps> = ({
+  title,
+  color,
+}) => (
+  <div className={classNames(styles.tag, color)}>
+    <div className={styles.hole} />
+    <div className={styles.title}>{title}</div>
+  </div>
+);
+
+export { Tag };

src/components/node/Tag/styles.scss

@@ -0,0 +1,63 @@
+.tag {
+  height: $tag_height;
+  background: #333333;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: stretch;
+  border-radius: ($tag_height / 2) 3px 3px ($tag_height / 2);
+  font: $font_12_semibold;
+  align-self: flex-start;
+  padding: 0 8px 0 0;
+  box-shadow: $shadow_depth_2;
+  margin: ($gap / 2) $gap ($gap / 2) 0;
+
+  &:global(.red) {
+    background: $red;
+  }
+
+  &:global(.blue) {
+    background: $blue;
+    //color: transparentize(black, 0.4);
+  }
+
+  &:global(.green) {
+    background: $green;
+    color: transparentize(black, 0.4);
+  }
+
+  &:global(.olive) {
+    background: $olive;
+    color: transparentize(black, 0.4);
+  }
+
+  &:global(.black) {
+    background: transparentize(black, 0.7);
+    box-shadow: none;
+    color: transparentize(white, 0.6);
+
+    .hole::after { background: transparentize(white, 0.98); }
+  }
+}
+
+.hole {
+  width: $tag_height;
+  height: $tag_height;
+  display: flex;
+  margin-right: 3px;
+  align-items: center;
+  justify-content: center;
+
+  &::after {
+    content: ' ';
+    position: absolute;
+    background: transparentize(black, 0.7);
+    width: 14px;
+    height: 14px;
+    border-radius: 14px;
+  }
+}
+
+.title {
+  white-space: nowrap;
+}