From c5927a859d2cd1fa23a4ec4ed18c1658126ffc1b Mon Sep 17 00:00:00 2001 From: Bastian Meissner Date: Thu, 21 May 2020 09:41:21 +0200 Subject: [PATCH] Updated thememanager --- src/App.js | 17 +- src/components/appList.js | 93 ++++++----- src/components/bookmarkList.js | 80 +++++----- src/components/elements.js | 40 +++-- src/components/greeter.js | 125 +++++++++------ src/components/searchBar.js | 97 ++++++------ src/components/settingsModal.js | 264 ++++++++++++++++---------------- src/components/themeManager.js | 34 ++-- 8 files changed, 386 insertions(+), 364 deletions(-) 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 ( -
handleSearchQuery(e)}> - setInput(e.target.value)}> -