minor css styling

2 files changed, 32 insertions, 5 deletions

diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index e69de29bb..675fc6c53 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -0,0 +1,28 @@
+ul {
+    list-style: none;
+}
+
+li {
+    margin: 5px 0;
+}
+
+.no-indent {
+    padding-left: 0;
+}
+
+/* ALL THESE SPACINGS ARE SUPER HACKY RIGHT NOW HANNAH PLS HELP */
+
+li:before {
+    content: '\2014';
+    margin-right: 0.7em;
+}
+
+.collapsed:before {
+    content: '\25b6';
+    margin-right: 0.65em;
+}
+
+.uncollapsed:before {
+    content: '\25bc';
+    margin-right: 0.5em;
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 745b06c46..52e853bf7 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -5,9 +5,8 @@ import { KeyStore } from "../../../fields/KeyStore";
 import { ListField } from "../../../fields/ListField";
 import React = require("react")
 import { TextField } from "../../../fields/TextField";
-import { BasicField } from "../../../fields/BasicField";
-import { assertParenthesizedExpression } from "babel-types";
 import { observable, action } from "mobx";
+import "./CollectionTreeView.scss";
 
 export interface TreeViewProps {
     document: Document;
@@ -40,7 +39,7 @@ class TreeView extends React.Component<TreeViewProps> {
             // if it's not collapsed, then render the full TreeView.
             if (!this.collapsed) {
                 return (
-                    <li key={document.Id} onClick={action(() => this.collapsed = true)} >
+                    <li className="uncollapsed" key={document.Id} onClick={action(() => this.collapsed = true)} >
                         {title.Data}
                         <ul key={document.Id}>
                             <TreeView
@@ -50,7 +49,7 @@ class TreeView extends React.Component<TreeViewProps> {
                     </li>
                 );
             } else {
-                return <li key={document.Id} onClick={action(() => this.collapsed = false)}>{title.Data}</li>
+                return <li className="collapsed" key={document.Id} onClick={action(() => this.collapsed = false)}>{title.Data}</li>
             }
         }
 
@@ -94,7 +93,7 @@ export class CollectionTreeView extends CollectionViewBase {
         return (
             <div>
                 <h3>{titleStr}</h3>
-                <ul>
+                <ul className="no-indent">
                     <TreeView
                         document={this.props.Document}
                     />