scssify a bunch

app/assets/stylesheets/base.scss.erb

@@ -189,7 +189,6 @@
   border-bottom: 1px solid #BDBDBD;
   border-top: 1px solid #BDBDBD;
   background-color: #e0e0e0;
-}
 
   .linkItem {
     float:left;
@@ -201,20 +200,25 @@
     line-height:14px;
     height:12px;
     padding:17px 0;
-}
+
-.linkItem a {
+    a {
       color: #424242;
     }
+  }
 
-.CardOnGraph .icon {
+  .icon {
     position:absolute;
     width:100%;
     z-index:1;
     padding: 0;
     height: 48px;
+    left: -16px;
   }
   
   .contributor {
+    margin-left: 24px;
+    bottom: 7px;
+
     .contributorIcon {
       display: inline-block;
       vertical-align: middle;
@@ -225,14 +229,41 @@
       font-family: 'din-regular', sans-serif;
       font-size: 14px;
     }
+
+    .contributorIcon {
+      position: absolute;
+      top: 8px;
+      left: 0;
+      border-radius: 16px;
     }
 
-.linkItem.mapCount {
+    .contributorName {
-  margin-left: 12px;
+      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;
@@ -243,17 +274,28 @@
       background-position: 0 0;
       cursor: pointer;
     }
-.linkItem.mapCount:hover .mapCountIcon {
+
+    &:hover .mapCountIcon {
       background-position: 0 -32px;
     }
 
-.linkItem.mapCount:hover .hoverTip {
+    .tip, .hoverTip {
-  display: block;
-}
-.CardOnGraph .mapCount .tip, .CardonGraph .mapCount .hoverTip {
       top: 44px;
       left: 0px;
       font-size: 12px !important;
+
+      &: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 {
@@ -272,21 +314,19 @@
       z-index: 100;
     }
 
-
+    &:hover .hoverTip {
-.CardOnGraph .mapCount .tip:before, .CardOnGraph .mapCount .hoverTip:before {
+      display: block;
-  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;
     }
 
-.CardOnGraph .mapCount .tip li {
+    .tip a {
+      color: white;
+    }
+
+    .tip a:hover {
+      color: #757575;
+    }
+
+    .tip li {
       list-style-type: none;
       white-space: nowrap;
       overflow: hidden;
@@ -300,30 +340,17 @@
       position: relative;
     }
 
-.CardOnGraph .mapCount li.hideExtra {
+    li.hideExtra {
       display: none;
     }
-
-.showMore {
-  cursor: pointer;
-  color: #4FC059;
   }
 
-.mapCount .tip a {
+  .synapseCount {
-  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;
@@ -333,11 +360,10 @@
       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;
@@ -352,11 +378,11 @@
       z-index: 100;
     }
 
-.CardOnGraph .synapseCount:hover .tip {
+    &:hover .tip {
       display: block;
     }
 
-.CardOnGraph .synapseCount .tip:before {
+    .tip:before {
       content: '';
       position: absolute;
       margin-top: -8px;
@@ -367,7 +393,13 @@
       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">