Made actionbar responsive and standardized the components

src/renderer/components/BaseInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-      <input type="search" v-bind="query" :placeholder="placeholder">
+      <input :type="type" :placeholder="placeholder">
       <slot></slot>
   </div>
 </template>
@@ -8,12 +8,7 @@
 <script>
 export default {
   name: 'BaseInput',
-  data () {
+  props: ['placeholder', 'type']
-    return {
-      query: null
-    }
-  },
-  props: ['placeholder']
 }
 </script>
 
@@ -21,29 +16,30 @@ export default {
 <style lang="sass" scoped>
   div
     display: flex
-    justify-content: center
+    align-items: center
-    width: 40%
-  
-    input
-      width: 90%
-      height: 100%
-      border-radius: 15px
-      padding: .4rem 1.5rem
-      color: lighten(black, 30) 
     border: 1px solid lighten(grey, 40)
-      margin-right: -2rem
     background-color: #f9f9f9
-      transition: all .2s ease-in-out
+    border-radius: 100px
+    padding: .4rem 1.5rem .4rem 0rem
+    transition: width 200ms
+    input
+      height: 100%
+      color: lighten(black, 30) 
+      padding: .2rem 0rem .2rem 1.5rem
+      min-width: unset
+      border: unset
+      background-color: unset
+      box-sizing: border-box
+      outline: none
+      flex-grow: 1
       &::placeholder
         color: #a8abb3
 
-      &:focus
-        outline: none
-        width: 100%
-
     svg
       width: 1.2rem
       height: 1.2rem
+      min-width: 1.2rem
+      min-height: 1.2rem
       cursor: pointer
       fill: #3b3c3d
 </style>

src/renderer/components/Profile.vue

@@ -21,12 +21,12 @@ export default {
     padding: 0
     margin-left: 1.5rem
     display: flex
-    flex-direction: row
+    align-items: center
     cursor: pointer
 
   &__image
-    width: 1.5rem
+    width: 2rem
-    height: 1.5rem
+    height: 2rem
     border-radius: 50%
 
   &__icon

src/renderer/layouts/ActionBar.vue

@@ -1,6 +1,7 @@
 <template>
-    <div>
+    <section class="action-bar">
-        <BaseInput placeholder="Search">
+        <div class="search-wrapper">
+          <BaseInput placeholder="Search" type="search">
             <svg version="1.1" class="search__icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 52.966 52.966" style="enable-background:new 0 0 52.966 52.966;" xml:space="preserve">
               <path d="M51.704,51.273L36.845,35.82c3.79-3.801,6.138-9.041,6.138-14.82c0-11.58-9.42-21-21-21s-21,9.42-21,21s9.42,21,21,21
                 c5.083,0,9.748-1.817,13.384-4.832l14.895,15.491c0.196,0.205,0.458,0.307,0.721,0.307c0.25,0,0.499-0.093,0.693-0.279
@@ -9,13 +10,15 @@
               <g></g>
             </svg>
           </BaseInput>
-
+        </div>
+        <div class="icon-wrapper">
           <Notification :BadgeNumber="5"></Notification>
 
           <Profile></Profile>
 
           <History></History>
         </div>
+    </section>
 </template>
 
 <script>
@@ -31,13 +34,27 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-div
+section.action-bar
   display: flex
   padding: 1rem 2.5rem
   align-items: center
-
+  .search-wrapper
-@media(max-width: 1000px)    
+    transition: width 200ms
-  div
+    transition: margin-top 100ms
-    flex-wrap: wrap
+    flex-grow: 0.3
+  .icon-wrapper
+    flex-grow: 1
+    align-items: center
+    display: flex
+@media(max-width: 800px)
+  section.action-bar
+    .search-wrapper
+      flex-grow: 1
+@media(max-width: 600px)
+  section.action-bar
+    flex-direction: column-reverse
+    .search-wrapper
+      width: 100%
+      margin-top: 24px
 </style>