Change import icon

.gitlab-ci.yml

+image: node:12.16.3-buster-slim
 stages:
   - lint
   - test
@@ -5,14 +6,12 @@ stages:
   - deploy
 
 lint:
-  image: node:latest
   stage: lint
   script:
     - npm install
     - npm run lint
 
 test:
-  image: node:latest
   stage: test
   artifacts:
     expire_in: 1 hour
@@ -34,7 +33,6 @@ sonar_scanner_test:
     - sonar-scanner -Dsonar.projectKey=$SONARQUBE_PROJECT_KEY -Dsonar.host.url=$SONARQUBE_HOST_URL -Dsonar.login=$SONARQUBE_TOKEN -Dsonar.branch.name=$CI_COMMIT_REF_NAME
 
 staging:
-  image: node:latest
   stage: deploy
   variables:
     NETLIFY_AUTH_TOKEN: $STAGING_NETLIFY_AUTH_TOKEN
@@ -49,7 +47,6 @@ staging:
     - staging
 
 production:
-  image: node:latest
   stage: deploy
   variables:
     AWS_ACCESS_KEY_ID: $PRODUCTION_AWS_ACCESS_KEY_ID

src/component/TableComponent.jsx

@@ -23,7 +23,7 @@ import {
   LabelInput,
   RowInput,
 } from "./html/html";
-import { Search } from "@material-ui/icons";
+import SearchIcon from "@material-ui/icons/Search";
 import { Link } from "@reach/router";
 import ArrowDropDownCircleIcon from "@material-ui/icons/ArrowDropDownCircle";
 import TableHead from "@material-ui/core/TableHead";
@@ -109,7 +109,7 @@ const TableComponent = ({
                   placeholder="Search..."
                 />
                 <ButtonSearch className="border-0">
-                  <Search />
+                  <SearchIcon />
                 </ButtonSearch>
               </form>
               {filter !== null && filter !== undefined && (

src/page/donasi/DetailDonasi.jsx

 import React, { useState } from "react";
 import useFetchSingleData from "../../utils/useFetchSingleData";
 import { css } from "@emotion/core";
-import { ArrowBack, Phone, Photo } from "@material-ui/icons";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack";
+import PhoneIcon from "@material-ui/icons/Phone";
+import PhotoIcon from "@material-ui/icons/Photo";
 import { Link, navigate } from "@reach/router";
 import PersonIcon from "@material-ui/icons/Person";
 import Status from "../../component/Status";
@@ -65,7 +67,7 @@ const DetailDonasi = ({ idDonasi }) => {
         `}
         onClick={() => navigate(-1)}
       >
-        <ArrowBack fontSize="large" />
+        <ArrowBackIcon fontSize="large" />
       </button>
       <div
         css={css`
@@ -172,7 +174,7 @@ const DetailDonasi = ({ idDonasi }) => {
           align-items: baseline;
         `}
       >
-        <Phone />
+        <PhoneIcon />
         <div>{donation.user_phone_number}</div>
       </div>
       <div
@@ -234,7 +236,7 @@ const DetailDonasi = ({ idDonasi }) => {
                   variant="contained"
                   color="primary"
                   size="medium"
-                  startIcon={<Photo />}
+                  startIcon={<PhotoIcon />}
                   data-testid="button-see-proof"
                 >
                   Bukti

src/page/donasi/FormDonasi.jsx

@@ -9,7 +9,7 @@ import {
 } from "../../component/html/html";
 import { css } from "@emotion/core";
 import Button from "@material-ui/core/Button";
-import { Save } from "@material-ui/icons";
+import SaveIcon from "@material-ui/icons/Save";
 
 const FormDonasi = ({ idDonasi, defaultStatus }) => {
   const url = `${process.env.REACT_APP_BASE_URL}/program-donations/${idDonasi}/`;
@@ -61,7 +61,7 @@ const FormDonasi = ({ idDonasi, defaultStatus }) => {
           type="submit"
           variant="contained"
           color="primary"
-          startIcon={<Save />}
+          startIcon={<SaveIcon />}
         >
           Simpan
         </Button>

src/page/kategori/DetailKategori.jsx

@@ -5,7 +5,7 @@ import { ButtonDeleteStyled, ErrorDiv } from "../../component/html/html";
 import TableComponent from "../../component/TableComponent";
 import LinkYellow from "../../component/LinkYellow";
 import { navigate } from "@reach/router";
-import { ArrowBack } from "@material-ui/icons";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 import useDelete from "../../utils/useDelete";
 import {
   Dialog,
@@ -93,7 +93,7 @@ const DetailKategori = ({ idKategori }) => {
           `}
           onClick={() => navigate("/kategori")}
         >
-          <ArrowBack fontSize="large" />
+          <ArrowBackIcon fontSize="large" />
         </button>
         <div
           css={css`

src/page/kategori/EditKategori.jsx

@@ -3,7 +3,8 @@ import useFetchSingleData from "../../utils/useFetchSingleData";
 import { css } from "@emotion/core";
 import { ErrorDiv } from "../../component/html/html";
 import FormKategori from "./FormKategori";
-import { ArrowBack, ErrorOutline } from "@material-ui/icons";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack";
+import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline";
 import { navigate } from "@reach/router";
 import useSendData from "../../utils/useSendData";
 
@@ -58,7 +59,7 @@ const EditKategori = ({ idKategori }) => {
           `}
           onClick={() => navigate(-1)}
         >
-          <ArrowBack fontSize="large" />
+          <ArrowBackIcon fontSize="large" />
         </button>
         <div
           css={css`
@@ -74,7 +75,7 @@ const EditKategori = ({ idKategori }) => {
           display: flex;
         `}
       >
-        <ErrorOutline style={{ fontSize: 28, color: "FFC80A" }} />
+        <ErrorOutlineIcon style={{ fontSize: 28, color: "FFC80A" }} />
         <div
           css={css`
             font-weight: 600;

src/page/pengguna/DetailPengguna.jsx

 import React from "react";
 import { css } from "@emotion/core";
-import { ArrowBack } from "@material-ui/icons";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 import { navigate } from "@reach/router";
 import PersonIcon from "@material-ui/icons/Person";
 import PhoneIcon from "@material-ui/icons/Phone";
@@ -81,7 +81,7 @@ const DetailPengguna = ({ userId }) => {
             `}
             onClick={() => navigate(-1)}
           >
-            <ArrowBack fontSize="large" />
+            <ArrowBackIcon fontSize="large" />
           </button>
           <div
             css={css`

src/page/produk/DetailProduk.jsx

@@ -3,17 +3,15 @@ import { css } from "@emotion/core";
 import { ButtonDeleteStyled } from "../../component/html/html";
 import LinkYellow from "../../component/LinkYellow";
 import { ErrorDiv } from "../../component/html/html";
-import {
-  Search,
-  ArrowBack,
-  Grade,
-  Category,
-  AttachMoney,
-  LocalShipping,
-} from "@material-ui/icons";
 import { Link, navigate } from "@reach/router";
 import useFetchSingleData from "../../utils/useFetchSingleData";
 import useDelete from "../../utils/useDelete";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack";
+import SearchIcon from "@material-ui/icons/Search";
+import GradeIcon from "@material-ui/icons/Grade";
+import CategoryIcon from "@material-ui/icons/Category";
+import AttachMoneyIcon from "@material-ui/icons/AttachMoney";
+import LocalShippingIcon from "@material-ui/icons/LocalShipping";
 import {
   Dialog,
   DialogActions,
@@ -93,7 +91,7 @@ const DetailProduk = ({ productId }) => {
             `}
             onClick={() => navigate(-1)}
           >
-            <ArrowBack fontSize="large" />
+            <ArrowBackIcon fontSize="large" />
           </button>
           <div
             css={css`
@@ -131,7 +129,7 @@ const DetailProduk = ({ productId }) => {
                 display: inline-block;
               `}
             >
-              <Search style={{ color: "#FFC80A" }} />
+              <SearchIcon style={{ color: "#FFC80A" }} />
             </span>
             <span
               className="text"
@@ -173,7 +171,7 @@ const DetailProduk = ({ productId }) => {
                       display: inline-block;
                     `}
                   >
-                    <Grade style={{ color: "#FFC80A" }} />
+                    <GradeIcon style={{ color: "#FFC80A" }} />
                   </span>
                   <span
                     className="text"
@@ -196,7 +194,7 @@ const DetailProduk = ({ productId }) => {
                         display: inline-block;
                       `}
                     >
-                      <Category style={{ color: "#FFC80A" }} />
+                      <CategoryIcon style={{ color: "#FFC80A" }} />
                     </span>
                     <span
                       className="text"
@@ -220,7 +218,7 @@ const DetailProduk = ({ productId }) => {
                         display: inline-block;
                       `}
                     >
-                      <AttachMoney style={{ color: "#FFC80A" }} />
+                      <AttachMoneyIcon style={{ color: "#FFC80A" }} />
                     </span>
                     <span
                       className="text"
@@ -242,7 +240,7 @@ const DetailProduk = ({ productId }) => {
                         display: inline-block;
                       `}
                     >
-                      <LocalShipping style={{ color: "#FFC80A" }} />
+                      <LocalShippingIcon style={{ color: "#FFC80A" }} />
                     </span>
                     <span
                       className="text"

src/page/produk/EditProduk.jsx

@@ -2,10 +2,11 @@ import React from "react";
 import { css } from "@emotion/core";
 import { ErrorDiv } from "../../component/html/html";
 import FormProduk from "./FormProduk";
-import { navigate } from "@reach/router";
-import { ArrowBack, ErrorOutline } from "@material-ui/icons";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack";
+import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline";
 import useFetchSingleData from "../../utils/useFetchSingleData";
 import useSendData from "../../utils/useSendData";
+import { navigate } from "@reach/router";
 
 const EditProduk = ({ productId }) => {
   const url = `${process.env.REACT_APP_BASE_URL}/products/${productId}/`;
@@ -56,7 +57,7 @@ const EditProduk = ({ productId }) => {
           `}
           onClick={() => navigate(-1)}
         >
-          <ArrowBack fontSize="large" />
+          <ArrowBackIcon fontSize="large" />
         </button>
         <div
           css={css`
@@ -72,7 +73,7 @@ const EditProduk = ({ productId }) => {
           display: flex;
         `}
       >
-        <ErrorOutline style={{ fontSize: 28, color: "FFC80A" }} />
+        <ErrorOutlineIcon style={{ fontSize: 28, color: "FFC80A" }} />
         <div
           css={css`
             font-weight: 600;

src/page/program/DetailProgram.jsx

 import React, { useState } from "react";
 import { css } from "@emotion/core";
 import { ButtonDeleteStyled, ErrorDiv } from "../../component/html/html";
-import { ArrowBack } from "@material-ui/icons";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 import { Link } from "@reach/router";
 import PersonIcon from "@material-ui/icons/Person";
 import LocationOnIcon from "@material-ui/icons/LocationOn";
@@ -80,7 +80,7 @@ const DetailProgram = ({ idProgram }) => {
           `}
         >
           <Link to="/program" style={{ color: "#000000" }}>
-            <ArrowBack fontSize="large" />
+            <ArrowBackIcon fontSize="large" />
           </Link>
           <div
             css={css`

src/page/program/EditProgram.jsx

@@ -3,7 +3,8 @@ import useFetchSingleData from "../../utils/useFetchSingleData";
 import { css } from "@emotion/core";
 import { ErrorDiv } from "../../component/html/html";
 import FormProgram from "./FormProgram";
-import { ArrowBack, ErrorOutline } from "@material-ui/icons";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack";
+import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline";
 import { navigate } from "@reach/router";
 import useSendData from "../../utils/useSendData";
 
@@ -64,7 +65,7 @@ const EditProgram = ({ idProgram }) => {
           `}
           onClick={() => navigate(-1)}
         >
-          <ArrowBack fontSize="large" />
+          <ArrowBackIcon fontSize="large" />
         </button>
         <div
           css={css`
@@ -80,7 +81,7 @@ const EditProgram = ({ idProgram }) => {
           display: flex;
         `}
       >
-        <ErrorOutline style={{ fontSize: 28, color: "FFC80A" }} />
+        <ErrorOutlineIcon style={{ fontSize: 28, color: "FFC80A" }} />
         <div
           css={css`
             font-weight: 600;

src/page/subkategori/DetailSubkategori.jsx

@@ -5,7 +5,7 @@ import { ButtonDeleteStyled, ErrorDiv } from "../../component/html/html";
 import TableComponent from "../../component/TableComponent";
 import LinkYellow from "../../component/LinkYellow";
 import { Link, navigate } from "@reach/router";
-import { ArrowBack } from "@material-ui/icons";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 import useDelete from "../../utils/useDelete";
 import {
   Dialog,
@@ -92,7 +92,7 @@ const DetailSubkategori = ({ idSubKategori }) => {
           `}
           onClick={() => navigate("/subkategori")}
         >
-          <ArrowBack fontSize="large" />
+          <ArrowBackIcon fontSize="large" />
         </button>
         <div
           css={css`

src/page/subkategori/EditSubkategori.jsx

@@ -3,7 +3,8 @@ import useFetchSingleData from "../../utils/useFetchSingleData";
 import { css } from "@emotion/core";
 import { ErrorDiv } from "../../component/html/html";
 import FormSubkategori from "./FormSubkategori";
-import { ArrowBack, ErrorOutline } from "@material-ui/icons";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack";
+import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline";
 import { navigate } from "@reach/router";
 import useSendData from "../../utils/useSendData";
 
@@ -59,7 +60,7 @@ const EditSubkategori = ({ idSubKategori }) => {
           `}
           onClick={() => navigate(-1)}
         >
-          <ArrowBack fontSize="large" />
+          <ArrowBackIcon fontSize="large" />
         </button>
         <div
           css={css`
@@ -75,7 +76,7 @@ const EditSubkategori = ({ idSubKategori }) => {
           display: flex;
         `}
       >
-        <ErrorOutline style={{ fontSize: 28, color: "FFC80A" }} />
+        <ErrorOutlineIcon style={{ fontSize: 28, color: "FFC80A" }} />
         <div
           css={css`
             font-weight: 600;

src/page/transaksi/DetailTransaksi.jsx

 import React, { useState } from "react";
 import useFetchSingleData from "../../utils/useFetchSingleData";
 import { css } from "@emotion/core";
-import { ArrowBack, Contacts, Phone, Photo } from "@material-ui/icons";
+import ArrowBackIcon from "@material-ui/icons/ArrowBack";
+import PhoneIcon from "@material-ui/icons/Phone";
+import PhotoIcon from "@material-ui/icons/Photo";
+import ContactsIcon from "@material-ui/icons/Contacts";
 import { Link, navigate } from "@reach/router";
 import PersonIcon from "@material-ui/icons/Person";
 import Table from "@material-ui/core/Table";
@@ -72,7 +75,7 @@ const DetailTransaksi = ({ idTransaksi }) => {
         `}
         onClick={() => navigate(-1)}
       >
-        <ArrowBack fontSize="large" />
+        <ArrowBackIcon fontSize="large" />
       </button>
       <div
         css={css`
@@ -182,7 +185,7 @@ const DetailTransaksi = ({ idTransaksi }) => {
           align-items: baseline;
         `}
       >
-        <Phone />
+        <PhoneIcon />
         <div>{transaction.user_phone_number}</div>
       </div>
       <div
@@ -196,7 +199,7 @@ const DetailTransaksi = ({ idTransaksi }) => {
             font-size: 1.2rem;
           `}
         >
-          <Contacts />
+          <ContactsIcon />
           Alamat Pengiriman
           <div>{`${transaction.shipping_address}, 
           RT ${transaction.shipping_neighborhood}, 
@@ -337,7 +340,7 @@ const DetailTransaksi = ({ idTransaksi }) => {
                     variant="contained"
                     color="primary"
                     size="medium"
-                    startIcon={<Photo />}
+                    startIcon={<PhotoIcon />}
                     data-testid="button-see-proof"
                   >
                     Bukti

src/page/transaksi/FormStatus.jsx

@@ -9,7 +9,7 @@ import {
 } from "../../component/html/html";
 import { css } from "@emotion/core";
 import Button from "@material-ui/core/Button";
-import { Save } from "@material-ui/icons";
+import SaveIcon from "@material-ui/icons/Save";
 
 const FormStatus = ({ idTransaksi, defaultStatus, paymentMethod }) => {
   const url = `${process.env.REACT_APP_BASE_URL}/transactions/${idTransaksi}/`;
@@ -65,7 +65,7 @@ const FormStatus = ({ idTransaksi, defaultStatus, paymentMethod }) => {
           type="submit"
           variant="contained"
           color="primary"
-          startIcon={<Save />}
+          startIcon={<SaveIcon />}
         >
           Simpan
         </Button>