From d6c653b8ea97ff9bd1ceede72751812560aeb236 Mon Sep 17 00:00:00 2001
From: Kyle Knight <kyle@kolide.co>
Date: Fri, 18 Nov 2016 09:41:52 -0600
Subject: [PATCH] Adding in new Rocker Switch (#498)

---
 assets/fonts/kolidecons/kolidecons.woff       | Bin 9668 -> 9680 bytes
 frontend/components/buttons/Rocker/Rocker.jsx |  51 ++++
 .../components/buttons/Rocker/_styles.scss    | 132 ++++++++++
 frontend/components/buttons/Rocker/index.js   |   1 +
 frontend/pages/HomePage/HomePage.jsx          |   8 +
 frontend/styles/global/_global.scss           |   3 +
 frontend/styles/global/_icons.scss            | 242 +++++++++---------
 frontend/templates/react.tmpl                 |   3 +
 8 files changed, 323 insertions(+), 117 deletions(-)
 create mode 100644 frontend/components/buttons/Rocker/Rocker.jsx
 create mode 100644 frontend/components/buttons/Rocker/_styles.scss
 create mode 100644 frontend/components/buttons/Rocker/index.js

diff --git a/assets/fonts/kolidecons/kolidecons.woff b/assets/fonts/kolidecons/kolidecons.woff
index 034390129799c3c3778346f1de12a8892cba9ade..0cd13cc0b035a43b3313eb18159ce465e4124d8d 100644
GIT binary patch
delta 7401
zcmV<F92VomOVCRccTYw}00961001S>01p5F002A~krXO_t9VaSFERiC0dxQW07U=*
z0ALXLk|$$rVQ>Hd0lWYJ0FwX!0m_%ooZe%0bRYl#9~b}t01E&B01f~E003riXKerg
zA0z+(20Q=&4HkA}d~|1Fb8r9v9}oZl00;m800;m801#(vd1e3r0#E<|8E*gpC6)vZ
zfg5OLVPpV*02{yn001%o001@)Qh!!xXk}pl02}lG001BW001NkNe5DBZFG1502~wm
z004CW007F#sR#sYZ)0Hq033_}003wJ003ytvekEOVR&!=037rH001BW001BX1rR=N
zVQpmq038$n00AQa00HLZOr2_QZ*z1203J91007kx0005-!K+U}aB^jE001RmlS}~{
z6nO4TD7^##Ktu+E004N}V_;#iWRrUVCV$GD@V|f|nmK`C0+7pyB&)!{2mmPv3c3IQ
z0C?Knk1+}YF%U(6c4HKAnL)7-71UzETL|J^J%|Ufu@rwJDk$Tawc5(s4@usK$1nj<
zqB%1Jd~)y>a*x>iTVvsroGPc9U}R#CeO45XIOc?NuDIdOEKg{A1NVm6n{vrDw}0-H
zcC(WmwX0D}Ei@>^<Rwpe$X%{-k@I(-9}-gYh0KLtu`K|d3<>|5H|=sUzW{jJjX4Q)
z9L1GgRejDqn(67$jHEeQGcC=?ntNK7Wl6Rrp_oX%4=@-TWbg^X7>5PpI2<-OfE@!1
zf#q1k%QN8!gvB^ZuIDVtgSYG>UVmpdA<F_uHgS#(*_V*8WTv(M_ee%2B-!risp_g<
zzyAOA>mSt|<q{l6GW1c7aS|uLAo7Hx`E1Fb@Eaw+o*>GZ?|g?oTHlbM>p8dx{&5cW
z8-N#|ryR*=3jpW97Rqr`YuRtuDA&r(0bGf;kO;U^AvNeFqMkHT-PB;|N`HBPR!c=q
zXd@ac8Ky4j6<yW*rHWBvzot!JZHmZp{Z1v|p~JN4XFq9*C^F$Z5&p%;@4ff&tKw(Y
z-Ff~+m&$SkAn7sY4k(0^l}OW1|Eq}(^AS&d;Jx?0^rcF{+Vgk^&^vc(H+z>n$_YTP
zK!DzWsSu6KT|(|4cPz0|WPjNbYnNSX@ONzLT6&6QZFnB}Bbq`aLT{b{V_B$KyOxk2
z+VDS_x|Vrn!wZH&OhQU9ferQ9nVA~+=Mu`^WnCZALnMV5guOe16$qLh3GgV>3vHSD
zxs4#xv6O`CBb18OiocxJ6G>6^2ir)A=xRy*@Ck}pqM}@9J<0TZqJLLPmDx|ZI*(LJ
zYH9XU47HLHOA=o=?63d5FYIh`vN@X@S6}9m{+{_g@LZbdyLkHQ%WUlLv70Z+^lc`Z
zpRVy~ny>x@j3obQ&acil=da7m+r0S-xHfN|msvNz(KyjL@ABzuUgyNLeoak^huH?;
zTzsC`@+1j1T00>gK7R~4My6_0Yx%zec?6(e#{NK}7?Ow|IZozCy5cA4Y8OAKyCc>L
zm$FFp?)O^DBW^aD)U0djzf@eF>pd#@G`UktavXnFXT4mKJCB>-+=GslqYE=_s*~|B
z`G-Odl@i5jAOtlLT40{CS%sz$F<~)GcCM_|0KgXuni>qvBY&_~0g$R1@DNySo6vN{
zNEU1)RkOrS_?@*APQTyDMxFkamV#b8p%+@haW?8sSP$PxoIXN(CheR0oaA7aYtq%#
zGpVbT6q01sQ1UbS$a13RL-EO#h+-NY`&@GhF%@(+nraTY>pKXH-rh55Up>}6fVaoh
z)#ajjRktom7JrC7GNL2O!>KfB$VSM5Y+PIr>_jKZMo%`Y9yiZ{Y)HbdtBH#J_%--1
z!Sk_=^aZ+mZ~c|8SugJ$AYU1vFVtW8NCWX(`v>46*ALVN25NNoIj^`*Rao~9pvA*A
zb7^h?(lSs=M4G%F0cojL(neZOdPy78h=)l1#Ox+Unt$X8n3<5qnb2((LRv@?i73Gh
z+o4i6o6M?7z#6e{8pKGnXLLSTiYMi|B;}OEJwdU>lc8e$y-?Ms2gt2AE1B%KdI_Dk
zs{Ru}-u{>%xC3-4Wg@+@x@bOK)|t}Naa~aKcv-dd<|D0+q8R7~6l3-Gl$5W14*AT@
z<!p9WPk;Yl-`e`G1QxH-fLjoVQ;|h_RfPkqz)fux=L4S#r*reT0d5iJ9ds=ioZnaJ
zZ1o640D}s~xuK0jRP$O9YK5YiucULdn}BKp_plu#51Cfe>Hz5{sHs}h%w8AX{os<J
zJb$7v^ubO>7!xLmz*D+qt|PD3ws_)EQJ7oSR)4ntadhd<OY-^Psw}%NyHfo|{hiG>
zZ0;h|vhqVi<nw|^C=7gMd!W@Fa$C<?&n@nWq<1bQOB`QWyVfX`4C`@g_bIq$_V!xX
z+oSg0wta_?AmZWwon)iOY>zUt7d0-!6*$L>xh|v4!LfXnhaCoY*#HKU9x91y5EeB=
z@_z+zE?k@gJ7)IN5^hFK_v?Og`1LnRQIE@||LmT{w{IJ7a=ARw5`FtZ>-*LQ>-&{d
z_op9Px%Ul=J9cbx^1^-Vie`DDeCLaW)z=M|i{+wOTt`1~(?hRY-zOcfFL<J|aAWma
z>xH-9ww@(RIh)Q4*{^}lP4ves$TfX~xqs>J$@|<EP)qCvzN(;a$+X^03uPlcedi5$
zg^H9Hbtx(3p_EhrL#9A=kts2#rp+pVh`4-t)Ke+%p#YVxgfv@wB~cR*)DX3hS*?gU
zT2334atT;~Im$Q(`dR=<8hxZ{maAnGELEk7{V+?=MhZ2gse(Oe14LUWf+r~A8-LIO
zhygiln2;GNg*4C{uwqryrob%DC*^d-tl)UFI&&LE6Rj@{t|B@ZIa8LaIEx8dSk;R_
zCbYxQQdKM3oaRAYMG5LaWw~PG(g1G>?g4^C2Bor*6!jS?rYm^^=7&mB^pd2WM9JZH
z77K{Z#tl+nz%0sIRDotS*w7ecUVoj|9SBM&tb^D<D%sXUDk27;xM1&@LKP)}cL`Z9
z0+TkZsNsyrZPK2vYD_PmW`lvqV0mq-R9GY%btp%YNF<1?tbt*INT|UyvI~O66}KU6
zR30V)9>iycq{h1EjWi-F+4D$R(C);BkY*b=yx|ojBBGVk@<C)AB-~9=R)0njL1QF1
zO=QR(8Pbb(y^W|LZT4LR>D!B)v|odvf;~+&kS{<1;4K7{Rl=pi1xOpn5~=hNdm|F~
zm5O+W=)i3kgE<ljFN&0bp<$E~N+}~e*fOl~lz0>h0E7yR=LygAj0y@sLob*nD2OCc
zLMZQSBFsT}>Y*T7MRfuQVSfU4$&^thNjxDk!3$d%lih%v0!EkMk|ohbM<wj02n43f
z<KZ1VlH;SYC=iA>qau|Agr-CRw7dXBNCNK>fOw>d5K(}cc|qYBuQ-qc$_u>U#32q@
zauOH=ctoOjTt1`>7)35*C9FA!EKxxKG8GEUQbA+_4;WyKgg}%Rk$(te3P}g1T@qlT
zJp7?BWFmW-c$5t<I27h^AX5kn^T>h(!#x5GyWFBA2)x`NmH-EulV=R6<OM;Y0!V|&
z4ndT75#XRhAc`!zn*_zdQ2ubkTsFG^iHz}35WfiEG75wd6fq^SHjozKSx8`#$owvf
z>&T0|;G)5<j+7IzQGbw^$Lpd*28RKR^2i=9%CZVbc^D2d2P%jx6C_x{b%gnvKwCi0
zwvM3KVNn%qKo&$vvE>ebBJj;Cu=;@9M-)X7G&hb%A{|U7?Ay8R(Uy*mmgu(puG=X!
zkK_v58V%d?xg$L|fqCSU&6n9yq#^?jc+$`i)>v=+qb``6$A8IjVx}kvCpA`z!6FjW
zV5igN4!C>{*ubKTik}A_DG53?&<7sX9hREs9k`exkJ<~fQ3<#cl!o5BK@Pb3OmzEY
z=J8Nj2HmrD0e+w&vLvu3H$%!$<CQ2bkOS62aEV0Xp&Q5r)NTj5W&-SsAT?PK1Zpz{
z#Dl~^7a42_n|}mbn_(;A0>fJ4JIGydQ%M4TJ%T7x9!K!7U@+X)PFqgAEfrW!Xh0oe
z_LhQ0f?bY`0w-|8cwUqcips1ZN&u21ho3>0!c&J6Oap@rF9J&D6hOmxl&V*BK?%wS
z>k51;4iSt4NZsBCHVGmM5O*_}2SIe8At0a_FcyRWeSZ+$@+bnHffRvng(o6zHAm9O
z1Ynl~J|;-A!wFM>e3&A`@_EoYD2kVoD69=20QNj?3i}+9O280m7IjBq_Y)W<G_(d9
z!9>7RV47q};T4&8Vn_ursN#Z+%Hd*8Ua$v&G(nV<9&gzOI%tCM%_I5zw&;+prupfX
zTz*>%D1Rz9J5LcfC**<}#=pTPpGy`SvAAZck|9W%ZkWuFDyEh)jglsj_iJ!9{u`Gi
z+XbXlA8oR)>A5Dwiy#M6xhTY8!#G!OaZbEBB-?Wp+i1{3!I^>a=X@OG@>N##8KSQ}
z*aktE+0COH07nMGEcVlKH^5456g@_WpSa?s1Aj}F9C+!9=Wf0Ax$jy(AjWs0cI&QP
zyXyB0UGvcDBUeVU$*}wU1=sIi{m?b+)ar+K4iE2q7}~P~$;At=XB(F8f9YRd+P`$i
z4oI7i5@W}X+B-Lq#W&q#9slD~4_z~~s=06Iym4dW^9xoDT~ogdaN4ceZF?7B8#n8m
z!hZ|=$uBeqWX!3#23yH)TJ9&LVkdGchRfv0KfiQf>Cyu)H43_<Hc_ihu+g(ESXgOn
zwB?8K;UadFl^}{;z^#HfcJab$wpoNY7LpM)=po5&+fkM(;5L&Lh{DicLPR3A5}-gz
zLR<)byp@Dh+uLG(SuN`jN2O`8ABLuLkbmNU*98X*2`2r`ic9wVd+pzDT)$H0Wl;7t
zcdy)c91Mqy%4@x|{va3zzU``^#aFlaWO@H<r~l#d^GD^*>+iU}Lq6}5my@lT8yBxU
zv|`1fm5cZ0eR53ld2=fcuQ<L>HY8bYQZ(BDY(KCu2d|pkH#*wqi)pdTZmm5vxPNVa
zVM9VL_w<xyeO-C}wrTz8gUGnVg&|Yx=BlVal|t5tHT&&cErc@AZ6TQOL*_At0iH3S
zP^(1^1ASVomLbLqwg<&zx?C;NM;A>zdFf?OPArntyKcQ;&#+svPK|7+IHW6UJ0$Op
zpVppzw)PykyKh-v-!gK?rkxW{Z-1V6^0J+qg4=U9-ZX!5dFM8=rm$`}+P7v+U-I&a
z+M(xg#1{~}kDFOH;SA92h5Z$Ub!!g$eIn)`q&Pe8ua=0Ph)IL^1EfTRCt7s9<%7S)
ze<54{QF<a>|51@<(=@|MdQ0st>|i@v^x9qYkac%!D_L1TNPlNNLN=nTPJd2)nsu`T
zWZ0ctA2*7!S~R~q)2!P2I;FOO90o`Q_ggogBY*Lo8r24&Hkrh$B>(2%u5j2r=Z12)
z)RjpzOVVF%N}M;h+r9bB$&+VJ-t{2w4h0nl7J{fi)bh&*1-BY-I35&SA+*RM`vr7D
zi-H9hPyXAzdOfW7_UiPE&VNA$yKCwTY!CgwK3jBxR0FnLW02WugTZ9HwWT>63i^F+
zmjhfl;gozfV4oP2Dyf8;(Ed#QB>CdCWAzax*WMrh*eZQ`9Iml551vy172{LCWk>1L
zAnSI}O2>=Ej(FH3e$4tN@C;0tKD@zvCky+L*k?g1f=%b&Y>!t{{eQLheK49_+@xBM
zIpv=#4u|q{*-8J=DO<<YChJwFOz(mBOG3W-J56fXOSd<vYLgKd2a(C+0A8OWUsRmq
ze$_e-Z=e$f=)^0a6J9RCod*^KbYgsTPBP-N?JsYeC~BK40x573tpFO{ep2ox5*iXP
z3}8y^gC?Nfv~31h6@P4jw6xMs0tHCwfRlzLqN~69)QyW5-}qFcuztVg`OW>C4=sUW
z^YdF4tsP5*1Uf*4PsFwCNEY0BKNuEqO@BDXl3{<;ll;utu~;xCj9PLCP&|L?`OSM4
z_b$z=v4{q~lf@Qw`xDW4+Rz!g`9)*a#qmfa?u+=E6P#^3W`B5Z<HorQxJl%F>$+7-
z`t%^4$03J0n#N!oA0ujB0=+OQ{d^@=#{9pHA=^?L4_4E*rMRLX0Z2;N00CY}aatC^
zkmjE`1cemotOcgq^J{z8Y;^`gp@1m7Nq4--d)iw<R?ZmS(qCLV*c~pEg{DGhx2w&i
zc!Q4m#$cN_=6~wy&bU3LA}o57Bc!Y9+y}?T#xy<9R!I~VWynAEuFY><I~MQlY}b4|
z%dT2|!RicC^se)}c6F^-*b$jCZ%Cgsuk55^AP{x6MIy_bsz+`MF4rP)S40K7*>O#Y
zcpZM1KLq$ktdpS9tK@iBbG+KNsF0p#%Wiz?Y0&QvIDZEh;)b|gD7&lH%uRTmwk_d`
zp`e|DR?1q#wt|9dp%kWZnq)vWtz#Z187BCb3P{W}Obu*H2~$5)lOTO$2ITP+GT$6A
zB_o}qUIN1m$cMc&MgTxEwNQ*gsy{%;m+#oLX{0x|@X6eQ1?v}tg019V@8i9EfAJPy
zx-?RB=zq#BrGCkG;ImAG#HGJ<z-JUkde1gLQ}z0I@6}h!yw_K{IvVpvv)QOO7M{d*
z=hfFryicCpPX4&*j!k-X`N(mYZ9y)Y_h@4<iR0!{zwEv3Hk`S1Gfq*JyiTupOQ{zo
zIdrz!dS?gV3TCoVUo1LVJUfT8xZ~^`!P)J09DlKn{SU+uVJ;4FL~ApoUg+L}lI<Og
zv$g~jlWN?wKVzp`Tdh-(@#gv;oc{T9NExyRh;|if{dTBW94ZpMc|2mBYHp^AvpGn*
zv%Qd|NxXHYh}~S{jBqA?F}Nbv&wT>V2!|K+RrA@TDs#d|gBe@r(S+fGqph&dq*D#0
zM}Kc&LbZso3DhO<wV{S-_(<eKP7E(UvUOtXk>$g_XiA;P%(EU*lWJ_voc=jAHJM4O
zP?>1Ww6>}q&Ha%8seWzj!0MfkJ+^cC0lhhxj{4?hejL<;T?1WRaVX&z@9J8wwzg*4
zJld?YKmyTjGy38nq`K&f6+&k-7l0_xkbh#t_NeEO`#ZA1v>v(7yw4;*vmT)*&n4$B
zvatty?>A?B|A+In!hBKn?0ik<2-7fOi@=6~EkRFO+b7Nq4wJ9GYR>#<#M=HR)6VL*
z_v}{Kv-{~QXMH5>S+5J+tw3?l1`__1;7|AoK2YCE`mK}X8uEmdv`(@XYYlmV#DA^V
zGI=uBx|9Bg^%_yEKajb-$dixr0Z%_<`p5WRgUfO`uEd%48FOkd+27aOQ!N+s-CdcE
zbUXUyNLYmgqv4w==L5xta5w;T2-D@vyEO9-A^}r?S%_VFNuy-b@8sC&(-rF^z0od+
zVi(&QFBjYk*IRGBMSeV8NzIfGJb!TSy>Gnr7QN&&uy&I4SEfsA%|{x@SMELZ!08{n
zb^5Bt$hT%n^7-is$VB8SQ`fQM)Z$!R1f<Z*jdANZ|Db2>lHqxkOd=X|i=1fZIE~$a
zo*__dgzfexgX*lVYAI#lr%V+;_Lw0}N9ROJ_VFtCC^WVv^i%~YZGdyegMU^H3;@wm
z!8s#cp>|bGg@P$f@5<F5*HVG5kvaJ|>0i3`(o}ZL>}tPQepKGSu0q-$kS}iUGRG>>
ztxH!`Di_{j-M(~3M=GCBb?jKWj#{DiP&}851G0K^C>4a)Tq2eyyR>#Sk;^6G`CAU=
zoj!9cvg!7<d#vBzz9}+h`hT4HgV7sC4z9Y^wP^Js*WOPaTz1O--gxWO-RyD}2Kn@X
zP3!G);x}9pY@A5rL9QybF+961;n^Wn#p#pJnXf9qdc(;e2tDfbBqM`rrv0K{xFTMk
z*wmBH4Cb6ZUJ@ie?@XmSy9Cv*4i85*#PlU?<I9%xE?nEe7>r0n)qkORg=WVun8XXz
z=ZgzI9&_uwud9EsT=1&d&X$Q-?BIc$u3oX&roA|IE&CROKoa6R`Gr^$k9l1?+Fc!O
zpI{rc8B+&=Qb|MWmxCyYbe=wPWb2l@$@kXZu<_{n^+!)0U4I?~IyG;s!&~FY<3~;(
zx%Y~#&z@)ZtUtPO_kVh!=Ix02YNTP0?e7{A?59ESyklsOM}`+J80cx18QNn(#qVH{
zOU?wEm|3cgU=kw~>?>8y2|w}UYzaE-PqYcrFanLQv+TsAH8{!ksk*LO*BzU*&gg1=
zgQ{C+CXZRyVJm%9)hBhewvXJVt8dpg@EaP>+p6A!7uyFT2Y(wc2#=+%l5b-DZ2+>a
zgXXvE_mid8vm{KGz6~I@og~|*4h!wf2fRigMsvK_67|X=W%y0n<}lG<(f;}b0hb@0
z3=+>yPg?RM;0mj{FXE}4@I-u2;-_7kAYZDv{<y!z4?lVl{MBD4?^|*sCQMI#oxRGM
zz=E}MU0fM$WPd4VBqBjKk2z8snVt>5<rTF+)gb94_+Sl#bmE~vhJjK9!f3;}CD}7!
zK0ee{-#2F@!G}q;e1EwXN?Namhr-sY@o>PP`wZ(DqPU%M&<!Dpb6ksSTKt*LwL{s=
z(3&g_EL&FJk}c9eHe3Jix$QBcOA4im^mWDKQLHZ_uzzOj<Sw9n575rQ?#eGXz?9;C
zD)}KcoHi;Leu81JbNM(X`3Cv!`1toW?4FLIcW;P|U3i>u$1ggcHCZ<jZ|SA0wtRW>
z{LP2QuX?Gpxbt%t>^pvZ-v#%iZ9isA-3NYbE;pCEh}!|{vt?r00?i5QlZxSYQ3&`T
zZcadWM}JK_GKOvJB{7ozn5Y`!IF=&=L@Svkcr;1XRCpvqm-HObA@DN+%!Itc{+`g-
zXOc*-<7Mii?fC^_toFY#!Lw+1<o-{EC1=p(l6|vc>n(2z{){`kF{s6iRlL5@V5=7z
z7hG&C#1}rs2No_gF1+8z_oh2!=is_^gI%5RUw_FO?_%CSR0zNFT9B8c(G@q1U3Wk4
z3TR>ePeW{HCgLRH+3uJzgZN^DUj?&B%jK9okJcSLe@?T=uiLjS8flz;u}9bj@RX?E
z?Wk+XSZlO7?C0%sHviczJA1QgDsENSrFup8)0f|fg{`a>vtGqa5A!|e;d+dmvbyQ}
z?|-~cKlP^N(qb{KKjdfK2yt@kFv*V9?jc`)v%U#@6gPDftRbF5#K23>gB)-L`lzwd
z1$~vg5!ZYY`lx{3$Zb%uG3{Z0<sB(*&<lNkrvC6=uix+8>+$<NA5&xP^@G?zcVo++
zsngvbj<EKBe4Um2t$z4H+c_mC+h=FUJAbpI6^v6bLRrG8gH0oY{e4A<PujwvAZ{cX
zlsW;X<s-?v@G))d{|QH~w_Yam@WjS?xp8iD?tASocYh6Dub+9rj)9LhfKmHvAl&}}
zU{ff+0C?JCU}Rum0ODHfw}0dLZN4&aGk*YzFkA_qI}=JT`Tys?4ci2;I0pk0NCp%D
zmAekmlkOWF1`z<6s0OH$5FBa_4l*0;UIqa6NG?(U005JO97iGA4NMJ$4ZscV4tNg;
z4`vUd5Eu|r5U>#F5r`4W5=auuv+NvH0e>L8H+MTHOb7x+Dgvtb2of@WfFB16nvAL1
z>SW*ayi}y0`TR&Z{WtObNCgFr)JScb3^7cL5!#G0#yAs9GQ~7A%reJ33oNq4GApdI
z#yT5p(qW5jcGzW)eGWL}h+|GT<&1MKxNJVX3<gE-x%K|`+Aqse*78c;$UE7S4@t8B
z%PPx|U3n|-rTNNyuB7?w|Ew>Y%jWW5?osLw?+^Ed`@(y|Ug2F~zqpq64E>=$^oRb?
bANoUot-sb+>#Mt8SyE}E000291RuZ#;v(eo

delta 7412
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

diff --git a/frontend/components/buttons/Rocker/Rocker.jsx b/frontend/components/buttons/Rocker/Rocker.jsx
new file mode 100644
index 000000000..e0de2a5dc
--- /dev/null
+++ b/frontend/components/buttons/Rocker/Rocker.jsx
@@ -0,0 +1,51 @@
+import React, { Component, PropTypes } from 'react';
+import { noop } from 'lodash';
+import classnames from 'classnames';
+
+class Rocker extends Component {
+
+  static propTypes = {
+    className: PropTypes.string,
+    handleChange: PropTypes.func,
+    name: PropTypes.string,
+    options: PropTypes.shape({
+      aText: PropTypes.string,
+      aIcon: PropTypes.string,
+      bText: PropTypes.string,
+      bIcon: PropTypes.string,
+    }),
+    value: PropTypes.string,
+  };
+
+  static defaultProps = {
+    handleChange: noop,
+  };
+
+  render () {
+    const { className, handleChange, name, options, value } = this.props;
+    const { aText, aIcon, bText, bIcon } = options;
+    const baseClass = 'kolide-rocker';
+
+    const rockerClasses = classnames(baseClass, className);
+
+    return (
+      <div className={rockerClasses}>
+        <label className={`${baseClass}__label`} htmlFor={name}>
+          <input className={`${baseClass}__checkbox`} type="checkbox" value={value} name={name} id={name} onChange={handleChange} />
+          <span className={`${baseClass}__switch ${baseClass}__switch--opt-b`}>
+            <span className={`${baseClass}__text`}>
+              <i className={`kolidecon kolidecon-${bIcon}`} /> {bText}
+            </span>
+          </span>
+          <span className={`${baseClass}__switch ${baseClass}__switch--opt-a`}>
+            <span className={`${baseClass}__text`}>
+              <i className={`kolidecon kolidecon-${aIcon}`} /> {aText}
+            </span>
+          </span>
+        </label>
+      </div>
+    );
+  }
+}
+
+export default Rocker;
diff --git a/frontend/components/buttons/Rocker/_styles.scss b/frontend/components/buttons/Rocker/_styles.scss
new file mode 100644
index 000000000..fedb38ede
--- /dev/null
+++ b/frontend/components/buttons/Rocker/_styles.scss
@@ -0,0 +1,132 @@
+.kolide-rocker {
+  &__label {
+    position: relative;
+    cursor: pointer;
+    width: 180px;
+    height: 36px;
+    border-radius: 2px;
+    background-color: #9fa5ab;
+    display: block;
+    padding: 0 2px;
+    box-shadow: inset 0 -3px 3px #aab3bd;
+  }
+
+  &__checkbox {
+    display: none;
+
+    &:checked ~ .kolide-rocker__switch--opt-b {
+      span {
+        @include transform(skewX(0) rotateZ(0));
+        top: 3px;
+      }
+
+      &::after {
+        @include transform(skewX(0) rotateZ(0) translate(0, 0));
+        left: 0;
+        width: 90px;
+        height: 35px;
+        bottom: 3px;
+      }
+    }
+
+    &:checked ~ .kolide-rocker__switch--opt-a {
+      span {
+        @include transform(skewX(-6deg) rotateZ(-6deg));
+        top: -6px;
+      }
+
+      &::after {
+        @include transform(skewX(-6deg) rotateZ(-6deg) translate(-1px, -3px));
+        right: -1px;
+        width: 90px;
+        height: 35px;
+        bottom: 5px;
+      }
+    }
+  }
+
+  &__switch {
+    @include user-select(none);
+    @include position(absolute, auto auto auto auto);
+    font-family: 'Oxygen', $helvetica;
+    font-weight: 600;
+    font-style: normal;
+    box-sizing: border-box;
+    text-transform: uppercase;
+    display: block;
+    width: 90px;
+    height: 35px;
+
+    &::after {
+      @include transition(transform 50ms ease-in-out, bottom 50ms ease-in-out);
+      bottom: 3px;
+      border-radius: 2px;
+      content: attr(data-content);
+      width: 90px;
+      height: 33px;
+      position: absolute;
+      box-sizing: border-box;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    span {
+      @include transition(transform 50ms ease-in-out, top 50ms ease-in-out);
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      font-size: 15px;
+      color: #fff;
+      letter-spacing: 0.6px;
+      display: block;
+      text-align: center;
+      width: 100%;
+
+      .kolidecon {
+        margin-right: 5px;
+      }
+    }
+
+    &--opt-b {
+      @include linear-gradient(-180deg, #eaedfb 81%, #aab3bd 100%);
+      left: 2px;
+
+      span {
+        @include transform(skewX(6deg) rotateZ(6deg));
+        color: #b8c2e3;
+        transform-origin: left top;
+        top: -6px;
+      }
+
+      &::after {
+        @include transform(skewX(6deg) rotateZ(6deg) translate(-1px, -3px));
+        background-color: #fff;
+        border: solid 1px #d4d8df;
+        border-radius: 2px 1px 1px 2px;
+        left: 1px;
+        bottom: 5px;
+      }
+    }
+
+    &--opt-a {
+      @include linear-gradient(-180deg, #9651ca 81%, #6e3c93 100%);
+      right: 2px;
+
+      span {
+        transform-origin: right top;
+        top: 4px;
+      }
+
+      &::after {
+        background-color: #ae6ddf;
+        border: solid 1px #9651ca;
+        border-radius: 1px 2px 2px 1px;
+        right: 0;
+        bottom: 3px;
+      }
+    }
+  }
+}
diff --git a/frontend/components/buttons/Rocker/index.js b/frontend/components/buttons/Rocker/index.js
new file mode 100644
index 000000000..c19ce0e5f
--- /dev/null
+++ b/frontend/components/buttons/Rocker/index.js
@@ -0,0 +1 @@
+export default from './Rocker';
diff --git a/frontend/pages/HomePage/HomePage.jsx b/frontend/pages/HomePage/HomePage.jsx
index c5ac14b49..5da65bf56 100644
--- a/frontend/pages/HomePage/HomePage.jsx
+++ b/frontend/pages/HomePage/HomePage.jsx
@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router';
 
 import Avatar from '../../components/Avatar';
+import Rocker from '../../components/buttons/Rocker';
 import paths from '../../router/paths';
 import userInterface from '../../interfaces/user';
 
@@ -15,12 +16,19 @@ export class HomePage extends Component {
     const { user } = this.props;
     const { LOGOUT } = paths;
     const baseClass = 'home-page';
+    const rockerOpts = {
+      aText: 'List',
+      aIcon: 'list-select',
+      bText: 'Grid',
+      bIcon: 'grid-select',
+    };
 
     return (
       <div className={baseClass}>
         {user && <Avatar size="small" className={`${baseClass}__avatar`} user={user} />}
         <span>You are successfully logged in! </span>
         {user && <Link to={LOGOUT}>Logout</Link>}
+        <Rocker name="view-type" value="grid" options={rockerOpts} />
       </div>
     );
   }
diff --git a/frontend/styles/global/_global.scss b/frontend/styles/global/_global.scss
index f3a16b56b..03606a975 100644
--- a/frontend/styles/global/_global.scss
+++ b/frontend/styles/global/_global.scss
@@ -1,6 +1,9 @@
 html {
   position: relative;
   min-height: 100%;
+  // Because iOS hates us we must fight to the death!
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  // End Apple War
 }
 
 body {
diff --git a/frontend/styles/global/_icons.scss b/frontend/styles/global/_icons.scss
index 2649fe6fd..4110086fe 100644
--- a/frontend/styles/global/_icons.scss
+++ b/frontend/styles/global/_icons.scss
@@ -1,228 +1,236 @@
-[class^="kolidecon-"],
-[class*=" kolidecon-"],
+[class^='kolidecon-'],
+[class*=' kolidecon-'],
 .kolidecon {
-    display: inline-block;
-    font: normal normal normal 14px/1 'kolidecons';
-    font-size: inherit;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  display: inline-block;
+  font: normal normal normal 14px/1 'kolidecons';
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
- .kolidecon-lg {
-    font-size: 1.33333333em;
-    line-height: 0.75em;
-    vertical-align: -15%;
+.kolidecon-lg {
+  font-size: 1.33333333em;
+  line-height: 0.75em;
+  vertical-align: -15%;
 }
 
 .kolidecon-2x {
-    font-size: 2em;
+  font-size: 2em;
 }
 
 .kolidecon-3x {
-    font-size: 3em;
+  font-size: 3em;
 }
 
 .kolidecon-4x {
-    font-size: 4em;
+  font-size: 4em;
 }
 
 .kolidecon-5x {
-    font-size: 5em;
+  font-size: 5em;
 }
 
-  .kolidecon-fw {
-    width: 1.28571429em;
-    text-align: center;
+.kolidecon-fw {
+  width: 1.28571429em;
+  text-align: center;
 }
 
-       .kolidecon-kolide-logo-flat:before {
-    content: '\f000';
+.kolidecon-kolide-logo-flat:before {
+  content: '\f000';
 }
 
- .kolidecon-chevrondown:before {
-    content: '\f004';
+.kolidecon-chevrondown:before {
+  content: '\f004';
 }
 
- .kolidecon-chevronleft:before {
-    content: '\f006';
+.kolidecon-chevronleft:before {
+  content: '\f006';
 }
 
- .kolidecon-chevronright:before {
-    content: '\f008';
+.kolidecon-chevronright:before {
+  content: '\f008';
 }
 
- .kolidecon-chevronup:before {
-    content: '\f00a';
+.kolidecon-chevronup:before {
+  content: '\f00a';
 }
 
- .kolidecon-cpu:before {
-    content: '\f00c';
+.kolidecon-cpu:before {
+  content: '\f00c';
 }
 
- .kolidecon-downcarat:before {
-    content: '\f00d';
+.kolidecon-downcarat:before {
+  content: '\f00d';
 }
 
- .kolidecon-filter:before {
-    content: '\f00f';
+.kolidecon-filter:before {
+  content: '\f00f';
 }
 
- .kolidecon-mac:before {
-    content: '\f012';
+.kolidecon-mac:before {
+  content: '\f012';
 }
 
- .kolidecon-memory:before {
-    content: '\f013';
+.kolidecon-memory:before {
+  content: '\f013';
 }
 
- .kolidecon-penciledit:before {
-    content: '\f015';
+.kolidecon-penciledit:before {
+  content: '\f015';
 }
 
- .kolidecon-storage:before {
-    content: '\f019';
+.kolidecon-storage:before {
+  content: '\f019';
 }
 
- .kolidecon-upcarat:before {
-    content: '\f01b';
+.kolidecon-upcarat:before {
+  content: '\f01b';
 }
 
- .kolidecon-uptime:before {
-    content: '\f01c';
+.kolidecon-uptime:before {
+  content: '\f01c';
 }
 
- .kolidecon-world:before {
-    content: '\f01d';
+.kolidecon-world:before {
+  content: '\f01d';
 }
 
- .kolidecon-osquery:before {
-    content: '\f021';
+.kolidecon-osquery:before {
+  content: '\f021';
 }
 
- .kolidecon-join:before {
-    content: '\f022';
+.kolidecon-join:before {
+  content: '\f022';
 }
 
- .kolidecon-add-button:before {
-    content: '\f029';
+.kolidecon-add-button:before {
+  content: '\f029';
 }
 
- .kolidecon-username:before {
-    content: '\f02a';
+.kolidecon-username:before {
+  content: '\f02a';
 }
 
- .kolidecon-password:before {
-    content: '\f02b';
+.kolidecon-password:before {
+  content: '\f02b';
 }
 
- .kolidecon-email:before {
-    content: '\f02c';
+.kolidecon-email:before {
+  content: '\f02c';
 }
 
- .kolidecon-query:before {
-    content: '\f02d';
+.kolidecon-query:before {
+  content: '\f02d';
 }
 
- .kolidecon-hosts:before {
-    content: '\f02e';
+.kolidecon-hosts:before {
+  content: '\f02e';
 }
 
- .kolidecon-packs:before {
-    content: '\f02f';
+.kolidecon-packs:before {
+  content: '\f02f';
 }
 
- .kolidecon-help:before {
-    content: '\f030';
+.kolidecon-help:before {
+  content: '\f030';
 }
 
- .kolidecon-admin:before {
-    content: '\f031';
+.kolidecon-admin:before {
+  content: '\f031';
 }
 
- .kolidecon-config:before {
-    content: '\f032';
+.kolidecon-config:before {
+  content: '\f032';
 }
 
- .kolidecon-label:before {
-    content: '\f033';
+.kolidecon-mia:before {
+  content: '\f034';
 }
 
- .kolidecon-mia:before {
-    content: '\f034';
+.kolidecon-success-check:before {
+  content: '\f035';
 }
 
- .kolidecon-success-check:before {
-    content: '\f035';
+.kolidecon-offline:before {
+  content: '\f036';
 }
 
- .kolidecon-offline:before {
-    content: '\f036';
+.kolidecon-windows:before {
+  content: '\f037';
 }
 
- .kolidecon-windows:before {
-    content: '\f037';
+.kolidecon-centos:before {
+  content: '\f038';
 }
 
- .kolidecon-centos:before {
-    content: '\f038';
+.kolidecon-ubuntu:before {
+  content: '\f039';
 }
 
- .kolidecon-ubuntu:before {
-    content: '\f039';
+.kolidecon-apple:before {
+  content: '\f03a';
 }
 
- .kolidecon-apple:before {
-    content: '\f03a';
+.kolidecon-search:before {
+  content: '\f03b';
 }
 
- .kolidecon-search:before {
-    content: '\f03b';
+.kolidecon-all-hosts:before {
+  content: '\f03c';
 }
 
- .kolidecon-all-hosts:before {
-    content: '\f03c';
+.kolidecon-single-host:before {
+  content: '\f03d';
 }
 
- .kolidecon-single-host:before {
-    content: '\f03d';
+.kolidecon-alerts:before {
+  content: '\f03e';
 }
 
- .kolidecon-alerts:before {
-    content: '\f03e';
+.kolidecon-logout:before {
+  content: '\f03f';
 }
 
- .kolidecon-logout:before {
-    content: '\f03f';
+.kolidecon-user-settings:before {
+  content: '\f040';
 }
 
- .kolidecon-user-settings:before {
-    content: '\f040';
+.kolidecon-clipboard:before {
+  content: '\f043';
 }
 
- .kolidecon-clipboard:before {
-    content: '\f043';
+.kolidecon-list-select:before {
+  content: '\f044';
+}
+
+.kolidecon-grid-select:before {
+  content: '\f045';
+}
+
+.kolidecon-label:before {
+  content: '\f033';
 }
 
 
 .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    border: 0
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0
 }
 
 .sr-only-focusable:active,
 .sr-only-focusable:focus {
-    position: static;
-    width: auto;
-    height: auto;
-    margin: 0;
-    overflow: visible;
-    clip: auto
+  position: static;
+  width: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  clip: auto
 }
 
diff --git a/frontend/templates/react.tmpl b/frontend/templates/react.tmpl
index 84252d346..77716a9ee 100644
--- a/frontend/templates/react.tmpl
+++ b/frontend/templates/react.tmpl
@@ -8,5 +8,8 @@
   <body>
     <div id="app"></div>
     <script async defer src="/assets/bundle.js" onload="this.parentElement.removeChild(this)"></script>
+    <!-- Because iOS hates interactive stuff, we have to kill it with fire -->
+    <script>document.addEventListener("touchstart", function() {},false);</script>
+    <!-- End Apple Hate -->
   </body>
 </html>