add icons + misc cleanup

frontend/src/icon_paths.js

@@ -13,6 +13,8 @@
 export var ICON_PATHS = {
     add: 'M19,13 L19,2 L14,2 L14,13 L2,13 L2,18 L14,18 L14,30 L19,30 L19,18 L30,18 L30,13 L19,13 Z',
     addtodash: 'M21,23 L16,23 L16,27 L21,27 L21,32 L25,32 L25,27 L30,27 L30,23 L25,23 L25,18 L21,18 L21,23 Z M4,28 L4,8 L0,8 L0,29.5 L0,32 L12,32 L12,28 L4,28 Z M32,4 L32,14 L28,14 L28,8 L0,8 L0,0 L32,0 L32,4 Z',
+    all: 'M30.595 13.536c1.85.755 1.879 2.05.053 2.9l-11.377 5.287c-1.82.846-4.763.858-6.583.022L1.344 16.532c-1.815-.835-1.785-2.131.05-2.89l1.637-.677 8.977 4.125c2.194 1.009 5.74.994 7.934-.026l9.022-4.193 1.63.665zm-1.63 7.684l1.63.666c1.85.755 1.879 2.05.053 2.898l-11.377 5.288c-1.82.847-4.763.859-6.583.022L1.344 24.881c-1.815-.834-1.785-2.131.05-2.89l1.637-.677 8.977 4.126c2.194 1.008 5.74.993 7.934-.026l9.022-4.194zM12.686 1.576c1.843-.762 4.834-.77 6.687-.013l11.22 4.578c1.85.755 1.88 2.05.054 2.899l-11.377 5.288c-1.82.846-4.763.858-6.583.022L1.344 9.136c-1.815-.834-1.785-2.13.05-2.89l11.293-4.67z',
+    archive: 'M2.783 12.8h26.434V29H2.783V12.8zm6.956 3.4h12.522v2.6H9.739v-2.6zM0 4h32v6.4H0V4z',
     area: 'M25.4980562,23.9977382 L26.0040287,23.9999997 L26.0040283,22.4903505 L26.0040283,14 L26.0040287,12 L25.3213548,13.2692765 C25.3213548,13.2692765 22.6224921,15.7906709 21.2730607,17.0513681 C21.1953121,17.1240042 15.841225,18.0149981 15.841225,18.0149981 L15.5173319,18.0717346 L15.2903187,18.3096229 L10.5815987,23.2439142 L9.978413,23.9239006 L11.3005782,23.9342813 L25.4980562,23.9977382 L11.3050484,23.9342913 L16.0137684,19 L21.7224883,18 L26.0040283,14 L26.0040283,23.4903505 C26.0040283,23.7718221 25.7731425,23.9989679 25.4980562,23.9977382 Z M7,23.9342913 L14,16 L21,14 L25.6441509,9.35958767 C25.8429057,9.16099288 26.0040283,9.22974944 26.0040283,9.49379817 L26.0040283,13 L26.0040283,24 L7,23.9342913 Z',
     bar: 'M9,20 L12,20 L12,24 L9,24 L9,20 Z M14,14 L17,14 L17,24 L14,24 L14,14 Z M19,9 L22,9 L22,24 L19,24 L19,9 Z',
     cards: 'M16.5,11 C16.1340991,11 15.7865579,10.9213927 15.4733425,10.7801443 L7.35245972,21.8211652 C7.7548404,22.264891 8,22.8538155 8,23.5 C8,24.8807119 6.88071187,26 5.5,26 C4.11928813,26 3,24.8807119 3,23.5 C3,22.1192881 4.11928813,21 5.5,21 C5.87370843,21 6.22826528,21.0819977 6.5466604,21.2289829 L14.6623495,10.1950233 C14.2511829,9.74948188 14,9.15407439 14,8.5 C14,7.11928813 15.1192881,6 16.5,6 C17.8807119,6 19,7.11928813 19,8.5 C19,8.96980737 18.8704088,9.4093471 18.6450228,9.78482291 L25.0405495,15.4699905 C25.4512188,15.1742245 25.9552632,15 26.5,15 C27.8807119,15 29,16.1192881 29,17.5 C29,18.8807119 27.8807119,20 26.5,20 C25.1192881,20 24,18.8807119 24,17.5 C24,17.0256697 24.1320984,16.5821926 24.3615134,16.2043506 L17.9697647,10.5225413 C17.5572341,10.8228405 17.0493059,11 16.5,11 Z M5.5,25 C6.32842712,25 7,24.3284271 7,23.5 C7,22.6715729 6.32842712,22 5.5,22 C4.67157288,22 4,22.6715729 4,23.5 C4,24.3284271 4.67157288,25 5.5,25 Z M26.5,19 C27.3284271,19 28,18.3284271 28,17.5 C28,16.6715729 27.3284271,16 26.5,16 C25.6715729,16 25,16.6715729 25,17.5 C25,18.3284271 25.6715729,19 26.5,19 Z M16.5,10 C17.3284271,10 18,9.32842712 18,8.5 C18,7.67157288 17.3284271,7 16.5,7 C15.6715729,7 15,7.67157288 15,8.5 C15,9.32842712 15.6715729,10 16.5,10 Z',
@@ -61,6 +63,7 @@ export var ICON_PATHS = {
         path: 'M15.141,15.512 L14.294,20 L13.051,20 C12.8309989,20 12.6403341,19.9120009 12.479,19.736 C12.3176659,19.5599991 12.237,19.343668 12.237,19.087 C12.237,19.0503332 12.2388333,19.0155002 12.2425,18.9825 C12.2461667,18.9494998 12.2516666,18.9146668 12.259,18.878 L12.908,15.512 L10.653,15.512 L10.015,19.01 C9.94899967,19.3620018 9.79866784,19.6149992 9.564,19.769 C9.32933216,19.9230008 9.06900143,20 8.783,20 L7.584,20 L8.42,15.512 L7.155,15.512 C6.92033216,15.512 6.74066729,15.4551672 6.616,15.3415 C6.49133271,15.2278328 6.429,15.0390013 6.429,14.775 C6.429,14.6723328 6.43999989,14.5550007 6.462,14.423 L6.605,13.554 L8.695,13.554 L9.267,10.518 L6.913,10.518 L7.122,9.385 C7.17333359,9.10633194 7.28699912,8.89916734 7.463,8.7635 C7.63900088,8.62783266 7.92499802,8.56 8.321,8.56 L9.542,8.56 L10.224,5.018 C10.282667,4.7246652 10.4183323,4.49733414 10.631,4.336 C10.8436677,4.17466586 11.0929986,4.094 11.379,4.094 L12.611,4.094 L11.775,8.56 L14.019,8.56 L14.866,4.094 L16.076,4.094 C16.3326679,4.094 16.5416659,4.1673326 16.703,4.314 C16.8643341,4.4606674 16.945,4.64766553 16.945,4.875 C16.945,4.9483337 16.9413334,5.00333315 16.934,5.04 L16.252,8.56 L18.485,8.56 L18.276,9.693 C18.2246664,9.97166806 18.1091676,10.1788327 17.9295,10.3145 C17.7498324,10.4501673 17.4656686,10.518 17.077,10.518 L15.977,10.518 L15.416,13.554 L16.978,13.554 C17.2126678,13.554 17.3904994,13.6108328 17.5115,13.7245 C17.6325006,13.8381672 17.693,14.0306653 17.693,14.302 C17.693,14.4046672 17.6820001,14.5219993 17.66,14.654 L17.528,15.512 L15.141,15.512 Z M10.928,13.554 L13.183,13.554 L13.744,10.518 L11.5,10.518 L10.928,13.554 Z',
         attrs: { viewBox: '0 0 24, 24' }
     },
+    label: 'M14.577 31.042a2.005 2.005 0 0 1-2.738-.733L1.707 12.759c-.277-.477-.298-1.265-.049-1.757L6.45 1.537C6.7 1.044 7.35.67 7.9.7l10.593.582c.551.03 1.22.44 1.498.921l10.132 17.55a2.002 2.002 0 0 1-.734 2.737l-14.812 8.552zm.215-22.763a3.016 3.016 0 1 0-5.224 3.016 3.016 3.016 0 0 0 5.224-3.016z',
     left: "M21,0 L5,16 L21,32 L21,5.47117907e-13 L21,0 Z",
     line: 'M17.5684644,16.0668074 L15.9388754,14.3793187 L15.8968592,14.4198933 L15.8953638,14.4183447 L15.8994949,14.4142136 L15.6628229,14.1775415 L15.5851122,14.0970697 L15.5837075,14.0984261 L14.4852814,13 L7.56742615,19.9178552 L8.98163972,21.3320688 L14.4809348,15.8327737 L14.4809348,15.8327737 L16.1103863,17.52012 L16.1522861,17.4796579 L16.1522861,17.4796579 L16.1539209,17.4813508 L16.1500476,17.4852242 L16.3719504,17.707127 L16.4640332,17.8024814 L16.4656976,17.8008741 L17.5643756,18.8995521 L24.4820322,11.9818955 L23.0677042,10.5675676 L17.5684644,16.0668074 Z',
     list: 'M3 8 A3 3 0 0 0 9 8 A3 3 0 0 0 3 8 M12 6 L28 6 L28 10 L12 10z M3 16 A3 3 0 0 0 9 16 A3 3 0 0 0 3 16 M12 14 L28 14 L28 18 L12 18z M3 24 A3 3 0 0 0 9 24 A3 3 0 0 0 3 24 M12 22 L28 22 L28 26 L12 26z',
@@ -79,7 +82,8 @@ export var ICON_PATHS = {
     pencil: 'M4.7352182,19.1979208 L11.3429107,25.5873267 L24.069853,12.5293069 L17.4624587,6.1419802 L4.7352182,19.1979208 Z M9.63604523,27.3406931 L3.02805455,20.9509901 L0.238146568,29.9610891 L9.63604523,27.3406931 Z M23.4499066,0 L19.1734989,4.38653465 L25.7811914,10.7759406 L30.0575991,6.38732673 L23.4499066,0 Z',
     pie: 'M16.0113299,15.368011 L16.0113299,7.6605591 L16.0113246,7.66055936 C16.1469053,7.65372627 16.283376,7.65026855 16.4206543,7.65026855 C18.4538187,7.65026855 20.309836,8.40872524 21.7212043,9.65813664 L16.0113299,15.368011 Z M16.5768268,16.0595929 L24.4103638,16.0595929 C24.4171966,15.9240175 24.4206543,15.7875468 24.4206543,15.6502686 C24.4206543,13.5849976 23.6380543,11.7025127 22.35323,10.2831897 L16.5768268,16.0595929 Z M24.2956851,17.0665012 L15.0044217,17.0665012 L15.0044217,7.77523777 C11.2616718,8.44383611 8.4206543,11.7152747 8.4206543,15.6502686 C8.4206543,20.0685466 12.0023763,23.6502686 16.4206543,23.6502686 C20.3556481,23.6502686 23.6270867,20.8092511 24.2956851,17.0665012 L24.2956851,17.0665012 Z',
     pinmap: 'M15,16.8999819 L15,21 L16,23 L17,21.0076904 L17,16.8999819 C16.6768901,16.9655697 16.3424658,17 16,17 C15.6575342,17 15.3231099,16.9655697 15,16.8999819 L15,16.8999819 Z M16,16 C18.209139,16 20,14.209139 20,12 C20,9.790861 18.209139,8 16,8 C13.790861,8 12,9.790861 12,12 C12,14.209139 13.790861,16 16,16 Z',
-    popular: 'M22.7319639,13.7319639 L16.5643756,19.8995521 L15.4656976,18.8008741 L15.4640332,18.8024814 L15.3719504,18.707127 L15.1500476,18.4852242 L15.1539209,18.4813508 L15.1522861,18.4796579 L15.1522861,18.4796579 L15.1103863,18.52012 L13.4809348,16.8327737 L13.4809348,16.8327737 L7.98163972,22.3320688 L6.56742615,20.9178552 L13.4852814,14 L14.5837075,15.0984261 L14.5851122,15.0970697 L14.6628229,15.1775415 L14.8994949,15.4142136 L14.8953638,15.4183447 L14.8968592,15.4198933 L14.9388754,15.3793187 L16.5684644,17.0668074 L16.5684644,17.0668074 L21.3176359,12.3176359 L19,10 L26,9 L25,16 L22.7319639,13.7319639 Z',
+    popular: 'M23.29 11.224l-7.067 7.067-2.658-2.752.007-.007-.386-.385-.126-.131-.003.002-1.789-1.79L.705 23.793A.994.994 0 0 0 .704 25.2l.896.897a1 1 0 0 0 1.408-.002l8.253-8.252 2.654 2.748.226-.218-.161.161 1.152 1.152c.64.64 1.668.636 2.304 0l8.158-8.159L32 19.933V5H17.067l6.223 6.224z',
+    recents: 'M15.689 17.292l-.689.344V6.992c0-.55.448-.992 1.001-.992h.907c.547 0 1.001.445 1.001.995v9.187l-.372.186 4.362 5.198a1.454 1.454 0 1 1-2.228 1.87L15 17.87l.689-.578zM16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16z',
     sync: 'M16 2 A14 14 0 0 0 2 16 A14 14 0 0 0 16 30 A14 14 0 0 0 26 26 L 23.25 23 A10 10 0 0 1 16 26 A10 10 0 0 1 6 16 A10 10 0 0 1 16 6 A10 10 0 0 1 23.25 9 L19 13 L30 13 L30 2 L26 6 A14 14 0 0 0 16 2',
     return:'M15.3040432,11.8500793 C22.1434689,13.0450349 27.291257,18.2496116 27.291257,24.4890512 C27.291257,25.7084278 27.0946472,26.8882798 26.7272246,28.0064033 L26.7272246,28.0064033 C25.214579,22.4825472 20.8068367,18.2141694 15.3040432,17.0604596 L15.3040432,25.1841972 L4.70874296,14.5888969 L15.3040432,3.99359668 L15.3040432,3.99359668 L15.3040432,11.8500793 Z',
     reference: {

frontend/src/questions/components/ActionHeader.css

@@ -31,7 +31,6 @@
     composes: cursor-pointer from "style/cursor";
 }
 
-
 :local(.labelButton) .Icon,
 :local(.archiveButton) .Icon {
     padding-left: 0.25em;

frontend/src/questions/components/ActionHeader.jsx

@@ -27,7 +27,7 @@ const ActionHeader = ({ visibleCount, selectedCount, allAreSelected, sectionIsAr
             <LabelPopover
                 triggerElement={
                     <span className={S.labelButton}>
-                        <Icon name="grid" />
+                        <Icon name="label" />
                         Labels
                         <Icon name="chevrondown" width={12} height={12} />
                     </span>
@@ -35,7 +35,7 @@ const ActionHeader = ({ visibleCount, selectedCount, allAreSelected, sectionIsAr
                 labels={labels}
             />
             <span className={S.archiveButton} onClick={() => setArchived(undefined, !sectionIsArchive, true)}>
-                <Icon name="grid" />
+                <Icon name="archive" />
                 { sectionIsArchive ? "Unarchive" : "Archive" }
             </span>
         </span>

frontend/src/questions/components/EmojiIcon.jsx

@@ -3,7 +3,7 @@ import React, { Component, PropTypes } from "react";
 import { emoji } from "metabase/lib/emoji";
 
 const EmojiIcon = ({ size = 18, style, className, name }) =>
-    <span className={className} style={{ width: size, height: size, ...style }}>
+    <span className={className} style={{ width: size, height: size, lineHeight: 1, ...style }}>
         {emoji[name].react}
     </span>
 

frontend/src/questions/components/Item.jsx

@@ -31,7 +31,7 @@ const Item = ({ id, name, created, by, selected, favorite, archived, icon, label
         <ItemBody id={id} name={name} labels={labels} created={created} by={by} />
         <div className={S.rightIcons}>
             <LabelPopover
-                triggerElement={<Icon className={S.tagIcon} name="grid" width={20} height={20} />}
+                triggerElement={<Icon className={S.tagIcon} name="label" width={20} height={20} />}
                 triggerClasses={S.trigger}
                 triggerClassesOpen={S.open}
                 item={{ id, labels }}
@@ -42,7 +42,7 @@ const Item = ({ id, name, created, by, selected, favorite, archived, icon, label
         </div>
         <div className={S.extraIcons}>
             <Tooltip tooltip={archived ? "Unarchive" : "Archive"}>
-                <Icon className={S.archiveIcon} name="grid" width={20} height={20} onClick={() => setArchived(id, !archived, true)} />
+                <Icon className={S.archiveIcon} name="archive" width={20} height={20} onClick={() => setArchived(id, !archived, true)} />
             </Tooltip>
         </div>
     </div>

frontend/src/questions/components/Sidebar.jsx

-import React, { Component, PropTypes } from "react";
+import React, { PropTypes } from "react";
 import { Link } from "react-router";
 import S from "./Sidebar.css";
+import cx from 'classnames';
 
 import LabelIcon from "./LabelIcon.jsx";
 
 import { pure } from "recompose";
 
-const Sidebar = ({ sections, topics, labels }) =>
-    <div className={S.sidebar}>
+const Sidebar = ({ sections, topics, labels, style, className }) =>
+    <div className={cx(S.sidebar, className)} style={style}>
         <ul>
             {sections.map(section =>
                 <QuestionSidebarItem key={section.id} href={"/questions/" + section.id} {...section} />
@@ -23,7 +24,7 @@ const Sidebar = ({ sections, topics, labels }) =>
                 <QuestionSidebarItem key={label.id} href={"/questions/label/"+label.slug} {...label} />
             )}
             <li className={S.divider} />
-            <QuestionSidebarItem name="Archive" href="/questions/archived" icon="star" />
+            <QuestionSidebarItem name="Archive" href="/questions/archived" icon="archive" />
         </ul>
     </div>
 
@@ -40,6 +41,4 @@ const QuestionSidebarItem = ({ name, icon, href }) =>
         </Link>
     </li>
 
-
-
 export default pure(Sidebar);

frontend/src/questions/components/SidebarLayout.jsx

 import React, { Component, PropTypes } from "react";
 
 const SidebarLayout = ({ className, style, sidebar, children }) =>
-    <div className={className} style={{ ...style, display: "flex", flexDirection: "row" }}>
+    <div className={className} style={{ ...style, display: "flex", flexDirection: "row", overflow: "hidden" }}>
         { React.cloneElement(
             sidebar,
-            {},
+            { style: { flexShrink: 0, overflowY: 'scroll' },
+              className: 'scroll-show'
+            },
             sidebar.props.children
         )}
         { children && React.cloneElement(
             React.Children.only(children),
-            { style: { flex: "1" }},
+            { style: { flex: 1, overflowY: 'scroll' }},
             React.Children.only(children).props.children
         )}
     </div>

frontend/src/questions/selectors.js

@@ -111,11 +111,11 @@ export const getSectionIsArchive = createSelector(
 );
 
 const sections = [
-    { id: "all",       name: "All questions",   icon: "star" },
+    { id: "all",       name: "All questions",   icon: "all" },
     { id: "favorites", name: "Favorites",       icon: "star" },
-    { id: "recent",    name: "Recently viewed", icon: "star" },
-    { id: "saved",     name: "Saved by me",     icon: "star" },
-    { id: "popular",   name: "Most popular",    icon: "star" }
+    { id: "recent",    name: "Recently viewed", icon: "recents" },
+    { id: "saved",     name: "Saved by me",     icon: "mine" },
+    { id: "popular",   name: "Most popular",    icon: "popular" }
 ];
 
 export const getSections    = (state) => sections;