From 7e9433762f51be2c4938481c9c33589982118033 Mon Sep 17 00:00:00 2001
From: HampusM <hampus@hampusmat.com>
Date: Fri, 11 Jun 2021 13:31:07 +0200
Subject: Goodbye, Bootstrap & added a button component

---
 .../client/src/components/HomeProjectsHeader.vue   | 27 +++++++++++++---------
 1 file changed, 16 insertions(+), 11 deletions(-)

(limited to 'packages/client/src/components/HomeProjectsHeader.vue')

diff --git a/packages/client/src/components/HomeProjectsHeader.vue b/packages/client/src/components/HomeProjectsHeader.vue
index 5966e99..f9aeb20 100644
--- a/packages/client/src/components/HomeProjectsHeader.vue
+++ b/packages/client/src/components/HomeProjectsHeader.vue
@@ -1,34 +1,39 @@
 <template>
-	<div class="d-flex align-items-center flex-wrap">
-		<div id="projects-header" class="ms-4">
+	<div id="projects">
+		<div id="projects-header">
 			<span class="fs-1">
 				Projects
 			</span>
 		</div>
-		<div id="projects-search" class="d-flex">
+		<div id="projects-search">
 			<form>
 				<input type="search" name="q">
-				<input
-					type="submit" value="Search"
-					class="btn btn-primary">
+				<BaseButton type="submit" value="Search" />
 			</form>
 		</div>
 	</div>
 </template>
 
 <script>
+import BaseButton from "@/components/BaseButton";
+
 export default {
-	name: "HomeProjectsHeader"
+	name: "HomeProjectsHeader",
+	components: {
+		BaseButton
+	}
 };
 </script>
 
 <style lang="scss" scoped>
-@use "../scss/colors";
-@import "../scss/bootstrap";
-
-@import "~bootstrap/scss/buttons";
+#projects {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+}
 
 #projects-search {
+	display: flex;
 	align-items: center;
 	margin-left: auto;
 	margin-right: 15px;
-- 
cgit v1.2.3-18-g5258