Style the settings page

resources/js/panel/panel.vue

@@ -70,6 +70,26 @@
 		<a href="/logout">Logout</a>
 	</section>
 </div>
+<div class="settings-page" id="main" v-else-if="active === '#settings'">
+	<section class="change-name-pane">
+	<h3>Settings</h3>
+		<h4>Name</h4>
+		<input name="name" type="text">
+		<button>Save</button>
+	</section>
+	<section class="change-email-pane">
+		<h4>Email</h4>
+		<input name="email" type="text">
+		<button>Save</button>
+	</section>
+	<section class="change-password-pane">
+		<h4>Change Password</h4>
+		<h5>Current Password</h5><input name="current_passowrd" type="password">
+		<h5>New Password</h5><input name="passowrd" type="password">
+		<h5>Confirm Password</h5><input name="confirm_passowrd" type="password">
+		<button>Save</button>
+	</section>
+</div>
 </transition>
 </template>
 

resources/scss/_vars.scss

@@ -95,7 +95,7 @@ $theme-colors: (
 	text-align: center;
 	border: 2px solid $primary;
 	border-radius: 4px;
-	padding: 10px;
+	padding: 5px 10px;
 	background-color: $background;
 	color: $primary;
 	&:hover {

resources/scss/main.scss

@@ -906,3 +906,27 @@ main.panel {
 		@include vars.inverting-button(black, white);
 	}
 }
+
+.settings-page {
+	h3 {
+		text-align: center;
+	}
+	h5 {
+		display: inline-block;
+		margin-right: 2em;
+		margin-top: 0;
+		color: vars.getColor('brand-orange');
+	}
+	input {
+		display: inline-block;
+		margin-bottom: 1em;
+		right: 2px;
+		margin-left: auto;
+		position: relative;
+	}
+
+	button {
+		display: block;
+		@include vars.inverting-button(vars.getColor('text-blue-medium'), white);
+	}
+}