minor css changes

node_modules/.cache/.eslintcache

@@ -1 +1 @@
-[{"/home/seanedmunds/dev/home-page/src/index.js":"1"},{"size":28054,"mtime":1639780651489,"results":"2","hashOfConfig":"3"},{"filePath":"4","messages":"5","errorCount":0,"fatalErrorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"ikqo75","/home/seanedmunds/dev/home-page/src/index.js",["6","7","8"],{"ruleId":"9","severity":1,"message":"10","line":166,"column":10,"nodeType":"11","messageId":"12","endLine":166,"endColumn":19},{"ruleId":"13","severity":1,"message":"14","line":183,"column":11,"nodeType":"15","endLine":183,"endColumn":61},{"ruleId":"16","severity":1,"message":"17","line":894,"column":1,"nodeType":"18","messageId":"19","endLine":897,"endColumn":2},"no-unused-vars","'ModalMenu' is defined but never used.","Identifier","unusedVar","jsx-a11y/anchor-is-valid","The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md","JSXOpeningElement","no-extend-native","String prototype is read only, properties should not be added.","AssignmentExpression","unexpected"]
+[{"/home/seanedmunds/dev/home-page/src/index.js":"1"},{"size":28146,"mtime":1639781676049,"results":"2","hashOfConfig":"3"},{"filePath":"4","messages":"5","errorCount":0,"fatalErrorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"ikqo75","/home/seanedmunds/dev/home-page/src/index.js",["6","7","8","9"],{"ruleId":"10","severity":1,"message":"11","line":4,"column":40,"nodeType":"12","messageId":"13","endLine":4,"endColumn":49},{"ruleId":"10","severity":1,"message":"14","line":166,"column":10,"nodeType":"12","messageId":"13","endLine":166,"endColumn":19},{"ruleId":"15","severity":1,"message":"16","line":183,"column":11,"nodeType":"17","endLine":183,"endColumn":61},{"ruleId":"18","severity":1,"message":"19","line":894,"column":1,"nodeType":"20","messageId":"21","endLine":897,"endColumn":2},"no-unused-vars","'matchPath' is defined but never used.","Identifier","unusedVar","'ModalMenu' is defined but never used.","jsx-a11y/anchor-is-valid","The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md","JSXOpeningElement","no-extend-native","String prototype is read only, properties should not be added.","AssignmentExpression","unexpected"]

src/index.css

@@ -1,9 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,400;1,100;1,200&display=swap');
 html{
 	box-sizing: border-box;
-	moz-box-sizing: border-box;
-	webkit-box-sizing: border-box;
-	webkit-text-size-adjust: none;
 }
 
 html,
@@ -20,7 +17,6 @@ body{
 	letter-spacing: -.012em;
 	margin: 0;
 	padding: 0;
-	webkit-font-smoothing: antialiased;
 	width: auto;
 }
 
@@ -28,8 +24,6 @@ body{
 *:before,
 *:after{
 	box-sizing: inherit;
-	moz-box-sizing: inherit;
-	webkit-box-sizing: inherit;
 }
 
 :root{
@@ -87,7 +81,6 @@ a{
 }
 
 a:hover #app-address{
-	webkit-text-decoration-skip: true;
 	text-decoration: underline;
 	text-decoration-color: var(--color-border);
 }
@@ -110,7 +103,6 @@ a:hover #app-address{
 	height: 3.5em;
 	transition: all 0.4s ease;
 	width: 50%;
-	align: center;
 	padding-left: 1em;
 	padding-right: 1em;
 	text-align: center;
@@ -118,7 +110,7 @@ a:hover #app-address{
 
 .keyword:focus{
 	background-color: var(--color-search-background);
-	color-border: var(--color-text-pri);
+	border-color: var(--color-border);
 	outline: none;
 	color: var(--color-text-acc);
 	font-style: normal;
@@ -135,7 +127,7 @@ a:hover #app-address{
 	text-align: left;
 }
 .Input-label{
-	color: var(--color-text-acc);
+	color: var(--color-border);
 	display: block;
 	position: relative;
 	font-style: normal;
@@ -363,7 +355,6 @@ table a{
 #links_item{
 	line-height: 1.5rem;
 	margin-bottom: 0em;
-	webkit-font-smoothing: antialiased;
 }
 
 #links_item h4{
@@ -396,6 +387,10 @@ table a{
 	padding-top: .3em;
 }
 
+#settings-container h1 {
+	color: var(--color-text-pri);
+}
+
 #settings-nav{
 	align-items: stretch;
 	display: grid;
@@ -430,10 +425,12 @@ table a{
 	margin-right: 0px;
 	line-height: 2;
 	justify-self: center;
+	color: var(--color-text-pri);
 }
 #nav_item a:hover{
 	text-decoration: none;
 	background-color: var(--color-search-background);
+	color: var(--color-text-pri)
 }
 
 #settings-panel{
@@ -451,6 +448,7 @@ table a{
 	border-radius: 1em;
 	overflow: auto;
 }
+
 #settings-panel h3 {
 	text-decoration: none;
 	font-size: 16px;
@@ -475,6 +473,12 @@ table a{
 #settings-panel button:hover:not(.theme-button) {
 	background-color: var(--color-search-background);
 }
+#settings-panel input {
+	color: var(--color-text-pri);
+	border-style: hidden;
+	background-color: var(--color-search-background);
+	border-radius: .2em;
+}
 
 /* Personalization Form */
 

src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Routes, Route, matchPath } from "react-router-dom";
 import { Outlet, Link } from "react-router-dom";
 import './index.css';
 
@@ -274,11 +274,11 @@ function Settings() {
       <div id="settings-nav">
         <h1>Settings</h1>
         <nav id="nav_item">
-          <Link to="/settings/personalization">Personalization</Link>
+          <Link id='peronsalization' to="/settings/personalization">Personalization</Link>
-          <Link to="/settings/apps">Applications</Link>
+          <Link id='applications' to="/settings/apps">Applications</Link>
-          <Link to="/settings/bookmarks">Bookmarks</Link>
+          <Link id='bookmarks' to="/settings/bookmarks">Bookmarks</Link>
-          <Link to="/settings/themes">Themes</Link>
+          <Link id='themes' to="/settings/themes">Themes</Link>
-          <Link to="/settings/providers">Search Providers</Link>
+          <Link id='providers' to="/settings/providers">Search Providers</Link>
         </nav>
         <nav id="nav_item">
           <header id="modal-footer">