From 8a8bb586fad6b40ec237650bb04e3f192ff97945 Mon Sep 17 00:00:00 2001
From: Enej Bajgoric <enej.bajgoric@gmail.com>
Date: Mon, 1 Feb 2016 11:32:21 -0800
Subject: [PATCH] Update: Social Logo to the latest version.

Added hover styling on the dev/docs
---
 assets/stylesheets/sections/_devdocs.scss      | 3 ++-
 client/components/social-logo/docs/example.jsx | 2 ++
 client/components/social-logo/index.jsx        | 8 +++++++-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/assets/stylesheets/sections/_devdocs.scss b/assets/stylesheets/sections/_devdocs.scss
index e7220c5f766ea..dce67552f7873 100644
--- a/assets/stylesheets/sections/_devdocs.scss
+++ b/assets/stylesheets/sections/_devdocs.scss
@@ -148,7 +148,8 @@
 	color: $gray-dark;
 }
 
-.design-assets__group > .gridicon:hover {
+.design-assets__group > .gridicon:hover,
+.design-assets__group > .social-logo:hover {
 	fill: $gray;
 	cursor: pointer;
 }
diff --git a/client/components/social-logo/docs/example.jsx b/client/components/social-logo/docs/example.jsx
index 50bc12036c83d..4f1fe57f960bc 100644
--- a/client/components/social-logo/docs/example.jsx
+++ b/client/components/social-logo/docs/example.jsx
@@ -46,6 +46,7 @@ export default React.createClass( {
 				<SocialLogo icon="polldaddy" size={ 48 } onClick={ this.handleClick.bind( this, 'polldaddy' ) } />
 				<SocialLogo icon="print" size={ 48 } onClick={ this.handleClick.bind( this, 'print' ) } />
 				<SocialLogo icon="reddit" size={ 48 } onClick={ this.handleClick.bind( this, 'reddit' ) } />
+				<SocialLogo icon="share" size={ 48 } onClick={ this.handleClick.bind( this, 'share' ) } />
 				<SocialLogo icon="skype" size={ 48 } onClick={ this.handleClick.bind( this, 'skype' ) } />
 				<SocialLogo icon="spotify" size={ 48 } onClick={ this.handleClick.bind( this, 'spotify' ) } />
 				<SocialLogo icon="squarespace" size={ 48 } onClick={ this.handleClick.bind( this, 'squarespace' ) } />
@@ -54,6 +55,7 @@ export default React.createClass( {
 				<SocialLogo icon="tumblr-alt" size={ 48 } onClick={ this.handleClick.bind( this, 'tumblr-alt' ) } />
 				<SocialLogo icon="tumblr" size={ 48 } onClick={ this.handleClick.bind( this, 'tumblr' ) } />
 				<SocialLogo icon="twitch" size={ 48 } onClick={ this.handleClick.bind( this, 'twitch' ) } />
+				<SocialLogo icon="twitter-alt" size={ 48 } onClick={ this.handleClick.bind( this, 'twitter-alt' ) } />
 				<SocialLogo icon="twitter" size={ 48 } onClick={ this.handleClick.bind( this, 'twitter' ) } />
 				<SocialLogo icon="vimeo" size={ 48 } onClick={ this.handleClick.bind( this, 'vimeo' ) } />
 				<SocialLogo icon="whatsapp" size={ 48 } onClick={ this.handleClick.bind( this, 'whatsapp' ) } />
diff --git a/client/components/social-logo/index.jsx b/client/components/social-logo/index.jsx
index 4fae5f65dad41..3a86524ac4883 100644
--- a/client/components/social-logo/index.jsx
+++ b/client/components/social-logo/index.jsx
@@ -123,6 +123,9 @@ export default React.createClass( {
 			case 'reddit':
 				svg = <svg className={ iconClass } height={ this.props.size } width={ this.props.size } onClick={ this.props.onClick } xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M22 11.816c0-1.256-1.02-2.277-2.277-2.277-.593 0-1.122.24-1.526.613-1.48-.965-3.455-1.594-5.647-1.69l1.17-3.702 3.18.75c.01 1.027.847 1.86 1.877 1.86 1.035 0 1.877-.84 1.877-1.877 0-1.035-.842-1.877-1.877-1.877-.77 0-1.43.466-1.72 1.13L13.55 3.92c-.204-.047-.4.067-.46.26l-1.35 4.27c-2.317.037-4.412.67-5.97 1.67-.402-.355-.917-.58-1.493-.58C3.02 9.54 2 10.56 2 11.815c0 .814.433 1.523 1.078 1.925-.037.222-.06.445-.06.673 0 3.292 4.01 5.97 8.94 5.97s8.94-2.678 8.94-5.97c0-.214-.02-.424-.052-.632.687-.39 1.154-1.12 1.154-1.964zm-3.224-7.422c.606 0 1.1.493 1.1 1.1s-.493 1.1-1.1 1.1-1.1-.494-1.1-1.1.493-1.1 1.1-1.1zm-16 7.422c0-.827.673-1.5 1.5-1.5.313 0 .598.103.838.27-.85.675-1.477 1.478-1.812 2.36-.32-.274-.525-.676-.525-1.13zm9.183 7.79c-4.502 0-8.165-2.33-8.165-5.193S7.457 9.22 11.96 9.22s8.163 2.33 8.163 5.193-3.663 5.193-8.164 5.193zM20.635 13c-.326-.89-.948-1.7-1.797-2.383.247-.186.55-.3.882-.3.827 0 1.5.672 1.5 1.5 0 .482-.23.91-.586 1.184zm-11.64 1.704c-.76 0-1.397-.616-1.397-1.376 0-.76.636-1.397 1.396-1.397.76 0 1.376.638 1.376 1.398 0 .76-.616 1.376-1.376 1.376zm7.405-1.376c0 .76-.615 1.376-1.375 1.376s-1.4-.616-1.4-1.376c0-.76.64-1.397 1.4-1.397.76 0 1.376.638 1.376 1.398zm-1.17 3.38c.15.152.15.398 0 .55-.675.674-1.728 1.002-3.22 1.002l-.01-.002-.012.002c-1.492 0-2.544-.328-3.218-1.002-.152-.152-.152-.398 0-.55.152-.152.4-.15.55 0 .52.52 1.394.775 2.67.775l.01.002.01-.002c1.276 0 2.15-.253 2.67-.775.15-.152.398-.152.55 0z"/></g></svg>;
 				break;
+			case 'share':
+				svg = <svg className={ iconClass } height={ this.props.size } width={ this.props.size } onClick={ this.props.onClick } xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M7 12c0-2.757 2.243-5 5-5 1.523 0 2.945.685 3.902 1.88.344.43.973.5 1.405.154.432-.345.5-.975.155-1.405C16.125 5.957 14.134 5 12 5c-3.52 0-6.442 2.612-6.93 6H2v2h5v-1zm10-1v1c0 2.757-2.243 5-5 5-1.523 0-2.946-.685-3.902-1.88-.346-.43-.976-.502-1.406-.154-.43.345-.5.975-.156 1.405C7.876 18.043 9.866 19 12 19c3.52 0 6.442-2.612 6.93-6H22v-2h-5zm-7 1c0 1.105.895 2 2 2s2-.895 2-2-.895-2-2-2-2 .895-2 2z"/></g></svg>;
+				break;
 			case 'skype':
 				svg = <svg className={ iconClass } height={ this.props.size } width={ this.props.size } onClick={ this.props.onClick } xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M21.43 14.15c.146-.656.222-1.343.222-2.046 0-5.27-4.272-9.542-9.542-9.542-.558 0-1.103.052-1.63.14-.854-.538-1.862-.848-2.946-.848C4.48 1.854 2 4.332 2 7.388c0 1.02.278 1.98.76 2.796-.126.622-.196 1.26-.196 1.92 0 5.27 4.273 9.54 9.542 9.54.594 0 1.178-.056 1.75-.156.778.416 1.665.658 2.612.658 3.054 0 5.533-2.48 5.533-5.534.004-.888-.203-1.717-.57-2.46zm-4.424 2.514c-.446.628-1.09 1.12-1.944 1.47-.833.35-1.838.524-2.98.524-1.367 0-2.517-.24-3.415-.715-.64-.348-1.174-.818-1.57-1.394-.408-.585-.61-1.17-.61-1.724 0-.35.132-.654.4-.902.26-.25.596-.367.993-.367.33 0 .61.096.844.29.223.185.406.462.558.817.172.388.355.715.55.97.185.247.456.458.8.616.342.164.812.245 1.39.245.785 0 1.433-.168 1.92-.497.475-.323.704-.713.704-1.193 0-.375-.12-.673-.37-.907-.257-.242-.602-.43-1.02-.558-.435-.133-1.018-.28-1.746-.43-.99-.212-1.834-.462-2.5-.748-.683-.293-1.237-.697-1.634-1.197-.413-.514-.614-1.155-.614-1.916 0-.723.215-1.37.645-1.93.426-.557 1.053-.987 1.852-1.286.79-.293 1.728-.442 2.8-.442.85 0 1.597.1 2.23.29.624.197 1.156.464 1.573.787.42.33.732.677.928 1.044.184.367.287.73.287 1.084 0 .344-.132.654-.393.92-.262.272-.59.412-.985.412-.356 0-.63-.088-.816-.254-.178-.158-.364-.406-.574-.76-.24-.45-.525-.813-.855-1.058-.32-.242-.857-.37-1.592-.37-.684 0-1.242.14-1.654.407-.4.26-.592.558-.592.912 0 .215.064.4.19.558.135.164.323.31.57.43.255.126.508.23.77.3.264.076.71.183 1.318.324.773.163 1.484.347 2.112.55.633.203 1.184.457 1.628.748.458.3.82.678 1.078 1.135.26.458.387 1.02.387 1.68 0 .788-.223 1.502-.664 2.13z"/></g></svg>;
 				break;
@@ -147,9 +150,12 @@ export default React.createClass( {
 			case 'twitch':
 				svg = <svg className={ iconClass } height={ this.props.size } width={ this.props.size } onClick={ this.props.onClick } xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M16.5 8.09h-1.637V13H16.5V8.09zm-4.5 0h-1.637V13H12V8.09zM4.228 3.177L3 6.45v13.093h4.5V22h2.455l2.454-2.456h3.68L21 14.636V3.178H4.228zm15.136 10.638L16.5 16.68H12l-2.453 2.454V16.68H5.863V4.814h13.5v9.002z"/></g></svg>;
 				break;
-			case 'twitter':
+			case 'twitter-alt':
 				svg = <svg className={ iconClass } height={ this.props.size } width={ this.props.size } onClick={ this.props.onClick } xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M22.23 5.924c-.736.326-1.527.547-2.357.646.847-.508 1.498-1.312 1.804-2.27-.793.47-1.67.812-2.606.996C18.325 4.498 17.258 4 16.078 4c-2.266 0-4.103 1.837-4.103 4.103 0 .322.036.635.106.935-3.41-.17-6.433-1.804-8.457-4.287-.353.607-.556 1.312-.556 2.064 0 1.424.724 2.68 1.825 3.415-.673-.022-1.305-.207-1.86-.514v.052c0 1.988 1.415 3.647 3.293 4.023-.344.095-.707.145-1.08.145-.265 0-.522-.026-.773-.074.522 1.63 2.038 2.817 3.833 2.85-1.404 1.1-3.174 1.757-5.096 1.757-.332 0-.66-.02-.98-.057 1.816 1.164 3.973 1.843 6.29 1.843 7.547 0 11.675-6.252 11.675-11.675 0-.178-.004-.355-.012-.53.802-.578 1.497-1.3 2.047-2.124z"/></g></svg>;
 				break;
+			case 'twitter':
+				svg = <svg className={ iconClass } height={ this.props.size } width={ this.props.size } onClick={ this.props.onClick } xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2.5 6.7v.3c0 3-2.3 6.6-6.6 6.6-1.3 0-2.5-.4-3.5-1h.5c1.1 0 2.1-.4 2.9-1-1 0-1.9-.7-2.2-1.6H8c.2 0 .4 0 .6-.1-1.1-.2-1.8-1.1-1.8-2.3.3.2.7.3 1 .3-.6-.4-1-1.1-1-1.9 0-.4.1-.8.3-1.2 1.1 1.4 2.8 2.3 4.7 2.4 0-.2-.1-.3-.1-.5 0-1.3 1-2.3 2.3-2.3.7 0 1.3.3 1.7.7.5-.1 1-.3 1.5-.6-.2.5-.5 1-1 1.3.5-.1.9-.2 1.3-.4-.2.6-.6 1-1 1.3z"/></g></svg>;
+				break;
 			case 'vimeo':
 				svg = <svg className={ iconClass } height={ this.props.size } width={ this.props.size } onClick={ this.props.onClick } xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M19.438 3.004c-2.908-.093-4.882 1.533-5.914 4.883.532-.225 1.05-.342 1.555-.342 1.067 0 1.536.595 1.412 1.783-.063.718-.534 1.767-1.413 3.142-.883 1.375-1.543 2.064-1.982 2.064-.565 0-1.084-1.06-1.555-3.18-.16-.622-.44-2.212-.85-4.77-.377-2.367-1.382-3.476-3.017-3.32-.69.064-1.73.686-3.11 1.87C3.56 6.036 2.538 6.94 1.5 7.842l.99 1.262c.94-.654 1.49-.98 1.648-.98.72 0 1.395 1.12 2.023 3.358l1.696 6.158C8.7 19.88 9.736 21 10.96 21c1.976 0 4.392-1.84 7.247-5.516 2.76-3.522 4.19-6.293 4.282-8.32.123-2.71-.894-4.097-3.052-4.16z"/></g></svg>;
 				break;