Tweaked CSS slightly

package.json

@@ -18,7 +18,7 @@
     "react-scripts": "3.4.1",
     "react-select": "^3.1.0",
     "styled-components": "^5.1.1",
-    "typescript": "~3.7.2"
+    "typescript": "^3.9.6"
   },
   "scripts": {
     "start": "react-scripts start",

src/app.tsx

@@ -13,13 +13,19 @@ const GlobalStyle = createGlobalStyle`
   body {
     background-color: ${selectedTheme.backgroundColor};
     font-family: Roboto, sans-serif;
+  
+    margin: auto;
+    max-width: 95%;
+    max-height: 100%;
+
+    @media (min-width: 1366px) {
+      max-width: 70%;
+    }
+
   }
 `;
 
-const AppContainer = styled.div`
+const AppContainer = styled.div``;
-  max-width: 95%;
-  margin: auto;
-`;
 
 const App = () => (
   <>

src/components/elements.tsx

@@ -35,10 +35,14 @@ export const SubHeadline = styled.h3`
 
 export const ItemList = styled.ul`
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  grid-template-columns: repeat(4, 1fr);
   grid-gap: 1rem;
   padding: 0;
   list-style: none;
+
+  @media (max-width: 750px) {
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  }
 `;
 
 export const Item = styled.li`

src/components/greeter.tsx

@@ -25,7 +25,7 @@ const DateText = styled.h3`
 const getGreeting = () => {
   switch (Math.floor(new Date().getHours() / 6)) {
     case 0:
-      return "Goor night!";
+      return "Good night!";
     case 1:
       return "Good morning!";
     case 2:
@@ -65,7 +65,7 @@ const monthNames = [
   "September",
   "October",
   "November",
-  "December"
+  "December",
 ];
 
 const weekDayNames = [
@@ -75,7 +75,7 @@ const weekDayNames = [
   "Wednesday",
   "Thursday",
   "Friday",
-  "Saturday"
+  "Saturday",
 ];
 
 const getDateString = () => {

src/components/searchBar.tsx

@@ -18,7 +18,7 @@ const SearchInput = styled.input`
 const useSearchProviders = () => {
   const [searchProviders, setSearchProviders] = useState({
     providers: [{ prefix: "", url: "" }],
-    error: false
+    error: false,
   });
 
   const fetchSearchProviders = useCallback(() => {
@@ -26,10 +26,10 @@ const useSearchProviders = () => {
       ? fetch("/data/search.json").then(handleResponse)
       : import("./data/search.json")
     )
-      .then(jsonResponse => {
+      .then((jsonResponse) => {
         setSearchProviders({ ...jsonResponse, error: false });
       })
-      .catch(error => {
+      .catch((error) => {
         setSearchProviders({ providers: [], error: error.message });
       });
   }, []);
@@ -42,13 +42,13 @@ const useSearchProviders = () => {
 
 const SearchBar = () => {
   const {
-    searchProviders: { providers, error }
+    searchProviders: { providers, error },
   } = useSearchProviders();
 
-  let [input, setInput] = useState();
+  let [input, setInput] = useState("");
 
   const handleSearchQuery = (e: React.FormEvent) => {
-    var query = input;
+    var query = input || "";
 
     if (query.split(" ")[0].includes("/")) {
       handleQueryWithProvider(query);
@@ -67,7 +67,7 @@ const SearchBar = () => {
     let searchQuery = queryArray.join(" ");
 
     let providerFound = false;
-    providers.forEach(provider => {
+    providers.forEach((provider) => {
       if (provider.prefix === prefix) {
         providerFound = true;
         window.location.href = provider.url + searchQuery;
@@ -79,11 +79,11 @@ const SearchBar = () => {
   };
 
   return (
-    <form onSubmit={e => handleSearchQuery(e)}>
+    <form onSubmit={(e) => handleSearchQuery(e)}>
       {error && <ErrorMessage>{error}</ErrorMessage>}
       <SearchInput
         type="text"
-        onChange={e => setInput(e.target.value)}
+        onChange={(e) => setInput(e.target.value)}
       ></SearchInput>
       <button type="submit" hidden />
     </form>

src/components/settingsModal.tsx

@@ -11,7 +11,7 @@ import {
   Button,
   IconButton,
   ErrorMessage,
-  Headline as hl
+  Headline as hl,
 } from "./elements";
 
 const Headline = styled(hl)`
@@ -70,15 +70,15 @@ const SelectorStyle = {
     border: "1px solid " + selectedTheme.mainColor,
     boxShadow: 0,
     "&:hover": {
-      border: "1px solid " + selectedTheme.mainColor
+      border: "1px solid " + selectedTheme.mainColor,
-    }
+    },
   }),
   menu: (provided: any) => ({
     ...provided,
     backgroundColor: selectedTheme.backgroundColor,
     border: "1px solid " + selectedTheme.mainColor,
     borderRadius: 0,
-    boxShadow: 0
+    boxShadow: 0,
   }),
   option: (provided: any) => ({
     ...provided,
@@ -90,15 +90,15 @@ const SelectorStyle = {
     backgroundColor: selectedTheme.backgroundColor,
     "&:hover": {
       backgroundColor: selectedTheme.mainColor,
-      color: selectedTheme.backgroundColor
+      color: selectedTheme.backgroundColor,
-    }
+    },
   }),
   singleValue: (provided: any) => {
     return {
       ...provided,
-      color: selectedTheme.mainColor
+      color: selectedTheme.mainColor,
     };
-  }
+  },
 };
 
 const useThemeData = () => {
@@ -109,10 +109,10 @@ const useThemeData = () => {
       ? fetch("/data/themes.json").then(handleResponse)
       : import("./data/themes.json")
     )
-      .then(jsonResponse => {
+      .then((jsonResponse) => {
         setThemeData({ ...jsonResponse, error: false });
       })
-      .catch(error => {
+      .catch((error) => {
         setThemeData({ themes: [], error: error.message });
       });
   }, []);
@@ -125,12 +125,17 @@ const useThemeData = () => {
 
 const SettingsModal = () => {
   const [modalHidden, setModalHidden] = useState(true);
+
   const [newTheme, setNewTheme] = useState();
 
   const {
-    themeData: { themes, error }
+    themeData: { themes, error },
   } = useThemeData();
 
+  useEffect(() => {
+    console.log(newTheme);
+  }, [newTheme]);
+
   return (
     <>
       <IconButton
@@ -146,7 +151,7 @@ const SettingsModal = () => {
             <Select
               options={themes}
               defaultValue={selectedTheme}
-              onChange={e => {
+              onChange={(e: any) => {
                 setNewTheme(e);
               }}
               styles={SelectorStyle}

src/components/themeManager.tsx

@@ -1,12 +1,20 @@
-const defaultTheme = {
+interface IThemeProps {
+  label: string;
+  value: number;
+  mainColor: string;
+  accentColor: string;
+  backgroundColor: string;
+}
+
+const defaultTheme: IThemeProps = {
   label: "Classic",
   value: 0,
   mainColor: "#000000",
   accentColor: "#1e272e",
-  backgroundColor: "#ffffff"
+  backgroundColor: "#ffffff",
 };
 
-const setTheme = (theme: string) => {
+export const setTheme = (theme: string) => {
   if (theme !== undefined) {
     localStorage.setItem("theme", theme);
   }
@@ -14,7 +22,7 @@ const setTheme = (theme: string) => {
   window.location.reload();
 };
 
-const resetTheme = () => {
+export const resetTheme = () => {
   localStorage.removeItem("theme");
 };
 
@@ -30,6 +38,4 @@ const getTheme = () => {
 
 const selectedTheme = getTheme();
 
-export { setTheme, resetTheme };
-
 export default selectedTheme;

yarn.lock

@@ -10511,10 +10511,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@~3.7.2:
+typescript@^3.9.6:
-  version "3.7.5"
+  version "3.9.6"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.5.tgz#0692e21f65fd4108b9330238aac11dd2e177a1ae"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.6.tgz#8f3e0198a34c3ae17091b35571d3afd31999365a"
-  integrity sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw==
+  integrity sha512-Pspx3oKAPJtjNwE92YS05HQoY7z2SFyOpHo9MqJor3BXAGNaPUs83CuVp9VISFkSjyRfiTpmKuAYGJB7S7hOxw==
 
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"