diff --git a/src/App.js b/src/App.js
index 1338a35..5ecd761 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,8 +7,8 @@ import AppList from './components/appList'
import BookmarkList from './components/bookmarkList'
import SettingsModal from './components/settingsModal'
-import themeData from './components/data/themes.json';
-const selectedTheme = localStorage.getItem("theme") ? JSON.parse(localStorage.getItem("theme")) : themeData.themes[0];
+import getTheme from './components/themeManager';
+const selectedTheme = getTheme();
const GlobalStyle = createGlobalStyle`
body {
diff --git a/src/components/appList.js b/src/components/appList.js
index 694dce6..7ac5d3d 100644
--- a/src/components/appList.js
+++ b/src/components/appList.js
@@ -4,90 +4,69 @@ import styled from 'styled-components';
import appData from './data/apps.json';
-import themeData from './data/themes.json'
-const selectedTheme = localStorage.getItem("theme") ? JSON.parse(localStorage.getItem("theme")) : themeData.themes[0];
+import getTheme from './themeManager';
-const AppListContainer = styled.div`
- padding: 2rem 0 2rem 0;
-`;
+import { Headline, ListContainer, ItemList, Item } from './elements'
-const AppsContainer = styled.div`
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
-
- @media (max-width: 600px) {
- flex-direction: column;
- }
-`;
-
-const AppContainer = styled.div`
- display: flex;
- flex-direction: row;
- flex: 1 0 21%;
- padding: 1rem 0 1rem 0;
-
- @media (max-width: 750px) {
- flex: 1 0 42%;
- }
-`;
+const selectedTheme = getTheme();
const IconContainer = styled.div`
- margin-right: 5px;
+ margin-right: 0.5vh;
`;
-const AppDetails = styled.div`
+const DetailsContainer = styled.div`
display: flex;
flex-direction: column;
`;
-const ApplicationsText = styled.h3`
- font-family: Roboto, sans-serif;
- font-weight: 900;
- text-transform: uppercase;
- margin: 0px;
- font-size: 20px;
- color: ${selectedTheme.mainColor};
-`;
-
const Link = styled.a`
font-family: Roboto, sans-serif;
+ flex: 1 0 auto;
color: ${selectedTheme.mainColor};
font-weight: 500;
text-transform: uppercase;
- margin: 0px;
+ margin: 0;
text-decoration: none;
- font-size: 15px;
+ font-size: 1rem;
`;
const Description = styled.p`
font-family: Roboto, sans-serif;
text-transform: uppercase;
- margin: 0px;
- font-size: 10px;
+ margin: 0;
+ font-size: 0.65rem;
font-weight: 400;
color: ${selectedTheme.accentColor};
`;
+const App = styled.div`
+ display: flex;
+ flex-basis: 25%;
+ padding: 1rem;
+`;
+
const appList = () => (
-
- Applications
-
+
+ Applications
+
{
- appData.apps.map((app) => (
-
-
-
-
-
- {app.name}
- {app.displayURL}
-
-
+ appData.apps.map((app, index) => (
+ -
+
+
+
+
+
+ {app.name}
+ {app.displayURL}
+
+
+
))
}
-
-
+
+
);
-export default appList;
\ No newline at end of file
+export default appList;
+
diff --git a/src/components/bookmarkList.js b/src/components/bookmarkList.js
index 47aaa23..d18a93a 100644
--- a/src/components/bookmarkList.js
+++ b/src/components/bookmarkList.js
@@ -3,18 +3,12 @@ import styled from 'styled-components';
import bookmarkData from './data/bookmarks.json';
-import themeData from './data/themes.json'
-const selectedTheme = localStorage.getItem("theme") ? JSON.parse(localStorage.getItem("theme")) : themeData.themes[0];
+import getTheme from './themeManager';
+import { Headline, ListContainer, ItemList, Item } from './elements'
-const BookmarksText = styled.h3`
- font-family: Roboto, sans-serif;
- text-transform: uppercase;
- margin: 0;
- font-size: 20px;
- color: ${selectedTheme.mainColor};
-`;
+const selectedTheme = getTheme();
-const GroupText = styled.h4`
+const Group = styled.h4`
font-family: Roboto, sans-serif;
font-weight: 700;
margin: 0;
@@ -22,27 +16,11 @@ const GroupText = styled.h4`
color: ${selectedTheme.mainColor};
`;
-const BookmarkListContainer = styled.div`
- padding: 2rem 0 2rem 0;
-`;
-
-const BookmarksContainer = styled.div`
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- width: 100%;
-
- @media (max-width: 600px) {
- flex-direction: column;
- }
-`;
-
-const BookmarkGroupContainer = styled.div`
+const BookmarkGroup = styled.div`
display: flex;
flex-direction: column;
- flex: 1 0 21%;
- padding-top: 2rem;
- font-size: 15px;
+ flex: 2 1 auto;
+ padding: 1rem 0 1rem 0;
`;
const Bookmark = styled.a`
@@ -55,25 +33,25 @@ const Bookmark = styled.a`
`;
const bookmarkList = () => (
-
- Bookmarks
-
-
+
+ Bookmarks
+
{
- bookmarkData.groups.map((group) => (
-
- {group.name}
- {
- group.items.map((link) => (
- {link.name}
- ))
- }
-
+ bookmarkData.groups.map((group, index) => (
+ -
+
+ {group.name}
+ {
+ group.items.map((link) => (
+ {link.name}
+ ))
+ }
+
+
))
}
-
-
-
+
+
);
export default bookmarkList;
\ No newline at end of file
diff --git a/src/components/data/apps.json b/src/components/data/apps.json
index 495f0e4..24d20cc 100644
--- a/src/components/data/apps.json
+++ b/src/components/data/apps.json
@@ -2,56 +2,56 @@
"apps": [
{
"name": "PiHole",
- "displayURL": "example.com",
- "URL": "https://example.com",
+ "displayURL": "192.168.1.253",
+ "URL": "/admin/",
"icon": "vpn_lock"
},
{
"name": "Plex",
- "displayURL": "example.com",
- "URL": "https://example.com",
+ "displayURL": "app.plex.tv",
+ "URL": "https://app.plex.tv",
"icon": "tv"
},
{
"name": "NextCloud",
- "displayURL": "example.com",
- "URL": "https://example.com",
+ "displayURL": "phntxx.tech",
+ "URL": "https://phntxx.tech/cloud/",
"icon": "filter_drama"
},
{
"name": "Ghost",
- "displayURL": "example.com",
- "URL": "https://example.com",
+ "displayURL": "phntxx.tech",
+ "URL": "https://phntxx.tech/blog/",
"icon": "rss_feed"
},
{
"name": "Minecraft",
- "displayURL": "example.com",
- "URL": "https://example.com",
+ "displayURL": "phntxx.tech",
+ "URL": "https://phntxx.tech/minecraft/index.html",
"icon": "games"
},
{
"name": "pfSense",
- "displayURL": "example.com",
- "URL": "https://example.com",
+ "displayURL": "phntxx.tech",
+ "URL": "https://phntxx.tech:1111/",
"icon": "security"
},
{
"name": "ESXi",
- "displayURL": "example.com",
- "URL": "https://example.com",
+ "displayURL": "rhsttpba1.ur.de",
+ "URL": "https://rhsttpba1.ur.de",
"icon": "dns"
},
{
"name": "Tautulli",
- "displayURL": "example.com",
- "URL": "https://example.com",
+ "displayURL": "phntxx.tech",
+ "URL": "https://phntxx.tech/tautulli/",
"icon": "bar_chart"
},
{
"name": "Grafana",
- "displayURL": "example.com",
- "URL": "https://example.com",
+ "displayURL": "phntxx.tech",
+ "URL": "https://phntxx.tech/grafana/",
"icon": "show_chart"
}
]
diff --git a/src/components/data/bookmarks.json b/src/components/data/bookmarks.json
index b916898..abf8d55 100644
--- a/src/components/data/bookmarks.json
+++ b/src/components/data/bookmarks.json
@@ -1,53 +1,15 @@
{
"groups": [
{
- "name": "Communicate",
+ "name": "Wikis",
"items": [
{
- "name": "Discord",
- "url": "https://example.com"
+ "name": "Wikipedia",
+ "url": "https://en.wikipedia.org/"
},
{
- "name": "Gmail",
- "url": "https://example.com"
- },
- {
- "name": "Slack",
- "url": "https://example.com"
- }
- ]
- },
- {
- "name": "Cloud",
- "items": [
- {
- "name": "Box",
- "url": "https://example.com"
- },
- {
- "name": "Dropbox",
- "url": "https://example.com"
- },
- {
- "name": "Drive",
- "url": "https://example.com"
- }
- ]
- },
- {
- "name": "Design",
- "items": [
- {
- "name": "Awwwards",
- "url": "https://example.com"
- },
- {
- "name": "Dribbble",
- "url": "https://example.com"
- },
- {
- "name": "Muz.li",
- "url": "https://example.com"
+ "name": "Arch Linux Wiki",
+ "url": "https://archlinux.org/"
}
]
},
@@ -56,32 +18,15 @@
"items": [
{
"name": "Codepen",
- "url": "https://example.com"
+ "url": "https://codepen.io/"
},
{
- "name": "Devdocs",
- "url": "https://example.com"
+ "name": "JSFiddle",
+ "url": "https://jsfiddle.net/"
},
{
- "name": "Devhints",
- "url": "https://example.com"
- }
- ]
- },
- {
- "name": "Lifestyle",
- "items": [
- {
- "name": "Design Milk",
- "url": "https://example.com"
- },
- {
- "name": "Dwell",
- "url": "https://example.com"
- },
- {
- "name": "Freshome",
- "url": "https://example.com"
+ "name": "Pastebin",
+ "url": "https://pastebin.com/"
}
]
},
@@ -89,33 +34,46 @@
"name": "Media",
"items": [
{
- "name": "Spotify",
- "url": "https://example.com"
- },
- {
- "name": "Trakt",
- "url": "https://example.com"
+ "name": "Soundcloud",
+ "url": "https://soundcloud.com"
},
{
"name": "YouTube",
- "url": "https://example.com"
+ "url": "https://youtube.com"
+ },
+ {
+ "name": "Twitch",
+ "url": "https://twitch.tv"
}
]
},
{
- "name": "Reading",
+ "name": "Social Networks",
"items": [
{
- "name": "Instapaper",
- "url": "https://example.com"
+ "name": "Facebook",
+ "url": "https://facebook.com"
},
{
- "name": "Medium",
- "url": "https://example.com"
+ "name": "Twitter",
+ "url": "https://twitter.com"
},
+ {
+ "name": "Instagram",
+ "url": "https://instagram.com"
+ }
+ ]
+ },
+ {
+ "name": "Imageboards",
+ "items": [
{
"name": "Reddit",
- "url": "https://example.com"
+ "url": "https://reddit.com"
+ },
+ {
+ "name": "4chan",
+ "url": "https://4chan.org"
}
]
},
@@ -123,16 +81,16 @@
"name": "Tech",
"items": [
{
- "name": "TheNextWeb",
- "url": "https://example.com"
+ "name": "Hackernoon",
+ "url": "https://hackernoon.com"
},
{
"name": "The Verge",
- "url": "https://example.com"
+ "url": "https://theverge.com"
},
{
- "name": "MIT Technology Review",
- "url": "https://example.com"
+ "name": "Hackernews",
+ "url": "https://news.ycombinator.com"
}
]
}
diff --git a/src/components/elements.js b/src/components/elements.js
new file mode 100644
index 0000000..4a3d5f2
--- /dev/null
+++ b/src/components/elements.js
@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+import getTheme from './themeManager';
+
+const selectedTheme = getTheme();
+
+const ListContainer = styled.div`
+ 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};
+`;
+
+const ItemList = styled.ul`
+ 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;
+`;
+
+export { Headline, ListContainer, ItemList, Item }
\ No newline at end of file
diff --git a/src/components/greeter.js b/src/components/greeter.js
index 054dd41..6e9aefe 100644
--- a/src/components/greeter.js
+++ b/src/components/greeter.js
@@ -1,8 +1,8 @@
import React from 'react';
import styled from 'styled-components';
-import themeData from './data/themes.json'
-const selectedTheme = localStorage.getItem("theme") ? JSON.parse(localStorage.getItem("theme")) : themeData.themes[0];
+import getTheme from './themeManager';
+const selectedTheme = getTheme();
const GreeterContainer = styled.div`
padding: 2rem 0 2rem 0;
@@ -48,11 +48,8 @@ const getExtension = (day) => {
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();
}
diff --git a/src/components/searchBar.js b/src/components/searchBar.js
index e2558d8..a2795c1 100644
--- a/src/components/searchBar.js
+++ b/src/components/searchBar.js
@@ -3,8 +3,8 @@ import styled from 'styled-components';
import searchData from './data/search.json';
-import themeData from './data/themes.json';
-const selectedTheme = localStorage.getItem("theme") ? JSON.parse(localStorage.getItem("theme")) : themeData.themes[0];
+import getTheme from './themeManager';
+const selectedTheme = getTheme();
const SearchInput = styled.input`
width: 100%;
@@ -47,8 +47,6 @@ const SearchBar = () => {
var query = input;
- console.log(query)
-
if (query.split(" ")[0].includes("/")) {
handleQueryWithProvider(query)
} else {
diff --git a/src/components/settingsModal.js b/src/components/settingsModal.js
index 8e8c249..574adcd 100644
--- a/src/components/settingsModal.js
+++ b/src/components/settingsModal.js
@@ -8,12 +8,10 @@ import searchData from './data/search.json'
import themeData from './data/themes.json'
import getTheme, { setTheme } from './themeManager'
-
const selectedTheme = getTheme();
const ModalButton = styled.button`
float: right;
-
border: none;
background: none;
padding: 10px;
@@ -21,7 +19,6 @@ const ModalButton = styled.button`
const ExitButton = styled.button`
float: right;
-
border: none;
background: none;
`;
@@ -64,6 +61,27 @@ const Headline = styled.h3`
margin-top: 0;
`;
+const Table = styled.table`
+ font-family: Roboto, sans-serif;
+ font-weight: 400;
+ background: none;
+ color: ${selectedTheme.mainColor};
+`;
+
+const TableRow = styled.tr`
+ border-bottom: 1px solid ${selectedTheme.mainColor};
+`;
+
+const TableCell = styled.td`
+ background: none;
+ padding-top: 0.5rem;
+`;
+
+const HeadCell = styled.th`
+ font-weight: 700;
+ background: none;
+`;
+
const SelectorStyle = {
control: (provided) => ({
...provided,
@@ -109,28 +127,6 @@ const SelectorStyle = {
}
}
-
-const Table = styled.table`
- font-family: Roboto, sans-serif;
- font-weight: 400;
- background: none;
- color: ${selectedTheme.mainColor};
-`;
-
-const TableRow = styled.tr`
- border-bottom: 1px solid ${selectedTheme.mainColor};
-`;
-
-const TableCell = styled.td`
- background: none;
- padding-top: 0.5rem;
-`;
-
-const HeadCell = styled.th`
- font-weight: 700;
- background: none;
-`;
-
const SettingsModal = () => {
const [modalHidden, setModalHidden] = useState(true);
@@ -153,18 +149,20 @@ const SettingsModal = () => {
-
- Search Provider
- Prefix
-
- {
- searchData.providers.map((provider) => (
-
- {provider.name}
- {provider.prefix}
-
- ))
- }
+
+
+ Search Provider
+ Prefix
+
+ {
+ searchData.providers.map((provider, index) => (
+
+ {provider.name}
+ {provider.prefix}
+
+ ))
+ }
+