[layout] fix social links

CosmosContracts · Aug 4, 2021 · c0270e1 · c0270e1
1 parent 754ce21
commit c0270e1
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 19 deletions.
diff --git a/src/containers/Dashboard/Section8/index.css b/src/containers/Dashboard/Section8/index.css
@@ -28,15 +28,16 @@
     margin-left: 100px;
 }
 
-.section8_content > button {
+.section8_content > a {
     margin-bottom: 20px;
+    color: white;
 }
 
 .section8_content .no_margin {
     margin-bottom: 0;
 }
 
-.section8_content > button span {
+.section8_content > a span {
    display: flex;
     flex-direction: column;
     font-family: 'Lato', sans-serif;
@@ -105,7 +106,7 @@
         flex-direction: column;
     }
 
-    .section8_content > button {
+    .section8_content > a {
         margin-bottom: 0;
     }
 
@@ -125,7 +126,7 @@
         display: flex;
     }
 
-    .section8_content > button {
+    .section8_content > a {
         width: 20%;
     }
 
@@ -160,7 +161,7 @@
         border-radius: 33px;
     }
 
-    .section8_content > button span {
+    .section8_content > a span {
         font-size: 20px;
     }
 }
@@ -188,7 +189,7 @@
 }
 
 @media (max-width: 620px) {
-    .section8_content > button {
+    .section8_content > a {
         width: 50%;
     }
 }
@@ -208,12 +209,12 @@
         flex-direction: column;
     }
 
-    .section8_content > button:first-child {
+    .section8_content > a:first-child {
         margin: unset;
         margin-bottom: 50px;
     }
 
-    .section8_content > button {
+    .section8_content > a {
         width: unset;
     }
 

diff --git a/src/containers/Dashboard/Section8/index.js b/src/containers/Dashboard/Section8/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from '@material-ui/core';
+import { Button, Link } from '@material-ui/core';
 import './index.css';
 import telegramIcon from '../../../assets/section8/telegram.svg';
 import twitterIcon from '../../../assets/section8/twitter.svg';
@@ -14,30 +14,30 @@ const Section8 = (props) => {
         <div className="section8">
             <div className="section8_header"> {variables[props.lang].meet_global_community} </div>
             <div className="section8_content">
-                <Button>
+                <Link href="https://t.me/JunoNetwork" target="_blank" rel="noopener">
                     <div className="icon_section">
                         <img alt="telegram" src={telegramIcon} />
                     </div>
                     {variables[props.lang].telegram}
-                </Button>
-                <Button>
+                </Link>
+                <Link href="https://twitter.com/JunoNetwork" target="_blank" rel="noopener">
                     <div className="icon_section">
                         <img alt="juno-twitter" className="twitter_icon" src={twitterIcon} />
                     </div>
                     {variables[props.lang].twitter}
-                </Button>
-                <Button className="no_margin">
+                </Link>
+                <Link className="no_margin" href="https://discord.gg/QcWPfK4gJ2" target="_blank" rel="noopener">
                     <div className="icon_section">
-                        <img alt="telegram" src={discordIcon} />
+                        <img alt="juno-discord" src={discordIcon} />
                     </div>
                     {variables[props.lang].discord}
-                </Button>
-                <Button className="no_margin">
+                </Link>
+                <Link className="no_margin" href="https://github.com/CosmosContracts" target="_blank" rel="noopener">
                     <div className="icon_section">
-                        <img alt="juno-twitter" src={githubIcon} />
+                        <img alt="juno-github" src={githubIcon} />
                     </div>
                     {variables[props.lang].github}
-                </Button>
+                </Link>
             </div>
         </div>
     );