From bdc951c0e42edcec52ac118fb7f505b17889cdc9 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 10 Mar 2020 16:56:24 +0200
Subject: [PATCH] better way for spacing between selectable inputs and search
 bar

---
 src/routes/Addons/Addons.js   | 25 +++++-----
 src/routes/Addons/styles.less | 92 +++++++++++++++++------------------
 2 files changed, 56 insertions(+), 61 deletions(-)

diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index f82f2a79b..41d4b5145 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -93,19 +93,18 @@ const Addons = ({ urlParams, queryParams }) => {
             <NavBar className={styles['nav-bar']} backButton={true} title={'Addons'} />
             <div className={styles['addons-content']}>
                 <div className={styles['selectable-inputs-container']}>
-                    <div className={styles['selectable-inputs']}>
-                        <Button className={styles['add-button-container']} title={'Add addon'} onClick={openAddAddonModal}>
-                            <Icon className={styles['icon']} icon={'ic_plus'} />
-                            <div className={styles['add-button-label']}>Add addon</div>
-                        </Button>
-                        {selectInputs.map((selectInput, index) => (
-                            <Multiselect
-                                {...selectInput}
-                                key={index}
-                                className={styles['select-input-container']}
-                            />
-                        ))}
-                    </div>
+                    <Button className={styles['add-button-container']} title={'Add addon'} onClick={openAddAddonModal}>
+                        <Icon className={styles['icon']} icon={'ic_plus'} />
+                        <div className={styles['add-button-label']}>Add addon</div>
+                    </Button>
+                    {selectInputs.map((selectInput, index) => (
+                        <Multiselect
+                            {...selectInput}
+                            key={index}
+                            className={styles['select-input-container']}
+                        />
+                    ))}
+                    <div className={styles['spacing']} />
                     <label className={styles['search-bar-container']}>
                         <TextInput
                             className={styles['search-input']}
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index daaaee161..973e85429 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -36,65 +36,61 @@
             padding: 1.5rem 3rem;
             overflow: visible;
 
-            .selectable-inputs {
-                flex: 1;
+            .add-button-container {
+                flex: none;
                 display: flex;
                 flex-direction: row;
+                align-items: center;
+                justify-content: center;
+                width: 10rem;
+                height: 3.5rem;
                 margin-right: 1.5rem;
-                overflow: visible;
+                padding: 0 1rem;
+                background-color: @color-accent3;
 
-                .add-button-container {
-                    flex: none;
-                    display: flex;
-                    flex-direction: row;
-                    align-items: center;
-                    justify-content: center;
-                    width: 10rem;
-                    height: 3.5rem;
-                    margin-right: 1.5rem;
-                    padding: 0 1rem;
-                    background-color: @color-accent3;
-
-                    &:hover {
-                        background-color: @color-accent3-light2;
-                    }
-
-                    &:focus {
-                        outline-color: @color-surface-light5;
-                    }
-
-                    .icon {
-                        flex: none;
-                        width: 1.2rem;
-                        height: 1.2rem;
-                        margin-right: 1rem;
-                        fill: @color-surface-light5;
-                    }
-
-                    .add-button-label {
-                        flex-grow: 0;
-                        flex-shrink: 1;
-                        flex-basis: auto;
-                        max-height: 2.4em;
-                        font-size: 1.1rem;
-                        color: @color-surface-light5;
-                    }
+                &:hover {
+                    background-color: @color-accent3-light2;
                 }
 
-                .select-input-container {
+                &:focus {
+                    outline-color: @color-surface-light5;
+                }
+
+                .icon {
+                    flex: none;
+                    width: 1.2rem;
+                    height: 1.2rem;
+                    margin-right: 1rem;
+                    fill: @color-surface-light5;
+                }
+
+                .add-button-label {
                     flex-grow: 0;
                     flex-shrink: 1;
-                    flex-basis: 15rem;
-                    height: 3.5rem;
-                    margin-right: 1.5rem;
-
-                    .multiselect-menu-container {
-                        max-height: calc(3.2rem * 7);
-                        overflow: auto;
-                    }
+                    flex-basis: auto;
+                    max-height: 2.4em;
+                    font-size: 1.1rem;
+                    color: @color-surface-light5;
                 }
             }
 
+            .select-input-container {
+                flex-grow: 0;
+                flex-shrink: 1;
+                flex-basis: 15rem;
+                height: 3.5rem;
+                margin-right: 1.5rem;
+
+                .multiselect-menu-container {
+                    max-height: calc(3.2rem * 7);
+                    overflow: auto;
+                }
+            }
+
+            .spacing {
+                flex: 1;
+            }
+
             .search-bar-container {
                 flex-grow: 0;
                 flex-shrink: 1;