Merge pull request #313 from the-programmers-hangout/feat-about-join-us

feat(about): convert join us to a button

src/components/DiscordButton/index.tsx

@@ -4,6 +4,7 @@ import * as SC from "./styles"
 export const DiscordButton: FC = ({ children }) => {
   return (
     <SC.DiscordButtonWrapper
+      className="button"
       rel="noreferrer"
       href="https://discord.gg/programming"
     >

src/components/DiscordButton/styles.tsx

@@ -2,8 +2,7 @@ import styled from "styled-components"
 import DiscordLogo from "../../images/discord-logo.svg"
 
 export const DiscordButtonWrapper = styled.a`
-  margin-top: 32px;
+  display: inline-flex;
-  display: flex;
   align-items: center;
   font-family: "Montserrat", sans-serif;
   font-size: 24px;

src/components/Home/styles.tsx

@@ -94,6 +94,7 @@ export const Menu = styled.nav`
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
+  margin-bottom: 32px;
 `
 
 export const MenuItemText = styled.div`

src/components/Markdown/styles.tsx

@@ -167,7 +167,7 @@ export const MarkdownWrapper = styled.div`
     padding-left: ${BASE_LINE_HEIGHT}px;
   }
 
-  a:not(.anchor) {
+  a:not(.anchor):not(.button) {
     display: inline-block;
     position: relative;
     font-weight: 700;

src/content/site/about.md

@@ -2,6 +2,8 @@
 path: /about
 ---
 
+import { DiscordButton } from "../../components/DiscordButton"
+
 ## What is The Programmers Hangout?
 
 The Programmer's Hangout (TPH) is a discord community geared towards programming. The use of the word "geared" here is important because more accurately it's a discord for programmers of all kinds. If you're a green noob with 5 lines of code under your belt, or if you're a veteran with 15 years of industry experience, TPH has a place for you. More than that, there are over 30,000 people here. You can guarantee you won't be the only person with your experience level on the server.
@@ -10,7 +12,7 @@ The Programmer's Hangout (TPH) is a discord community geared towards programming
 
 All you need to do is click. You'll be prompted to create yourself a Discord account if you don't already have one. We recommend setting one up, then reading the #rules-and-info channel.
 
-[Join us](https://discord.gg/programming)
+<DiscordButton>join us</DiscordButton>
 
 ## When was this server made?