#23 added superpowers ui tab

src/components/boris/BorisComments/index.tsx

@@ -21,7 +21,7 @@ const BorisComments: FC<IProps> = ({ isLoadingComments, node, commentCount, comm
   const user = useShallowSelect(selectAuthUser);
 
   return (
-    <Card className={styles.content}>
+    <>
       <Group className={styles.grid}>
         {user.is_user && <NodeCommentForm isBefore nodeId={node.id} />}
 
@@ -33,7 +33,7 @@ const BorisComments: FC<IProps> = ({ isLoadingComments, node, commentCount, comm
       </Group>
 
       <Footer />
-    </Card>
+    </>
   );
 };
 

src/components/boris/BorisComments/styles.module.scss

@@ -4,7 +4,7 @@
   flex: 4;
   z-index: 2;
   border-radius: $radius;
-  padding: 0;
+  padding: $gap;
   background: $node_bg;
   box-shadow: inset transparentize(mix($wisegreen, white, 60%), 0.6) 0 1px;
 

src/components/boris/BorisUIDemo/styles.module.scss

@@ -1,9 +1,12 @@
+@import "~/styles/variables.scss";
+
 .card {
   flex: 3;
   align-self: stretch;
   position: relative;
   z-index: 1;
   padding: 20px 30px;
+  background-color: lighten($content_bg, 4%);
 }
 
 .sample {

src/components/dialogs/Tab/index.tsx

@@ -0,0 +1,16 @@
+import React, { FC, MouseEventHandler } from 'react';
+import classNames from 'classnames';
+import styles from './styles.module.scss';
+
+interface IProps {
+  active?: boolean;
+  onClick?: MouseEventHandler<any>;
+}
+
+const Tab: FC<IProps> = ({ active, onClick, children }) => (
+  <div className={classNames(styles.tab, { [styles.active]: active })} onClick={onClick}>
+    {children}
+  </div>
+);
+
+export { Tab };

src/components/dialogs/Tab/styles.module.scss

@@ -0,0 +1,20 @@
+@import "src/styles/variables";
+
+.tab {
+  @include outer_shadow();
+
+  padding: $gap;
+  margin-right: $gap;
+  border-radius: $radius $radius 0 0;
+  font: $font_14_semibold;
+  text-transform: uppercase;
+  cursor: pointer;
+  background-color: $content_bg;
+  color: white;
+  text-decoration: none;
+  border: none;
+
+  &.active {
+    background: lighten($content_bg, 4%);
+  }
+}

src/components/dialogs/Tabs/index.tsx

@@ -0,0 +1,12 @@
+import React, { FC, useCallback } from 'react';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
+import { IAuthState } from '~/redux/auth/types';
+
+interface IProps {}
+
+const Tabs: FC<IProps> = ({ children }) => {
+  return <div className={styles.wrap}>{children}</div>;
+};
+
+export { Tabs };

src/components/dialogs/Tabs/styles.module.scss

@@ -0,0 +1,9 @@
+@import "src/styles/variables";
+
+.wrap {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin: $gap * 2 0 0 0;
+  padding: 0 $gap;
+}

src/components/node/NodeRelatedItem/index.tsx

@@ -12,7 +12,7 @@ type IProps = RouteComponentProps & {
 
 type CellSize = 'small' | 'medium' | 'large';
 
-const getTitleLetters = (title: string): string => {
+const getTitleLetters = (title?: string): string => {
   const words = (title && title.split(' ')) || [];
 
   if (!words.length) return '';