Merge: - client: fix log filters and guide tab styles

Closes #1951

* commit '9fecab8675b3496cb6fa5f03084e0be7c364a263':
  - client: fix log filters styles
  - client: fix guide tab styles

client/src/components/Logs/Filters/index.js

@@ -9,7 +9,7 @@ const Filters = ({ filter, refreshLogs, setIsLoading }) => (
                 <Trans>query_log</Trans>
                 <button
                     type="button"
-                    className="btn btn-icon--green ml-3 bg-transparent"
+                    className="btn btn-icon--green logs__refresh"
                     onClick={refreshLogs}
                 >
                     <svg className="icons icon--24">

client/src/components/Logs/Logs.css

@@ -539,3 +539,16 @@
 .loading__text {
     transform: translateY(3rem);
 }
+
+.logs__refresh {
+    position: relative;
+    top: 3px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    margin-left: 15px;
+    background-color: transparent;
+}

client/src/components/Settings/Dns/Cache/Form.js

@@ -53,7 +53,7 @@ const Form = ({
             {INPUTS_FIELDS.map(({
                 name, title, description, placeholder, validate, max,
             }) => <div className="col-12" key={name}>
-                <div className="col-7 p-0">
+                <div className="col-12 col-md-7 p-0">
                     <div className="form__group form__group--settings">
                         <label htmlFor={name}
                                className="form__label form__label--with-desc">{t(title)}</label>

client/src/components/SetupGuide/Guide.css

@@ -13,3 +13,17 @@
     margin-bottom: 20px;
     font-size: 15px;
 }
+
+.guide__address {
+    display: block;
+    margin-bottom: 7px;
+    font-size: 13px;
+    font-weight: 700;
+}
+
+@media screen and (min-width: 768px) {
+    .guide__address {
+        display: list-item;
+        font-size: 15px;
+    }
+}

client/src/components/SetupGuide/index.js

@@ -24,8 +24,8 @@ const SetupGuide = ({
                 <div className="mt-1">
                     <Trans>install_devices_address</Trans>:
                 </div>
-                <div className="mt-2 font-weight-bold">
-                    {dnsAddresses.map((ip) => <li key={ip}>{ip}</li>)}
+                <div className="mt-3">
+                    {dnsAddresses.map((ip) => <li key={ip} className="guide__address">{ip}</li>)}
                 </div>
             </div>
             <Guide dnsAddresses={dnsAddresses} />

client/src/components/ui/PageTitle.css

@@ -6,18 +6,24 @@
 .page-header--logs {
     flex-direction: row;
     align-items: flex-end;
-    margin: 2rem 0 3rem;
+    margin: 2rem 0 2.8rem;
+}
+
+.page-header--logs .page-title {
+    display: inline-flex;
+    align-items: center;
 }
 
 @media (max-width: 991px) {
     .page-header--logs {
         flex-direction: column;
         align-items: center;
-        margin-bottom: 1.5rem;
+        margin: 1.1rem 0;
     }
 
     .page-header--logs .page-title {
-        padding-bottom: 2.5rem;;
+        margin-bottom: 1.1rem;
+        font-size: 1.8rem;
     }
 }
 

client/src/components/ui/Tabs.css

@@ -2,8 +2,16 @@
     display: flex;
     justify-content: space-between;
     margin-bottom: 15px;
-    padding: 15px 0;
+    padding: 10px 0;
     border-bottom: 1px solid #e8e8e8;
+    overflow: auto;
+}
+
+@media screen and (min-width: 768px) {
+    .tabs__controls {
+        padding: 15px 0;
+        overflow: initial;
+    }
 }
 
 .tabs__controls--form {
@@ -26,11 +34,18 @@
     align-items: center;
     min-width: 70px;
     font-size: 13px;
+    white-space: nowrap;
     color: #555555;
     cursor: pointer;
     opacity: 0.6;
 }
 
+@media screen and (min-width: 768px) {
+    .tab__control {
+        white-space: normal;
+    }
+}
+
 .tab__control:hover,
 .tab__control:focus {
     opacity: 1;

client/src/helpers/constants.js

@@ -337,11 +337,6 @@ export const RESPONSE_FILTER = {
         query: 'processed',
         label: 'show_processed_responses',
     },
-    SPACE: {
-        query: 'all',
-        label: '',
-        disabled: true,
-    },
     BLOCKED: {
         query: 'blocked',
         label: 'show_blocked_responses',