Tweaked CSS

src/app.tsx

@@ -17,7 +17,7 @@ const GlobalStyle = createGlobalStyle`
 `;
 
 const AppContainer = styled.div`
-  max-width: 85%;
+  max-width: 95%;
   margin: auto;
 `;
 

src/components/app.tsx

@@ -10,6 +10,9 @@ const AppContainer = styled.div`
 `;
 
 const IconContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
   margin-right: 0.5rem;
 `;
 
@@ -50,7 +53,7 @@ export interface IAppProps {
 export const App = ({ name, icon, url, displayURL }: IAppProps) => (
   <AppContainer>
     <IconContainer>
-      <Icon>{icon}</Icon>
+      <Icon name={icon} />
     </IconContainer>
     <DetailsContainer>
       <AppLink href={url}>{name}</AppLink>

src/components/elements.tsx

@@ -35,7 +35,7 @@ export const SubHeadline = styled.h3`
 
 export const ItemList = styled.ul`
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   grid-gap: 1rem;
   padding: 0;
   list-style: none;
@@ -82,18 +82,12 @@ export const ErrorMessage = styled.p`
 `;
 
 interface IIconButtonProps {
-  icon: String;
+  icon: string;
   onClick: any;
 }
 
-export const IconButton = ({ icon, onClick }: IIconButtonProps) => {
-  let StyledIcon = styled(Icon)`
-    text-color: ${selectedTheme.mainColor};
-  `;
-
-  return (
-    <StyledButton onClick={onClick}>
-      <StyledIcon>{icon}</StyledIcon>
-    </StyledButton>
-  );
-};
+export const IconButton = ({ icon, onClick }: IIconButtonProps) => (
+  <StyledButton onClick={onClick}>
+    <Icon name={icon} />
+  </StyledButton>
+);

src/components/icon.tsx

@@ -1,11 +1,11 @@
+import React from "react";
 import styled from "styled-components";
 import selectedTheme from "./themeManager";
 
-const Icon = styled.i`
+export const RawIcon = styled.i`
   font-family: "Material Icons";
   font-weight: normal;
   font-style: normal;
-  font-size: 24px;
   display: inline-block;
   line-height: 1;
   text-transform: none;
@@ -13,19 +13,24 @@ const Icon = styled.i`
   word-wrap: normal;
   white-space: nowrap;
   direction: ltr;
-
-  text-color: ${selectedTheme.mainColor};
-
-  /* Support for all WebKit browsers. */
   -webkit-font-smoothing: antialiased;
-  /* Support for Safari and Chrome. */
   text-rendering: optimizeLegibility;
-
-  /* Support for Firefox. */
   -moz-osx-font-smoothing: grayscale;
-
-  /* Support for IE. */
   font-feature-settings: "liga";
 `;
 
-export default Icon;
+interface IIconProps {
+  name: string;
+  size?: string;
+}
+
+export const ComponentIcon = ({ name, size }: IIconProps) => {
+  let IconContainer = styled(RawIcon)`
+    font-size: ${size ? size : "24px"};
+    text-color: ${selectedTheme.mainColor};
+  `;
+
+  return <IconContainer>{name}</IconContainer>;
+};
+
+export default ComponentIcon;