Add logout and settings views

assets/main.css

@@ -325,5 +325,20 @@ div.modal .form {
 
 div.modal .form img.close-btn {
 	right: 10px;
+	top: 10px;
 	position: absolute;
 }
+
+section.dialog.form {
+	padding-top: 30px;
+}
+
+section.centered {
+	margin-top: 25%;
+}
+
+section.special {
+	border: 2px solid var(--outline);
+	border-radius: 3px;
+	padding: 25px 10px;
+}

components/app.vue

@@ -11,6 +11,8 @@
 <home :user="user" v-else-if="active == 1" />
 <new-estimate :user="user" :fees="fees" v-else-if="active == 2" />
 <estimates :user="user" :fees="fees" v-else-if="active == 3" />
+<settings :user="user" v-else-if="active == 4" />
+<sign-out :user="user" v-else-if="active == 5" />
 
 </div>
 </template>
@@ -21,6 +23,8 @@ import Spinner from "./spinner.vue"
 import Home from "./home.vue"
 import NewEstimate from "./new.vue"
 import Estimates from "./estimates.vue"
+import Settings from "./settings.vue"
+import SignOut from "./sign-out.vue"
 
 const user = {
  	firstName: "test",
@@ -62,7 +66,15 @@ function active() {
 }
 
 export default {
-	components: { SideBar, Spinner, Home, NewEstimate, Estimates },
+	components: {
+		SideBar,
+		Spinner,
+		Home,
+		NewEstimate,
+		Estimates,
+		Settings,
+		SignOut
+	},
 	computed: { active },
 	data() {
 		return {

components/dialog.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="modal">
 
-<section class="form inputs">
+<section class="form inputs dialog">
 	<img width="21" height="21" src="/assets/image/icon/x-red.svg"
 	@click="$emit('close')" class="close-btn"/>
 

components/estimates.vue

@@ -4,6 +4,7 @@
 
 <section class="form inputs">
 <h3>Default Fees</h3>
+
 <div
 	v-for="(fee, indx) in fees"
 	:key="fee.name + indx" class="fee"

components/settings.vue

@@ -0,0 +1,61 @@
+<template>
+<div class="page">
+<h2>Settings</h2>
+
+<section class="form inputs">
+<h3>Avatar</h3>
+<img src="/assets/image/mintberry.jpg" alt="avatar">
+<button>Upload</button>
+</section>
+
+<section class="form inputs">
+<h3>Branch Header</h3>
+<span>Letterhead as appears on PDFs.</span>
+<img src="/assets/image/mintberry.jpg" alt="avatar">
+<button>Upload</button>
+</section>
+
+<section class="form inputs special">
+<h3>Login</h3>
+<label for="">First Name</label>
+<input type="text">
+<label for="">Last Name</label>
+<input type="text">
+<label for="">Email</label>
+<input type="text">
+<label for="">New Password</label>
+<input type="text">
+<button @click="check">Save</button>
+</section>
+
+<Dialog v-if="ready" @close="() => ready = false">
+<h3>Confirm your current password.</h3>
+<input type="text">
+<button>Save</button>
+</Dialog>
+
+</div>
+</template>
+
+<script>
+import Dialog from "./dialog.vue"
+
+function save() {
+}
+
+function check() {
+	this.ready = true
+}
+
+export default {
+	components: {
+		Dialog
+	},
+	methods: {
+		save, check
+	},
+	data() {
+		return { ready: false }
+	}
+}
+</script>

components/sign-out.vue

@@ -0,0 +1,22 @@
+<template>
+<div class="page">
+
+<section class="inputs centered">
+<h4>Are you sure you want to log out?</h4>
+<button>Yes</button>
+</section>
+
+</div>
+</template>
+
+<script>
+function ready() {
+
+}
+
+export default {
+	methods: {
+		ready
+	}
+}
+</script>