Style services pane

resources/js/panel/services.vue

@@ -7,9 +7,16 @@
 	<div></div></div>
 	</div>
 	<div class="services-legend"><h5>Name</h5>
-<h5>Price per 1000</h5><h5>Minimum</h5><h5>Maximum</h5></div>
+<h5>Credits per 1000</h5><h5>Minimum</h5><h5>Maximum</h5></div>
 	<section class="services-pane youtube">
 	<h4>Youtube</h4>
+	<ul>
+		<li><span>Unique Views and Engagements</span><span>11</span><span>1000</span><span>500000</span>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square-fill" viewBox="0 0 16 16">
+  <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z"/>
+</svg>
+		</li>
+	</ul>
 	</section>
 	<section class="services-pane instagram">
 	<h4>Instagram</h4>
@@ -24,7 +31,7 @@
 
 export default {
 	data() {
-		return {}
+		return {servicePane: false}
 	},
 	props: ['orders']
 }

resources/scss/main.scss

@@ -976,16 +976,23 @@ main.panel {
 
 .services-legend {
 	display: flex;
+	justify-content: space-between;
 	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);
+	padding-right: 30px;
 	h5 {
 		display: inline-block;
 		margin: auto;
 		text-align: center;
+		width: 20%;
+		// max-width: 25%;
+	}
+	:nth-child(1) {
+		width: 30%;
 	}
 }
 
@@ -1016,3 +1023,39 @@ main.panel {
 		border-bottom: 2px solid black;
 	}
 }
+
+.services-pane {
+	li {
+		display: flex;
+		// gap: 0.5em;
+		justify-content: space-between;
+		align-items: center;
+		border-top: 1px solid grey;
+		border-bottom: 1px solid grey;
+		padding: 6px 0;
+	}
+
+	li span {
+		// width: 10%;
+		text-align:center;
+		vertical-align: middle;
+	}
+
+	li :nth-child(1) {
+		width: 30%;
+	}
+
+	li:hover span {
+		color: vars.darkenColor('faded-text');
+	}
+
+	svg {
+		width: 25px;
+		height: 25px;
+		color: vars.getColor('brand-orange');
+	}
+
+	svg:hover {
+		color: vars.getColor('dark-orange');
+	}
+}