feat(): se crea caja recurso con fondos de colores por tipo de archivo (#659)

Co-authored-by: Daniel Montoya <daniel.montoya@eclass.cl>

Author: Eriold

src/documentation/pages/Organisms/Resources.tsx

@@ -22,6 +22,22 @@ const dataFakeEvents = [
   },
   {
     id: '3',
+    resourceType: 'ppt',
+    resourceTitle: 'Calendario semestral',
+    resourceDetail: 'Fechas importantes de tus cursos',
+    resourceLink: 'https://www.oas.org/juridico/spanish/mesicic2_col_ley_30_sp.pdf',
+    resourceTextDownload: 'Descargar',
+  },
+  {
+    id: '4',
+    resourceType: 'doc',
+    resourceTitle: 'Calendario semestral',
+    resourceDetail: 'Fechas importantes de tus cursos',
+    resourceLink: 'https://www.oas.org/juridico/spanish/mesicic2_col_ley_30_sp.pdf',
+    resourceTextDownload: 'Descargar',
+  },
+  {
+    id: '5',
     resourceType: 'url',
     resourceTitle: 'Enlace recomendado 1',
     resourceDetail: 'El fundador de OpenAI habla sobre el futuro ',
@@ -66,13 +82,17 @@ const ResourcesPage: FC = () => {
         <Resources {...dataFakeEvents[0]} />
         <Resources {...dataFakeEvents[1]} />
       </Box>
+      <Box display="flex" gap="8px">
+        <Resources {...dataFakeEvents[2]} />
+        <Resources {...dataFakeEvents[3]} />
+      </Box>
       <MyTittle>Recurso de tipo url</MyTittle>
       <MyText>
         En el caso de que el recurso sea un enlace, el icono se mostrara con un icono de enlace con
         solo usar resourceType = 'url'
       </MyText>
       <Box display="flex" gap="8px">
-        <Resources {...dataFakeEvents[2]} />
+        <Resources {...dataFakeEvents[4]} />
       </Box>
 
       <MyTittle>Tipos de iconos en los recursos disponibles</MyTittle>

src/organisms/Resources/Icons/Avi.tsx

@@ -7,48 +7,53 @@ export const Avi: FC = () => {
   const id = `clip${uniqueId()}`
   return (
     <Icon
-      width="32px"
-      height="32px"
-      viewBox="0 0 32 32"
+      width="70px"
+      height="70px"
+      viewBox="0 0 70 70"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clipPath={`url(#${id})`}>
-        <path d="M20 1V9H28" stroke="#B0CFE0" strokeWidth="2" strokeMiterlimit="10" />
+      <g clipPath="url(#clip0_3171_3696)">
         <path
-          d="M28 13V9L20 1H4V13"
-          stroke="#B0CFE0"
-          strokeWidth="2"
+          d="M43.75 2.1875V19.6875H61.25"
+          stroke="white"
+          strokeWidth="4"
+          strokeMiterlimit="10"
+        />
+        <path
+          d="M61.25 28.4375V19.6875L43.75 2.1875H8.75V28.4375"
+          stroke="white"
+          strokeWidth="4"
           strokeMiterlimit="10"
           strokeLinecap="square"
         />
         <path
-          d="M4 27V31H28V27"
-          stroke="#B0CFE0"
-          strokeWidth="2"
+          d="M8.75 59.0625V67.8125H61.25V59.0625"
+          stroke="white"
+          strokeWidth="4"
           strokeMiterlimit="10"
           strokeLinecap="square"
         />
         <path
-          d="M13 23L12.7 21.9H10.8L10.6 23H8.90002L10.8 17.3H12.9L14.8 23H13ZM12.4 20.7L12.2 19.8C12.1 19.6 12.1 19.3 12 19C11.9 18.7 11.9 18.4 11.8 18.3C11.8 18.4 11.7 18.7 11.7 19C11.7 19.3 11.5 19.9 11.2 20.8H12.4V20.7Z"
-          fill="#B0CFE0"
+          d="M28.4375 50.3125L27.7812 47.9063H23.625L23.1875 50.3125H19.4688L23.625 37.8438H28.2188L32.375 50.3125H28.4375ZM27.125 45.2813L26.6875 43.3125C26.4688 42.875 26.4688 42.2188 26.25 41.5625C26.0313 40.9063 26.0313 40.25 25.8125 40.0312C25.8125 40.25 25.5938 40.9063 25.5938 41.5625C25.5938 42.2188 25.1563 43.5312 24.5 45.5H27.125V45.2813Z"
+          fill="white"
         />
         <path
-          d="M18.6 17.3H20.3L18.4 23H16.6L14.7 17.3H16.4L17.2 20.2C17.4 20.8 17.4 21.3 17.5 21.5C17.5 21.3 17.6 21.1 17.6 20.8C17.6 20.5 17.7 20.3 17.7 20.2L18.6 17.3Z"
-          fill="#B0CFE0"
+          d="M40.6875 37.8438H44.4062L40.25 50.3125H36.3125L32.1562 37.8438H35.875L37.625 44.1875C38.0625 45.5 38.0625 46.5938 38.2813 47.0313C38.2813 46.5938 38.5 46.1562 38.5 45.5C38.5 44.8438 38.7188 44.4063 38.7188 44.1875L40.6875 37.8438Z"
+          fill="white"
         />
-        <path d="M20.9 23V17.3H22.5V23H20.9Z" fill="#B0CFE0" />
+        <path d="M45.7188 50.3125V37.8438H49.2188V50.3125H45.7188Z" fill="white" />
         <path
-          d="M31 13H1V27H31V13Z"
-          stroke="#B0CFE0"
-          strokeWidth="2"
+          d="M67.8125 28.4375H2.1875V59.0625H67.8125V28.4375Z"
+          stroke="white"
+          strokeWidth="4"
           strokeMiterlimit="10"
           strokeLinecap="square"
         />
       </g>
       <defs>
         <clipPath id={id}>
-          <rect width="32" height="32" fill="white" />
+          <rect width="70px" height="70px" fill="white" />
         </clipPath>
       </defs>
     </Icon>

src/organisms/Resources/Icons/Csv.tsx

@@ -7,51 +7,56 @@ export const Csv: FC = () => {
   const id = `clip${uniqueId()}`
   return (
     <Icon
-      width="32px"
-      height="32px"
-      viewBox="0 0 32 32"
+      width="70px"
+      height="70px"
+      viewBox="0 0 70 70"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clipPath={`url(#${id})`}>
-        <path d="M20 1V9H28" stroke="#B0CFE0" strokeWidth="2" strokeMiterlimit="10" />
+      <g clipPath="url(#clip0_3171_3654)">
         <path
-          d="M28 13V9L20 1H4V13"
-          stroke="#B0CFE0"
-          strokeWidth="2"
+          d="M43.75 2.1875V19.6875H61.25"
+          stroke="white"
+          strokeWidth="4"
+          strokeMiterlimit="10"
+        />
+        <path
+          d="M61.25 28.4375V19.6875L43.75 2.1875H8.75V28.4375"
+          stroke="white"
+          strokeWidth="4"
           strokeMiterlimit="10"
           strokeLinecap="square"
         />
         <path
-          d="M4 27V31H28V27"
-          stroke="#B0CFE0"
-          strokeWidth="2"
+          d="M8.75 59.0625V67.8125H61.25V59.0625"
+          stroke="white"
+          strokeWidth="4"
           strokeMiterlimit="10"
           strokeLinecap="square"
         />
         <path
-          d="M11.5 18.5C11.1 18.5 10.8 18.7 10.6 19C10.4 19.3 10.3 19.7 10.3 20.2C10.3 21.3 10.7 21.8 11.6 21.8C11.9 21.8 12.1 21.8 12.3 21.7C12.5 21.6 12.8 21.5 13 21.4V22.7C12.5 22.9 12 23 11.4 23C10.5 23 9.89995 22.8 9.39995 22.2C8.89995 21.6 8.69995 21 8.69995 20C8.69995 19.4 8.79995 18.9 8.99995 18.4C9.19995 17.9 9.49995 17.6 9.99995 17.4C10.5 17.2 10.9 17 11.5 17C12.1 17 12.7 17.1 13.3 17.4L12.8 18.6C12.6 18.5 12.4 18.4 12.2 18.4C12 18.4 11.7 18.5 11.5 18.5Z"
-          fill="#B0CFE0"
+          d="M25.1563 40.4688C24.2813 40.4688 23.625 40.9062 23.1875 41.5625C22.75 42.2188 22.5313 43.0938 22.5313 44.1875C22.5313 46.5938 23.4063 47.6875 25.375 47.6875C26.0313 47.6875 26.4688 47.6875 26.9063 47.4688C27.3438 47.25 28 47.0312 28.4375 46.8125V49.6563C27.3438 50.0938 26.25 50.3125 24.9375 50.3125C22.9687 50.3125 21.6562 49.875 20.5625 48.5625C19.4687 47.25 19.0312 45.9375 19.0312 43.75C19.0312 42.4375 19.25 41.3437 19.6875 40.25C20.125 39.1562 20.7813 38.5 21.875 38.0625C22.9688 37.625 23.8438 37.1875 25.1563 37.1875C26.4688 37.1875 27.7813 37.4062 29.0938 38.0625L28 40.6875C27.5625 40.4688 27.125 40.25 26.6875 40.25C26.25 40.25 25.5938 40.4688 25.1563 40.4688Z"
+          fill="white"
         />
         <path
-          d="M17.9 21.3C17.9 21.7 17.8 22 17.6 22.2C17.4 22.4 17.2 22.7 16.8 22.8C16.4 22.9 16.1 23 15.6 23C15.2 23 14.9 23 14.6 22.9C14.3 22.8 14.1 22.8 13.8 22.6V21.2C14.1 21.4 14.4 21.5 14.7 21.6C15 21.7 15.3 21.7 15.6 21.7C15.8 21.7 16 21.7 16.1 21.6C16.2 21.5 16.3 21.4 16.3 21.3C16.3 21.2 16.3 21.2 16.2 21.1C16.1 21 16.1 21.1 16 21C15.9 20.9 15.7 20.8 15.2 20.6C14.8 20.4 14.5 20.3 14.4 20.1C14.3 19.9 14.1 19.8 14 19.6C13.9 19.4 13.9 19.2 13.9 18.9C13.9 18.4 14.1 18 14.5 17.7C14.9 17.4 15.4 17.3 16.1 17.3C16.7 17.3 17.3 17.4 17.9 17.7L17.4 18.9C16.9 18.7 16.4 18.5 16 18.5C15.8 18.5 15.7 18.5 15.6 18.6C15.5 18.7 15.5 18.8 15.5 18.9C15.5 19 15.6 19.1 15.7 19.2C15.8 19.3 16.1 19.4 16.6 19.7C17.1 19.9 17.4 20.2 17.6 20.4C17.8 20.6 17.9 20.9 17.9 21.3Z"
-          fill="#B0CFE0"
+          d="M39.1562 46.5938C39.1562 47.4688 38.9375 48.125 38.5 48.5625C38.0625 49 37.625 49.6562 36.75 49.875C35.875 50.0938 35.2188 50.3125 34.125 50.3125C33.25 50.3125 32.5938 50.3125 31.9375 50.0938C31.2813 49.875 30.8438 49.875 30.1875 49.4375V46.375C30.8438 46.8125 31.5 47.0313 32.1562 47.25C32.8125 47.4688 33.4688 47.4688 34.125 47.4688C34.5625 47.4688 35 47.4688 35.2188 47.25C35.4375 47.0313 35.6562 46.8125 35.6562 46.5938C35.6562 46.375 35.6563 46.375 35.4375 46.1563C35.2188 45.9375 35.2187 46.1563 35 45.9375C34.7812 45.7188 34.3437 45.5 33.25 45.0625C32.375 44.625 31.7187 44.4063 31.5 43.9688C31.2812 43.5313 30.8437 43.3125 30.625 42.875C30.4062 42.4375 30.4062 42 30.4062 41.3438C30.4062 40.25 30.8437 39.375 31.7187 38.7188C32.5937 38.0625 33.6875 37.8438 35.2188 37.8438C36.5313 37.8438 37.8437 38.0625 39.1562 38.7188L38.0625 41.3438C36.9687 40.9063 35.875 40.4688 35 40.4688C34.5625 40.4688 34.3438 40.4688 34.125 40.6875C33.9063 40.9063 33.9062 41.125 33.9062 41.3438C33.9062 41.5625 34.125 41.7813 34.3437 42C34.5625 42.2188 35.2188 42.4375 36.3125 43.0938C37.4063 43.5313 38.0625 44.1875 38.5 44.625C38.9375 45.0625 39.1562 45.7188 39.1562 46.5938Z"
+          fill="white"
         />
         <path
-          d="M22 17.3H23.7L21.8 23H20L18.1 17.3H19.8L20.6 20.2C20.8 20.8 20.8 21.3 20.9 21.5C20.9 21.3 21 21.1 21 20.8C21 20.5 21.1 20.3 21.1 20.2L22 17.3Z"
-          fill="#B0CFE0"
+          d="M48.125 37.8438H51.8438L47.6875 50.3125H43.75L39.5938 37.8438H43.3125L45.0625 44.1875C45.5 45.5 45.5 46.5938 45.7187 47.0313C45.7187 46.5938 45.9375 46.1562 45.9375 45.5C45.9375 44.8438 46.1562 44.4063 46.1562 44.1875L48.125 37.8438Z"
+          fill="white"
         />
         <path
-          d="M31 13H1V27H31V13Z"
-          stroke="#B0CFE0"
-          strokeWidth="2"
+          d="M67.8125 28.4375H2.1875V59.0625H67.8125V28.4375Z"
+          stroke="white"
+          strokeWidth="4"
           strokeMiterlimit="10"
           strokeLinecap="square"
         />
       </g>
       <defs>
         <clipPath id={id}>
-          <rect width="32" height="32" fill="white" />
+          <rect width="70px" height="70px" fill="white" />
         </clipPath>
       </defs>
     </Icon>

src/organisms/Resources/Icons/Doc.tsx

@@ -7,51 +7,56 @@ export const Doc: FC = () => {
   const id = `clip${uniqueId()}`
   return (
     <Icon
-      width="32px"
-      height="32px"
-      viewBox="0 0 32 32"
+      width="70px"
+      height="70px"
+      viewBox="0 0 70 70"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clipPath={`url(#${id})`}>
-        <path d="M20 1V9H28" stroke="#B0CFE0" strokeWidth="2" strokeMiterlimit="10" />
+      <g clipPath="url(#clip0_3171_3668)">
         <path
-          d="M28 13V9L20 1H4V13"
-          stroke="#B0CFE0"
-          strokeWidth="2"
+          d="M43.75 2.1875V19.6875H61.25"
+          stroke="white"
+          strokeWidth="4"
+          strokeMiterlimit="10"
+        />
+        <path
+          d="M61.25 28.4375V19.6875L43.75 2.1875H8.75V28.4375"
+          stroke="white"
+          strokeWidth="4"
           strokeMiterlimit="10"
           strokeLinecap="square"
         />
         <path
-          d="M4 27V31H28V27"
-          stroke="#B0CFE0"
-          strokeWidth="2"
+          d="M8.75 59.0625V67.8125H61.25V59.0625"
+          stroke="white"
+          strokeWidth="4"
           strokeMiterlimit="10"
           strokeLinecap="square"
         />
         <path
-          d="M12.7 20C12.7 21 12.4 21.7 11.9 22.2C11.4 22.7 10.7 23 9.70002 23H7.90002V17.3H9.90002C10.8 17.3 11.5 17.5 12 18C12.5 18.5 12.7 19.1 12.7 20ZM11.1 20.1C11.1 19.6 11 19.2 10.8 18.9C10.6 18.6 10.3 18.5 9.90002 18.5H9.40002V21.7H9.70002C10.2 21.7 10.5 21.6 10.7 21.3C10.9 21 11.1 20.6 11.1 20.1Z"
-          fill="#B0CFE0"
+          d="M27.7812 43.75C27.7812 45.9375 27.125 47.4688 26.0312 48.5625C24.9375 49.6563 23.4062 50.3125 21.2187 50.3125H17.2812V37.8438H21.6562C23.625 37.8438 25.1562 38.2813 26.25 39.375C27.3438 40.4688 27.7812 41.7813 27.7812 43.75ZM24.2813 43.9688C24.2813 42.875 24.0625 42 23.625 41.3438C23.1875 40.6875 22.5312 40.4688 21.6562 40.4688H20.5625V47.4688H21.2187C22.3125 47.4688 22.9687 47.25 23.4062 46.5938C23.8437 45.9375 24.2813 45.0625 24.2813 43.9688Z"
+          fill="white"
         />
         <path
-          d="M19.1 20.1C19.1 21.1 18.9 21.8 18.4 22.3C17.9 22.8 17.2 23.1 16.3 23.1C15.4 23.1 14.7 22.8 14.2 22.3C13.7 21.8 13.5 21.1 13.5 20.1C13.5 19.1 13.7 18.4 14.2 17.9C14.7 17.4 15.4 17.1 16.3 17.1C17.2 17.1 17.9 17.3 18.4 17.8C18.9 18.3 19.1 19.2 19.1 20.1ZM15.2 20.1C15.2 21.2 15.6 21.8 16.4 21.8C16.8 21.8 17.1 21.7 17.3 21.4C17.5 21.1 17.6 20.7 17.6 20.1C17.6 19.5 17.5 19.1 17.3 18.8C17.1 18.5 16.8 18.4 16.4 18.4C15.6 18.5 15.2 19 15.2 20.1Z"
-          fill="#B0CFE0"
+          d="M41.7813 43.9688C41.7813 46.1562 41.3437 47.6875 40.25 48.7812C39.1562 49.875 37.625 50.5312 35.6562 50.5312C33.6875 50.5312 32.1562 49.875 31.0625 48.7812C29.9687 47.6875 29.5312 46.1562 29.5312 43.9688C29.5312 41.7812 29.9687 40.25 31.0625 39.1562C32.1562 38.0625 33.6875 37.4062 35.6562 37.4062C37.625 37.4062 39.1562 37.8437 40.25 38.9375C41.3437 40.0312 41.7813 42 41.7813 43.9688ZM33.25 43.9688C33.25 46.375 34.125 47.6875 35.875 47.6875C36.75 47.6875 37.4062 47.4687 37.8437 46.8125C38.2812 46.1562 38.5 45.2812 38.5 43.9688C38.5 42.6562 38.2812 41.7812 37.8437 41.125C37.4062 40.4687 36.75 40.25 35.875 40.25C34.125 40.4687 33.25 41.5625 33.25 43.9688Z"
+          fill="white"
         />
         <path
-          d="M22.7 18.5C22.3 18.5 22 18.7 21.8 19C21.6 19.3 21.5 19.7 21.5 20.2C21.5 21.3 21.9 21.8 22.8 21.8C23.1 21.8 23.3 21.8 23.5 21.7C23.7 21.6 24 21.5 24.2 21.4V22.7C23.7 22.9 23.2 23 22.6 23C21.7 23 21.1 22.8 20.6 22.2C20.1 21.6 19.9 21 19.9 20C19.9 19.4 20 18.9 20.2 18.4C20.4 17.9 20.7 17.6 21.2 17.4C21.7 17.2 22.1 17 22.7 17C23.3 17 23.9 17.1 24.5 17.4L24 18.8C23.8 18.7 23.6 18.6 23.4 18.6C23.2 18.6 22.9 18.5 22.7 18.5Z"
-          fill="#B0CFE0"
+          d="M49.6563 40.4688C48.7813 40.4688 48.125 40.9062 47.6875 41.5625C47.25 42.2188 47.0313 43.0938 47.0313 44.1875C47.0313 46.5938 47.9062 47.6875 49.875 47.6875C50.5312 47.6875 50.9688 47.6875 51.4063 47.4688C51.8438 47.25 52.5 47.0312 52.9375 46.8125V49.6563C51.8438 50.0938 50.75 50.3125 49.4375 50.3125C47.4688 50.3125 46.1563 49.875 45.0625 48.5625C43.9688 47.25 43.5312 45.9375 43.5312 43.75C43.5312 42.4375 43.75 41.3437 44.1875 40.25C44.625 39.1562 45.2813 38.5 46.375 38.0625C47.4688 37.625 48.3438 37.1875 49.6563 37.1875C50.9688 37.1875 52.2813 37.4062 53.5938 38.0625L52.5 41.125C52.0625 40.9062 51.625 40.6875 51.1875 40.6875C50.75 40.6875 50.0938 40.4688 49.6563 40.4688Z"
+          fill="white"
         />
         <path
-          d="M31 13H1V27H31V13Z"
-          stroke="#B0CFE0"
-          strokeWidth="2"
+          d="M67.8125 28.4375H2.1875V59.0625H67.8125V28.4375Z"
+          stroke="white"
+          strokeWidth="4"
           strokeMiterlimit="10"
           strokeLinecap="square"
         />
       </g>
       <defs>
         <clipPath id={id}>
-          <rect width="32" height="32" fill="white" />
+          <rect width="70px" height="70px" fill="white" />
         </clipPath>
       </defs>
     </Icon>

src/organisms/Resources/Icons/Docx.tsx

@@ -7,55 +7,60 @@ export const Docx: FC = () => {
   const id = `clip${uniqueId()}`
   return (
     <Icon
-      width="32px"
-      height="32px"
-      viewBox="0 0 32 32"
+      width="70px"
+      height="70px"
+      viewBox="0 0 70 70"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clipPath={`url(#${id})`}>
-        <path d="M20 1V9H28" stroke="#B0CFE0" strokeWidth="2" strokeMiterlimit="10" />
+      <g clipPath="url(#clip0_3171_3752)">
         <path
-          d="M28 13V9L20 1H4V13"
-          stroke="#B0CFE0"
-          strokeWidth="2"
+          d="M43.75 2.1875V19.6875H61.25"
+          stroke="white"
+          strokeWidth="4"
+          strokeMiterlimit="10"
+        />
+        <path
+          d="M61.25 28.4375V19.6875L43.75 2.1875H8.75V28.4375"
+          stroke="white"
+          strokeWidth="4"
           strokeMiterlimit="10"
           strokeLinecap="square"
         />
         <path
-          d="M4 27V31H28V27"
-          stroke="#B0CFE0"
-          strokeWidth="2"
+          d="M8.75 59.0625V67.8125H61.25V59.0625"
+          stroke="white"
+          strokeWidth="4"
           strokeMiterlimit="10"
           strokeLinecap="square"
         />
         <path
-          d="M9.9 20C9.9 21 9.6 21.7 9.1 22.2C8.6 22.7 7.8 23 6.9 23H5V17.3H7C7.9 17.3 8.6 17.5 9.1 18C9.6 18.5 9.9 19.1 9.9 20ZM8.3 20.1C8.3 19.6 8.2 19.2 8 18.9C7.8 18.6 7.4 18.5 7 18.5H6.5V21.7H6.8C7.3 21.7 7.6 21.6 7.8 21.3C8 21 8.3 20.6 8.3 20.1Z"
-          fill="#B0CFE0"
+          d="M21.6562 43.75C21.6562 45.9375 21 47.4688 19.9063 48.5625C18.8125 49.6563 17.0625 50.3125 15.0938 50.3125H10.9375V37.8438H15.3125C17.2812 37.8438 18.8125 38.2813 19.9063 39.375C21 40.4688 21.6562 41.7813 21.6562 43.75ZM18.1563 43.9688C18.1563 42.875 17.9375 42 17.5 41.3438C17.0625 40.6875 16.1875 40.4688 15.3125 40.4688H14.2188V47.4688H14.875C15.9688 47.4688 16.625 47.25 17.0625 46.5938C17.5 45.9375 18.1563 45.0625 18.1563 43.9688Z"
+          fill="white"
         />
         <path
-          d="M16.2 20.1C16.2 21.1 16 21.8 15.5 22.3C15 22.8 14.3 23.1 13.4 23.1C12.5 23.1 11.8 22.8 11.3 22.3C10.8 21.8 10.6 21.1 10.6 20.1C10.6 19.1 10.8 18.4 11.3 17.9C11.8 17.4 12.5 17.1 13.4 17.1C14.3 17.1 15 17.3 15.5 17.8C16 18.3 16.2 19.2 16.2 20.1ZM12.3 20.1C12.3 21.2 12.7 21.8 13.5 21.8C13.9 21.8 14.2 21.7 14.4 21.4C14.6 21.1 14.7 20.7 14.7 20.1C14.7 19.5 14.6 19.1 14.4 18.8C14.2 18.5 13.9 18.4 13.5 18.4C12.7 18.5 12.3 19 12.3 20.1Z"
-          fill="#B0CFE0"
+          d="M35.4375 43.9688C35.4375 46.1562 35 47.6875 33.9062 48.7812C32.8125 49.875 31.2812 50.5312 29.3125 50.5312C27.3437 50.5312 25.8125 49.875 24.7187 48.7812C23.625 47.6875 23.1875 46.1562 23.1875 43.9688C23.1875 41.7812 23.625 40.25 24.7187 39.1562C25.8125 38.0625 27.3437 37.4062 29.3125 37.4062C31.2812 37.4062 32.8125 37.8437 33.9062 38.9375C35 40.0312 35.4375 42 35.4375 43.9688ZM26.9062 43.9688C26.9062 46.375 27.7812 47.6875 29.5312 47.6875C30.4062 47.6875 31.0625 47.4687 31.5 46.8125C31.9375 46.1562 32.1562 45.2812 32.1562 43.9688C32.1562 42.6562 31.9375 41.7812 31.5 41.125C31.0625 40.4687 30.4062 40.25 29.5312 40.25C27.7812 40.4687 26.9062 41.5625 26.9062 43.9688Z"
+          fill="white"
         />
         <path
-          d="M19.8 18.5C19.4 18.5 19.1 18.7 18.9 19C18.7 19.3 18.6 19.7 18.6 20.2C18.6 21.3 19 21.8 19.9 21.8C20.2 21.8 20.4 21.8 20.6 21.7C20.8 21.6 21.1 21.5 21.3 21.4V22.7C20.8 22.9 20.3 23 19.7 23C18.8 23 18.2 22.8 17.7 22.2C17.2 21.6 17 21.1 17 20.2C17 19.6 17.1 19.1 17.3 18.6C17.5 18.1 17.8 17.8 18.3 17.6C18.8 17.4 19.2 17.2 19.8 17.2C20.4 17.2 21 17.3 21.6 17.6L21.1 18.8C20.9 18.7 20.7 18.6 20.5 18.6C20.3 18.6 20 18.5 19.8 18.5Z"
-          fill="#B0CFE0"
+          d="M43.3125 40.4687C42.4375 40.4687 41.7812 40.9062 41.3437 41.5625C40.9062 42.2187 40.6875 43.0938 40.6875 44.1875C40.6875 46.5938 41.5625 47.6875 43.5312 47.6875C44.1875 47.6875 44.625 47.6875 45.0625 47.4688C45.5 47.25 46.1562 47.0312 46.5937 46.8125V49.6562C45.5 50.0938 44.4063 50.3125 43.0938 50.3125C41.125 50.3125 39.8125 49.875 38.7188 48.5625C37.625 47.25 37.1875 46.1562 37.1875 44.1875C37.1875 42.875 37.4062 41.7812 37.8437 40.6875C38.2812 39.5937 38.9375 38.9375 40.0312 38.5C41.125 38.0625 42 37.625 43.3125 37.625C44.625 37.625 45.9375 37.8437 47.25 38.5L46.1563 41.125C45.7188 40.9062 45.2812 40.6875 44.8438 40.6875C44.4062 40.6875 43.75 40.4687 43.3125 40.4687Z"
+          fill="white"
         />
         <path
-          d="M27.6 23H25.8L24.7 21.2L23.6 23H21.9L23.8 20.1L22 17.3H23.7L24.7 19.1L25.7 17.3H27.5L25.7 20.2L27.6 23Z"
-          fill="#B0CFE0"
+          d="M60.375 50.3125H56.4375L54.0313 46.375L51.625 50.3125H47.9062L52.0625 43.9688L48.125 37.8438H51.8438L54.0313 41.7813L56.2188 37.8438H60.1563L56.2188 44.1875L60.375 50.3125Z"
+          fill="white"
         />
         <path
-          d="M31 13H1V27H31V13Z"
-          stroke="#B0CFE0"
-          strokeWidth="2"
+          d="M67.8125 28.4375H2.1875V59.0625H67.8125V28.4375Z"
+          stroke="white"
+          strokeWidth="4"
           strokeMiterlimit="10"
           strokeLinecap="square"
         />
       </g>
       <defs>
         <clipPath id={id}>
-          <rect width="32" height="32" fill="white" />
+          <rect width="70px" height="70px" fill="white" />
         </clipPath>
       </defs>
     </Icon>