refactor: removed material-ui

package.json

@@ -3,8 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.9.10",
-    "@material-ui/icons": "^4.9.1",
     "firebase": "^7.14.0",
     "fuse.js": "^5.2.3",
     "normalize.css": "^8.0.1",

src/components/accordion/index.js

@@ -1,6 +1,4 @@
 import React, { useState, useContext, createContext } from 'react';
-import AddIcon from '@material-ui/icons/Add';
-import CloseIcon from '@material-ui/icons/Close';
 import { Container, Frame, Title, Item, Inner, Header, Body } from './styles/accordion';
 
 const ToggleContext = createContext();
@@ -37,7 +35,11 @@ Accordion.Header = function AccordionHeader({ children, ...restProps }) {
   return (
     <Header onClick={() => setToggleShow(!toggleShow)} {...restProps}>
       {children}
-      {toggleShow ? <CloseIcon fontSize="large" /> : <AddIcon fontSize="large" />}
+      {toggleShow ? (
+        <img src="/images/icons/close-slim.png" alt="Close" />
+      ) : (
+        <img src="/images/icons/add.png" alt="Open" />
+      )}
     </Header>
   );
 };

src/components/accordion/styles/accordion.js

@@ -51,6 +51,11 @@ export const Header = styled.div`
   user-select: none;
   align-items: center;
 
+  img {
+    filter: brightness(0) invert(1);
+    width: 24px;
+  }
+
   @media (max-width: 600px) {
     font-size: 16px;
   }

src/components/card/index.js

@@ -1,5 +1,4 @@
 import React, { useState, useContext, createContext } from 'react';
-import CancelIcon from '@material-ui/icons/Cancel';
 
 import {
   Container,
@@ -10,6 +9,7 @@ import {
   Feature,
   FeatureTitle,
   FeatureText,
+  FeatureClose,
   Maturity,
   Content,
   Meta,
@@ -83,7 +83,9 @@ Card.Feature = function CardFeature({ children, category, ...restProps }) {
       <Content>
         <FeatureTitle>{itemFeature.title}</FeatureTitle>
         <FeatureText>{itemFeature.description}</FeatureText>
-        <CancelIcon className="cancel" fontSize="large" onClick={() => setShowFeature(false)} />
+        <FeatureClose onClick={() => setShowFeature(false)}>
+          <img src="/images/icons/close.png" alt="Close" />
+        </FeatureClose>
 
         <Group margin="30px 0" flexDirection="row" alignItems="center">
           <Maturity rating={itemFeature.maturity}>{itemFeature.maturity < 12 ? 'PG' : itemFeature.maturity}</Maturity>

src/components/card/styles/card.js

@@ -156,19 +156,26 @@ export const FeatureTitle = styled(Title)`
   margin-left: 0;
 `;
 
+export const FeatureClose = styled.button`
+  color: white;
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+
+  img {
+    filter: brightness(0) invert(1);
+    width: 24px;
+  }
+`;
+
 export const Content = styled.div`
   margin: 56px;
   max-width: 500px;
   line-height: normal;
 
-  svg.cancel {
-    color: white;
-    position: absolute;
-    right: 20px;
-    top: 20px;
-    cursor: pointer;
-  }
-
   @media (max-width: 1000px) {
     margin: 30px;
     max-width: none;

src/components/header/index.js

@@ -1,6 +1,4 @@
 import React, { useState } from 'react';
-import SearchIcon from '@material-ui/icons/Search';
-import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import { Link as ReachRouterLink } from 'react-router-dom';
 import {
   Container,
@@ -12,6 +10,7 @@ import {
   Search,
   Profile,
   FeatureCallOut,
+  SearchIcon,
   SearchInput,
   ButtonLink,
   PlayButton,
@@ -45,7 +44,9 @@ Header.Search = function HeaderSearch({ searchTerm, setSearchTerm, ...restProps
 
   return (
     <Search {...restProps}>
-      <SearchIcon onClick={() => setSearchActive(!searchActive)} />
+      <SearchIcon onClick={() => setSearchActive(!searchActive)}>
+        <img src="/images/icons/search.png" alt="Search" />
+      </SearchIcon>
       <SearchInput
         value={searchTerm}
         onChange={({ target }) => setSearchTerm(target.value)}
@@ -57,12 +58,7 @@ Header.Search = function HeaderSearch({ searchTerm, setSearchTerm, ...restProps
 };
 
 Header.Profile = function HeaderProfile({ children, ...restProps }) {
-  return (
-    <Profile {...restProps}>
-      {children}
-      <ArrowDropDownIcon />
-    </Profile>
-  );
+  return <Profile {...restProps}>{children}</Profile>;
 };
 
 Header.Feature = function HeaderFeature({ children, ...restProps }) {

src/components/header/styles/header.js

@@ -77,6 +77,17 @@ export const Search = styled.div`
   }
 `;
 
+export const SearchIcon = styled.button`
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+
+  img {
+    filter: brightness(0) invert(1);
+    width: 16px;
+  }
+`;
+
 export const ButtonLink = styled(ReachRouterLink)`
   display: block;
   background-color: #e50914;
@@ -147,13 +158,7 @@ export const Profile = styled.div`
   margin-left: 20px;
   position: relative;
 
-  svg {
-    color: white;
-    margin-left: 5px;
-  }
-
-  button,
-  svg {
+  button {
     cursor: pointer;
   }
 

src/components/opt-form/index.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import { Container, Input, Break, Button, Text } from './styles/opt-form';
 
 export default function OptForm({ children, ...restProps }) {
@@ -13,7 +12,7 @@ OptForm.Input = function OptFormInput({ ...restProps }) {
 OptForm.Button = function OptFormButton({ children, ...restProps }) {
   return (
     <Button {...restProps}>
-      {children} <ChevronRightIcon fontSize="large" />
+      {children} <img src="/images/icons/chevron-right.png" alt="Try Now" />
     </Button>
   );
 };

src/components/opt-form/styles/opt-form.js

@@ -40,6 +40,12 @@ export const Button = styled.button`
   border: 0;
   cursor: pointer;
 
+  img {
+    margin-left: 10px;
+    filter: brightness(0) invert(1);
+    width: 24px;
+  }
+
   &:hover {
     background: #f40612;
   }

src/components/player/index.js

@@ -1,5 +1,4 @@
 import React, { useState, useContext, createContext } from 'react';
-import PlayArrowIcon from '@material-ui/icons/PlayArrow';
 import ReactDOM from 'react-dom';
 import { Container, Button, Overlay, Inner } from './styles/player';
 
@@ -35,10 +34,5 @@ Player.Video = function PlayerVideo({ ...restProps }) {
 Player.Button = function PlayerButton({ ...restProps }) {
   const { showPlayer, setShowPlayer } = useContext(PlayerContext);
 
-  return (
-    <Button onClick={() => setShowPlayer(!showPlayer)}>
-      <PlayArrowIcon className="play" />
-      Play
-    </Button>
-  );
+  return <Button onClick={() => setShowPlayer(!showPlayer)}>Play</Button>;
 };

src/components/player/styles/player.js

@@ -81,8 +81,4 @@ export const Button = styled.button`
     transform: scale(1.05);
     background-color: #ff0a16;
   }
-
-  svg.play {
-    margin-right: 5px;
-  }
 `;