Changed to relative units (rem, em) where possible

Exceptions being borders

src/app.js

@@ -17,9 +17,8 @@ const GlobalStyle = createGlobalStyle`
 `;
 
 const AppContainer = styled.div`
-    max-width: 80%;
+    max-width: 85%;
     margin: auto;
-    padding: 10px;
 `;
 
 const App = () => (

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;
+    padding-top: 0.75rem;
-    font-size: 14px;
+    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': {

src/serviceWorker.js

@@ -57,7 +57,7 @@ export function register(config) {
 function registerValidSW(swUrl, config) {
     navigator.serviceWorker
         .register(swUrl)
-        .then(registration => {
+        .then((registration) => {
             registration.onupdatefound = () => {
                 const installingWorker = registration.installing;
                 if (installingWorker == null) {
@@ -93,7 +93,7 @@ function registerValidSW(swUrl, config) {
                 };
             };
         })
-        .catch(error => {
+        .catch((error) => {
             console.error('Error during service worker registration:', error);
         });
 }
@@ -101,9 +101,9 @@ function registerValidSW(swUrl, config) {
 function checkValidServiceWorker(swUrl, config) {
     // Check if the service worker can be found. If it can't reload the page.
     fetch(swUrl, {
-        headers: { 'Service-Worker': 'script' }
+        headers: { 'Service-Worker': 'script' },
     })
-        .then(response => {
+        .then((response) => {
             // Ensure service worker exists, and that we really are getting a JS file.
             const contentType = response.headers.get('content-type');
             if (
@@ -112,7 +112,7 @@ function checkValidServiceWorker(swUrl, config) {
                     contentType.indexOf('javascript') === -1)
             ) {
                 // No service worker found. Probably a different app. Reload the page.
-                navigator.serviceWorker.ready.then(registration => {
+                navigator.serviceWorker.ready.then((registration) => {
                     registration.unregister().then(() => {
                         window.location.reload();
                     });
@@ -132,10 +132,10 @@ function checkValidServiceWorker(swUrl, config) {
 export function unregister() {
     if ('serviceWorker' in navigator) {
         navigator.serviceWorker.ready
-            .then(registration => {
+            .then((registration) => {
                 registration.unregister();
             })
-            .catch(error => {
+            .catch((error) => {
                 console.error(error.message);
             });
     }