diff --git a/src/App.js b/src/App.js
index 5ecd761..a16d350 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,13 @@
-import React from 'react';
-import styled, { createGlobalStyle } from 'styled-components';
+import React from "react";
+import styled, { createGlobalStyle } from "styled-components";
-import SearchBar from './components/searchBar'
-import Greeter from './components/greeter'
-import AppList from './components/appList'
-import BookmarkList from './components/bookmarkList'
-import SettingsModal from './components/settingsModal'
+import SearchBar from "./components/searchBar";
+import Greeter from "./components/greeter";
+import AppList from "./components/appList";
+import BookmarkList from "./components/bookmarkList";
+import SettingsModal from "./components/settingsModal";
-import getTheme from './components/themeManager';
-const selectedTheme = getTheme();
+import selectedTheme from "./components/themeManager";
const GlobalStyle = createGlobalStyle`
body {
diff --git a/src/components/appList.js b/src/components/appList.js
index 7ac5d3d..f8a96c1 100644
--- a/src/components/appList.js
+++ b/src/components/appList.js
@@ -1,72 +1,67 @@
-import React from 'react';
-import MaterialIcon from 'material-icons-react';
-import styled from 'styled-components';
+import React from "react";
+import MaterialIcon from "material-icons-react";
+import styled from "styled-components";
-import appData from './data/apps.json';
+import appData from "./data/apps.json";
-import getTheme from './themeManager';
+import selectedTheme from "./themeManager";
-import { Headline, ListContainer, ItemList, Item } from './elements'
-
-const selectedTheme = getTheme();
+import { Headline, ListContainer, ItemList, Item } from "./elements";
const IconContainer = styled.div`
- margin-right: 0.5vh;
+ margin-right: 0.5vh;
`;
const DetailsContainer = styled.div`
- display: flex;
- flex-direction: column;
+ display: flex;
+ flex-direction: column;
`;
const Link = styled.a`
- font-family: Roboto, sans-serif;
- flex: 1 0 auto;
- color: ${selectedTheme.mainColor};
- font-weight: 500;
- text-transform: uppercase;
- margin: 0;
- text-decoration: none;
- font-size: 1rem;
+ font-family: Roboto, sans-serif;
+ flex: 1 0 auto;
+ color: ${selectedTheme.mainColor};
+ font-weight: 500;
+ text-transform: uppercase;
+ margin: 0;
+ text-decoration: none;
+ font-size: 1rem;
`;
const Description = styled.p`
- font-family: Roboto, sans-serif;
- text-transform: uppercase;
- margin: 0;
- font-size: 0.65rem;
- font-weight: 400;
- color: ${selectedTheme.accentColor};
+ font-family: Roboto, sans-serif;
+ text-transform: uppercase;
+ margin: 0;
+ font-size: 0.65rem;
+ font-weight: 400;
+ color: ${selectedTheme.accentColor};
`;
const App = styled.div`
- display: flex;
- flex-basis: 25%;
- padding: 1rem;
+ display: flex;
+ flex-basis: 25%;
+ padding: 1rem;
`;
const appList = () => (
-
- Applications
-
- {
- appData.apps.map((app, index) => (
- -
-
-
-
-
-
- {app.name}
- {app.displayURL}
-
-
-
- ))
- }
-
-
+
+ Applications
+
+ {appData.apps.map((app, index) => (
+ -
+
+
+
+
+
+ {app.name}
+ {app.displayURL}
+
+
+
+ ))}
+
+
);
export default appList;
-
diff --git a/src/components/bookmarkList.js b/src/components/bookmarkList.js
index d18a93a..e08ce6f 100644
--- a/src/components/bookmarkList.js
+++ b/src/components/bookmarkList.js
@@ -1,57 +1,53 @@
-import React from 'react';
-import styled from 'styled-components';
+import React from "react";
+import styled from "styled-components";
-import bookmarkData from './data/bookmarks.json';
+import bookmarkData from "./data/bookmarks.json";
-import getTheme from './themeManager';
-import { Headline, ListContainer, ItemList, Item } from './elements'
-
-const selectedTheme = getTheme();
+import selectedTheme from "./themeManager";
+import { Headline, ListContainer, ItemList, Item } from "./elements";
const Group = styled.h4`
- font-family: Roboto, sans-serif;
- font-weight: 700;
- margin: 0;
- text-transform: uppercase;
- color: ${selectedTheme.mainColor};
+ font-family: Roboto, sans-serif;
+ font-weight: 700;
+ margin: 0;
+ text-transform: uppercase;
+ color: ${selectedTheme.mainColor};
`;
const BookmarkGroup = styled.div`
- display: flex;
- flex-direction: column;
- flex: 2 1 auto;
- padding: 1rem 0 1rem 0;
+ display: flex;
+ flex-direction: column;
+ flex: 2 1 auto;
+ padding: 1rem 0 1rem 0;
`;
const Bookmark = styled.a`
- font-family: Roboto, sans-serif;
- font-weight: 400;
- text-decoration: none;
- color: ${selectedTheme.accentColor};
- padding: 10px 0 0 0;
- font-size: 14px;
+ font-family: Roboto, sans-serif;
+ font-weight: 400;
+ text-decoration: none;
+ color: ${selectedTheme.accentColor};
+ padding: 10px 0 0 0;
+ font-size: 14px;
`;
const bookmarkList = () => (
-
- Bookmarks
-
- {
- bookmarkData.groups.map((group, index) => (
- -
-
- {group.name}
- {
- group.items.map((link) => (
- {link.name}
- ))
- }
-
-
- ))
- }
-
-
+
+ Bookmarks
+
+ {bookmarkData.groups.map((group, index) => (
+ -
+
+ {group.name}
+ {group.items.map(link => (
+
+ {link.name}
+
+ ))}
+
+
+ ))}
+
+
);
-export default bookmarkList;
\ No newline at end of file
+export default bookmarkList;
diff --git a/src/components/elements.js b/src/components/elements.js
index 4a3d5f2..f2622a4 100644
--- a/src/components/elements.js
+++ b/src/components/elements.js
@@ -1,34 +1,32 @@
-import styled from 'styled-components';
-import getTheme from './themeManager';
-
-const selectedTheme = getTheme();
+import styled from "styled-components";
+import selectedTheme from "./themeManager";
const ListContainer = styled.div`
- padding: 2rem 0 2rem 0;
+ padding: 2rem 0 2rem 0;
`;
const Headline = styled.h3`
- font-family: Roboto, sans-serif;
- font-weight: 900;
- text-transform: uppercase;
- margin: 0px;
- font-size: 1.5rem;
- color: ${selectedTheme.mainColor};
+ font-family: Roboto, sans-serif;
+ font-weight: 900;
+ text-transform: uppercase;
+ margin: 0px;
+ font-size: 1.5rem;
+ color: ${selectedTheme.mainColor};
`;
const ItemList = styled.ul`
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
- grid-gap: 1rem;
- padding: 0;
- list-style: none;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ grid-gap: 1rem;
+ padding: 0;
+ list-style: none;
`;
const Item = styled.li`
- max-height: 100px;
- overflow: hidden;
- position: relative;
- list-style: none;
+ max-height: 100px;
+ overflow: hidden;
+ position: relative;
+ list-style: none;
`;
-export { Headline, ListContainer, ItemList, Item }
\ No newline at end of file
+export { Headline, ListContainer, ItemList, Item };
diff --git a/src/components/greeter.js b/src/components/greeter.js
index 6e9aefe..a791a1f 100644
--- a/src/components/greeter.js
+++ b/src/components/greeter.js
@@ -1,70 +1,97 @@
-import React from 'react';
-import styled from 'styled-components';
+import React from "react";
+import styled from "styled-components";
-import getTheme from './themeManager';
-const selectedTheme = getTheme();
+import selectedTheme from "./themeManager";
const GreeterContainer = styled.div`
- padding: 2rem 0 2rem 0;
+ padding: 2rem 0 2rem 0;
`;
const GreetText = styled.h1`
- font-family: Roboto, sans-serif;
- font-weight: 900;
- font-size: 45px;
- margin: 0.5rem 0 0.5rem 0;
- color: ${selectedTheme.mainColor};
+ font-family: Roboto, sans-serif;
+ font-weight: 900;
+ font-size: 45px;
+ margin: 0.5rem 0 0.5rem 0;
+ color: ${selectedTheme.mainColor};
`;
const DateText = styled.h3`
- font-family: Roboto, sans-serif;
- font-weight: 400;
- font-size: 15px;
- text-transform: uppercase;
- margin: 0;
- color: ${selectedTheme.accentColor};
+ font-family: Roboto, sans-serif;
+ font-weight: 400;
+ font-size: 15px;
+ text-transform: uppercase;
+ margin: 0;
+ color: ${selectedTheme.accentColor};
`;
const getGreeting = () => {
- // Maybe add some expandability for different greetings?
- return "Hello World!"
-}
+ // Maybe add some expandability for different greetings?
+ return "Hello World!";
+};
-const getExtension = (day) => {
- let extension = ""
+const getExtension = day => {
+ let extension = "";
- if ((day > 4 && day <= 20) || (day > 20 && day % 10 >= 4)) {
- extension = "th"
- } else if (day % 10 === 1) {
- extension = "st"
- } else if (day % 10 === 2) {
- extension = "nd"
- } else if (day % 10 === 3) {
- extension = "rd"
- }
+ if ((day > 4 && day <= 20) || (day > 20 && day % 10 >= 4)) {
+ extension = "th";
+ } else if (day % 10 === 1) {
+ extension = "st";
+ } else if (day % 10 === 2) {
+ extension = "nd";
+ } else if (day % 10 === 3) {
+ extension = "rd";
+ }
- return extension
-}
+ return extension;
+};
const getDateString = () => {
- let currentDate = new Date();
- const monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
- const weekDayNames = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ];
- return weekDayNames[currentDate.getUTCDay()] + ", " + monthNames[currentDate.getUTCMonth()] + " " + currentDate.getDate() + getExtension(currentDate.getDate()) + " " + currentDate.getFullYear();
-}
+ let currentDate = new Date();
+ const monthNames = [
+ "January",
+ "February",
+ "March",
+ "April",
+ "May",
+ "June",
+ "July",
+ "August",
+ "September",
+ "October",
+ "November",
+ "December"
+ ];
+ const weekDayNames = [
+ "Sunday",
+ "Monday",
+ "Tuesday",
+ "Wednesday",
+ "Thursday",
+ "Friday",
+ "Saturday"
+ ];
+ return (
+ weekDayNames[currentDate.getUTCDay()] +
+ ", " +
+ monthNames[currentDate.getUTCMonth()] +
+ " " +
+ currentDate.getDate() +
+ getExtension(currentDate.getDate()) +
+ " " +
+ currentDate.getFullYear()
+ );
+};
const greeter = () => {
+ let date = getDateString();
+ let greeting = getGreeting();
- let date = getDateString();
- let greeting = getGreeting();
+ return (
+
+ {date}
+ {greeting}
+
+ );
+};
- return (
-
- { date }
- { greeting }
-
- );
-}
-
-
-export default greeter;
\ No newline at end of file
+export default greeter;
diff --git a/src/components/searchBar.js b/src/components/searchBar.js
index a2795c1..0a027ef 100644
--- a/src/components/searchBar.js
+++ b/src/components/searchBar.js
@@ -1,67 +1,66 @@
-import React, {useState} from 'react';
-import styled from 'styled-components';
+import React, { useState } from "react";
+import styled from "styled-components";
-import searchData from './data/search.json';
+import searchData from "./data/search.json";
-import getTheme from './themeManager';
-const selectedTheme = getTheme();
+import selectedTheme from "./themeManager";
const SearchInput = styled.input`
- width: 100%;
- font-size: 16px;
- border: none;
- border-bottom: 1px solid ${selectedTheme.accentColor};
- background: none;
- border-radius: 0;
- color: ${selectedTheme.mainColor};
+ width: 100%;
+ font-size: 16px;
+ border: none;
+ border-bottom: 1px solid ${selectedTheme.accentColor};
+ background: none;
+ border-radius: 0;
+ color: ${selectedTheme.mainColor};
`;
-const handleQueryWithProvider = (query) => {
+const handleQueryWithProvider = query => {
+ let queryArray = query.split(" ");
- let queryArray = query.split(" ");
+ let prefix = queryArray[0];
- let prefix = queryArray[0];
+ queryArray.shift();
- queryArray.shift();
+ let searchQuery = queryArray.join(" ");
- let searchQuery = queryArray.join(" ");
-
- var foundProvider = false;
- searchData.providers.forEach((provider) => {
- if (provider.prefix === prefix) {
- foundProvider = true;
- window.location = provider.url + searchQuery
- }
- })
-
- if (!foundProvider) {
- window.location = "https://google.com/search?q=" + query;
+ var foundProvider = false;
+ searchData.providers.forEach(provider => {
+ if (provider.prefix === prefix) {
+ foundProvider = true;
+ window.location = provider.url + searchQuery;
}
-}
+ });
+
+ if (!foundProvider) {
+ window.location = "https://google.com/search?q=" + query;
+ }
+};
const SearchBar = () => {
+ let [input, setInput] = useState();
- let [input, setInput] = useState();
+ const handleSearchQuery = e => {
+ var query = input;
- const handleSearchQuery = (e) => {
-
- var query = input;
-
- if (query.split(" ")[0].includes("/")) {
- handleQueryWithProvider(query)
- } else {
- window.location = "https://google.com/search?q=" + query;
- }
-
- e.preventDefault();
+ if (query.split(" ")[0].includes("/")) {
+ handleQueryWithProvider(query);
+ } else {
+ window.location = "https://google.com/search?q=" + query;
}
- return (
-
- )
-}
+ e.preventDefault();
+ };
-export default SearchBar;
\ No newline at end of file
+ return (
+
+ );
+};
+
+export default SearchBar;
diff --git a/src/components/settingsModal.js b/src/components/settingsModal.js
index 574adcd..5922501 100644
--- a/src/components/settingsModal.js
+++ b/src/components/settingsModal.js
@@ -1,173 +1,177 @@
-import React, { useState } from 'react';
-import MaterialIcon from 'material-icons-react';
-import styled from 'styled-components';
+import React, { useState } from "react";
+import MaterialIcon from "material-icons-react";
+import styled from "styled-components";
-import Select from 'react-select';
+import Select from "react-select";
-import searchData from './data/search.json'
-import themeData from './data/themes.json'
+import searchData from "./data/search.json";
+import themeData from "./data/themes.json";
-import getTheme, { setTheme } from './themeManager'
-const selectedTheme = getTheme();
+import selectedTheme, { setTheme } from "./themeManager";
const ModalButton = styled.button`
- float: right;
- border: none;
- background: none;
- padding: 10px;
+ float: right;
+ border: none;
+ background: none;
+ padding: 10px;
`;
const ExitButton = styled.button`
- float: right;
- border: none;
- background: none;
+ float: right;
+ border: none;
+ background: none;
`;
const Modal = styled.div`
- position: absolute;
- left: 50%;
- top: 50%;
- padding: 1rem;
- transform: translate(-50%, -50%);
- z-index: 10;
- border: 1px solid ${selectedTheme.mainColor};
- background-color: ${selectedTheme.backgroundColor};
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ padding: 1rem;
+ transform: translate(-50%, -50%);
+ z-index: 10;
+ border: 1px solid ${selectedTheme.mainColor};
+ background-color: ${selectedTheme.backgroundColor};
`;
const SelectContainer = styled.div`
- padding-bottom: 1rem;
+ padding-bottom: 1rem;
`;
const FormContainer = styled.div`
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
`;
const ApplyButton = styled.button`
- font-family: Roboto, sans-serif;
- text-transform: uppercase;
- font-weight: 400;
- border: 1px solid ${selectedTheme.mainColor};
- color: ${selectedTheme.mainColor};
- background: none;
- margin-left: 1rem;
+ font-family: Roboto, sans-serif;
+ text-transform: uppercase;
+ font-weight: 400;
+ border: 1px solid ${selectedTheme.mainColor};
+ color: ${selectedTheme.mainColor};
+ background: none;
+ margin-left: 1rem;
`;
const Headline = styled.h3`
- font-family: Roboto, sans-serif;
- font-weight: 900;
- color: ${selectedTheme.mainColor};
- margin-top: 0;
+ font-family: Roboto, sans-serif;
+ font-weight: 900;
+ color: ${selectedTheme.mainColor};
+ margin-top: 0;
`;
const Table = styled.table`
- font-family: Roboto, sans-serif;
- font-weight: 400;
- background: none;
- color: ${selectedTheme.mainColor};
+ font-family: Roboto, sans-serif;
+ font-weight: 400;
+ background: none;
+ color: ${selectedTheme.mainColor};
`;
const TableRow = styled.tr`
- border-bottom: 1px solid ${selectedTheme.mainColor};
+ border-bottom: 1px solid ${selectedTheme.mainColor};
`;
const TableCell = styled.td`
- background: none;
- padding-top: 0.5rem;
+ background: none;
+ padding-top: 0.5rem;
`;
const HeadCell = styled.th`
- font-weight: 700;
- background: none;
+ font-weight: 700;
+ background: none;
`;
const SelectorStyle = {
- control: (provided) => ({
- ...provided,
- fontFamily: "Roboto, sans-serif",
- fontWeight: "500",
- color: selectedTheme.mainColor,
- textTransform: "uppercase",
- width: "200px",
- background: "none",
- borderRadius: "0px",
- border: "1px solid " + selectedTheme.mainColor,
- boxShadow: 0,
- '&:hover': {
- border: "1px solid " + selectedTheme.mainColor,
- }
- }),
- menu: (provided) => ({
- ...provided,
- backgroundColor: selectedTheme.backgroundColor,
- border: "1px solid " + selectedTheme.mainColor,
- borderRadius: "0px",
- boxShadow: 0,
- }),
- option: (provided) => ({
- ...provided,
- fontFamily: "Roboto, sans-serif",
- fontWeight: "500",
- color: selectedTheme.mainColor,
- textTransform: "uppercase",
- borderRadius: "0px",
- boxShadow: 0,
- backgroundColor: selectedTheme.backgroundColor,
- '&:hover': {
- backgroundColor: selectedTheme.mainColor,
- color: selectedTheme.backgroundColor,
- }
- }),
- singleValue: (provided) => {
- return {
- ...provided,
- color: selectedTheme.mainColor,
- }
+ control: provided => ({
+ ...provided,
+ fontFamily: "Roboto, sans-serif",
+ fontWeight: "500",
+ color: selectedTheme.mainColor,
+ textTransform: "uppercase",
+ width: "200px",
+ background: "none",
+ borderRadius: "0px",
+ border: "1px solid " + selectedTheme.mainColor,
+ boxShadow: 0,
+ "&:hover": {
+ border: "1px solid " + selectedTheme.mainColor
}
-}
+ }),
+ menu: provided => ({
+ ...provided,
+ backgroundColor: selectedTheme.backgroundColor,
+ border: "1px solid " + selectedTheme.mainColor,
+ borderRadius: "0px",
+ boxShadow: 0
+ }),
+ option: provided => ({
+ ...provided,
+ fontFamily: "Roboto, sans-serif",
+ fontWeight: "500",
+ color: selectedTheme.mainColor,
+ textTransform: "uppercase",
+ borderRadius: "0px",
+ boxShadow: 0,
+ backgroundColor: selectedTheme.backgroundColor,
+ "&:hover": {
+ backgroundColor: selectedTheme.mainColor,
+ color: selectedTheme.backgroundColor
+ }
+ }),
+ singleValue: provided => {
+ return {
+ ...provided,
+ color: selectedTheme.mainColor
+ };
+ }
+};
const SettingsModal = () => {
+ const [modalHidden, setModalHidden] = useState(true);
+ const [newTheme, setNewTheme] = useState();
- const [modalHidden, setModalHidden] = useState(true);
- const [newTheme, setNewTheme] = useState();
+ return (
+ <>
+ setModalHidden(!modalHidden)}>
+
+
+
+ setModalHidden(!modalHidden)}>
+
+
+
+ Theme:
+
+
+
+
+
+
+ Search Provider
+ Prefix
+
+ {searchData.providers.map((provider, index) => (
+
+ {provider.name}
+ {provider.prefix}
+
+ ))}
+
+
+
+
+ );
+};
- return (
- <>
- setModalHidden(!modalHidden)}>
-
-
-
- setModalHidden(!modalHidden)}>
-
-
-
- Theme:
-
-
-
-
-
-
- Search Provider
- Prefix
-
- {
- searchData.providers.map((provider, index) => (
-
- {provider.name}
- {provider.prefix}
-
- ))
- }
-
-
-
-
- )
-
-}
-
-export default SettingsModal;
\ No newline at end of file
+export default SettingsModal;
diff --git a/src/components/themeManager.js b/src/components/themeManager.js
index ca1f1ec..f96d0a2 100644
--- a/src/components/themeManager.js
+++ b/src/components/themeManager.js
@@ -1,25 +1,29 @@
-import themeData from './data/themes.json';
+import themeData from "./data/themes.json";
-const setTheme = (theme) => {
- localStorage.setItem("theme", theme);
- window.location.reload();
-}
+const setTheme = theme => {
+ localStorage.setItem("theme", theme);
+ window.location.reload();
+};
const resetTheme = () => {
- localStorage.removeItem("theme");
-}
+ localStorage.removeItem("theme");
+};
const getTheme = () => {
+ let selectedTheme = themeData.themes[0];
- let selectedTheme = themeData.themes[0];
+ if (
+ localStorage.getItem("theme") &&
+ localStorage.getItem("theme") !== undefined
+ ) {
+ selectedTheme = JSON.parse(localStorage.getItem("theme"));
+ }
- if (localStorage.getItem("theme") && localStorage.getItem("theme") !== undefined) {
- selectedTheme = JSON.parse(localStorage.getItem("theme"));
- }
+ return selectedTheme;
+};
- return selectedTheme;
-}
+const selectedTheme = getTheme();
-export { setTheme, resetTheme }
+export { setTheme, resetTheme };
-export default getTheme;
\ No newline at end of file
+export default selectedTheme;