Merge branch 'develop' into feature/organization-refactoring

Author: skipjack

assets/github-logo.svg

@@ -15,13 +15,23 @@
 
 .sidecar__link {
   display: inline-block;
-  padding: 0.75em;
+  padding: 0.65em;
   float: right;
   clear: both;
-  color: getColor(alto);
+  color: getColor(concrete);
   transition: all 250ms;
 
+  &:first-of-type {
+    border-top-left-radius: 3px;
+  }
+
+  &:last-of-type {
+    border-bottom-left-radius: 3px;
+  }
+
   &:hover {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
     color: getColor(white);
   }
 }
@@ -38,8 +48,9 @@
 
 .sidecar__icon {
   display: inline-block;
-  width: 16px;
+  width: 18px;
   vertical-align: middle;
+  font-size: 18px;
 }
 
 // TODO: Fix hardcoded widths using flex perhaps, can't animate to width auto
@@ -68,10 +79,10 @@
 }
 
 .sidecar__link--medium {
-  background: desaturate(#19aa6e, 15%);
+  background: desaturate(#02b875, 15%);
 
   &:hover {
-    background: #19aa6e;
+    background: #02b875;
 
     .sidecar__label {
       width: 115px;
@@ -80,10 +91,10 @@
 }
 
 .sidecar__link--so {
-  background: desaturate(#f48024, 15%);
+  background: desaturate(#fe7a15, 15%);
 
   &:hover {
-    background: #f48024;
+    background: #fe7a15;
 
     .sidecar__label {
       width: 125px;

components/sidecar/sidecar-style.scss

@@ -19,7 +19,7 @@ export default props => {
       </Link>
       <Link className="sidecar__link sidecar__link--so" to="//stackoverflow.com/questions/tagged/webpack">
         <span className="sidecar__label">Stack Overflow</span>
-        <i className="sidecar__icon icon-stack-exchange" />
+        <i className="sidecar__icon icon-stack-overflow" />
       </Link>
     </aside>
   );

components/sidecar/sidecar.jsx

@@ -12,25 +12,14 @@ let lists = {
       {
         name: "influence",
         currency: "influence",
-        maximum: 30,
         score: 1,
-        step: 2,
         color: "blue"
       },
       {
         name: "golden",
         currency: "goldenInfluence",
         score: 1,
-        step: 10,
         color: "#bfa203"
-      },
-      {
-        name: "thumb",
-        minimum: -5,
-        maximum: 5,
-        score: 5,
-        step: 1,
-        color: "#535353"
       }
     ],
     items: [

components/vote/api.dev.js

@@ -5,7 +5,7 @@
 .vote-app {
   margin: 1.5em;
 
-  &__influence-descriptions {
+  &__top {
     display: flex;
     flex-direction: column;
 
@@ -14,31 +14,108 @@
     }
   }
 
+  &__influence {
+    flex: 0 0 75%;
+  }
+
+  &__influence-description {
+    display: flex;
+    flex-direction: column;
+
+    @include break(medium) {
+      flex-direction: row;
+    }
+  }
+
+  &__user-section {
+    flex: 0 0 25%;
+    padding: 0 0 30px;
+
+    @include break(medium) {
+      padding: 0 0 0 20px;
+    }
+
+    @include break(large) {
+      border-left: 2px solid getColor(elephant);
+    }
+  }
+  
   &__influence-section {
-    flex: 0 0 100%;
+    flex: 0 0 50%;
   }
 
   &__influence-disclaimer {
     padding: 1em 0;
-    flex: 0 0 100%;
     font-size: smaller;
     color: red;
+
     @include break(medium) {
       text-align: center;
     }
   }
 
+  &__login-button {
+    margin: 20px 0;
+
+    button {
+      border: none;
+      outline: none;
+      color: getColor(white);
+      background: getColor(elephant);
+      padding: 5px 10px 5px 10px;
+      border-radius: 2px;
+      font-size: 13px;
+      cursor: pointer;
+
+      &:hover {
+        background: black;
+      }
+
+      &:active {
+        background: getColor(elephant)
+      }
+    }
+
+    img {
+      height: 25px;
+      vertical-align: middle;
+      padding-left: 5px;
+    }
+  }
+
+  &__userinfo {
+    outline: none;
+    border: none;
+    background: getColor(elephant);
+    color: white;
+    border-radius: 3px;
+    font-size: 13px;
+    display: inline-block;
+    padding: 3px 10px;
+
+    img {
+      height: 25px;
+      vertical-align: middle;
+      margin-right: 10px;
+    }  
+  }
+
   &__self-info {
     margin-top: 10px;
   }
 
+  &__button-area {
+    margin: 5px 0;
+  }
+
   &__update-button {
-    float: right;
+    
   }
 
   h1 {
-    font-size: 20pt;
+    font-size: 16pt;
     font-weight: bold;
+    margin-bottom: 10px;
   }
 
   &__item-title {
@@ -56,22 +133,55 @@
     }
   }
 
-  &__item-table td {
-    vertical-align: middle;
+  &__item-card {
+    display: flex;
+    flex-direction: column;
+
+    @include break(medium){
+      flex-direction: row;
+    }
+  }
+
+  &__score-section {
+    display: flex;
+    flex: 0 0 40%;
+    border: 1px solid lightgray;
+    user-select: none;
+    flex-wrap: wrap;
+
+    @include break(medium){
+      margin-right: 30px;
+      padding: 0 0 0 20px;
+    }
   }
 
   &__item-score {
-    font-size: 150%;
-    width: 90px;
-    text-align: right;
+    align-self: center;
+    font-size: 20pt;
+    flex: 0 0 100%;
+    text-align: center;
+
+    @include break(medium){
+      flex: 0 0 20%;
+      text-align: left;
+    }
+  }
+
+  &__item-button {
+    flex: 0 0 50%;
+      align-self: center;
+
+    @include break(medium){
+      flex: 0 0 40%;
+    }
   }
 
   &__items-list {
     display: block;
 
     & > li {
       display: block;
-      padding: 5px;
+      padding: 5px 0;
     }
   }