Goodbye, Bootstrap & added a button component

1 files changed, 16 insertions, 11 deletions

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;