FileShare icon added, links added, indicator classes added

src/pages/basicDashboard/Overview.vue

@@ -2,6 +2,7 @@
   <div id="overviewComponent">
     <h2 class="title">Overview</h2>
     <ul>
+      <RouterLink to="/basic/wireless">
         <li>
           <svg version="1.1" viewBox="0 -4 115.92 120" xmlns="http://www.w3.org/2000/svg">
             <g transform="translate(-2.1685 -3.7025)">
@@ -15,8 +16,10 @@
             </g>
           </svg>
           <h3>Internet</h3>
-        <span style="background-color: var(--good-indicator);">Online: LAN4</span>
+          <span class="good-indicator">Online: LAN4</span>
         </li>
+      </RouterLink>
+      <RouterLink to="/basic/wireless">
         <li>
           <svg version="1.1" viewBox="0 -20 116 120" xmlns="http://www.w3.org/2000/svg">
             <g transform="translate(-2.0001 -17.685)">
@@ -29,10 +32,12 @@
             </g>
           </svg>
           <h3>Wifi</h3>
-        <span style="background-color: var(--warning-indicator);">
+          <span class="warning-indicator">
             5Ghz: On | 2.4Ghz: Off
           </span>
         </li>
+      </RouterLink>
+      <RouterLink to="/basic/devices">
         <li>
           <svg version="1.1" viewBox="0 -14 105.42 120" xmlns="http://www.w3.org/2000/svg">
             <g transform="translate(-7.2896 -15.784)">
@@ -51,24 +56,40 @@
           </h3>
           <span>Online: 0</span>
         </li>
+      </RouterLink>
+      <RouterLink to="/basic/fileshare">
         <li>
+          <svg version="1.1" viewBox="0 0 101.73 101.73" xmlns="http://www.w3.org/2000/svg">
+            <g transform="translate(-6.5281 -12.557)">
+              <g transform="matrix(.89724 -.89724 .73751 .73751 -43.308 62.468)">
+                <rect x="17.713" y="51.062" width="60.612" height="35.705" ry="1.493" fill="none" stroke="#fff" stroke-width="7.6729"/>
+                <rect x="78.329" y="58.538" width="21.201" height="20.755" ry="1.3525" fill="none" stroke="#fff" stroke-width="7.6729"/>
+                <rect x="29.763" y="52.955" width="6.9565" height="31.921" ry=".027657" fill="#fff" stroke-width="0"/>
+              </g>
+            </g>
+          </svg>
           <h3>
             File Sharing
           </h3>
-        <span style="background-color: var(--bad-indicator);">Offline</span>
+          <span class="bad-indicator">Offline</span>
         </li>
+      </RouterLink>
+      <RouterLink to="/basic/QoS">
         <li>
           <h3>
             QoS
           </h3>
-        <span style="background-color: var(--good-indicator);">Online</span>
+          <span class="good-indicator">Online</span>
         </li>
+      </RouterLink>
+      <RouterLink to="/basic/guestnetwork">
         <li>
           <h3>
             Guest Network
           </h3>
-        <span style="background-color: var(--bad-indicator);">Offline</span>
+          <span class="bad-indicator">Offline</span>
         </li>
+      </RouterLink>
     </ul>
   </div>
 </template>

src/styles/basicDashboard.css

@@ -67,7 +67,7 @@
     max-width: 730px;
 
     li {
-      display: inherit;
+      display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
@@ -77,10 +77,6 @@
       width: 230px;
       border-radius: 20px;
       cursor: pointer;
-      transition: 0.3s background-color;
-    }
-    li:hover {
-      background-color: var(--dark-alt-highlight-color);
     }
     img {
       width: 80px;
@@ -93,6 +89,7 @@
     span {
       width: 100%;
       height: 30px;
+      margin-top: 5px;
       background-color: var(--neutral-indicator);
       border-radius: var(--alt-border-radius);
       text-align: center;

src/styles/main.css

@@ -109,3 +109,15 @@ a {
   justify-content: center;
   flex-grow: 1;
 }
+
+.good-indicator {
+  background-color: var(--good-indicator) !important;
+}
+
+.warning-indicator {
+  background-color: var(--warning-indicator) !important;
+}
+
+.bad-indicator {
+  background-color: var(--bad-indicator) !important;
+}