Style services menu and legend

app/Console/Commands/ResetTestUsers.php

@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Console\Commands;
+
+use Illuminate\Console\Command;
+
+class ResetTestUsers extends Command
+{
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $signature = 'command:name';
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = 'Command description';
+
+    /**
+     * Create a new command instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        parent::__construct();
+    }
+
+    /**
+     * Execute the console command.
+     *
+     * @return int
+     */
+    public function handle()
+    {
+        return 0;
+    }
+}

resources/js/panel/orders.vue

@@ -1,6 +1,7 @@
 <template>
 <div>
 	<section class="pending-pane">
+	<div class="actions"><a class="new-order" href="#orders/new-order">New</a><a class="new-order" href="#orders/new">Add credits</a></div>
 	<h4>Pending Orders</h4>
 	<ul>
 		<template v-bind:key='order.id' v-for="order in orders">

resources/js/panel/panel.vue

@@ -43,15 +43,16 @@
 import Sidebar from './sidebar.vue'
 import Settings from './settings.vue'
 import PastOrders from './orders.vue'
+import NewOrder from './services.vue'
 
 
 export default {
 	components: {
-		Sidebar, Settings, PastOrders
+		Sidebar, Settings, PastOrders, NewOrder
 	},
 	data() {
 	return {active: window.location.hash, user: '',
-	token: '', orders: ''}
+	token: '', orders: '',}
 	},
 	methods: {},
 }

resources/js/panel/services.vue

@@ -0,0 +1,31 @@
+<template>
+<div>
+	<div class="services-menu">
+	<button class="selected">Services</button>
+	<button>Credits</button>
+	<div class="menu-slider">
+	<div></div></div>
+	</div>
+	<div class="services-legend"><h5>Name</h5>
+<h5>Price per 1000</h5><h5>Minimum</h5><h5>Maximum</h5></div>
+	<section class="services-pane youtube">
+	<h4>Youtube</h4>
+	</section>
+	<section class="services-pane instagram">
+	<h4>Instagram</h4>
+	</section>
+	<section class="services-pane twitter">
+	<h4>Twitter</h4>
+	</section>
+</div>
+</template>
+
+<script>
+
+export default {
+	data() {
+		return {}
+	},
+	props: ['orders']
+}
+</script>

resources/js/panel/settings.vue

@@ -43,7 +43,7 @@ function changeName() {
 	}).then(response => {
 		if (response.ok) {
 			pane.classList.add('completed')
-			info.textContent = 'Completed'
+			info.textContent = 'Verification link sent.'
 		} else {
 			pane.classList.add('error')
 			info.textContent = 'Error: ' + response.status

resources/js/register-area/register-area.vue

@@ -119,7 +119,7 @@
 
 	module.exports = {
 		data() {
-		return {active: 'register', token: ''}
+		return {active: 'register', token: '', errorMessage: ''}
 		},
 		methods: {
 			register,

resources/scss/main.scss

@@ -892,10 +892,17 @@ main.panel {
 }
 
 .actions {
-	// height: 2em;
-	.new-order {
-		background-color: vars.getColor('light-blue');
-	}
+	margin-bottom: 1em;
+}
+.actions a {
+	color: vars.getColor('brand-orange');
+	margin: 1em;
+	margin-bottom: 2em;
+	padding: 3px;
+}
+
+.actions a:hover {
+	color: vars.darkenColor('brand-orange');
 }
 
 .logout-pane {
@@ -958,5 +965,46 @@ main.panel {
 	.error span {
 		color: vars.getColor('red-alert');
 	}
+}
 
+.services-legend {
+	display: flex;
+	margin-top: 20px;
+	border-top: 1px solid darkgrey;
+	border-bottom: 1px solid darkgrey;
+	height: 2em;
+	background-color: rgb(239, 239, 239);
+	color: rgb(118, 118, 118);
+	h5 {
+		display: inline-block;
+		margin: auto;
+		text-align: center;
+	}
+}
+
+.services-menu {
+	display: flex;
+	justify-content: center;
+	flex-basis: 50%;
+	margin-top: 1em;
+	flex-flow: wrap;
+	gap: 10px;
+	button {
+		width: 25%;
+		font-size: 1.1rem;
+		background: none;
+		border: none;
+		color: grey;
+	}
+	.selected {
+		color: black;
+	}
+}
+.menu-slider {
+	width: 55%;
+	div {
+		// margin-left: auto;
+		width: 50%;
+		border-bottom: 2px solid black;
+	}
 }

resources/views/home.blade.php

@@ -107,7 +107,7 @@
 	</section>
 	<section class='panel-infos'>
 		<h2>A User-Friendly Control Panel</h2>
-		<img class="panel-preview" src="/images/host-panel.webp" alt="panel-preview">
+		<img class="panel-preview" src="/images/panel-preview.png" alt="panel-preview">
 		<div class="panel-info">
 		<img src="./img/tap.svg" alt="">
 		<h3>Easy to Use</h3>