Changed to relative units (rem, em) where possible

Exceptions being borders

src/components/app.js

@@ -10,7 +10,7 @@ const AppContainer = styled.div`
 `;
 
 const IconContainer = styled.div`
-    margin-right: 0.5vh;
+    margin-right: 0.5rem;
 `;
 
 const DetailsContainer = styled.div`

src/components/appCategory.js

@@ -5,7 +5,6 @@ import { ItemList, Item, SubHeadline } from './elements';
 
 const CategoryHeadline = styled(SubHeadline)`
     padding-top: 1rem;
-    font-size: 1.25rem;
 `;
 
 const CategoryContainer = styled.div`

src/components/bookmarkGroup.js

@@ -14,8 +14,8 @@ const Bookmark = styled.a`
     font-weight: 400;
     text-decoration: none;
     color: ${selectedTheme.accentColor};
-    padding-top: 10px;
-    font-size: 14px;
+    padding-top: 0.75rem;
+    font-size: 0.9rem;
 
     &:hover {
         text-decoration: underline;

src/components/elements.js

@@ -20,7 +20,7 @@ export const Headline = styled.h2`
     display: inline-block;
     font-weight: 900;
     text-transform: uppercase;
-    margin: 0px;
+    margin: 0;
     font-size: 1.5rem;
     color: ${selectedTheme.mainColor};
 `;

src/components/greeter.js

@@ -9,14 +9,14 @@ const GreeterContainer = styled.div`
 
 const GreetText = styled.h1`
     font-weight: 900;
-    font-size: 45px;
+    font-size: 3rem;
     margin: 0.5rem 0;
     color: ${selectedTheme.mainColor};
 `;
 
 const DateText = styled.h3`
     font-weight: 400;
-    font-size: 15px;
+    font-size: 1rem;
     text-transform: uppercase;
     margin: 0;
     color: ${selectedTheme.accentColor};

src/components/searchBar.js

@@ -7,7 +7,7 @@ import selectedTheme from './themeManager';
 
 const SearchInput = styled.input`
     width: 100%;
-    font-size: 16px;
+    font-size: 1rem;
     border: none;
     border-bottom: 1px solid ${selectedTheme.accentColor};
     background: none;
@@ -18,7 +18,7 @@ const SearchInput = styled.input`
 const useSearchProviders = () => {
     const [searchProviders, setSearchProviders] = useState({
         providers: [],
-        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,12 +42,12 @@ const useSearchProviders = () => {
 
 const SearchBar = () => {
     const {
-        searchProviders: { providers, error }
+        searchProviders: { providers, error },
     } = useSearchProviders();
 
     let [input, setInput] = useState();
 
-    const handleSearchQuery = e => {
+    const handleSearchQuery = (e) => {
         var query = input;
 
         console.log(query);
@@ -61,7 +61,7 @@ const SearchBar = () => {
         e.preventDefault();
     };
 
-    const handleQueryWithProvider = query => {
+    const handleQueryWithProvider = (query) => {
         let queryArray = query.split(' ');
         let prefix = queryArray[0];
         queryArray.shift();
@@ -69,7 +69,7 @@ const SearchBar = () => {
         let searchQuery = queryArray.join(' ');
 
         let providerFound = false;
-        providers.forEach(provider => {
+        providers.forEach((provider) => {
             if (provider.prefix === prefix) {
                 providerFound = true;
                 window.location = provider.url + searchQuery;
@@ -81,11 +81,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.js

@@ -64,7 +64,7 @@ const SelectorStyle = {
         fontWeight: '500',
         color: selectedTheme.mainColor,
         textTransform: 'uppercase',
-        width: '200px',
+        width: '12rem',
         background: 'none',
         borderRadius: '0px',
         border: '1px solid ' + selectedTheme.mainColor,
@@ -77,7 +77,7 @@ const SelectorStyle = {
         ...provided,
         backgroundColor: selectedTheme.backgroundColor,
         border: '1px solid ' + selectedTheme.mainColor,
-        borderRadius: '0px',
+        borderRadius: 0,
         boxShadow: 0,
     }),
     option: (provided) => ({
@@ -85,7 +85,7 @@ const SelectorStyle = {
         fontWeight: '500',
         color: selectedTheme.mainColor,
         textTransform: 'uppercase',
-        borderRadius: '0px',
+        borderRadius: 0,
         boxShadow: 0,
         backgroundColor: selectedTheme.backgroundColor,
         '&:hover': {