From 4dc71a4b3cdde24b8d4b29f60c465e685b4b004d Mon Sep 17 00:00:00 2001
From: "Collin M. Barrett" <collinbarrett@users.noreply.github.com>
Date: Mon, 26 Mar 2018 17:50:45 -0500
Subject: [PATCH] bootstrap 4 tweaks

---
 src/FilterLists.Web/ClientApp/components/Home.tsx   | 2 +-
 src/FilterLists.Web/ClientApp/components/Layout.tsx | 8 ++++----
 src/FilterLists.Web/ClientApp/css/site.css          | 6 +++++-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/FilterLists.Web/ClientApp/components/Home.tsx b/src/FilterLists.Web/ClientApp/components/Home.tsx
index 1090a184a..71018303b 100644
--- a/src/FilterLists.Web/ClientApp/components/Home.tsx
+++ b/src/FilterLists.Web/ClientApp/components/Home.tsx
@@ -53,7 +53,7 @@ export class Home extends React.Component<RouteComponentProps<{}>, IFilterListsS
                            filterMethod: (filter: any, row: any) => row[filter.id].toUpperCase()
                                .includes(filter.value.toUpperCase()),
                            sortMethod: (a: any, b: any) => a.toUpperCase() > b.toUpperCase() ? 1 : -1,
-                           Cell: (cell: any) => <h2 className="list-title">{cell.value}</h2>
+                           Cell: (cell: any) => <h2 className="fl-list-title">{cell.value}</h2>
                        },
                        {
                            Header: "Langs.",
diff --git a/src/FilterLists.Web/ClientApp/components/Layout.tsx b/src/FilterLists.Web/ClientApp/components/Layout.tsx
index 0bf74cf7e..93b821039 100644
--- a/src/FilterLists.Web/ClientApp/components/Layout.tsx
+++ b/src/FilterLists.Web/ClientApp/components/Layout.tsx
@@ -10,10 +10,10 @@ export class Layout extends React.Component<ILayoutProps, {}> {
                    <div className="row">
                        <h1>
                            <a href="./" style={{ display: "inline-block" }}>
-                               <img src="logo_filterlists.png" alt="FilterLists" className="img-responsive"/>
+                               <img src="logo_filterlists.png" alt="FilterLists" className="img-fluid"/>
                            </a>
                        </h1>
-                       <p style={{ margin: 10 }}>
+                       <p id="fl-tagline">
                            The independent, comprehensive directory of filter and host lists for advertisements, trackers, malware, and annoyances.
                        </p>
                    </div>
@@ -22,8 +22,8 @@ export class Layout extends React.Component<ILayoutProps, {}> {
                            { this.props.children }
                        </div>
                    </div>
-                   <div className="row text-center" style={{ margin: 10 }}>
-                       A project by <a href="https://collinmbarrett.com/">Collin M. Barrett</a>. | Contribute on <a href="https://github.com/collinbarrett/FilterLists">GitHub</a>.
+                   <div className="row justify-content-center">
+                       <p>A project by <a href="https://collinmbarrett.com/">Collin M. Barrett</a>. | Contribute on <a href="https://github.com/collinbarrett/FilterLists">GitHub</a>.</p>
                    </div>
                </div>;
     };
diff --git a/src/FilterLists.Web/ClientApp/css/site.css b/src/FilterLists.Web/ClientApp/css/site.css
index dd2ec0ecb..f3e2d4942 100644
--- a/src/FilterLists.Web/ClientApp/css/site.css
+++ b/src/FilterLists.Web/ClientApp/css/site.css
@@ -9,6 +9,10 @@ body, h2, h3, h4, h5, blockquote {
     align-items: center;
 }
 
-.list-title {
+.fl-list-title {
     margin: 0;
+}
+
+#fl-tagline {
+    margin: 0 10px 10px 10px;
 }
\ No newline at end of file