first iteration of settings menus complete

node_modules/.cache/.eslintcache

@@ -1 +1 @@
-[{"/home/seanedmunds/dev/home-page/src/index.js":"1"},{"size":22896,"mtime":1639695960041,"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":1,"column":10,"nodeType":"11","messageId":"12","endLine":1,"endColumn":16},{"ruleId":"13","severity":1,"message":"14","line":195,"column":11,"nodeType":"15","endLine":195,"endColumn":61},{"ruleId":"16","severity":1,"message":"17","line":746,"column":1,"nodeType":"18","messageId":"19","endLine":749,"endColumn":2},"no-unused-vars","'render' 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":27677,"mtime":1639779365084,"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":1,"column":10,"nodeType":"12","messageId":"13","endLine":1,"endColumn":16},{"ruleId":"10","severity":1,"message":"14","line":167,"column":10,"nodeType":"12","messageId":"13","endLine":167,"endColumn":19},{"ruleId":"15","severity":1,"message":"16","line":184,"column":11,"nodeType":"17","endLine":184,"endColumn":61},{"ruleId":"18","severity":1,"message":"19","line":885,"column":1,"nodeType":"20","messageId":"21","endLine":888,"endColumn":2},"no-unused-vars","'render' 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

@@ -175,6 +175,7 @@ a:hover #app-address{
 	background-color: transparent;
 	text-align: center;
 	position: relative;
+	padding: .3em;
 }
 .abackground > i{
 	text-align: left;
@@ -392,6 +393,7 @@ table a{
 	margin-right: auto;
 	margin-top: 2vh;
 	width: 75%;
+	padding-top: .3em;
 }
 
 #settings-nav{
@@ -405,7 +407,7 @@ table a{
 	margin-left: 0em;
 	margin-right: 0em;
 	height: 95vh;
-	background-color: var(--color-background);
+	background-color: var(--color-search-background);
 	border-radius: 1em;
 }
 #settings-nav div{
@@ -445,7 +447,7 @@ table a{
 	margin-left: 0em;
 	margin-right: 0em;
 	height: 95vh;
-	background-color: var(--color-background);
+	background-color: var(--color-search-background);
 	border-radius: 1em;
 	overflow: auto;
 }
@@ -460,6 +462,19 @@ table a{
 	display: grid;
 	text-align: center;
 }
+#settings-panel button:not(.theme-button) {
+	color: var(--color-text-pri);
+	margin: 1em;
+	padding-top: .5em;
+	padding-bottom: .5em;
+	padding-left: 1em;
+	padding-right: 1em;
+	border: 0px none;
+	background-color: var(--color-background);
+}
+#settings-panel button:hover:not(.theme-button) {
+	background-color: var(--color-search-background);
+}
 
 /* Personalization Form */
 
@@ -502,7 +517,6 @@ table a{
 #messageForm input {
 	border: var(--color-border);
 	padding-left: 1em;
-	height: 1hv;
 }
 #messageForm input:focus {
 	border: var(--color-border);
@@ -513,6 +527,87 @@ table a{
 	grid-row-gap: 1vh;
 }
 
+/* Application Form */
+
+#applicationForm {
+	display: grid;
+	grid-column-gap: 1vh;
+	grid-row-gap: 1vh;
+	grid-template-columns: 1fr;
+	width: 100vh;
+	text-align: end;
+}
+#applicationForm label {
+	width: 100%;
+	padding-right: 1em;
+}
+#applicationForm input {
+	border: var(--color-border);
+	padding-left: 1em;
+}
+#applicationForm input:focus {
+	border: var(--color-border);
+}
+#applicationGrid {
+	display: grid;
+	grid-template-columns: 5% 10% 5% 30% 5% 10% 10% 10% 5% 5%;
+	grid-row-gap: 1vh;
+}
+
+/* Bookmark Form */
+
+#bookmarkForm {
+	display: grid;
+	grid-column-gap: 1vh;
+	grid-row-gap: 1vh;
+	grid-template-columns: 1fr;
+	width: 100vh;
+	text-align: end;
+}
+#bookmarkForm label {
+	width: 100%;
+	padding-right: 1em;
+}
+#bookmarkForm input {
+	border: var(--color-border);
+	padding-left: 1em;
+}
+#bookmarkForm input:focus {
+	border: var(--color-border);
+}
+#bookmarkGrid {
+	display: grid;
+	grid-template-columns: 5% 25% 10% 60%;
+	grid-row-gap: 1vh;
+}
+
+/* Providers Form */
+
+#providersForm {
+	display: grid;
+	grid-column-gap: 1vh;
+	grid-row-gap: 1vh;
+	grid-template-columns: 1fr;
+	width: 100vh;
+	text-align: end;
+}
+#providersForm label {
+	width: 100%;
+	padding-right: 1em;
+}
+#providersForm input {
+	border: var(--color-border);
+	padding-left: 1em;
+}
+#providersForm input:focus {
+	border: var(--color-border);
+}
+#providersGrid {
+	display: grid;
+	grid-template-columns: 5% 10% 5% 10% 5% 65%;
+	grid-row-gap: 1vh;
+}
+
 
 /* MODAL */
 
@@ -538,17 +633,15 @@ table a{
 #modal>div{
 	background-color: var(--color-background);
 	color: var(--color-text-acc);
-	box-shadow: 0 14px 28px var(--color-search-background), 0 15px 12px rgba(0, 0, 0, .35);
 	margin-left: auto;
 	margin-right: auto;
 	padding: 2em;
 	margin-top: 5vh;
 	margin-bottom: 5vh;
 	width: 50%;
-	display: flex;
+	display: grid;
 	flex-direction: column;
 	border-radius: 1em;
-	backdrop-filter: blur(10px);
 }
 
 #modal h1{
@@ -568,7 +661,7 @@ table a{
 #modal-footer{
     display:flex;
     font-size:2em;
-    justify-content: flex-start;
+    justify-content: center;
 }
 
 #modal-footer a{
@@ -585,11 +678,10 @@ table a{
 }
 
 #modal-footer input[type="checkbox"]:checked + label{
-    color: var(--color-text-alt);
+    color: var(--color-text-acc);
 }
 
 .sneaky{
-    position: absolute;
     right: 1em;
 }
 
@@ -617,9 +709,10 @@ table a{
 
 #modal-theme{
 	border-bottom: 0px solid var(--color-text-acc);
-	display: flex;
+	display: grid;
-	flex-wrap: wrap;
+	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-    margin-bottom: 2em;
+	grid-column-gap: 2em;
+	grid-row-gap: 0em;
 }
 
 #providers{
@@ -631,12 +724,30 @@ table a{
 /* THEMING */
 
 .theme-button{
-	font-size: 0.8em;
+	font-size: 1em;
-	margin: 2px;
+	font-weight:500;
+	margin: 20px;
     width:128px;
 	line-height: 3em;
 	text-align: center;
 	text-transform: uppercase;
+	border-radius: 1em;
+}
+
+.theme-row{
+	display: grid;
+	grid-template-rows: 1fr 1fr;
+	height: fit-content;
+}
+
+.theme-palette {
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+}
+
+.swatch{
+	height: 30%;
+  	width: 100%;
 }
 
 .theme-blackboard{
@@ -675,6 +786,12 @@ table a{
     color: #aeea00;
 }
 
+.theme-white{
+	background-color: #ffffff;
+	border: 4px solid #222222;
+    color: #dddddd;
+}
+
 .theme-passion{
 	background-color: #f5f5f5;
 	border: 4px solid #8e24aa;
@@ -709,7 +826,7 @@ table a{
 	border: 4px solid #F3E600;
     color: #FF2A6D;
 }
-.theme-cyberpunk{
+.theme-quadra{
 	background-color: #010115;
 	border: 4px solid #F3E600;
     color: #FF2A6D;

src/index.js

@@ -36,9 +36,6 @@ function Homepage() {
         <div>
           <Search />
         </div>
-        <div>
-          <ModalMenu />
-        </div>
         <div>
           <Header
             date={date()}
@@ -52,7 +49,7 @@ function Homepage() {
           <Bookmarks />
         </div>
         <div>
-          <ModalInit />
+          <SettingsButton />
         </div>
     </main>
   );
@@ -84,7 +81,7 @@ function Header(props) {
 }
 
 const Applications = () => {
-  const data = (getApps()).apps;
+  let data = (getApps()).apps;
   return (
     <section id="apps">
       <h3>Applications</h3>
@@ -104,7 +101,6 @@ const Applications = () => {
   );
 }
 
-
 function Apps(props) {
   
     let classNameType = props.NSFW + "-content";
@@ -128,41 +124,34 @@ function Apps(props) {
 }
 
 function Bookmarks() {
-  let bookmarkList = getLinks();
+  let bookmarkList = (getLinks()).bookmarks;
-  var items = [];
-  for (var i = 0; i < bookmarkList.bookmarks.length; i++) {
-    items.push(
-      <LinkGroups
-        key={i}
-        category={bookmarkList.bookmarks[i].category}
-        links={bookmarkList.bookmarks[i].links}
-      />
-    );
-  }
   return (
     <section id="links">
       <h3>Bookmarks</h3>
       <div id="links_loop">
-          {items}
+        {bookmarkList.map((bookmarkList) => (
+          <LinkGroups
+            key={bookmarkList.category}
+            category={bookmarkList.category}
+            links={bookmarkList.links}
+          />
+        ))}
       </div>
     </section>
   );
 }
 
 function LinkGroups(props) {
-  var items = [];
+  let links = props.links;
-  for (var i = 0; i < props.links.length; i++) {
-    items.push(
-      <LinkItem
-        key={i}
-        link={props.links[i]}
-      />
-    );
-  }
   return (
     <div id="links_item">
-      <h4>{props.category}</h4>
+    <h4>{props.category}</h4>
-      {items}
+      {links.map((links, index) => (
+        <LinkItem
+          key={index}
+          link={links}
+        />
+      ))}
     </div>
   );
 }
@@ -212,7 +201,7 @@ function ModalMenu() {
           <button data-theme="tron" className="theme-button theme-tron" onClick={updateTheme}>Tron</button>
           <button data-theme="paper" className="theme-button theme-paper" onClick={updateTheme}>Paper</button>
           <button data-theme="cyberpunk" className="theme-button theme-cyberpunk" onClick={updateTheme}>Cyberpunk</button>
-          <button data-theme="quadra" className="theme-button theme-panam" onClick={updateTheme}>Quadra</button>
+          <button data-theme="quadra" className="theme-button theme-quadra" onClick={updateTheme}>Quadra</button>
           <button data-theme="panam" className="theme-button theme-panam" onClick={updateTheme}>Panam</button>
           <button data-theme="touch" className="theme-button theme-touch" onClick={updateTheme}>Touch</button>
           <button data-theme="peek" className="theme-button theme-peek" onClick={updateTheme}>Peek</button>
@@ -267,19 +256,20 @@ function Provider(props) {
   );
 }
 
-function ModalInit() {
+function SettingsButton() {
   setDisplayedItems();
   return (
     <div id="modal_init">
-      <a className="btn" href="#modal">
+      <Link to="/settings">
         <span className="iconify icon" data-icon="mdi-xbox-controller-menu"></span>
-      </a>
+      </Link>
     </div>
   );
 }
 
 function Settings() {
   setTheme();
+  var isChecked = localStorage.getItem("contenttype");
   return (
     <main id="settings-container" className="fade">
       <div id="settings-nav">
@@ -289,8 +279,14 @@ function Settings() {
           <Link to="/settings/apps">Applications</Link>
           <Link to="/settings/bookmarks">Bookmarks</Link>
           <Link to="/settings/themes">Themes</Link>
+          <Link to="/settings/providers">Search Providers</Link>
         </nav>
         <nav id="nav_item">
+          <header id="modal-footer">
+            <HideButton 
+              checked = {isChecked}
+            />
+          </header>
           <Link to="/">Back Home</Link>
         </nav>
       </div>
@@ -305,11 +301,11 @@ const PersonalizationSettings = () => {
   };
   return (
     <div id="settings-panel">
-      <form id="personalizationForm">
+      <div id="settings-panel-header">
-        <div id="settings-panel-header">
           <h1>Personalization</h1>
           <h3>Personal details</h3>
-        </div>
+      </div>
+      <form id="personalizationForm">
         <PersonalInfo />
         <div>
           <h3>Greetings</h3>
@@ -350,24 +346,19 @@ function FormInput(props) {
 }
 
 function MessageInfo() {
-  let greetings = require('./messages.json');
+  let greetings = (require('./messages.json')).messages;
-  var items = [];
-  for (var i = 0; i < greetings.messages.length; i++) {
-    items.push(
-      <Messages
-        key={i}
-        group={i+1}
-        index={greetings.messages[i].index}
-        greeting={greetings.messages[i].message}
-        easterEgg={greetings.messages[i].easteregg}
-      />
-    );
-  }
   return (
     <div id="messageForm">
-      {items}
+      {greetings.map((greetings, index) => (
+          <Messages
+            key={index}
+            group={index+1}
+            index={greetings.index}
+            greeting={greetings.message}
+            easterEgg={greetings.easteregg}
+          />
+      ))}
     </div>
-
   );
 }
 
@@ -393,26 +384,173 @@ function Messages(props) {
   );
 }
 
-function AppSettings() {
+const ApplicationSettings = () => {
+  let apps = (getApps()).apps
+  const handleSubmit = (e) => {
+    e.preventDefault();
+  };
   return (
     <div id="settings-panel">
-      <h1>Applications</h1>
+      <div id="settings-panel-header">
+          <h1>Applications</h1>
+      </div>
+      <form id="applicationForm">
+        {apps.map((apps) => (
+          <ApplicationDetails
+            key={apps.name}
+            name={apps.name}
+            url={apps.url}
+            icon={apps.icon}
+            urlbase={apps.urlbase}
+            NSFW={apps.NSFW}
+          />
+        ))}
+      </form>
+      <button onClick={handleSubmit} type="submit" form="applicationForm" value="submit">Save</button>
+    </div>
+    
+  );
+}
+
+function ApplicationDetails(props) {
+  
+  var nsfwChecked;
+  if(props.NSFW === "NSFW") {
+    nsfwChecked = true;
+  } else if(props.easterEgg === "SAFE") {
+    nsfwChecked = false;
+  } else {
+    nsfwChecked = false;
+  }
+  return (
+    <div id="applicationGrid" title={props.name}>
+      <label htmlFor="name">Name</label>
+      <input id="name" type="text" defaultValue={props.name}></input>
+      <label htmlFor="url">URL</label>
+      <input id="url" type="text" defaultValue={props.url}></input>
+      <label htmlFor="icon">Icon</label>
+      <input id="icon" type="text" defaultValue={props.icon}></input>
+      <label htmlFor="baseurl">Base URL</label>
+      <input id="baseurl" type="text" defaultValue={props.urlbase}></input>
+      <label htmlFor="NSFW">NSFW</label>
+      <input id="NSFW" type="checkbox" defaultChecked={nsfwChecked}></input>
     </div>
   );
 }
 
-function BookmarksSettings() {
+const BookmarksSettings = () => {
+  let groups = (getLinks()).bookmarks;
+  const handleSubmit = (e) => {
+    e.preventDefault();
+  };
   return (
     <div id="settings-panel">
-      <h1>Bookmarks</h1>
+      <div id="settings-panel-header">
+          <h1>Bookmarks</h1>
+      </div>
+      <form id="bookmarkForm">
+        <div>
+          {groups.map((groups) => (
+            <BookmarkGroups
+              key={groups.category}
+              category={groups.category}
+              links={groups.links}
+            />
+          ))}
+        </div>
+      </form>
+      <button onClick={handleSubmit} type="submit" form="bookmarkForm" value="submit">Save</button>
+    </div>
+    
+  );
+}
+
+function BookmarkGroups(props) {
+  let links = props.links;
+  return (
+    <div id="bookmarkForm">
+      <h3>{props.category}</h3>
+      {links.map((links) => (
+          <BookmarkDetails
+            key={links.name}
+            name={links.name}
+            url={links.url}
+          />
+      ))}
+    </div>
+  );
+}
+
+function BookmarkDetails(props) {
+  return (
+    <div id="bookmarkGrid" title={props.name}>
+      <label htmlFor="name">Name</label>
+      <input id="name" type="text" defaultValue={props.name}></input>
+      <label htmlFor="url">URL</label>
+      <input id="url" type="text" defaultValue={props.url}></input>
     </div>
   );
 }
 
 function ThemesSettings() {
+  let themes = (getThemes()).themes;
+  console.log(themes[0].colorbackground);
   return (
     <div id="settings-panel">
       <h1>Themes</h1>
+      <div id="modal-theme">
+        {themes.map((themes) => (
+            <div className="theme-row">
+              <button data-theme={themes.name} className={"theme-button theme-" + themes.name} onClick={updateTheme}>{themes.name}</button>
+              <div className="theme-palette">
+                <div className="swatch" style={{background: themes.colorbackground}}></div>
+                <div className="swatch" style={{background: themes.colorserachbackground}}></div>
+                <div className="swatch" style={{background: themes.colortextpri}}></div>
+                <div className="swatch" style={{background: themes.colortextacc}}></div>
+                <div className="swatch" style={{background: themes.colorborder}}></div>
+              </div>
+            </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ProviderSettings() {
+  let providers = (getProviders()).providers;
+  const handleSubmit = (e) => {
+    e.preventDefault();
+  };
+  return (
+    <div id="settings-panel">
+      <div id="settings-panel-header">
+          <h1>Providers</h1>
+      </div>
+      <form id="providersForm">
+        {providers.map((providers) => (
+          <ProvidersDetails
+            key={providers.name}
+            name={providers.name}
+            url={providers.url}
+            prefix={providers.prefix}
+          />
+        ))}
+      </form>
+      <button onClick={handleSubmit} type="submit" form="providersForm" value="submit">Save</button>
+    </div>
+    
+  );
+}
+
+function ProvidersDetails(props) {
+  return (
+    <div id="providersGrid" title={props.name}>
+      <label htmlFor="name">Name</label>
+      <input id="name" type="text" defaultValue={props.name}></input>
+      <label htmlFor="prefix">Prefix</label>
+      <input id="prefix" type="text" defaultValue={props.prefix}></input>
+      <label htmlFor="url">URL</label>
+      <input id="url" type="text" defaultValue={props.url}></input>
     </div>
   );
 }
@@ -423,9 +561,10 @@ ReactDOM.render(
       <Route path="/" element={<App />} />
       <Route path="/settings" element={<Settings />}>
         <Route path="personalization" element={<PersonalizationSettings />}/>
-        <Route path="apps" element={<AppSettings />}/>
+        <Route path="apps" element={<ApplicationSettings />}/>
         <Route path="bookmarks" element={<BookmarksSettings />}/>
         <Route path="themes" element={<ThemesSettings />}/>
+        <Route path="providers" element={<ProviderSettings />}/>
       </Route>
     </Routes>
   </BrowserRouter>,