Button styling

diff --git a/flatnotes/src/components/App.vue b/flatnotes/src/components/App.vue
index 015d77d2759bdb419f35cb495164865e2164886d..f591e82b7727ad37d69264aed060a076b625c0e2 100644 (file)
--- a/flatnotes/src/components/App.vue
+++ b/flatnotes/src/components/App.vue
@@ -29,10 +29,10 @@
           noteLoadFailed == false
         "
         type="button"
-        class="btn btn-sm btn-outline-warning mx-1"
+        class="bttn"
         @click="toggleEditMode"
       >
-        Edit
+        <b-icon icon="pencil-square"></b-icon> Edit
       </button>
 
       <!-- Delete -->
@@ -43,30 +43,30 @@
           noteLoadFailed == false
         "
         type="button"
-        class="btn btn-sm btn-outline-danger mx-1"
+        class="bttn"
         @click="deleteNote"
       >
-        Delete
+        <b-icon icon="trash"></b-icon> Delete
       </button>
 
       <!-- Cancel -->
       <button
         v-if="currentView == views.note && editMode == true"
         type="button"
-        class="btn btn-sm btn-outline-secondary mx-1"
+        class="bttn"
         @click="cancelNote"
       >
-        Cancel
+        <b-icon icon="arrow-return-left"></b-icon> Cancel
       </button>
 
       <!-- Save -->
       <button
         v-if="currentView == views.note && editMode == true"
         type="button"
-        class="btn btn-sm btn-outline-success mx-1"
+        class="bttn"
         @click="saveNote"
       >
-        Save
+        <b-icon icon="check-square"></b-icon> Save
       </button>
     </div>
 

diff --git a/flatnotes/src/components/Login.vue b/flatnotes/src/components/Login.vue
index 4e759a3a5eeafc8aa5b5012d60cd27fbcc7a1d0b..918a98809f62e6345aaecddf8871d461b548052c 100644 (file)
--- a/flatnotes/src/components/Login.vue
+++ b/flatnotes/src/components/Login.vue
@@ -1,6 +1,12 @@
 <template>
   <div
-    class="d-flex flex-column justify-content-center align-items-center flex-grow-1"
+    class="
+      d-flex
+      flex-column
+      justify-content-center
+      align-items-center
+      flex-grow-1
+    "
   >
     <!-- Logo -->
     <div class="mb-3">
@@ -50,7 +56,9 @@
       </div>
 
       <!-- Button -->
-      <button type="submit" class="btn btn-primary">Log In</button>
+      <button type="submit" class="bttn">
+        <b-icon icon="box-arrow-in-right"></b-icon> Log In
+      </button>
     </form>
   </div>
 </template>

diff --git a/flatnotes/src/components/NavBar.vue b/flatnotes/src/components/NavBar.vue
index 9586d5c6b934154da0a5500bb0984c27153a41ce..41e896bb10adba1ee52f42c3e6376fc224de4eae 100644 (file)
--- a/flatnotes/src/components/NavBar.vue
+++ b/flatnotes/src/components/NavBar.vue
@@ -11,33 +11,25 @@
     </div>
     <div>
       <!-- New Note -->
-      <button
-        type="button"
-        class="btn btn-sm btn-outline-primary mx-1"
-        @click="$emit('new-note')"
-      >
-        New Note
+      <button type="button" class="bttn" @click="$emit('new-note')">
+        <b-icon icon="plus-circle"></b-icon> New Note
       </button>
 
       <!-- Log Out -->
-      <button
-        type="button"
-        class="btn btn-sm btn-outline-dark mx-1"
-        @click="$emit('logout')"
-      >
-        Log Out
+      <button type="button" class="bttn" @click="$emit('logout')">
+        <b-icon icon="box-arrow-right"></b-icon> Log Out
       </button>
 
       <!-- Search -->
       <button
         type="button"
         id="search-button"
-        class="btn btn-sm btn-outline-dark mx-1"
+        class="bttn"
         @click="$emit('search')"
         v-b-tooltip.hover
         title="Keyboard Shortcut: /"
       >
-        <BIconSearch />
+        <b-icon icon="search"></b-icon>
       </button>
     </div>
   </div>
@@ -55,13 +47,7 @@
 </style>
 
 <script>
-import { BIconSearch } from "bootstrap-vue";
-
 export default {
-  components: {
-    BIconSearch,
-  },
-
   props: {
     showLogo: {
       type: Boolean,

diff --git a/flatnotes/src/components/SearchInput.vue b/flatnotes/src/components/SearchInput.vue
index 9e32967c31bc6a3bd79e23eea52290554665baa3..2e8258372912b5844d57c5a0a3adc6810c41cad7 100644 (file)
--- a/flatnotes/src/components/SearchInput.vue
+++ b/flatnotes/src/components/SearchInput.vue
@@ -11,7 +11,7 @@
       />
       <div class="input-group-append">
         <button class="btn" type="submit">
-          <BIconSearch />
+          <b-icon icon="search"></b-icon>
         </button>
       </div>
     </div>
@@ -44,13 +44,8 @@
 <script>
 import EventBus from "../eventBus";
 import * as constants from "../constants";
-import { BIconSearch } from "bootstrap-vue";
 
 export default {
-  components: {
-    BIconSearch,
-  },
-
   data: function () {
     return {
       searchTermInput: null,

diff --git a/flatnotes/src/main.scss b/flatnotes/src/main.scss
index 1a26aede3fbec9e6b6269df6e1532c9a81a6334f..1ab953992acc2deb3117218610ee082d642860c9 100644 (file)
--- a/flatnotes/src/main.scss
+++ b/flatnotes/src/main.scss
@@ -75,6 +75,21 @@ body {
   min-height: 190px;
 }
 
+.bttn {
+  border: 0;
+  background-color: transparent;
+  border-radius: 4px;
+  padding: 4px 10px;
+  color: #6c757d;
+
+  svg {
+    margin-right: 4px;;
+  }
+}
+.bttn:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
 // Toast UI Overrides
 .toastui-editor-contents {
   font-family: "Inter", sans-serif;