refact(header): extract DiscordButton to its own component

src/components/DiscordButton/index.tsx

@@ -1,13 +1,11 @@
-import React from "react"
+import React, { PropsWithChildren } from "react"
+import * as SC from "./styles"
 
-function DiscordButton({
-  lined = false,
-  children,
-}: React.PropsWithChildren<{ lined: boolean }>) {
+function DiscordButton({ children }: PropsWithChildren<{}>) {
   return (
-    <button>
-      <div>{children}</div>
-    </button>
+    <SC.DiscordButtonWrapper>
+      <SC.StyledDiscordLogo /> {children}
+    </SC.DiscordButtonWrapper>
   )
 }
 

src/components/DiscordButton/styles.tsx

@@ -0,0 +1,28 @@
+import styled from "styled-components"
+import DiscordLogo from "../../images/discord-logo.svg"
+
+export const DiscordButtonWrapper = styled.div`
+  margin-top: 32px;
+  display: flex;
+  align-items: center;
+  font-family: "Oxygen", sans-serif;
+  font-size: 30px;
+  font-weight: 700;
+  text-transform: uppercase;
+  background: #7289da;
+  color: #fff;
+  padding: 22px 35px;
+  border-radius: 5px;
+  transition: background 0.3s;
+  cursor: pointer;
+  box-shadow: 0 3px 18px rgba(0, 0, 0, 0.3);
+
+  &:hover {
+    background: #5265ad;
+  }
+`
+
+export const StyledDiscordLogo = styled(DiscordLogo)`
+  width: 38px;
+  margin-right: 16px;
+`