add option for banner at bottom of page

src/Components/Private/MemberCard.js

@@ -429,6 +429,9 @@ export default function MemberCard(props) {
             <hr/></> : "" }
             <p><b>Description:</b></p>
             { localStorage.getItem('twemoji') ? <Twemoji options={{ className: 'twemoji' }}><p dangerouslySetInnerHTML={{__html: desc}}></p></Twemoji> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
+            { !member.banner || !localStorage.getItem("bottombanners") ? "" : 
+              <BS.Image rounded className="mb-2" style={{width: '100%', maxHeight: '15rem', objectFit: 'cover'}} src={banner}/>
+            }
                 { proxyView ? "" : privacyEdit ? "" : privacyView ? "" : <><BS.Button variant="light" onClick={() => setEditMode(true)}>Edit</BS.Button> <Link to={`dash/${member.id}`}><BS.Button variant="primary" className="float-right">View page</BS.Button></Link></> }
             </> } </BS.Card.Body>
         )

src/Components/Private/MemberPage.js

@@ -456,6 +456,9 @@ export default function MemberPage(props) {
             <hr/></> : "" }
             <p><b>Description:</b></p>
             { localStorage.getItem('twemoji') ? <Twemoji options={{ className: 'twemoji' }}><p dangerouslySetInnerHTML={{__html: desc}}></p></Twemoji> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
+            { !member.banner || !localStorage.getItem("bottombanners") ? "" : 
+              <BS.Image rounded className="mb-2" style={{width: '100%', maxHeight: '15rem', objectFit: 'cover'}} src={banner}/>
+            }
                 { proxyView ? "" : privacyMode ? "" : privacyView ? "" : <><BS.Button variant="light" onClick={() => setEditMode(true)}>Edit</BS.Button> <Link to="/dash" ><BS.Button variant="primary" className="float-right">Back</BS.Button></Link></>}
             </> } </BS.Card.Body></BS.Card></>
     )

src/Components/Private/System.js

@@ -251,6 +251,9 @@ export default function System(props) {
             ) : (
               <p dangerouslySetInnerHTML={{ __html: desc }}></p>
             )}
+            { !user.banner || !localStorage.getItem("bottombanners") ? "" : 
+              <BS.Image rounded className="mb-2" style={{width: '100%', maxHeight: '15rem', objectFit: 'cover'}} src={banner}/>
+            }
             {privacyEdit ? (
               ""
             ) : privacyView ? (

src/Components/Public/Profile.js

@@ -122,6 +122,9 @@ export default function Profile () {
          </BS.Row>
          <p><b>Description:</b></p>
          { localStorage.getItem('twemoji') ? <Twemoji options={{ className: 'twemoji' }}><p dangerouslySetInnerHTML={{__html: desc}}></p></Twemoji> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
+         { !system.banner || !localStorage.getItem("bottombanners") ? "" : 
+              <BS.Image rounded className="mb-2" style={{width: '100%', maxHeight: '15rem', objectFit: 'cover'}} src={banner}/>
+            }
          </BS.Card.Body>
     </BS.Card>
     

src/Components/Public/ProfileCard.js

@@ -131,6 +131,9 @@ export default function MemberCard(props) {
             <hr/></> : "" }
             <p><b>Description:</b></p>
             { localStorage.getItem('twemoji') ? <Twemoji options={{ className: 'twemoji' }}><p dangerouslySetInnerHTML={{__html: desc}}></p></Twemoji> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
+            { !member.banner || !localStorage.getItem("bottombanners") ? "" : 
+              <BS.Image rounded className="mb-2" style={{width: '100%', maxHeight: '15rem', objectFit: 'cover'}} src={banner}/>
+            }
             <BS.Row><BS.Col><Link to={`${sysID}/${member.id}`}><BS.Button variant="primary" className="float-right">View page</BS.Button></Link></BS.Col></BS.Row> </BS.Card.Body>
         )
     }

src/Components/Public/ProfilePage.js

@@ -154,6 +154,9 @@ export default function ProfilePage(props) {
             <hr/></> : "" }
             <p><b>Description:</b></p>
             { localStorage.getItem('twemoji') ? <Twemoji options={{ className: 'twemoji' }}><p dangerouslySetInnerHTML={{__html: desc}}></p></Twemoji> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
+            { !member.banner || !localStorage.getItem("bottombanners") ? "" : 
+              <BS.Image rounded className="mb-2" style={{width: '100%', maxHeight: '15rem', objectFit: 'cover'}} src={banner}/>
+            }
             <BS.Row><BS.Col><Link to={location.pathname.substring(0, location.pathname.lastIndexOf('/'))}><BS.Button variant="primary" className="float-right">Back</BS.Button></Link></BS.Col></BS.Row>
             </BS.Card.Body>
         </BS.Card>

src/Pages/Settings.js

@@ -217,7 +217,35 @@ const Settings = ({ forceUpdate }) => {
                 }}
               />
             )}
-            Hide system and member banners?
+            Hide banners at the top?
+          </BS.Col>
+          <BS.Col
+            xs={12}
+            lg={4}
+            className="mx-1 mb-4 d-flex align-items-center row"
+          >
+            {localStorage.getItem("bottombanners") ? (
+              <Toggle
+                className="mr-2"
+                defaultChecked={true}
+                icons={false}
+                onChange={() => {
+                  localStorage.removeItem("bottombanners");
+                  forceUpdate();
+                }}
+              />
+            ) : (
+              <Toggle
+                className="mr-2"
+                defaultChecked={false}
+                icons={false}
+                onChange={() => {
+                  localStorage.setItem("bottombanners", "true");
+                  forceUpdate();
+                }}
+              />
+            )}
+            Show banners at the bottom?
           </BS.Col>
         </BS.Row>
       </BS.Card.Body>