Fix footer layout

client/src/components/ui/Footer.css

@@ -0,0 +1,45 @@
+.footer__row {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.footer__column {
+    margin-bottom: 15px;
+}
+
+.footer__column--language {
+    min-width: 220px;
+    margin-bottom: 0;
+}
+
+.footer__link {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 15px;
+}
+
+.footer__link--report {
+    position: relative;
+    top: 1px;
+    margin-right: 0;
+}
+
+@media screen and (min-width: 768px) {
+    .footer__copyright {
+        margin-right: 25px;
+    }
+
+    .footer__row {
+        flex-direction: row;
+    }
+
+    .footer__column {
+        margin-bottom: 0;
+    }
+
+    .footer__column--language {
+        min-width: initial;
+        margin-left: auto;
+    }
+}

client/src/components/ui/Footer.js

@@ -3,6 +3,9 @@ import { Trans, withNamespaces } from 'react-i18next';
 import { REPOSITORY } from '../../helpers/constants';
 import i18n, { languages } from '../../i18n';
 
+import './Footer.css';
+import './Select.css';
+
 class Footer extends Component {
     getYear = () => {
         const today = new Date();
@@ -17,34 +20,28 @@ class Footer extends Component {
         return (
             <footer className="footer">
                 <div className="container">
-                    <div className="row align-items-center flex-row">
+                    <div className="footer__row">
-                        <div className="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
+                        <div className="footer__column">
-                            <div className="row align-items-center justify-content-center">
+                            <div className="footer__copyright">
-                                <div className="col-auto">
                                 <Trans>copyright</Trans> © {this.getYear()} <a href="https://adguard.com/">AdGuard</a>
                             </div>
-                                <div className="col-auto">
+                        </div>
-                                    <select className="form-control" value={i18n.language} onChange={this.changeLanguage}>
+                        <div className="footer__column">
+                            <a href={REPOSITORY.URL} className="footer__link" target="_blank" rel="noopener noreferrer">
+                                <Trans>homepage</Trans>
+                            </a>
+                            <a href={`${REPOSITORY.URL}/issues/new`} className="btn btn-outline-primary btn-sm footer__link footer__link--report" target="_blank" rel="noopener noreferrer">
+                                <Trans>report_an_issue</Trans>
+                            </a>
+                        </div>
+                        <div className="footer__column footer__column--language">
+                            <select className="form-control select select--language" value={i18n.language} onChange={this.changeLanguage}>
                                 { languages.map(language => <option
                                     key={language.key} value={language.key}>
                                         {language.name}
                                     </option>) }
                             </select>
                         </div>
-                                <div className="col-auto">
-                                    <ul className="list-inline text-center mb-0">
-                                        <li className="list-inline-item">
-                                            <a href={REPOSITORY.URL} target="_blank" rel="noopener noreferrer"><Trans>homepage</Trans></a>
-                                        </li>
-                                    </ul>
-                                </div>
-                                <div className="col-auto">
-                                    <a href={`${REPOSITORY.URL}/issues/new`} className="btn btn-outline-primary btn-sm" target="_blank" rel="noopener noreferrer">
-                                        <Trans>report_an_issue</Trans>
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
                     </div>
                 </div>
             </footer>

client/src/components/ui/Select.css

@@ -0,0 +1,16 @@
+.select.select--language {
+    height: 45px;
+    padding: 0 32px 2px 33px;
+    outline: 0;
+    border-color: rgba(0, 40, 100, 0.12);
+    background-image: url("./svg/globe.svg"), url("./svg/chevron-down.svg");
+    background-repeat: no-repeat, no-repeat;
+    background-position: left 11px center, right 9px center;
+    background-size: 14px, 17px 20px;
+    appearance: none;
+    cursor: pointer;
+}
+
+.select--language::-ms-expand {
+    opacity: 0;
+}

client/src/components/ui/svg/chevron-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#9aa0ac" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>

client/src/components/ui/svg/globe.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#9aa0ac" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-globe"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>