Dev environment - Improve manual-testing UI

Author: graphieros

TestingArena/Box.vue

@@ -131,7 +131,12 @@ const highlightedConfig = computed(() => {
 
 <template>
     <h1 class="gradient-text" style="width:fit-content; font-weight: 900"><slot name="title"/></h1>
-    <button class="reset" @click="refresh">RELOAD PAGE</button>
+    <button class="btn btn-reset" @click="refresh">
+        <BaseIcon :size="20" stroke="#ff7f0e" name="restart"/>
+        <code style="font-weight: bold;">
+            RELOAD PAGE
+        </code>
+    </button>
 
     <div class="knobs">
         <details>
@@ -292,14 +297,6 @@ h1, p {
     width: 800px;
     z-index: 10000000;
 }
-.reset {
-    background: #ff6400;
-    color: white;
-    border: none;
-    padding: 6px 12px;
-    border-radius: 3px;
-    margin: 12px 0;
-}
 
 .btn {
     background-color: #3A3A3A;
@@ -318,6 +315,10 @@ h1, p {
     background-color: #5A5A5A;
 }
 
+.btn-reset {
+    margin: 0 0 2rem 0;
+}
+
 @media screen and (max-width: 1000px) {
     .box {
         grid-template-columns: repeat(1, 1fr);

manual-testing/src/App.vue

@@ -109,7 +109,7 @@ const filteredComponents = computed(() => {
 
             <div style="display:flex; margin-left: -1rem;">
               <RouterLink to="/">
-                <div style="display:flex;align-items:center;gap:1rem;">
+                <div style="display:flex;align-items:center;gap:1rem; padding: 0 0.5rem">
                   <BaseIcon name="home" /> Home
                 </div>
               </RouterLink>
@@ -225,7 +225,8 @@ nav {
   flex-direction: row;
   gap: 1rem;
   align-items:center;
-  padding: 0.2rem 0;
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
 }
 
 .nav-item:hover {
@@ -240,7 +241,7 @@ nav {
 }
 
 nav a.router-link-exact-active {
-    background: linear-gradient(90deg, #42d392, #5f8aee);
+  background: linear-gradient(90deg, #42d392, #5f8aee);
   background-size: 100% 100%;
   background-repeat: no-repeat;
   -webkit-background-clip: text;
@@ -254,13 +255,17 @@ nav a.router-link-exact-active:hover {
   background-color: transparent;
 }
 
-nav :has(.router-link-exact-active) svg path {
-  fill: #5f8aee;
+:deep(a.router-link-exact-active .nav-item .nav-icon path) {
+  stroke: #42d392 !important;
+}
+
+:deep(a.router-link-exact-active .nav-item) {
+  background: #FFFFFF10;
 }
 
 nav a {
   display: inline-block;
-  padding: 0 1rem;
+  padding: 0;
   font-size: 1rem;
 }
 </style>

src/App.vue

@@ -1,4 +1,12 @@
 <script setup>
+/**
+ * THIS TESTING PAGE IS DEPRECATED.
+ * 
+ * Use the /manual-testing/src/App.vue
+ * cd into manual-testing and npm run dev
+ * 
+ */
+
 import { markRaw, ref, computed } from "vue";
 import TestingArena from "./TestingArena.vue";
 import ArenaVueUiXy from "../TestingArena/ArenaVueUiXy.vue";