From b90c3cc45892304019fcca85fabccb834fa12911 Mon Sep 17 00:00:00 2001
From: Ezra <ezra96@outlook.com>
Date: Fri, 30 Apr 2021 15:23:48 -0500
Subject: [PATCH] style help button and help modal

---
 app/styles/app.scss             |  2 +
 app/styles/components/help.scss | 68 +++++++++++++++++++++++++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 app/styles/components/help.scss

diff --git a/app/styles/app.scss b/app/styles/app.scss
index b16edbf..7feb504 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -7,6 +7,8 @@
 
 @import "components/table";
 
+@import "components/help";
+
 #page_header {
   margin-bottom: 0;
 /*  background-image: url("/assets/images/banner_bkg.png"); */
diff --git a/app/styles/components/help.scss b/app/styles/components/help.scss
new file mode 100644
index 0000000..1e6f95f
--- /dev/null
+++ b/app/styles/components/help.scss
@@ -0,0 +1,68 @@
+#help-button-desktop {
+    background-color: lightgray;
+    margin: 10px;
+    width: 1.5em;
+    height: 1.5em;
+    border-radius: 100%;
+    text-align: center;
+    float: right;
+    font-weight: 900;
+	font-size:1.5em;
+	display:block;
+	cursor:pointer;
+}
+
+#help-button-desktop:hover {
+    background-color: white;
+}
+
+#help-button-mobile:hover {
+	background-color:darkgrey;
+}
+
+@media only screen and (min-width: 991.97px) {
+
+a #help-button-mobile {
+	display:none;
+	visibility: hidden;
+}
+
+.desktop-img {
+    background-image: url(desk.jpg);
+	width:100%;
+	height:851px;
+	max-height:100%;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+}
+
+@media only screen and (max-width: 991.98px) {
+
+a #help-button-mobile {
+    background-color: lightgray;
+    margin: 10px;
+    width: 1.5em;
+    height: 1.5em;
+    border-radius: 100%;
+    text-align: center;
+    float: right;
+    font-weight: 900;
+	font-size:1.5em;
+	display:block;
+}
+
+a #help-button-desktop {
+	display:none;
+	visibility: hidden;	
+}
+
+.mobile-img {
+    background-image: url(mobile.png);
+	width:100%;
+	height:1348px;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+}
\ No newline at end of file