From 26ba70f152088d6998d5f1f7c35a44ef6dd752b4 Mon Sep 17 00:00:00 2001 From: Artyom Kravchenko Date: Sat, 15 Apr 2017 21:47:38 +0300 Subject: [PATCH] Create 'Import your contacts' bio action Improve the layout of bio actions --- public/images/services/gmail.png | Bin 0 -> 4924 bytes public/images/services/yahoo.png | Bin 0 -> 6824 bytes src/components/bio/actions/import-contacts.js | 131 ++++++++++++++++++ src/components/bio/actions/index.js | 2 +- src/less/blocks/bio.less | 16 +-- src/less/blocks/font.less | 6 + src/less/blocks/service-card.less | 26 ++++ src/less/blocks/sidebar-modal.less | 36 +++++ src/less/styles.less | 1 + 9 files changed, 206 insertions(+), 12 deletions(-) create mode 100644 public/images/services/gmail.png create mode 100644 public/images/services/yahoo.png create mode 100644 src/components/bio/actions/import-contacts.js create mode 100644 src/less/blocks/service-card.less diff --git a/public/images/services/gmail.png b/public/images/services/gmail.png new file mode 100644 index 0000000000000000000000000000000000000000..63fcb6344e1401bf0b48528a0576d367e994f18e GIT binary patch literal 4924 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 literal 0 HcmV?d00001 diff --git a/public/images/services/yahoo.png b/public/images/services/yahoo.png new file mode 100644 index 0000000000000000000000000000000000000000..8105ca177f38b14f6dc789ccaa83e1568a5c2e3b GIT binary patch literal 6824 zcmcJU)mIb@wDxBxDS@FoX6O>6y9O9q-~}mR2mt}90cjYK7`nT=OIm6ukp=;g?vPfH zj?eG>0q5>q?7i38`{r5Cv-Z_5;+3}Qb9`ES008h@4F=WwHI+A|4cqF8x;g+)s8MuTPj=R28Ipl<|_%!K8=`+cmP2A8ZI!2ZSoIA^QqQcNKTXjzz_dF zIMb`PfgGEQNoR0)iKFLa3^4vJfNLN2;RlfB_<>dpw1WI18%wtZ=CQeCx1WsjQPr-@ z6AP|uqpiLS+l*Rid{aVG{8@t}sZd190E`qu!-|*W4Qs3a0wYRlN;iRLv*me1QD0IrUdL?Jb8 zjtrfb;l&k^t^4dg;oDk?J@K82#rqOJCdb==ULYVZe^)QA=_h4-nWHFXCo*f0Oa>Z+FoKn+O|ZZ zMM9@a2x^O(Spm>E>d;zfnaN<=K_jBo435Dm!u3_$qzQIb53o#lDWT|L7HLPuivP59 z*x+Ga;KwM05x*&?IUJPa55hy_ev8+JF#fa>>;2Czc<@~q!i3?7%t3d?A#~c7^DxjX zDINFWZh3!YnpiFYB2Gdcn*PRHT=9?iFeWtQ>g#7sQds~QI!pyDZFU-p!Y_alx+L#!`-^%dZ{oH*FS4GqqBBOW+)j@?D5&L4Yf_1xKOd>OVI2eW5{Bw zCoPvsFT7_8m0gz7&{t$b4V^uAy&<20h*CH%uEc;NwIg zt=e_wc_+lDBsFZ3m`4Hv7a3@atxphQh>w0zIb8)_%LI=2GX2xJ-n!ERI(QEG4^phn`{z(qYuvvfFRANiZtGgh}lKrYjSp<|B!DB3%TQoVYpex)=7;yet~as9wS3ccUN&fUD`&?&()r zNT!Z6>**W{CXS&~r@@(fXm7};!$Wb?LqP13PC>m&UJOHSW(8~V#H$69D-lv2B+RB4 z%)L{-`fO)c2TOvh9+HBC%iJ-lL0AHrTIG%v6tO&B0e@+ToMZ{*4lGi(odk$j76G%^=qz}7rgDVj*CCLb2Y&A^T(Z^cwF#{XX8!7 zQsVVQ7*(q9c1@zLj~u*`2#Xnmo(Ag42o8hVqVYyNr=pP!scaJ`sB zMXLbpNB#@XfXg;HEmrTUW%o{^su`?!140?Hr2Lj?cH9IEvb!lM)o=IVrz<2DZiDF{ z<_iB0kw+$7I9t0dX!uOg9vXzz`8e?0$QZ_@BUM}-ohjFcA6>rFPi~&iwJvH#O@Ax) z9iNq`{u9*&4(Xc@F=V)VA`hZ6|Q=;SL#EpbukPk1FV; z31NL)BY|Sby`{%-q5nRZ$_ce{Kafs>OrGp-d66{R_(?1QWiRqT$T+6+{_AR({Fd(yFv^Di<14*G?0VI%l&x_Ne6IOK+YZUcI{sino!6> z>|PU*`1dAKA0r=#1HW#pJth*xNf5 zZOPXL0d>#c)Z=CQ1v8LC?)KSt82{T32H&b)A-M1*tAx zMV#nPENVRMzQ~R`Zw+u39%bM;m}g$6ZG7wD(;INfg|IC+%vqha`K|#)#!;OwVF527 zxbbugSP_uVUJz%gg4z32C_wM=UGjZQ&`_hdLfbl`V`in@jIq0DJhq*{w#d>~CYy}G zRlB8s)i6y&#uV2{kGN-!i#@{oF|d9psyo*F+Bbk&d{bevcJ)t_hlw71CuBR-npb4DK14eK}CA!iO&fprh;FO}&<9sXYHNmXKJw|9;ON|K;Qc zi@^|8*ucjld7U zgRGJlCul8kTKZ!c$B{)fTPU_y8J-bweQEQ+D$!Ec)Qs@aZmV|J2ChS!{ArNg&A z@KF?cKloSRU`PZq00H9lTv&q9$~O~CU}Uz5I}^uFYto;x)N{=e66EXe6B{LlEJ*|# z=y;mcX0_$^GzFszaS6?yu`ny$fr%V%d$m`a8*^xKJfs zCy8@edha4{j;tDFqqB4{zxgS1Xxc+|D2_c9n@v{F{X?WTKf6(M0_sOnmf*3qe!<+xY`GD=>e?Z6$btwjw9(^af1`UY#^Sjna z+3dNIqhtPW6MYLY5@6~`P6u`CE3$k~w$l1YeO)VOomcX696p&+*!0u1xzo^SIwD36Ucz`0QIQD58i@FuAIQ760b6i(1T%B){z=bLB(a@+T?E zl&n@OJhXM!3>?K$KHeiH==XvD=_k@COon>Q%qb(R*8#oxbce$};gZz#dg$<3sI_S4 zXet5OZp_fzNpr%xwl5bAk3>|A*PGUC5+8QZPW4JuA|>6TAUyY2GdA3OH#UvWeY#Y(ebwV>l9HmbntNQeS)1DPic9Ne!AC%Ey~?~*MF`aqswY< z->&kGKTamOP8V5(4T}o*)Sut1T<3+xMLpmYJx}V!xiwlO7B_Hqh6@_Tdrr0CSI8>I z+S~S{8EqXTORAHT=R&PvqIFh|l-ZM07s(a6r z4qvq48GAorjNN^odc-{$m3#bK_Io~j?W<8=zF0rChM3G}NN|)}Qa!+U2lvJWiX3WP zuO;9aHWkF0f(X_agMk88PRz8Zk{=T((RI>ofHDhdi_6nDQhu&izt$-92bMkjAE>Az zKFDEzpbhe0?f?0tuFAG!KuIV`5dGUjh+PBehyrBVyrnbDbWiJ!#69a$|6^E9j8-!K z+V-*2^ZjpguS%}?ebEMZ_7`soa`4>#;iEtH*Stk;zX=PbK!Tv_35~Y<8;#G|U8?~P z*S$f@ak(o7&uevsqa__MHh;0h89~ftcwcZvHQ3Ncd`5Q)|NKb>9I>|!dRm734dqb$ z>>@8B$7)a#H78sI6zlX68Ea-=Kq#)p|5VB8OSqC$yCFsg6mJI5z3ne=?qy!kvlt=+ zy7MpEV7yXz4ndlgy_!)Paj6w{86-vKq{b<#=5};nw|g~A2%MzbW`l zZ&i!c8|7oU$hIf|2JL{izakjq%#=)t8zyUzW$UOeL#4Or_nt5#=q^W%z_p6W<|j44uL3dpvqGXtMKn8VMo=M=9S z{(bfy1M9n)4B<0{z#dEU&<<;&Bh^5eaVE$bLs4M=gmz>^twje9>j zy2`Dn9w4Gk;B?`%A&<2IhZZN05NDUnmIQ=3JW*99^ypEBxK?LFr+^(yz3bnM8@+`= zRd&3uP=G8s_ZN#6QUanG2|$-~(Lwr(a>$GLKa&$)vSjjL0s&`V2>Y1R@GadW@^%Gy z`pFq=kkL@_6#=+-lxpv0$EVcZKZD>y(W#z1P@J8Hqwr zC#G^S*?e6=A)jwG1+1$bo-1bl53^G;Y!GD>El}~ z!3z2xlS`5PE>vA=EeH0ra=^!;cL6Whc3e0w=)m%PDcg+Px(8zFi)LNG9K)x>n%^B& zEiqx4VKJtN8@_-0sVH?{}kB*10bbF%;UWJksGa+J8ce?}vt@A8LjFS;LjS)F7O(9+I z2pd4>y_+k_7|cF(ghRjFo^@L}x0JZzt4^@%zhTo56Wx0UaxireaMrF$-yJXW$2mO# zH3reda_Nwlq~<-mo8j?(N|UNgwW!e!A8xeEcPW!$|8}cf zMn2`$yJ+T16`%gx*dlMSJjGP_kU1!*Opn)hKT3RO*?1En0HK#0qFgUAvr?$&=(G*5 z`GKf9IHxshu*nEZ%Ea;aM>q5ODR>jp4NHWXtd> zu}{aUL1a$Px#2#9$3=MwL~}dP9i)gn?JN8-M2eIJEl)Ji-f z1-pGqQHn_RBc%-#`u5SUgy}y|3dcb#I0;_23f>E?A8v>#$uew(9xBxjUd)CzKbwPC zUE$@s6=du7&gf~cFZ#B54PnVajurE!PG5F4itjnXz!~bsx?17Erjbo)_jzw^_)hA+ zHvSh1AO!dNB)j_4^2C9J#~qL*tI@fa{jOeDF~2xB?E4PNDg2(Sw+}qJ){@+>uX_$* zH>RWQyMJ5Q<`bR8q5!EdZpp24SF8A^j`fb|Qwj=#Hj+ve08RqZLbtC0QFeBofJ{v{w2yDd_@a+6JM9u5zS^mzo&!!Pf8eJHaN3c5KaT+Eg zOZ3!IOIw%N-n^4a1?$L5)>EiVDwU-u_oWuR?cQ3QGHSMC7!TGo!Q|&8GUrS^H9Ft} zzasA;jAY_Gy3(JYh>D-rAlmvlbgA+2S$4D`5!#GE|9y<>#dQu8lOY!>AIZWLhH1mk zGMLuPAVp=^y7J`>=D6CpkjcPq3QT~P5_yI;VWkGq8400&-{u53PL}`ZQcVGHk$`OV z+@oA^83ab&!i;T-5jjUy)!NVt#v$zf0}ZUb28~Z%qO|2tQ>u3%`>HimN&Jg0O5p zkzvPzeMF(%oNfkn>3LL-QnwXo0;!mFc-^=!0eZE(M3^E}_ocD*%!=u)@plo-W{~m^ zu2(N9BZz}`Og9UJBhGlMZ36#B_1cioXwJpR;{4#HFCZoYAu~z@~AMw-#Fo&82Q-GjX10XY2w8z zy7#cCGHg((=j7gqU4q793$Ac74+t-eb+~w5Ug1m|sQ~O-*xj>uZkiDVy_^`exY9Wh z_PO^h0)cZQ^)ZF?zi(L*nG!a6nE1y&b=WO?Vu*-!2zB^rn)4;i$CKZVom0z#fjREO zk(VjN{~bOKg#a>`U!F-{-M~5}E+DX5d@k2$rlN7!aie*sNdKlVsaiSvJPAv+FUZ`` zZmQU#_*>-mLwEvQ)BBLcMYzHyFv%VUz20nf*`-cfcZDo>Bc5*O8hriszmmyFWu~`~Ig=70Qb<3Hi?(2Fljyd_y6!KNdvE6LP+gioL^W@;ITmZKU)&C)3 e`CswPBNIZcoNBP. +*/ +import React, { PropTypes } from 'react'; +import isEqual from 'lodash/isEqual'; +import Switch from 'react-toggle-switch'; +import Link from 'react-router/lib/Link'; + +import { addError } from '../../../actions/messages'; +import Button from '../../button'; +import Modal from '../../sidebar-modal'; +import Card from '../card'; + +const icon = { icon: 'image', pack: 'fa' }; + +const SERVICES = [ + { name: 'gmail', title: 'Gmail', img: '/images/services/gmail.png' }, + { name: 'yahoo', title: 'Yahoo!', img: '/images/services/yahoo.png' } +]; + +export default class ImportContactsAction extends React.Component { + static displayName = 'ImportContactsAction'; + + static propTypes = { + dispatch: PropTypes.func, + // eslint-disable-next-line react/no-unused-prop-types + triggers: PropTypes.shape({ + uploadPicture: PropTypes.func, + updateUserInfo: PropTypes.func + }) + }; + + static defaultProps = { + dispatch: () => {} + }; + + constructor(...args) { + super(...args); + this.state = { + isActive: false, + isChecked: false + }; + } + + shouldComponentUpdate(nextProps, nextState) { + return nextProps !== this.props || !isEqual(nextState, this.state); + } + + handleCardClick = () => { + this.setState({ isActive: true }); + }; + + handleModalClose = () => { + this.setState({ isActive: false }); + }; + + handleSwitch = () => { + this.setState((state) => ({ isChecked: !state.isChecked })); + }; + + handleSubmit = async () => { + try { + this.handleModalClose(); + } catch (e) { + this.props.dispatch(addError(e.message)); + } + }; + + render() { + return ( + + + + + Import your contacts + + + Importing your contacts does not send out any invitations. +
+ {SERVICES.map(s => +
+ {s.title} +
{s.title}
+
+ )} +
+
+ + + Email each and everyone I know about us.  + Learn more + +
+
+
+ + + + + ); + } +} diff --git a/src/components/bio/actions/index.js b/src/components/bio/actions/index.js index 8910e908..f6568f33 100644 --- a/src/components/bio/actions/index.js +++ b/src/components/bio/actions/index.js @@ -18,4 +18,4 @@ export { default as UpdateProfilePictureAction } from './update-profile-picture'; export { default as UpdateUserPicture } from './update-userpic'; export { default as UpdateNameAction } from './update-name'; - +export { default as ImportContactsAction } from './import-contacts'; diff --git a/src/less/blocks/bio.less b/src/less/blocks/bio.less index e1a59db3..539775f6 100644 --- a/src/less/blocks/bio.less +++ b/src/less/blocks/bio.less @@ -134,7 +134,6 @@ } &__card { - margin-top: 20px; min-width: 100px; max-width: 180px; flex: 1; @@ -262,16 +261,11 @@ } &__actions { - @media (min-width: 1024px) and (max-width: 1599px), - (min-width: 414px) and (max-width: 479px) { - > .bio__card:last-child { - margin-left: 0; - } - } - @media (max-width: 413px) { - > .bio__card + .bio__card { - margin-left: 10px; - } + margin-left: -20px; + + > .bio__card { + margin-left: 20px; + margin-bottom: 20px; } } } diff --git a/src/less/blocks/font.less b/src/less/blocks/font.less index 4d4d565c..c4e0f2f3 100644 --- a/src/less/blocks/font.less +++ b/src/less/blocks/font.less @@ -72,6 +72,12 @@ } } + &--size { + &_small { + font-size: 12px; + } + } + &--family_san-francisco { font-family: 'San Francisco Display', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif; } diff --git a/src/less/blocks/service-card.less b/src/less/blocks/service-card.less new file mode 100644 index 00000000..19f1dd49 --- /dev/null +++ b/src/less/blocks/service-card.less @@ -0,0 +1,26 @@ +.service-card { + padding: 0 9px; + cursor: pointer; + + &__icon { + display: block; + padding: 8px; + width: 60px; + height: 60px; + background-color: #fff; + box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2); + } + + &__title { + margin-top: 6px; + font-size: 12px; + color: rgba(0, 0, 0, 0.7); + text-align: center; + } + + &:hover { + .service-card__title { + text-decoration: underline; + } + } +} diff --git a/src/less/blocks/sidebar-modal.less b/src/less/blocks/sidebar-modal.less index a17e42d7..23ed1a9b 100644 --- a/src/less/blocks/sidebar-modal.less +++ b/src/less/blocks/sidebar-modal.less @@ -107,4 +107,40 @@ overflow-y: auto; height: 100%; } + + &__actions { + margin-top: 40px; + } + + &__button { + width: 100px; + border-radius: 2px; + font-size: 14px; + font-weight: 500; + box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15); + + &--type { + &_submit { + color: #fff; + background: #3b963f; + //background: -moz-linear-gradient(top, #3b963f 0%, #318334 100%); + //background: -webkit-linear-gradient(top, #3b963f 0%,#318334 100%); + background: linear-gradient(to bottom, #3b963f 0%,#318334 100%); + //filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b963f', endColorstr='#318334',GradientType=0 ); + } + + &_cancel { + color: #000; + background: #f9f9f9; + //background: -moz-linear-gradient(top, #f9f9f9 0%, #efedf0 100%); + //background: -webkit-linear-gradient(top, #f9f9f9 0%,#efedf0 100%); + background: linear-gradient(to bottom, #f9f9f9 0%,#efedf0 100%); + //filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#efedf0',GradientType=0 ); + } + } + + & + & { + margin-left: 20px; + } + } } diff --git a/src/less/styles.less b/src/less/styles.less index 982169ad..6dfcbc9e 100644 --- a/src/less/styles.less +++ b/src/less/styles.less @@ -142,3 +142,4 @@ @import 'blocks/bio'; @import 'blocks/sidebar-modal'; @import 'blocks/switch'; +@import 'blocks/service-card';