diff --git a/resources/js/panel/services.vue b/resources/js/panel/services.vue
index 78ef2be..2537888 100644
--- a/resources/js/panel/services.vue
+++ b/resources/js/panel/services.vue
@@ -7,9 +7,16 @@
Name
-Price per 1000
Minimum
Maximum
+Credits per 1000
Minimum
Maximum
Youtube
+
+ - Unique Views and Engagements111000500000
+
+
+
Instagram
@@ -24,7 +31,7 @@
export default {
data() {
- return {}
+ return {servicePane: false}
},
props: ['orders']
}
diff --git a/resources/scss/main.scss b/resources/scss/main.scss
index 7f19662..189ea08 100644
--- a/resources/scss/main.scss
+++ b/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');
+ }
+}