Merge pull request #2704 from limonspb/add_discord_link

Author: blckmn

locales/en/messages.json

@@ -713,6 +713,9 @@
     "defaultFacebookText": {
         "message": "We also have a <a href=\"https://www.facebook.com/groups/betaflightgroup/\" target=\"_blank\" rel=\"noopener noreferrer\">Facebook Group</a>.<br />Join us to get a place to talk about Betaflight, ask configuration questions, or just hang out with fellow pilots."
     },
+    "defaultDiscordText": {
+        "message": "Betaflight <a href=\"https://discord.gg/YXcUpdf3\" target=\"_blank\" rel=\"noopener noreferrer\">Discord Server</a>.<br />Share your flight experience, talk about Betaflight, help other people or get some help for yourself from the community."
+    },
     "defaultChangelogHead": {
         "message": "Configurator - Changelog"
     },

src/css/tabs/landing.css

@@ -27,7 +27,7 @@
 
 .tab-landing .content_foot {
     clear: both;
-    padding: 20px 20px 5px;
+    padding: 10px 0px 5px;
 }
 
 /* hero block */
@@ -51,7 +51,7 @@
     font-weight: 300;
 }
 
-.text1, .text2, .text3, .text4 {
+.text1, .text2, .text3 {
     margin-top: 15px;
     margin-bottom: 15px;
     font-weight: normal;
@@ -100,17 +100,34 @@
 
 .tab-landing .content_mid_bottom {
     padding: 0 15px;
+    margin-top: 5px;
 }
 
-.tab-landing .content_mid_bottom .logoFacebook {
+.tab-landing .content_mid_bottom .logoSocialMedia {
     float: left;
     width: 40px;
 }
 
-.tab-landing .content_mid_bottom .text4 {
+.tab-landing .content_mid_bottom img {
+    height: 30px;
+    width: 30px;
+}
+
+.tab-landing .content_mid_bottom .discordLogo {
+    padding-top: 3px;
+}
+
+
+.tab-landing .content_mid_bottom .socialMediaText {
     margin-top: 0;
     margin-left: 5px;
     display: inline-block;
+    font-weight: normal;
+    font-size: 12px;
+}
+
+.tab-landing .content_mid_bottom .socialMediaParagraph {
+    margin-bottom: 15px;
 }
 
 .tab-landing .languageSwitcher .selected_language {
@@ -120,10 +137,8 @@
     margin-left: auto;
     margin-right: auto;
     text-align: center;
-    color: silver;
 }
 .tab-landing .languageSwitcher a {
-    color: silver;
     font-weight: normal;
     white-space: nowrap;
 }

src/images/discord-logo-color.svg

@@ -34,11 +34,18 @@ <h3 i18n="defaultDonateHead"></h3>
                 </div>
             </div>
             <div class="content_mid_bottom">
-                <div class="logoFacebook">
-                    <img src="./images/flogo_RGB_HEX-1024.svg" alt="Facebook" width="30" />
+                <div class="socialMediaParagraph">
+                    <div class="logoSocialMedia">
+                        <img src="./images/flogo_RGB_HEX-1024.svg" alt="Facebook" class="facebookLogo"/>
+                    </div>
+                    <div class="socialMediaText" i18n="defaultFacebookText"></div>
+                </div>
+                <div class="socialMediaParagraph">
+                    <div class="logoSocialMedia">
+                        <img src="./images/discord-logo-color.svg" alt="Discord" class="discordLogo"/>
+                    </div>
+                    <div class="socialMediaText" i18n="defaultDiscordText"></div>
                 </div>
-                <div class="text4" i18n="defaultFacebookText"></div>
-            </div>
         </div>
         <div class="content_foot">
             <div class="languageSwitcher"></div>