From f4a1659fa7d78a88941df2ca213bcfdf9f9e5084 Mon Sep 17 00:00:00 2001
From: Valeriy S <ValeraS@users.noreply.github.com>
Date: Wed, 6 Mar 2019 12:01:38 +0300
Subject: [PATCH] fix(ui): use react-bootstrap for layouting sponsor logos

---
 client/src/pages/sponsors.css |   9 +-
 client/src/pages/sponsors.js  | 166 ++++++++++++----------------------
 2 files changed, 59 insertions(+), 116 deletions(-)

diff --git a/client/src/pages/sponsors.css b/client/src/pages/sponsors.css
index 6c2323b5cb..cdf6f559ea 100644
--- a/client/src/pages/sponsors.css
+++ b/client/src/pages/sponsors.css
@@ -1,11 +1,3 @@
-.img-responsive {
-  display: block;
-  max-width: 100%;
-  height: auto;
-  padding: 0;
-  margin: 0;
-}
-
 .sls {
   display: flex;
   flex-wrap: wrap;
@@ -19,6 +11,7 @@
   border-radius: 10px;
   width: 150px;
   height: 100px;
+  margin: 0 auto;
   margin-bottom: 50px;
   display: flex;
   align-items: center;
diff --git a/client/src/pages/sponsors.js b/client/src/pages/sponsors.js
index 0ae515e99d..989a484c1b 100644
--- a/client/src/pages/sponsors.js
+++ b/client/src/pages/sponsors.js
@@ -1,7 +1,6 @@
 import React, { Fragment } from 'react';
 import Helmet from 'react-helmet';
 import { Grid, Col, Row } from '@freecodecamp/react-bootstrap';
-import Media from 'react-media';
 
 import { Link, Spacer } from '../components/helpers';
 
@@ -29,14 +28,14 @@ const SponsorsPage = () => {
               <Link className='sl' to='https://www.class-central.com'>
                 <img
                   alt="Class Central's logo"
-                  className='img-responsive'
+                  className='img-responsive img-center'
                   src='https://s3.amazonaws.com/freecodecamp/class-central-logo.jpg'
                 />
               </Link>
               <Link className='sl' to='https://www.tsugicloud.org'>
                 <img
                   alt="TsugiCloud's logo"
-                  className='img-responsive'
+                  className='img-responsive img-center'
                   src='https://s3.amazonaws.com/freecodecamp/tsugicloud-logo.png'
                 />
               </Link>
@@ -45,111 +44,62 @@ const SponsorsPage = () => {
             <h3>These companies donate their services to freeCodeCamp.org</h3>
             <hr />
 
-            <Media query='(min-width: 500px)'>
-              {matches =>
-                matches ? (
-                  <Fragment>
-                    <Row className='sls'>
-                      <Link className='sl' to='https://netlify.com'>
-                        <img
-                          alt="Netlify's logo"
-                          className='img-responsive'
-                          src='https://s3.amazonaws.com/freecodecamp/netlify-logo.jpg'
-                        />
-                      </Link>
-                      <Link className='sl' to='https://www.mlab.com/'>
-                        <img
-                          alt="mLab's logo"
-                          className='img-responsive'
-                          src='https://s3.amazonaws.com/freecodecamp/mLab-logo.png'
-                        />
-                      </Link>
-                      <Link className='sl' to='https://auth0.com'>
-                        <img
-                          alt="Auth0's logo"
-                          className='img-responsive'
-                          src='https://s3.amazonaws.com/freecodecamp/auth0-logo.png'
-                        />
-                      </Link>
-                    </Row>
-                    <Row className='sls'>
-                      <Link className='sl' to='https://www.discourse.org/'>
-                        <img
-                          alt="Discourse's logo"
-                          className='img-responsive'
-                          src='https://s3.amazonaws.com/freecodecamp/discourse-logo.png'
-                        />
-                      </Link>
-                      <Link className='sl' to='https://algolia.com'>
-                        <img
-                          alt="Algolia's logo"
-                          className='img-responsive'
-                          src='https://s3.amazonaws.com/freecodecamp/algolia-logo.jpg'
-                        />
-                      </Link>
-                      <Link className='sl' to='https://cloudflare.com'>
-                        <img
-                          alt="Cloudflare's logo"
-                          className='img-responsive'
-                          src='https://s3.amazonaws.com/freecodecamp/cloudflare-logo.jpg'
-                        />
-                      </Link>
-                    </Row>
-                  </Fragment>
-                ) : (
-                  <Fragment>
-                    <Row className='sls'>
-                      <Link className='sl' to='https://netlify.com'>
-                        <img
-                          alt="Netlify's logo"
-                          className='img-responsive'
-                          src='https://s3.amazonaws.com/freecodecamp/netlify-logo.jpg'
-                        />
-                      </Link>
-                      <Link className='sl' to='https://www.mlab.com/'>
-                        <img
-                          alt="mLab's logo"
-                          className='img-responsive'
-                          src='https://s3.amazonaws.com/freecodecamp/mLab-logo.png'
-                        />
-                      </Link>
-                    </Row>
-                    <Row className='sls'>
-                      <Link className='sl' to='https://auth0.com'>
-                        <img
-                          alt="Auth0's logo"
-                          className='img-responsive'
-                          src='https://s3.amazonaws.com/freecodecamp/auth0-logo.png'
-                        />
-                      </Link>
-                      <Link className='sl' to='https://www.discourse.org/'>
-                        <img
-                          alt="Discourse's logo"
-                          className='img-responsive'
-                          src='https://s3.amazonaws.com/freecodecamp/discourse-logo.png'
-                        />
-                      </Link>
-                    </Row>
-                    <Row className='sls'>
-                      <Link className='sl' to='https://algolia.com'>
-                        <img
-                          alt="Algolia's logo"
-                          className='img-responsive'
-                          src='https://s3.amazonaws.com/freecodecamp/algolia-logo.jpg'
-                        />
-                      </Link>
-                      <Link className='sl' to='https://cloudflare.com'>
-                        <img
-                          alt="Cloudflare's logo"
-                          className='img-responsive'
-                          src='https://s3.amazonaws.com/freecodecamp/cloudflare-logo.jpg'
-                        />
-                      </Link>
-                    </Row>
-                  </Fragment>
-                )
-              }
-            </Media>
+            <Row className='sls'>
+              <Col md={4} xs={6}>
+                <Link className='sl' to='https://netlify.com'>
+                  <img
+                    alt="Netlify's logo"
+                    className='img-responsive img-center'
+                    src='https://s3.amazonaws.com/freecodecamp/netlify-logo.jpg'
+                  />
+                </Link>
+              </Col>
+              <Col md={4} xs={6}>
+                <Link className='sl' to='https://www.mlab.com/'>
+                  <img
+                    alt="mLab's logo"
+                    className='img-responsive img-center'
+                    src='https://s3.amazonaws.com/freecodecamp/mLab-logo.png'
+                  />
+                </Link>
+              </Col>
+              <Col md={4} xs={6}>
+                <Link className='sl' to='https://auth0.com'>
+                  <img
+                    alt="Auth0's logo"
+                    className='img-responsive img-center'
+                    src='https://s3.amazonaws.com/freecodecamp/auth0-logo.png'
+                  />
+                </Link>
+              </Col>
+              <Col md={4} xs={6}>
+                <Link className='sl' to='https://www.discourse.org/'>
+                  <img
+                    alt="Discourse's logo"
+                    className='img-responsive img-center'
+                    src='https://s3.amazonaws.com/freecodecamp/discourse-logo.png'
+                  />
+                </Link>
+              </Col>
+              <Col md={4} xs={6}>
+                <Link className='sl' to='https://algolia.com'>
+                  <img
+                    alt="Algolia's logo"
+                    className='img-responsive img-center'
+                    src='https://s3.amazonaws.com/freecodecamp/algolia-logo.jpg'
+                  />
+                </Link>
+              </Col>
+              <Col md={4} xs={6}>
+                <Link className='sl' to='https://cloudflare.com'>
+                  <img
+                    alt="Cloudflare's logo"
+                    className='img-responsive img-center'
+                    src='https://s3.amazonaws.com/freecodecamp/cloudflare-logo.jpg'
+                  />
+                </Link>
+              </Col>
+            </Row>
           </Col>
         </Row>
       </Grid>