update one color share buttons

client/modules/app/bulma.modules.sass

@@ -13,5 +13,7 @@ $button-padding-horizontal: 0.75em
   margin-top: -10px !important
 .navbar-item
   font-size: 14px
-.buttons > .button
-  height: 1.3rem
+
+// disable the default larger button height
+.buttons .button
+  height: inherit

client/modules/color/components/OneColor/index.jsx

@@ -37,30 +37,33 @@ class OneColor extends React.Component {
             </button>
           </div>
           <div className={`buttons has-addons is-centered ${style.shareGroup}`}>
-            <span
+            <button
               className="button"
+              title={language.email}
               onClick={() => {
                 onShare('email');
               }}
             >
               {language.email}
-            </span>
-            <span
+            </button>
+            <button
               className="button"
+              title={language.facebook}
               onClick={() => {
                 onShare('facebook');
               }}
             >
               {language.facebook}
-            </span>
-            <span
+            </button>
+            <button
               className="button"
+              title={language.twitter}
               onClick={() => {
                 onShare('twitter');
               }}
             >
               {language.twitter}
-            </span>
+            </button>
           </div>
         </div>
       </div>

client/modules/color/components/OneColor/style.sass

@@ -5,9 +5,16 @@
 
 .shareGroup
   margin-top: 6px
-  &>span
-    font-size: 0.877rem
+  &>button
+    font-size: 0.7rem
+    display: block
+    text-overflow: ellipsis
+    overflow: hidden
+    width: 75px
+
+
 
 @media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : portrait)
-  .shareGroup >span
-    font-size: 0.58rem
+  .shareGroup >button
+    font-size: 8px
+    width: 52px