From d560cd51d2d5895a7182a857c2bce04c9aee0c90 Mon Sep 17 00:00:00 2001
From: James Hawkins <jhawki2005@gmail.com>
Date: Mon, 2 Aug 2021 12:45:22 +0100
Subject: [PATCH] Discord server plug

---
 README.md                        |  3 +++
 src/components/DiscordBanner.css | 16 ++++++++++++++++
 src/components/DiscordBanner.js  | 12 ++++++++++++
 src/views/Search.js              |  4 +++-
 4 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 src/components/DiscordBanner.css
 create mode 100644 src/components/DiscordBanner.js

diff --git a/README.md b/README.md
index 2fd0356a..78a3d049 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,8 @@
 # movie-web
 Small web app for watching movies easily. Check it out at **[movie.squeezebox.dev](https://movie.squeezebox.dev)**.
+
+**[Join the Discord community](https://discord.gg/vXsRvye8BS)**
+
 ## Credits
  - Thanks to [@JipFr](https://github.com/JipFr) for initial work on [movie-cli](https://github.com/JipFr/movie-cli)
  - Thanks to [@mrjvs](https://github.com/mrjvs) for help porting to React, and for the beautiful design
diff --git a/src/components/DiscordBanner.css b/src/components/DiscordBanner.css
new file mode 100644
index 00000000..6fa3fe5d
--- /dev/null
+++ b/src/components/DiscordBanner.css
@@ -0,0 +1,16 @@
+.discordBanner {
+	margin-top: 0.5rem;
+    border-inline-start: none;
+    font-size: 16px;
+    font-weight: normal;
+    letter-spacing: -.01em;
+    padding: .5rem 1rem .5rem .75rem;
+    border-radius: .25rem;
+	background-color: var(--button);
+	color: var(--button-text);
+}
+
+.discordBanner a {
+    color: var(--button-text);
+    /* text-decoration: none; */
+}
\ No newline at end of file
diff --git a/src/components/DiscordBanner.js b/src/components/DiscordBanner.js
new file mode 100644
index 00000000..2b952104
--- /dev/null
+++ b/src/components/DiscordBanner.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import './DiscordBanner.css';
+
+export function DiscordBanner() {
+	return (
+		<div className="discordBanner">
+			<a href="https://discord.gg/vXsRvye8BS">
+                Join our Discord server
+            </a>
+		</div>
+	)
+}
\ No newline at end of file
diff --git a/src/views/Search.js b/src/views/Search.js
index 306bf4c2..c6d20743 100644
--- a/src/views/Search.js
+++ b/src/views/Search.js
@@ -11,6 +11,7 @@ import { useMovie } from '../hooks/useMovie';
 import { TypeSelector } from '../components/TypeSelector';
 
 import './Search.css';
+import { DiscordBanner } from '../components/DiscordBanner';
 
 export function SearchView() {
     const { navigate, setStreamUrl, setStreamData } = useMovie();
@@ -115,6 +116,7 @@ export function SearchView() {
     return (
         <div className="cardView">
             <Card>
+                <DiscordBanner />
                 {offlineStatus ? <ErrorBanner>{offlineStatus}</ErrorBanner> : ''}
                 <Title accent="Because watching content legally is boring">
                     What do you wanna watch?
@@ -154,7 +156,7 @@ export function SearchView() {
                 }
             </Card>
             <div className="topRightCredits">
-                <a href="https://github.com/JamesHawkinss/movie-web" target="_blank" rel="noreferrer">Check it out on GitHub <Arrow /></a>
+                <a href="https://github.com/JamesHawkinss/movie-web" target="_blank" rel="noreferrer">Check it out on GitHub <Arrow /></a>                
             </div>
         </div>
     )