fix: PageHeader

src/components/Button.vue

@@ -0,0 +1,10 @@
+<template>
+  <button class="text-white text-sm px-4 py-2 focus:outline-none rounded-lg">
+    <slot></slot>
+  </button>
+</template>
+<style scoped>
+button {
+  background-image: linear-gradient(180deg, #4AC3F8 0%, #2490EF 100%);
+}
+</style>

src/components/Icons/Add.vue

@@ -2,7 +2,6 @@
   <svg viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M4 .8v6.4M7.2 4H.8"
-      stroke="#112B42"
       fill="none"
       fill-rule="evenodd"
       stroke-linecap="round"

src/components/PageHeader.vue

@@ -1,64 +1,25 @@
 <template>
-  <div
-    class="page-header px-4 py-2 border-bottom bg-white d-flex align-items-center justify-content-between"
-  >
-    <h5 class="m-0" v-if="title">{{ title }}</h5>
-    <div v-if="breadcrumbs">
-      <span v-for="(item, index) in breadcrumbs" :key="index">
-        <a v-if="item.route.length != 0" :href="item.route">
-          <h5 class="breadCrumbRoute">{{ item.title }}</h5>
-        </a>
-        <h5 v-else class="breadCrumbRoute">{{ item.title }}</h5>
-        <feather-icon
-          v-if="index != breadcrumbs.length - 1"
-          name="chevron-right"
-          style="color: #212529 !important;"
-        ></feather-icon>
-      </span>
-    </div>
-    <div class="col-4 p-1">
-      <SearchBar />
+  <div class="mt-4 px-8 flex justify-between">
+    <h1 class="text-xl font-bold" v-if="title">{{ title }}</h1>
+    <div class="flex">
+      <Button>
+        <Add class="w-3 h-3 stroke-current text-white" />
+      </Button>
+      <SearchBar class="ml-2" />
     </div>
   </div>
 </template>
 <script>
+import Button from './Button';
+import Add from './Icons/Add';
 import SearchBar from './SearchBar';
 
 export default {
   props: ['title', 'breadcrumbs'],
   components: {
+    Button,
+    Add,
     SearchBar
-  },
-  computed: {
-    clickableBreadcrumbs() {
-      return this.breadcrumbs.slice(0, this.breadcrumbs.length - 1);
-    },
-    lastBreadcrumb() {
-      return this.breadcrumbs[this.breadcrumbs.length - 1];
-    }
   }
 };
 </script>
-<style lang="scss">
-@import '../styles/variables.scss';
-.page-header {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-}
-.breadCrumbRoute {
-  display: inline;
-}
-a {
-  text-decoration: none;
-  color: #212529;
-  &:hover {
-    text-decoration: none;
-    color: $frappe;
-  }
-}
-.feather-icon {
-  position: relative;
-  bottom: -2px;
-}
-</style>

src/components/SearchBar.vue

@@ -1,14 +1,12 @@
 <template>
-  <div v-on-outside-click="clearInput">
-    <div class="input-group">
-      <div class="input-group-prepend">
-        <span class="input-group-text pt-1">
-          <feather-icon name="search" style="color: #212529 !important;"></feather-icon>
-        </span>
+  <div v-on-outside-click="clearInput" class="relative">
+    <div class="rounded-lg relative flex items-center overflow-hidden">
+      <div class="absolute ml-3">
+        <feather-icon class="text-gray-500" name="search"></feather-icon>
       </div>
       <input
         type="search"
-        class="form-control"
+        class="bg-gray-200 text-sm p-2 pl-10 focus:outline-none"
         @click="focus(0)"
         @keydown.down="navigate('down')"
         @keydown.up="navigate('up')"
@@ -19,19 +17,19 @@
         @keydown.enter="searchOrSelect"
       />
     </div>
-    <div v-if="inputValue" class="search-list position-absolute shadow-sm" style="width: 98%">
-      <list-row
+    <div v-if="inputValue" class="absolute bg-white text-sm rounded shadow-md">
+      <div
         v-for="(doc, i) in suggestion"
         :key="i+1"
         :ref="i+1"
         :route="doc.route"
-        :class="{ 'seperator': doc.seperator, 'item-active': isFocused(i+1) && !doc.seperator }"
-        class="d-flex align-items-center"
+        :class="{ 'border-t uppercase text-xs text-gray-600 mt-3 first:mt-0': doc.seperator, 'bg-gray-200': isFocused(i+1) && !doc.seperator }"
+        class="px-3 py-2 rounded-lg"
         @click.native="routeTo(doc.route)"
       >
         <div :class="doc.seperator ? 'small' : ''">{{ doc.name }}</div>
-        <div class="small ml-auto">{{ doc.doctype }}</div>
-      </list-row>
+        <!-- <div class="small ml-auto">{{ doc.doctype }}</div> -->
+      </div>
     </div>
   </div>
 </template>
@@ -52,11 +50,6 @@ export default {
     ListRow,
     ListCell
   },
-  watch: {
-    inputValue() {
-      if (!this.inputValue.length) this.suggestion = [];
-    }
-  },
   methods: {
     focus(key) {
       this.currentlyFocused = key % (this.suggestion.length + 1);
@@ -176,36 +169,3 @@ export default {
   }
 };
 </script>
-
-<style lang="scss" scoped>
-@import '../styles/variables';
-.input-group-text {
-  background-color: var(--white);
-  border-right: none;
-}
-.seperator {
-  background-color: var(--light);
-}
-
-input {
-  border-left: none;
-  height: 27px;
-}
-
-input:focus {
-  border: 1px solid #ced4da;
-  border-left: none;
-  outline: none !important;
-  box-shadow: none !important;
-}
-.search-list {
-  z-index: 2;
-  max-height: 90vh;
-  overflow: auto;
-}
-
-.item-active {
-  background-color: var(--light);
-}
-</style>
-