move thread related styles to thread component

frontend/app/components/comment/_theme/_dark/comment_theme_dark.scss

@@ -97,12 +97,4 @@
       }
     }
   }
-
-  & ~ .thread {
-    border-left-color: rgba(255, 255, 255, 0.35);
-  }
-
-  & ~ .thread_level_5 > .thread_level_5 {
-    border-left-color: rgba(255, 255, 255, 0.2);
-  }
 }

frontend/app/components/comment/styles.ts

@@ -40,7 +40,6 @@ require('./__vote/_type/_up/comment__vote_type_up.scss');
 
 require('./_collapsed/comment_collapsed.scss');
 require('./_editing/comment_editing.scss');
-require('./_level/comment_level.scss');
 require('./_replying/comment_replying.scss');
 require('./_useless/comment_useless.scss');
 

frontend/app/components/thread/_theme_dark/thread_theme_dark.scss

@@ -0,0 +1,7 @@
+.thread_theme_dark {
+  border-left-color: rgba(255, 255, 255, 0.35);
+}
+
+.thread_theme_dark.thread_level_6 {
+  border-left-color: rgba(255, 255, 255, 0.2);
+}

frontend/app/components/thread/index.ts

@@ -1 +1,4 @@
 export { ConnectedThread as Thread } from './thread';
+
+require('./thread.scss');
+require('./_theme_dark/thread_theme_dark.scss');

frontend/app/components/thread/thread.scss

@@ -1,12 +1,13 @@
-.thread > .thread {
+.thread_indented {
   padding-left: 17px;
   border-left: 1px dotted rgba(0, 0, 0, 0.15);
 }
 
-.thread_level_4 .thread {
+.thread_level_5,
+.thread_level_6 {
   padding-left: 5px;
 }
 
-.thread_level_5 > .thread_level_5 {
+.thread_level_6 {
   border-left: 1px dotted rgba(0, 0, 0, 0.08);
 }

frontend/app/components/thread/thread.tsx

@@ -4,7 +4,7 @@ import { connect } from 'preact-redux';
 import b from 'bem-react-helper';
 
 import { ConnectedComment as Comment } from '@app/components/comment/connected-comment';
-import { Node } from '@app/common/types';
+import { Node, Theme } from '@app/common/types';
 import { getThreadIsCollapsed } from '@app/store/thread/getters';
 import { StoreState } from '@app/store';
 
@@ -13,6 +13,7 @@ interface Props {
   data: Node;
   isCommentsDisabled: boolean;
   level: number;
+  theme: Theme;
   mix?: string;
 
   getPreview(text: string): Promise<string>;
@@ -23,11 +24,14 @@ function Thread(props: RenderableProps<Props>) {
     collapsed,
     data: { comment, replies = [] },
     level,
+    theme,
   } = props;
 
+  const indented = level > 0;
+
   return (
     <div
-      className={b('thread', props, { level: props.level })}
+      className={b('thread', props, { level, theme, indented })}
       role={['listitem'].concat(!collapsed && replies.length ? 'list' : []).join(' ')}
       aria-expanded={!collapsed}
     >
@@ -39,7 +43,7 @@ function Thread(props: RenderableProps<Props>) {
           <ConnectedThread
             key={thread.comment.id}
             data={thread}
-            level={Math.min(level + 1, 5)}
+            level={Math.min(level + 1, 6)}
             getPreview={props.getPreview}
           />
         ))}
@@ -50,4 +54,5 @@ function Thread(props: RenderableProps<Props>) {
 export const ConnectedThread = connect((state: StoreState, props: { data: Node }) => ({
   collapsed: getThreadIsCollapsed(state, props.data.comment),
   isCommentsDisabled: !!state.info.read_only,
+  theme: state.theme,
 }))(Thread);