README, data/css updates

src/components/Footer.js

@@ -1,33 +1,16 @@
 import React from "react"
+import { contactLinks } from "../data/social"
 
 export default (function Footer() {
 
-    const contactLinks = {
-        'email': {
-            name: 'Email',
-            icon: "ri-mail-line",
-            link: 'mailto:gene@genemecija.com?subject='+encodeURIComponent('Hello, Gene!')
-        },
-        'github': {
-            name: 'GitHub',
-            icon: 'ri-github-fill',
-            link: 'https://github.com/genemecija'
-        },
-        'twitter': {
-            name: 'Twitter',
-            icon: 'ri-twitter-fill',
-            link:'https://twitter.com/genemecija'
-        }
-    }
-
     function handleClick(event) {
         window.open(contactLinks[event.target.id]['link'])
     }
     
     return (
         <div id="footer">
-            app by @genemecija •
-            contact&nbsp;<span id="contact-icons"><i id="twitter" onClick={handleClick} className={contactLinks['twitter']['icon']}></i>&nbsp;<i id="email" onClick={handleClick} className={contactLinks['email']['icon']}></i></span>&nbsp;•
+            app by @genemecija&nbsp;<span id="contact-icons"><i id="twitter" onClick={handleClick} className={contactLinks['twitter']['icon']}></i></span>•
+            contact&nbsp;<span id="contact-icons"><i id="email" onClick={handleClick} className={contactLinks['email']['icon']}></i></span>&nbsp;•
             code&nbsp;<span id="contact-icons"><i id="github" onClick={handleClick} className={contactLinks['github']['icon']}></i></span>
         </div>
     )

src/components/Header.js

@@ -1,25 +1,8 @@
 import React from "react"
+import { shareLinks } from "../data/social"
 
 export default (function Header () {
 
-    const shareLinks = {
-        'twitter': {
-            name: 'Twitter',
-            icon: 'ri-twitter-fill',
-            link:'https://twitter.com/intent/tweet?text=Check%20out%20this%20site%20that%20helps%20you%20learn%20Morse%20Code%3A%20https%3A//learnmorsecode.com%20%40genemecija%20%23morse%20%23morsecode'
-        },
-        'facebook': {
-            name: 'Facebook',
-            icon: 'ri-facebook-box-fill',
-            link:'https://www.facebook.com/sharer/sharer.php?u=https%3A//learnmorsecode.com'
-        },
-        'email': {
-            name: 'Email',
-            icon: "ri-mail-line",
-            link: 'mailto:?subject='+encodeURIComponent('Check out this site that helps you learn Morse code! https://learnmorsecode.com')
-        }
-    }
-
     function PopupCenter(url, title, w, h) {  
         // Credit: http://www.xtf.dk/2011/08/center-new-popup-window-even-on.html
     

src/css/App.css

@@ -7,10 +7,6 @@
   cursor: default;
   -ms-touch-action: manipulation;
       touch-action: manipulation;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
 }
 
 button {
@@ -725,6 +721,10 @@ i[class*="ri-"] {
 }
 
 #morseButton {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
   width: 100px;
   height: 100px;
   margin-top: 30px;
@@ -1649,8 +1649,6 @@ i[class*="ri-"] {
   }
   #root #main-content #main-interface #morseButton {
     margin-top: 0;
-    -webkit-transform: scale(0.85);
-            transform: scale(0.85);
   }
 }
 /*# sourceMappingURL=App.css.map */

src/data/social.js

@@ -0,0 +1,36 @@
+const shareLinks = {
+    'twitter': {
+        name: 'Twitter',
+        icon: 'ri-twitter-fill',
+        link:'https://twitter.com/intent/tweet?text=Check%20out%20this%20site%20that%20helps%20you%20learn%20Morse%20Code%3A%20https%3A//learnmorsecode.net%20%40genemecija%20%23morse%20%23morsecode'
+    },
+    'facebook': {
+        name: 'Facebook',
+        icon: 'ri-facebook-box-fill',
+        link: 'https://www.facebook.com/sharer/sharer.php?u=https%3A//learnmorsecode.net'
+    },
+    'email': {
+        name: 'Email',
+        icon: "ri-mail-line",
+        link: 'mailto:?subject='+encodeURIComponent('Check out this site that helps you learn Morse code! https://learnmorsecode.net')
+    }
+}
+const contactLinks = {
+    'email': {
+        name: 'Email',
+        icon: "ri-mail-line",
+        link: 'mailto:gene@genemecija.com?subject='+encodeURIComponent('Hello, Gene!')
+    },
+    'github': {
+        name: 'GitHub',
+        icon: 'ri-github-fill',
+        link: 'https://github.com/genemecija'
+    },
+    'twitter': {
+        name: 'Twitter',
+        icon: 'ri-twitter-fill',
+        link:'https://twitter.com/genemecija'
+    }
+}
+
+export {shareLinks, contactLinks}

src/scss/App.scss

@@ -16,7 +16,6 @@ $main-border-radius: 3px;
     padding: 0px;
     cursor: default;
     touch-action: manipulation; // Disable double-tap to zoom on mobile devices
-    user-select: none;
 }
 button {
     font-family: $main-font;
@@ -568,6 +567,7 @@ $button-radius: 50px;
 $morse-button-color: rgba(112, 138, 144,0.5);
 
 #morseButton {
+    user-select: none;
     width: $button-diameter;
     height: $button-diameter;
     margin-top: 30px;
@@ -1315,12 +1315,10 @@ $morse-button-color: rgba(112, 138, 144,0.5);
                     font-size: 3rem;
                     span {
                         line-height: 2rem;
-                        // font-size: 2.3rem;
                     }
                 }
                 #morseButton {
                     margin-top: 0;
-                    transform: scale(0.85);
                 }
             }