scssify a bunch

app/assets/stylesheets/base.scss.erb

@@ -185,13 +185,12 @@
 }
 
 .CardOnGraph .links {
-  position:relative;
+  position: relative;
   border-bottom: 1px solid #BDBDBD;
   border-top: 1px solid #BDBDBD;
   background-color: #e0e0e0;
-}
 
-.linkItem {
+  .linkItem {
     float:left;
     height:46px;
     z-index: 1;
@@ -201,20 +200,25 @@
     line-height:14px;
     height:12px;
     padding:17px 0;
-}
-.linkItem a {
-  color: #424242;
-}
 
-.CardOnGraph .icon {
+    a {
+      color: #424242;
+    }
+  }
+
+  .icon {
     position:absolute;
     width:100%;
     z-index:1;
     padding: 0;
     height: 48px;
-}
+    left: -16px;
+  }
+  
+  .contributor {
+    margin-left: 24px;
+    bottom: 7px;
 
-.contributor {
     .contributorIcon {
       display: inline-block;
       vertical-align: middle;
@@ -225,14 +229,41 @@
       font-family: 'din-regular', sans-serif;
       font-size: 14px;
     }
-}
 
-.linkItem.mapCount {
+    .contributorIcon {
-  margin-left: 12px;
+      position: absolute;
+      top: 8px;
+      left: 0;
+      border-radius: 16px;
+    }
+
+    .contributorName {
+      display: none;
+      position: absolute;
+      background: black;
+      text-align: center;
+      color: white;
+      border-radius: 2px;
+      font-family: din-regular;
+      line-height: 15px;
+      font-size: 12px;
+      padding: 3px 5px 2px;
+      white-space: nowrap;
+      margin-top: 36px;
+      margin-left: -32px;
+    }
+
+    &:hover .contributorName {
+      display: block;
+    }
+  }
+
+  .mapCount {
+    margin-left: 48px;
     width: 24px;
     padding:17px 0 17px 36px;
-}
+
-.linkItem.mapCount .mapCountIcon {
+    .mapCountIcon {
       position: absolute;
       top: 8px;
       left: 0;
@@ -242,21 +273,32 @@
       background-repeat: no-repeat;
       background-position: 0 0;
       cursor: pointer;
-}
+    }
-.linkItem.mapCount:hover .mapCountIcon {
-  background-position: 0 -32px;
-}
 
-.linkItem.mapCount:hover .hoverTip {
+    &:hover .mapCountIcon {
-  display: block;
+      background-position: 0 -32px;
-}
+    }
-.CardOnGraph .mapCount .tip, .CardonGraph .mapCount .hoverTip {
+
+    .tip, .hoverTip {
       top: 44px;
       left: 0px;
       font-size: 12px !important;
-}
 
-.hoverTip {
+      &:before {
+        content: '';
+        position: absolute;
+        top: 26px;
+        left: 10px;
+        margin-top: -30px;
+        width: 0;
+        height: 0;
+        border-bottom: 4px solid #000000;
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+      }
+    }
+
+    .hoverTip {
       white-space: nowrap;
       font-family: 'din-regular';
       top: 44px;
@@ -270,23 +312,21 @@
       line-height: 17px;
       padding: 3px 5px 2px;
       z-index: 100;
-}
+    }
 
+    &:hover .hoverTip {
+      display: block;
+    }
 
-.CardOnGraph .mapCount .tip:before, .CardOnGraph .mapCount .hoverTip:before {
+    .tip a {
-  content: '';
+      color: white;
-  position: absolute;
+    }
-  top: 26px;
-  left: 10px;
-  margin-top: -30px;
-  width: 0;
-  height: 0;
-  border-bottom: 4px solid #000000;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-}
 
-.CardOnGraph .mapCount .tip li {
+    .tip a:hover {
+      color: #757575;
+    }
+
+    .tip li {
       list-style-type: none;
       white-space: nowrap;
       overflow: hidden;
@@ -298,32 +338,19 @@
       font-size: 14px;
       line-height: 14px;
       position: relative;
-}
+    }
 
-.CardOnGraph .mapCount li.hideExtra {
+    li.hideExtra {
       display: none;
-}
+    }
+  }
 
-.showMore {
+  .synapseCount {
-  cursor: pointer;
-  color: #4FC059;
-}
-
-.mapCount .tip a {
-  color: white;
-}
-
-.mapCount .tip a:hover {
-  color: #757575;
-}
-
-
-.linkItem.synapseCount {
     margin-left: 2px;
     width: 24px;
     padding:17px 0 17px 32px;
-}
+
-.linkItem.synapseCount .synapseCountIcon {
+    .synapseCountIcon {
       position: absolute;
       top: 8px;
       left: 0;
@@ -332,12 +359,11 @@
       background-image: url(<%= asset_data_uri('synapse32_sprite.png') %>);
       background-repeat: no-repeat;
       background-position: 0 0;
-}
+    }
-.linkItem.synapseCount:hover .synapseCountIcon {
+    hover .synapseCountIcon {
       background-position: 0 -32px;
-}
+    }
-
+    .tip {
-.CardOnGraph .synapseCount .tip {
       position: absolute;
       background: black;
       width: auto;
@@ -350,13 +376,13 @@
       line-height: 12px;
       padding: 4px 4px 4px;
       z-index: 100;
-}
+    }
 
-.CardOnGraph .synapseCount:hover .tip {
+    &:hover .tip {
       display: block;
-}
+    }
 
-.CardOnGraph .synapseCount .tip:before {
+    .tip:before {
       content: '';
       position: absolute;
       margin-top: -8px;
@@ -366,8 +392,14 @@
       border-bottom: 4px solid black;
       border-left: 5px solid transparent;
       border-right: 5px solid transparent;
+    }
+  }
 }
 
+.showMore {
+  cursor: pointer;
+  color: #4FC059;
+}
 
 .mapPerm {
   width: 32px;

frontend/src/components/TopicCard.js

@@ -326,17 +326,20 @@ class ReactTopicCard extends Component {
     const { linkEdit, embedlyLinkLoaded, embedlyLinkStarted, embedlyLinkError } = this.state
     const values = funcs.buildObject(topic, ActiveMapper)
     var authorizedToEdit = topic.authorizeToEdit(ActiveMapper)
+
     let classname = 'permission'
-    if (authorizedToEdit) classname += ' canEdit'
+    if (authorizedToEdit) {
-    else classname += ' cannotEdit'
+      classname += ' canEdit'
+    } else {
+      classname += ' cannotEdit'
+    }
+
     if (topic.authorizePermissionChange(ActiveMapper)) classname += ' yourTopic'
     const hasAttachment = topic.get('link') && topic.get('link') !== ''
 
     return (
       <div className={classname}>
         <div className={`CardOnGraph ${hasAttachment ? 'hasAttachment' : ''}`} id={`topic_${values.id}`}>
-          <div className="metacodeImage" style={{backgroundImage: `url(${values.imgsrc})`}}></div>
-          <span className="metacodeName">{values.metacode}</span>
           <span className="title">
             <div className="titleWrapper" id="titleActivator">
               <span className="best_in_place best_in_place_name">