From 3ca5d34c09ff30b79a5c0b6e04c3e6ac6fb93940 Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Wed, 26 Aug 2020 16:39:40 -0400 Subject: [PATCH 1/2] feat(about): make the join us link a button --- src/content/site/about.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/content/site/about.md b/src/content/site/about.md index f596e80..66e0ad2 100644 --- a/src/content/site/about.md +++ b/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) +join us ## When was this server made? From 2c08f9773caac4f103c3b79e3451bf74a7eb2ca1 Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Wed, 26 Aug 2020 17:48:21 -0400 Subject: [PATCH 2/2] ui(about): restyle discord `join us` button --- src/components/DiscordButton/index.tsx | 1 + src/components/DiscordButton/styles.tsx | 3 +-- src/components/Home/styles.tsx | 1 + src/components/Markdown/styles.tsx | 2 +- 4 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/DiscordButton/index.tsx b/src/components/DiscordButton/index.tsx index 4471143..9508f9d 100644 --- a/src/components/DiscordButton/index.tsx +++ b/src/components/DiscordButton/index.tsx @@ -4,6 +4,7 @@ import * as SC from "./styles" export const DiscordButton: FC = ({ children }) => { return ( diff --git a/src/components/DiscordButton/styles.tsx b/src/components/DiscordButton/styles.tsx index 6b9dcd4..cc90516 100644 --- a/src/components/DiscordButton/styles.tsx +++ b/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: flex; + display: inline-flex; align-items: center; font-family: "Montserrat", sans-serif; font-size: 24px; diff --git a/src/components/Home/styles.tsx b/src/components/Home/styles.tsx index 8438f99..75342e5 100644 --- a/src/components/Home/styles.tsx +++ b/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` diff --git a/src/components/Markdown/styles.tsx b/src/components/Markdown/styles.tsx index 30f506c..c39a773 100644 --- a/src/components/Markdown/styles.tsx +++ b/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;