Merge pull request #296 from abhishek-webkul/gli-570

Improve Social Sharing module

Author: rohit053

Diff for: modules/socialsharing/css/socialsharing.css

@@ -1,3 +1,69 @@
-.socialsharing_product button {
-	margin-bottom: 3px;
+/**
+* 2010-2021 Webkul.
+*
+* NOTICE OF LICENSE
+*
+* All right is reserved,
+* Please go through LICENSE.txt file inside our module
+*
+* DISCLAIMER
+*
+* Do not edit or add to this file if you wish to upgrade this module to newer
+* versions in the future. If you wish to customize this module for your
+* needs please refer to CustomizationPolicy.txt file inside our module for more information.
+*
+* @author Webkul IN
+* @copyright 2010-2021 Webkul IN
+* @license LICENSE.txt
+*/
+
+.socialsharing_product span {
+	padding-right: 10px;
+	font-style: normal;
+	font-weight: normal;
+	font-size: 14px;
+	line-height: 18px;
+	color: #333333;
+}
+
+.socialsharing_product .social-sharing {
+	width: 40px;
+	height: 40px;
+	box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
+	border-radius: 50%;
+	border: none;
+	margin: 0 5px;
+}
+
+.socialsharing_product .social-sharing:focus {
+	background-color: #FFFFFF;
+	outline: none;
+}
+
+.socialsharing_product .social-sharing i {
+	position: relative;
+	top: 1px;
+	font-size: 20px;
+	color: #A7A7A7;
+}
+
+.socialsharing_product .social-sharing:hover,
+.socialsharing_product .social-sharing:hover i {
+	background-color: #FFFFFF;
+}
+
+.socialsharing_product .btn-twitter:hover i {
+	color: #00aaf0;
+}
+
+.socialsharing_product .btn-facebook:hover i {
+	color: #435f9f;
+}
+
+.socialsharing_product .btn-google-plus:hover i {
+	color: #e04b34;
+}
+
+.socialsharing_product .btn-pinterest:hover i {
+	color: #ce1f21;
 }

Diff for: modules/socialsharing/views/templates/hook/socialsharing.tpl

@@ -22,31 +22,28 @@
 *  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 *  International Registered Trademark & Property of PrestaShop SA
 *}
-{if $PS_SC_TWITTER || $PS_SC_FACEBOOK || $PS_SC_GOOGLE || $PS_SC_PINTEREST}
 
+{if $PS_SC_TWITTER || $PS_SC_FACEBOOK || $PS_SC_GOOGLE || $PS_SC_PINTEREST}
 	<p class="socialsharing_product list-inline no-print">
+		<span>{l s="Share" mod='socialsharing'}</span>
 		{if $PS_SC_TWITTER}
 			<button data-type="twitter" type="button" class="btn btn-default btn-twitter social-sharing">
-				<i class="icon-twitter"></i> {l s="Tweet" mod='socialsharing'}
-				<!-- <img src="{$link->getMediaLink("`$module_dir`img/twitter.gif")}" alt="Tweet" /> -->
+				<i class="icon-twitter"></i>
 			</button>
 		{/if}
 		{if $PS_SC_FACEBOOK}
 			<button data-type="facebook" type="button" class="btn btn-default btn-facebook social-sharing">
-				<i class="icon-facebook"></i> {l s="Share" mod='socialsharing'}
-				<!-- <img src="{$link->getMediaLink("`$module_dir`img/facebook.gif")}" alt="Facebook Like" /> -->
+				<i class="icon-facebook"></i>
 			</button>
 		{/if}
 		{if $PS_SC_GOOGLE}
 			<button data-type="google-plus" type="button" class="btn btn-default btn-google-plus social-sharing">
-				<i class="icon-google-plus"></i> {l s="Google+" mod='socialsharing'}
-				<!-- <img src="{$link->getMediaLink("`$module_dir`img/google.gif")}" alt="Google Plus" /> -->
+				<i class="icon-google-plus"></i>
 			</button>
 		{/if}
 		{if $PS_SC_PINTEREST}
 			<button data-type="pinterest" type="button" class="btn btn-default btn-pinterest social-sharing">
-				<i class="icon-pinterest"></i> {l s="Pinterest" mod='socialsharing'}
-				<!-- <img src="{$link->getMediaLink("`$module_dir`img/pinterest.gif")}" alt="Pinterest" /> -->
+				<i class="icon-pinterest"></i>
 			</button>
 		{/if}
 	</p>