Replaced input by ds-input etc.

components/SearchInput.spec.js

@@ -3,9 +3,10 @@ import SearchInput from './SearchInput.vue'
 
 describe('SearchInput.vue', () => {
   let wrapper
+  const mocks = { $t: () => {} }
 
   beforeEach(() => {
-    wrapper = shallowMount(SearchInput, {})
+    wrapper = shallowMount(SearchInput, { mocks })
   })
 
   it('renders', () => {
@@ -17,22 +18,20 @@ describe('SearchInput.vue', () => {
   })
 
   it('defaults to an empty value', () => {
-    wrapper = mount(SearchInput)
+    wrapper = mount(SearchInput, { mocks })
     expect(wrapper.vm.value).toBe('')
   })
-  
+
   it('defaults to id "nav-search"', () => {
-    wrapper = mount(SearchInput)
+    wrapper = mount(SearchInput, { mocks })
     expect(wrapper.vm.id).toBe('nav-search')
   })
 
   it('changes searchValue as a user inputs a value', () => {
-    wrapper = mount(SearchInput)
+    wrapper = mount(SearchInput, { mocks })
     const input = wrapper.find('#nav-search')
     input.element.value = 'abc'
     input.trigger('input')
     expect(wrapper.vm.searchValue).toBe('abc')
   })
-  // TODO: add similar software tests for other components
-  // TODO: add more test cases in this file
 })

components/SearchInput.vue

@@ -7,7 +7,7 @@
   >
     <div class="field">
       <div class="control has-icons-left has-icons-right">
-        <input
+        <ds-input
           :id="id"
           ref="input"
           v-model="searchValue"
@@ -15,19 +15,11 @@
           class="input"
           name="search"
           type="text"
+          icon="search"
           :placeholder="$t('search.placeholder')"
           @keyup.exact="onInput"
           @keyup.enter="onEnter"
-        >
-        <!-- span class="icon is-small is-left">
-          <hc-icon icon="search"></hc-icon>
-        </span -->
-        <!-- ds-icon
-          class="icon"
-          size="xx-small"
-          name="angle-down"
-          align="right"
-        / -->
+        />
       </div>
     </div>
   </div>

layouts/default.vue

@@ -219,17 +219,20 @@ export default {
 
 .main-navigation-left {
   display: flex;
-  margin-right: auto;
+  // margin-right: auto;
+  margin-right: 40px;
 }
 
 .main-navigation-center {
   display: flex;
-  margin-right: auto;
+  // margin-right: auto;
+  width: 100%;
 }
 
 .main-navigation-right {
   display: flex;
-  margin-left: auto;
+  // margin-left: auto;
+  margin-left: 40px;
 }
 
 .avatar-menu-trigger {