Improve font icons

public/index.html

@@ -12,7 +12,7 @@
     <style type="text/css">
       @font-face {
         font-family: "icons";
-        src: url("data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAAVoAA0AAAAACwAAAAUSAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCXhEICoo4iD8LGgABNgIkAy4EIAWDGweBARsCCcieg3Hj3Fxcawtr2UZ2zOJ8NAn+qbXy/e4e2uW7CyAoZEUIswFgBwg+ClgYdLFJzfH3896vtXVZgzVVJVAJD2QjitJ5D+VZsyRqZLJyurB+aXsUggNfxGuvb4CVyf3/+7n6387uLDQxSW0l73SH+yaWMLdEpoqlNZqIRg+dlAmhcmhnLi95KzX2VYAAPp43mAPwfZzHsvzdAjJAZcAgRBrhAANYuxEdBB6YU4ZvgQMoG/2mgxjInlQA+/YA/fTt60R6WCwEEGBdFwE2XjO7cTQ4iu7n6AKkCDHa/qLuTz/5nyQAAZuTkqt4YBEpVBQxDOSDLJWFAQz4PyNwIBehJCGPIENBVcBGegAwnQlJV7EZhDY6ZgO06slNg0O9VVZFB5+IiDgDtM+s7R5kG6hxnCnfu6QXoHo9a4+Wh2i1EF9m7tbxYWSAIbXH6C0lW6LTaVJS54BVnmdl91w0vsBMKb2HbEukpm0hRekKgxJK0wqrPQhJIkj9yR6IdjXE15m7d/DhOWLkougubbuHSolH7oPuWO7m3yLMtyFud/g28DY2gmV2nOATVtVxr9dmN8TDCUJfyHKgxuM6qNMVhseeOcqdEy5IKedDs2PkGaYLt3uQVzpoQPV6gWk2sw1pfmRnZ+Uu3qctWcetrtOt4YvWCrC0hvgkt6Z22qzLtNmIU8Mpko4+Bt8tI0fQtNUsuE1a7kwo0ObMlGrUHr2AHrsP+voeOHd6ytxNtMwK9JQ6cLc6p5861jwL8RpuRLRaFuobVte1sdnsY0sqk6/7WbLBIMfyfPSYaXAfce7tEJplCzbUA3Yu837MHU4H2/8AOyOfsdHcm9nN7vK3D1itdPB/X4dsu1pl79fF7k5FRgFh7Ac2uwMcX44PpvGx0zKZjxzKbxb4yGUU1WQxPm9lRnTnf/ky77Kq+rMqy7P6+uc5DMlR5KKYQtHTk5sr+hweBufVRd9QBw4/CsMdzLLOpcXInxqe5y/SxfvXe3jr90PZi+ceLqQyxcEeHocQB0fEAfqLtHRrm5nnB1GyXOjf1uajiPLhlL8QqND+bajzpG1oUC0xKyJ20cc+l6+5ms3DCdHLV1yEOesyPXfKr5OKSkL1YZkbZyM+K1kUJojejFbfqPK7PueEi0WfXePRsu0hFqK71fcJEoX/9rSvigdvwgvrZh2WqaXT7eurbpa8szzLYWxqYGoQtgvMmXfg1wFHC5vXly4HiqCof4O/wk+hFDQ2yhEMYzA786O5Wp+ufGZ+LyZHMjICZZGvAkWr7byJ82wlW9N7WdGMaEZXVp8x+BBHeY6Upb1P27Ifz5fLTfuf3t/WFsurUAhbYm04tUcLyxS8uIq2DSv/cPuiAl77csU/XpbDqjQEAAHAuYanA+V2Xf6Facch5GSS3Ej8FYAQ0yC4298dtwsAbiRTDdCFCDSiAIzxE39x9jWR3QkaOqCyUYOM2wU60AEBGUaDl5xENslxE9EsAgoBMdCUWOhBHIzWeqRZTf0sOHp9iuq8wyIXIXIAxEBVYqEtcTBA61GZydQH2PrAFB05yxzK9OnSp08PmHNmTFvl64ZSpc6UDkVGwA8GlwKqThG7j6TKiDHN4Ura0Zq2cFNihQmx8c2i/aKDJyiZRZVeJ8ZFJlSpdJ7KEiUDMXgLjPD0ZdwVa4GguvWvNq4CYFDfJwMyGFmsnDz5ChQqUsqf1elv0ySYTXv18SjoSDkZ8fGQAImQBMmQEkkFAA==")
+        src: url("data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAAVgAAsAAAAACaQAAAUUAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAVBEICotcig0LGAABNgIkAywEIAWCbgcgG/wHyB6FcTM9UKnsjB9XvuPfzZoXpcluUpVUnZ4okipWhZoBNc+qhhOjrJrCyZ/p15rw8HZ7t7v56UHggSWWRxhHYRZZCQXeWtbSn//AP///frO+j4lESiXS0v0Ps6lY3FlImoiENLduSbTk1SmgZ2GlHi/y3AMAz5+hr4AE2IbdAPCllg165CYvMHyhCruqwF8UfiYGVaZwvRBQhSROVoZDvhSHxIT3bsdQwGAQ4abevgYAxFToRPFLEAGHFyEXKo3zJJVFgYeAD0AvwFYgJYJBU0xABBbFjasqIsITEiKSkzMTI7wZb2S04LOqHj7kTazD4vF8BJq9jZG3wKysPQ+KrjByyTV3zj40O3e/R3eddRyMr/zuO5i1lXW4giwuF5o9HmgeH0dNzoCqTYdKKh88IIugZZgSs9tNhkqCU+QjmcxHs+vzWQeZD7PIFV1D11WkBmOhx3aEhyaXOZ2Bqco2+VunxYs44Dv/0qQwfGHXYS2lfDFGODcG4bOWBlh9f5d+ywJtdtdy/LAN/u3fLYHeZXOQZ4amnH3ukmvA5bjdbmfRlQdZe+YZreq4gozmay5UndubnaN23//wOOt4mO50zj5nt8ftfP/o3fSVq0UyOYxMJ9wrniI3eL7HNGzs9AzXNJ/fXCl2vWcqvvowe+82KUOzts4ox0IrO/tXbtgBnZPTGUC3jrMTJ7tcQW2bdyNyZVdXgjF6rTFCDBdtNtHLNZoicYTVdhvR6J3L87HeqklSRYUkqVXSQsE0SaWWpBdcKKlCzvvNmCHqKT6GVxzI3bNX1NO0QdyzT3mB5mN5WqccHMC0/sahcm1WbYRogrd11icJubJMltV3drI1sqMhkY11lukTZUciyHkOGdql01xjEPTC8LBA59bUMKWGoaEoEs3mGKJZIEknaihDeqjH0OtN+G7qDGU9ycVw1MHcvDhFPhfNcT5cAR2XrzxAcb4cVZ87ZcaiPVttD6dMV9ZRvA9HH1Aq42gG+aIYERWn7ElziCf1ytrftejuMjjDDi26d2UskQ16HTRhjn3Huh3r7XPYoDdBbOLYvasLh1kIGryqRwcL64x1hlkbYipjKs1F3V2lZrtdZRozxWli1VKpSWW35+q6uovMCgAAAQhwxvnVCqjJzTfMCWVmSdLoRtX5eWNqnSaOlSk3tbzzkl01MJCpr9Mt2f2SYf45Dtfo9Zn0TVexL9/Rxerj9JO/MWqNmsp3c7QYps3xgYY05HHp0+ggZhRKonQD/SWCLqpKnJwU++bNoo6JoVjoxPnS6zfDaTMLq6pUQkn/AFTnmqsicdTAwAm6qhqtvNxiObpFK27ZKrCWL2MtW+aydauo3Xr0OZfJInDd/xFM3qWfxlpa/2h7+vm0qtDFPfS3mgtllWhl22+DgcOvhDnR/LKyyBnoP4YzBZd+mwlTdwCAtwPgJ8XHHtHU3ogs4pPHIAAI3P7l+fEm/qPHCpYAAICffU80EiEsDrvbBMD+XXcEysgaBOdmG0q2QB5gIvpYeLCwi0f0+fjfuQwAwY3mAyHMY3RydgGatpIEsR1DM9pxpCyCoLfZSSzeTiF9ejkj1BAcKl6AMMjYjuFU2XGMPIKgd9hJgULtFIYIXJnSZ8flw4ahU5t+fYav2ffIzsgCM6shFZjLTpAtQxY6VzL4O8A/gnJWdqN6tBjS8VOKWVd2keJK/PcX86GAHT9CYGfVN7V7ixFW7f1bTSYonqbcoF/efgacAQA=")
           format("woff2");
         font-weight: normal;
         font-style: normal;

src/components/HeartIcon.js

@@ -15,7 +15,7 @@ const HeartIconStyled = styled.button`
   animation: fade-in 0.2s;
 
   &:after {
-    content: "${(props) => (props.$state > 1 ? "\\e905" : "\\e906")}";
+    content: "${(props) => (props.$state > 1 ? "\\e903" : "\\e904")}";
   }
 `;
 

src/components/Nav.js

@@ -106,7 +106,7 @@ const Nav = (props) => {
         <NavStyled $borderOpacity={borderOpacity}>
           <NavLeftStyled>
             <BackButtonStyled onClick={goBack}>
-              <BackIconStyled></BackIconStyled>
+              <BackIconStyled></BackIconStyled>
               <span>Atrás</span>
             </BackButtonStyled>
           </NavLeftStyled>

src/components/RefreshIcon.js

@@ -15,17 +15,12 @@ const RefreshIconStyled = styled.button`
   animation: fade-in 0.2s;
   line-height: 74px;
   bottom: 28px;
-
-  & span {
-    position: relative;
-    top: -2px;
-  }
 `;
 
 const RefreshIcon = (props) => {
   return (
     <RefreshIconStyled aria-label="Refrescar" onClick={props.refreshContent}>
-      <span></span>
+      
     </RefreshIconStyled>
   );
 };

src/components/home/HomeMenu.js

@@ -72,18 +72,18 @@ const HomeMenu = (props) => {
         selected={subViewId === SUB_VIEW_ID_FAVORITES}
         onClick={loadFavoritesSubView}
       >
-        <ItemIcon></ItemIcon>
+        <ItemIcon></ItemIcon>
         <ItemText>Favoritos</ItemText>
       </Item>
       <Item selected={subViewId === SUB_VIEW_ID_MAP} onClick={loadMapSubView}>
-        <ItemIcon></ItemIcon>
+        <ItemIcon></ItemIcon>
         <ItemText>Mapa</ItemText>
       </Item>
       <Item
         selected={subViewId === SUB_VIEW_ID_SEARCH}
         onClick={loadSearchSubView}
       >
-        <ItemIcon></ItemIcon>
+        <ItemIcon></ItemIcon>
         <ItemText>Buscar</ItemText>
       </Item>
     </HomeMenuStyled>

src/views/home/subviews/HomeFavoritesSubview.js

@@ -13,14 +13,12 @@ import Nav from "../../../components/Nav.js";
 import Error from "../../../components/Error.js";
 import HomeDesktop from "../../../components/home/HomeDesktop.js";
 
-const EditLinkStyled = styled.button`
+const SortIconAndDoneLinkStyled = styled.button`
   color: var(--color-blue);
   align-self: flex-end;
   padding: 0 0px;
-
-  &[disabled] {
-    opacity: 0.5;
-  }
+  font-family: ${(props) => (props.editMode ? "revert" : "icons")};
+  font-size: ${(props) => (props.editMode ? "inherit" : "24px")};
 `;
 
 const ContentStyled = styled.div`
@@ -70,7 +68,7 @@ const HomeFavoritesSubview = (props) => {
 
   // Edit mode
   const [editMode, setEditMode] = useState(false);
-  const [editHidden, setEditHidden] = useState(true);
+  const [sortIconHidden, setSortIconHidden] = useState(true);
 
   const toggleEditMode = () => {
     setEditMode(editMode ? false : true);
@@ -156,9 +154,13 @@ const HomeFavoritesSubview = (props) => {
       return (
         <Fragment>
           <Nav isHeader={true} titleText="Favoritos" hidden={isDesktop}>
-            <EditLinkStyled onClick={toggleEditMode} hidden={editHidden}>
-              {editMode ? "Hecho" : "Editar"}
-            </EditLinkStyled>
+            <SortIconAndDoneLinkStyled
+              onClick={toggleEditMode}
+              editMode={editMode}
+              hidden={sortIconHidden}
+            >
+              {editMode ? "Hecho" : ""}
+            </SortIconAndDoneLinkStyled>
           </Nav>
           <ContentStyled hidden={isDesktop}>
             {error && (
@@ -198,7 +200,7 @@ const HomeFavoritesSubview = (props) => {
     if (favorites.length === 0) {
       setError(true);
     } else {
-      setEditHidden(false);
+      setSortIconHidden(false);
       setFavorites(favorites);
     }
   }, []);

src/views/home/subviews/HomeSearchSubview.js

@@ -20,7 +20,7 @@ const IconStyled = styled.div`
 
   &:before {
     font-family: icons;
-    content: "\\e901";
+    content: "\\e905";
     color: #8e8e92;
     z-index: 1;
     margin: auto;
@@ -68,7 +68,7 @@ const ResultStyled = styled.button`
 
   &:before {
     font-family: icons;
-    content: "\\e901";
+    content: "\\e905";
     color: var(--color-blue);
     margin-right: 12px;
     position: relative;