13 files changed, 17 insertions, 50 deletions
diff --git a/juick-www/src/main/static/facebook.png b/juick-www/src/main/static/facebook.png
deleted file mode 100644
index 5d111590..00000000
--- a/juick-www/src/main/static/facebook.png
+++ /dev/null
diff --git a/juick-www/src/main/static/icon-fb.png b/juick-www/src/main/static/icon-fb.png
deleted file mode 100644
index 5d111590..00000000
--- a/juick-www/src/main/static/icon-fb.png
+++ /dev/null
diff --git a/juick-www/src/main/static/icon-gplus.png b/juick-www/src/main/static/icon-gplus.png
deleted file mode 100644
index d83d2520..00000000
--- a/juick-www/src/main/static/icon-gplus.png
+++ /dev/null
diff --git a/juick-www/src/main/static/icon-lj.png b/juick-www/src/main/static/icon-lj.png
deleted file mode 100644
index 9cde1e02..00000000
--- a/juick-www/src/main/static/icon-lj.png
+++ /dev/null
diff --git a/juick-www/src/main/static/icon-twitter.png b/juick-www/src/main/static/icon-twitter.png
deleted file mode 100644
index 259078f7..00000000
--- a/juick-www/src/main/static/icon-twitter.png
+++ /dev/null
diff --git a/juick-www/src/main/static/icon-vk.png b/juick-www/src/main/static/icon-vk.png
deleted file mode 100644
index 80b6920b..00000000
--- a/juick-www/src/main/static/icon-vk.png
+++ /dev/null
diff --git a/juick-www/src/main/static/scripts.js b/juick-www/src/main/static/scripts.js
index b275e446..1fec803e 100644
--- a/juick-www/src/main/static/scripts.js
+++ b/juick-www/src/main/static/scripts.js
@@ -46,6 +46,9 @@ function autosize(el) {
         el.attachEvent('onkeyup', () => resize(el));
     }
 }
+function svgIconHtml(name) {
+  return `<div class="icon icon--ei-${name} icon--s "><svg class="icon__cnt"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ei-${name}-icon"></use></svg></div>`;
+}
 
 /* eslint-disable only-ascii/only-ascii */
 const translations = {
@@ -69,7 +72,7 @@ const translations = {
         'loginDialog.registeredAlready': 'Registered already?',
         'loginDialog.username': 'Username',
         'loginDialog.password': 'Password',
-        'loginDialog.vk': 'vk.com',
+        'loginDialog.vk': 'Login with VK',
         'error.error': 'Error'
     },
     'ru': {
@@ -92,7 +95,7 @@ const translations = {
         'loginDialog.registeredAlready': 'Уже зарегистрированы?',
         'loginDialog.username': 'Имя пользователя',
         'loginDialog.password': 'Пароль',
-        'loginDialog.vk': 'ВКонтакте',
+        'loginDialog.vk': 'Войти через ВКонтакте',
         'error.error': 'Ошибка'
     }
 };
@@ -451,10 +454,9 @@ function showMessageLinksDialog(mid, rid) {
             ${i18n('shareDialog.messageNumber')}: <div onclick="this.selectText()" class="dialogl">${mlink}</div>
             ${i18n('shareDialog.share')}:
             <ul>
-                <li><a href="https://www.facebook.com/sharer/sharer.php?u=${hlinkenc}" onclick="return openSocialWindow(this)"></a></li>
-                <li><a href="https://twitter.com/intent/tweet?url=${hlinkenc}" onclick="return openSocialWindow(this)" style="background-position: -32px 0;"></a></li>
-                <li><a href="https://vk.com/share.php?url=${hlinkenc}" onclick="return openSocialWindow(this)" style="background-position: -64px 0;"></a></li>
-                <li><a href="https://plus.google.com/share?url=${hlinkenc}" onclick="return openSocialWindow(this)" style="background-position: -96px 0;"></a></li>
+                <li><a href="https://www.facebook.com/sharer/sharer.php?u=${hlinkenc}" onclick="return openSocialWindow(this)">${svgIconHtml('sc-facebook')}</a></li>
+                <li><a href="https://twitter.com/intent/tweet?url=${hlinkenc}" onclick="return openSocialWindow(this)">${svgIconHtml('sc-twitter')}</a></li>
+                <li><a href="https://vk.com/share.php?url=${hlinkenc}" onclick="return openSocialWindow(this)">${svgIconHtml('sc-vk')}</a></li>
             </ul>
         </div>`;
 
@@ -541,10 +543,9 @@ function checkUsername() {
 function openDialogLogin() {
     let html = `
         <div class="dialoglogin">
-            <p>${i18n('loginDialog.pleaseIntroduceYourself')}:
-                <a href="/_fblogin" id="signfb">Facebook</a>
-                <a href="/_vklogin" id="signvk">${i18n('loginDialog.vk')}</a>
-            </p>
+            <p>${i18n('loginDialog.pleaseIntroduceYourself')}:</p>
+            <a href="/_fblogin" id="signfb">${svgIconHtml('sc-facebook')}Login with Facebook</a>
+            <a href="/_vklogin" id="signvk">${svgIconHtml('sc-vk')}${i18n('loginDialog.vk')}</a>
             <p>${i18n('loginDialog.registeredAlready')}</p>
             <form action="/login" method="POST">
                 <input class="signinput" type="text" name="username" placeholder="${i18n('loginDialog.username')}"/><br/>
diff --git a/juick-www/src/main/static/sharesocial.png b/juick-www/src/main/static/sharesocial.png
deleted file mode 100644
index 1031b343..00000000
--- a/juick-www/src/main/static/sharesocial.png
+++ /dev/null
diff --git a/juick-www/src/main/static/style.css b/juick-www/src/main/static/style.css
index 90f0f586..161f7444 100644
--- a/juick-www/src/main/static/style.css
+++ b/juick-www/src/main/static/style.css
@@ -714,21 +714,12 @@ q {
 #signfb,
 #signvk {
     display: block;
-    height: 32px;
     line-height: 32px;
     margin: 10px 0;
-    overflow: hidden;
     text-decoration: none;
-    text-indent: 37px;
     width: 100%;
 }
-#signfb {
-    background: url("facebook.png") no-repeat #3A569C;
-    color: #FFF;
-}
 #signvk {
-    background: url("vk.png") no-repeat #6d8fb3;
-    color: #FFF;
     margin-bottom: 30px;
 }
 .dialoglogin form {
@@ -764,10 +755,7 @@ q {
     margin: 5px 10px 0 0;
 }
 .dialogshare a {
-    background-image: url("sharesocial.png");
     display: block;
-    height: 32px;
-    width: 32px;
 }
 .dialogtxt {
     background: #EEEEE5;
@@ -795,28 +783,12 @@ q {
     right: 20px;
 }
 .sharenew {
-    color: #FFF;
     display: inline-block;
     line-height: 32px;
     min-height: 32px;
     min-width: 200px;
     padding: 0 12px 0 37px;
 }
-.ico32-twi {
-    background: #55acee url("icon-twitter.png") no-repeat;
-}
-.ico32-vk {
-    background: #6d8fb3 url("icon-vk.png") no-repeat;
-}
-.ico32-fb {
-    background: #3b579d url("icon-fb.png") no-repeat;
-}
-.ico32-lj {
-    background: #888888 url("icon-lj.png") no-repeat;
-}
-.ico32-gp {
-    background: #dc4a38 url("icon-gplus.png") no-repeat;
-}
 .icon {
     margin-top: -2px;
     vertical-align: middle;
@@ -842,12 +814,6 @@ q {
 #footer-social a {
     border: 0;
     display: inline-block;
-    height: 32px;
-    margin: 0 15px 0 0;
-    overflow: hidden;
-    text-indent: 100%;
-    white-space: nowrap;
-    width: 32px;
 }
 #footer-left {
     margin-left: 286px;
diff --git a/juick-www/src/main/static/toolbar-icons.png b/juick-www/src/main/static/toolbar-icons.png
deleted file mode 100644
index cd4efd45..00000000
--- a/juick-www/src/main/static/toolbar-icons.png
+++ /dev/null
diff --git a/juick-www/src/main/static/vk.png b/juick-www/src/main/static/vk.png
deleted file mode 100644
index 80b6920b..00000000
--- a/juick-www/src/main/static/vk.png
+++ /dev/null
diff --git a/juick-www/src/main/webapp/WEB-INF/views/partial/footer.html b/juick-www/src/main/webapp/WEB-INF/views/partial/footer.html
index 784011a9..1f9e30cf 100644
--- a/juick-www/src/main/webapp/WEB-INF/views/partial/footer.html
+++ b/juick-www/src/main/webapp/WEB-INF/views/partial/footer.html
@@ -5,9 +5,9 @@
         <a href="/help/ru/adv" rel="nofollow">{{ i18n("messages","link.adv") }}</a>
     </div>
     <div id="footer-social">
-        <a href="https://twitter.com/Juick" rel="nofollow" class="ico32-twi">Twitter</a>
-        <a href="https://vk.com/juick" rel="nofollow" class="ico32-vk">ВКонтакте</a>
-        <a href="https://www.facebook.com/JuickCom" rel="nofollow" class="ico32-fb">Facebook</a>
+        <a href="https://twitter.com/Juick" rel="nofollow"><i data-icon="ei-sc-twitter" data-size="m"></i></a>
+        <a href="https://vk.com/juick" rel="nofollow"><i data-icon="ei-sc-vk" data-size="m"></i></a>
+        <a href="https://www.facebook.com/JuickCom" rel="nofollow"><i data-icon="ei-sc-facebook" data-size="m"></i></a>
     </div>
     <div id="footer-left">juick.com &copy; 2008-2017
         {% if links | default ('')  is not empty %}
diff --git a/juick-www/src/main/webapp/WEB-INF/views/post_success.html b/juick-www/src/main/webapp/WEB-INF/views/post_success.html
index 812904d7..8b62c148 100644
--- a/juick-www/src/main/webapp/WEB-INF/views/post_success.html
+++ b/juick-www/src/main/webapp/WEB-INF/views/post_success.html
@@ -5,15 +5,15 @@
 {% if sharetwi | default('') is not empty %}
 <p class="social">
     <a href="https://twitter.com/intent/tweet?text={{ sharetwi }}"
-       class="ico32-twi sharenew">Отправить в Twitter</a></p>
+       class="sharenew"><i data-icon="ei-sc-twitter" data-size="m"></i>Отправить в Twitter</a></p>
 {% endif %}
 <p class="social">
     <a href="https://vk.com/share.php?url={{ url | urlencode }}"
-       class="ico32-vk sharenew">Отправить в ВКонтакте</a></p>
+       class="sharenew"><i data-icon="ei-sc-vk" data-size="m"></i>Отправить в ВКонтакте</a></p>
 {% if facebook | default('') is not empty %}
 <p class="social">
     <a href="https://www.facebook.com/sharer/sharer.php?u={{ url | urlencode }}"
-       class="ico32-fb sharenew">Отправить в Facebook</a></p>
+       class="sharenew"><i data-icon="ei-sc-facebook" data-size="m"></i>Отправить в Facebook</a></p>
 {% endif %}
 <p>Ссылка на сообщение: <a href="{{ url | raw }}">{{ url }}</a></p>
 {% endblock %}