From 9dbd1401fc190b7e355b41ee763ea1473a43ddc6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= <leo@leomurca.xyz>
Date: Fri, 5 Aug 2022 18:12:57 -0300
Subject: [PATCH] Add jitsi card

---
 src/assets/jitsi.svg          |  4 ++
 src/screens/Classroom/View.js | 81 +++++++++++++++++++++++++++++++----
 2 files changed, 76 insertions(+), 9 deletions(-)
 create mode 100644 src/assets/jitsi.svg

diff --git a/src/assets/jitsi.svg b/src/assets/jitsi.svg
new file mode 100644
index 0000000..21179c3
--- /dev/null
+++ b/src/assets/jitsi.svg
@@ -0,0 +1,4 @@
+
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.9454 11.4963C20.6878 10.9446 20.2724 10.4816 19.7518 10.1658C19.1329 9.77345 18.3598 9.69025 17.8209 9.69025C17.6394 9.69028 17.458 9.69968 17.2775 9.71841H17.2641C17.2737 9.64417 17.2929 9.54817 17.3089 9.47009C17.3358 9.33313 17.3665 9.17761 17.3838 9.01569C17.4555 8.32129 17.2084 7.38689 16.7534 6.63617C16.6811 6.51649 16.6836 6.47553 16.6836 6.47553C16.7064 6.44162 16.733 6.41047 16.763 6.38273L16.8046 6.33921C17.8804 5.18721 18.2055 3.92065 17.7697 2.56705C16.9435 1.24512e-05 16.722 1.24425e-05 16.5601 1.24425e-05C16.524 -0.000343533 16.4882 0.00694248 16.4551 0.021392C16.422 0.0358415 16.3924 0.0571276 16.3681 0.0838524C16.3412 0.116401 16.3216 0.154283 16.3104 0.194993C16.2993 0.235704 16.2969 0.278316 16.3035 0.320012C16.3873 1.17121 16.1953 2.38977 16.0673 2.85377C15.9105 3.43745 15.3633 4.30785 13.6353 5.13537C13.5139 5.18707 13.3901 5.23257 13.2641 5.27169C12.7003 5.46049 11.7582 5.77601 11.2347 6.49665C10.8398 6.95937 10.7444 7.42273 10.5735 8.25921C10.4212 9.00289 10.2983 9.90849 10.539 10.9894C10.5633 11.0963 10.5863 11.1859 10.6075 11.2659C10.6222 11.3229 10.635 11.3722 10.6446 11.415L10.6651 11.4106L10.6439 11.4163C10.6599 11.4803 10.6497 11.4957 10.6267 11.5117C10.5435 11.5446 10.4579 11.5709 10.3707 11.5904C10.1147 11.6314 9.85865 11.6768 9.61417 11.7248C8.83593 11.8586 6.4833 12.2643 5.39978 13.9891C4.73098 15.0528 4.63626 16.4422 5.1169 18.1235C5.61546 19.7875 6.6049 20.9312 7.28202 21.1642L7.2929 21.168C7.34154 21.1898 7.38826 21.2083 7.4337 21.2237C7.4337 21.2704 7.42922 21.3274 7.42346 21.3914C7.41876 21.4195 7.41428 21.4502 7.41002 21.4835C7.33578 22.0262 7.07978 22.6112 6.81866 22.6266C6.68106 22.5997 6.13578 22.2906 5.74986 22.0371C5.62612 21.9565 5.50879 21.8793 5.39786 21.8054C4.32074 21.0925 3.72682 20.7002 2.8193 20.599C2.78826 20.5957 2.75707 20.594 2.72586 20.5939C1.76586 20.5939 0.0378581 22.2106 0.00137814 25.4323C-0.0171819 27.0464 0.151778 28.5216 0.505058 29.8176C0.757218 30.7469 1.02602 31.2762 1.1041 31.4176L1.41514 32L1.55722 31.36C2.30602 27.968 3.23018 27.1507 4.7681 26.1728C5.89514 27.2288 7.37546 27.7856 9.06122 27.7856C10.482 27.7856 11.9687 27.3728 13.2462 26.6227C14.5012 25.8867 15.4702 24.8947 16.0622 23.7485C16.1607 23.8125 16.2798 23.8957 16.3585 23.9507C16.6401 24.1478 16.6996 24.1894 16.8001 24.1894H16.8091C16.9191 24.185 17.9572 23.8368 19.0203 22.5382C19.6379 21.7837 20.1473 20.8506 20.5339 19.7632C21.0126 18.4192 21.3019 16.832 21.4004 15.047C21.5092 13.5482 21.3569 12.3546 20.9479 11.4995L20.9454 11.4963ZM16.9633 2.86849C17.0525 3.22843 17.0641 3.60325 16.9972 3.96801C16.8974 4.67713 16.5966 5.31201 16.0833 5.89121C16.5207 4.93129 16.8171 3.91319 16.9633 2.86849ZM16.2209 7.26977C16.3772 7.50628 16.4966 7.76526 16.5748 8.03777C16.6616 8.39515 16.6461 8.76975 16.53 9.11873C16.3463 9.55585 16.0999 9.77665 15.7972 9.77665H15.7569C15.6502 9.76061 15.5479 9.72316 15.4561 9.66657C15.067 9.43873 14.8564 8.83457 15.0081 8.39169C15.0145 8.37889 15.0203 8.36545 15.026 8.35137C15.051 8.28737 15.122 8.16449 15.3191 7.97441C15.6007 7.72545 16.0123 7.41121 16.2196 7.27041L16.2209 7.26977ZM11.7153 7.14945L11.7191 7.14241V7.13601C11.8023 6.93121 12.3751 6.59969 12.7553 6.38017C12.8027 6.35201 12.85 6.32449 12.8974 6.29761C13.0639 6.21019 13.2348 6.13137 13.4094 6.06145C14.0347 5.79521 15.0094 5.38049 15.8119 4.60801C15.579 5.42465 15.0183 6.80001 14.0967 7.63265C13.8919 7.81761 13.4785 7.98145 12.9991 8.17089C12.4827 8.37441 11.8619 8.61889 11.2596 8.98817C11.3063 8.51713 11.4516 7.69537 11.7121 7.14945H11.7153ZM11.3153 9.81057C11.6251 9.55457 12.1921 9.20769 14.05 8.59457C14.0628 8.65217 14.0775 8.72641 14.0916 8.80001C14.1031 8.85569 14.1153 8.91905 14.1294 8.98817C14.251 9.58849 14.3854 10.263 15.6353 10.6374C15.5188 10.8934 15.2795 11.3261 15.1963 11.4086L15.1687 11.4323L15.1495 11.4637C14.9063 11.8541 13.5918 12.7059 13.003 12.7059C12.9777 12.7062 12.9524 12.7042 12.9275 12.7002C12.5729 12.6317 11.7588 11.9085 11.5195 11.3741C11.0567 10.3251 11.1515 9.94689 11.3121 9.81313L11.3153 9.81057ZM6.68618 19.4387C6.00522 18.4256 5.48938 16.6554 5.8273 15.232V15.2256C5.9905 14.4512 6.5313 13.9955 6.75466 13.8355L6.78666 13.8118C7.11818 13.5226 7.79658 13.2173 8.6977 12.9504C8.8257 12.9171 8.8961 12.9024 8.89929 12.9024C9.06505 12.8678 9.24617 12.8262 9.42217 12.7859C9.75522 12.7009 10.0928 12.6349 10.4334 12.5882C10.5179 12.5792 10.6036 12.5632 10.6855 12.5472C10.7963 12.5229 10.9089 12.5083 11.0222 12.5037C11.1125 12.4989 11.2021 12.5226 11.2782 12.5715C11.6123 12.9683 12.4302 13.7517 12.9665 13.7978H12.9825H13.0004C13.611 13.7651 14.5678 13.1693 15.8452 12.0256C16.0622 11.8336 16.2638 11.6659 16.4615 11.5194L16.4859 11.5008C16.8344 11.2364 17.2183 11.022 17.6263 10.864C17.4926 11.3018 17.3863 12.0499 17.8183 13.104C18.043 13.6493 18.4743 14.8781 18.8321 16.0813C19.4478 18.1536 19.362 18.5184 19.3499 18.5523C19.3328 18.6227 19.3049 18.6901 19.2673 18.752C19.2193 18.7427 19.1729 18.7263 19.1297 18.7034C18.8193 18.56 18.4711 18.304 18.0641 18.0032C17.3089 17.4496 16.37 16.761 14.9959 16.224C13.9867 15.8304 12.9831 15.6301 12.0148 15.6301C11.6136 15.6294 11.2132 15.6676 10.8193 15.744C8.65482 16.1709 7.5137 17.1251 6.90122 17.6384L6.89674 17.6422C6.85648 17.6748 6.8273 17.7191 6.8132 17.769C6.79911 17.8188 6.80079 17.8718 6.81802 17.9206C6.83565 17.9687 6.86779 18.0101 6.90998 18.0391C6.95218 18.0681 7.00234 18.0833 7.05354 18.0826C7.10922 18.0826 7.16362 18.0672 7.34346 18.0154C7.99201 17.8221 8.65569 17.6838 9.32746 17.6019C9.56815 17.5738 9.81025 17.5595 10.0526 17.559C11.1003 17.559 12.0641 17.879 13.0843 18.5722C13.3179 18.7674 13.4606 18.8966 13.547 18.9818L13.4587 19.0048L12.8398 19.1795C11.3076 19.6128 8.99146 20.2675 7.89514 20.2675C7.81106 20.2682 7.72704 20.2633 7.64362 20.2528C7.35946 20.2112 7.01258 19.9142 6.69066 19.4394L6.68618 19.4387ZM2.16714 27.2115C1.73589 27.7737 1.41829 28.4146 1.2321 29.0982C1.02602 28.1107 0.784098 26.4864 0.921698 25.2218C1.20842 22.6016 2.50634 21.7242 2.69898 21.6781H2.71114C2.72202 21.6781 2.73482 21.6781 2.76042 21.7056C2.8641 21.8182 3.0881 22.2938 2.9249 24.2605C2.8865 24.6656 2.98378 25.0086 3.21546 25.28C3.37241 25.4595 3.56986 25.599 3.79146 25.687C3.16674 26.0997 2.61663 26.6154 2.16458 27.2122L2.16714 27.2115ZM4.37322 24.64C4.30562 24.6703 4.23283 24.6872 4.15882 24.6899C4.13281 24.6922 4.10662 24.6886 4.08222 24.6793C4.05783 24.67 4.03587 24.6552 4.01802 24.6362C3.97642 24.5926 3.88234 24.4442 3.91242 24.0058C3.93354 23.7901 3.96362 23.575 3.99178 23.3658C4.05462 22.9715 4.09225 22.5737 4.10442 22.1747C4.8609 22.6701 5.6993 23.1949 6.24202 23.4368C5.88746 23.751 5.14954 24.3162 4.37322 24.6413V24.64ZM14.2452 24.5696C13.0249 25.8417 11.3767 26.6168 9.61866 26.7456C9.41002 26.761 9.20202 26.7686 9.0017 26.7686C6.68682 26.7686 5.5105 25.7862 4.9697 25.239C7.58538 24.1107 8.11594 22.4973 8.34762 21.7926C8.37002 21.7242 8.3905 21.6646 8.41162 21.6134C8.51146 21.5635 8.82889 21.4214 9.80809 21.0547C10.5761 20.7782 11.4971 20.4685 12.3092 20.1946C12.9857 19.9667 13.57 19.769 13.8894 19.6518L13.9156 19.6435C13.9796 19.6256 14.018 19.6173 14.0436 19.6128L14.0615 19.6358C14.3591 20.0237 14.85 20.2598 14.8545 20.263C15.2235 20.4278 15.6182 20.5274 16.0212 20.5574C16.0116 21.9558 15.3729 23.4061 14.2491 24.569L14.2452 24.5696ZM16.274 19.7818C15.3057 19.7818 14.9659 19.4701 14.6491 19.0931C13.0766 17.2186 11.3383 16.9114 10.6631 16.8659C10.4468 16.8518 10.235 16.8448 10.0321 16.8448C9.86185 16.8448 9.69545 16.8493 9.53289 16.8595C10.3161 16.5932 11.1376 16.4566 11.9649 16.455C13.6993 16.455 15.3691 17.0694 16.9262 18.2803C17.5611 18.7738 18.0283 19.1238 18.4321 19.4048C18.2354 19.4633 17.9698 19.5379 17.6353 19.6288L17.5073 19.664C17.1007 19.7363 16.6889 19.7757 16.2759 19.7818H16.274ZM16.8775 23.3267C16.7758 23.2371 16.6215 23.0944 16.4622 22.9491C16.6086 22.5765 16.7192 22.1907 16.7924 21.7971C16.8679 21.3818 16.9153 20.8371 16.9371 20.5485C17.3969 20.4797 17.8522 20.3829 18.3003 20.2586C18.8398 20.1037 19.2564 19.9277 19.5534 19.7274C18.6273 22.0397 17.2859 23.0554 16.8775 23.3254V23.3267ZM20.082 18.0384C19.9444 16.8986 19.483 15.4893 19.3025 14.9414C19.2833 14.8774 19.2673 14.8314 19.2564 14.7974C19.243 14.7539 19.2014 14.6381 19.1156 14.4013C18.8935 13.7811 18.4302 12.4922 18.3476 12.1107C18.2292 11.5501 18.4967 10.7789 18.6676 10.7117C18.7204 10.6919 18.7763 10.6817 18.8327 10.6816C19.1476 10.6816 19.5367 10.9792 19.8446 11.4592C20.2171 12.0352 20.4379 12.7987 20.4667 13.6026C20.5307 15.3568 20.3681 16.8224 20.0827 18.0384" fill="black"/>
+</svg>
diff --git a/src/screens/Classroom/View.js b/src/screens/Classroom/View.js
index 2fd6111..6dd0677 100644
--- a/src/screens/Classroom/View.js
+++ b/src/screens/Classroom/View.js
@@ -1,6 +1,7 @@
 import {
   Avatar,
   AvatarGroup,
+  Button,
   Card,
   Container,
   Grid,
@@ -17,6 +18,7 @@ import { TAB_OPTIONS } from './tabOptions';
 import styles from './styles';
 import AnnouncementCard from '../../components/AnnouncementCard';
 import { createArrayFrom1ToN } from '../../utils/createArrayFrom1ToN';
+import jitsiLogo from '../../assets/jitsi.svg';
 
 function View({
   layoutType,
@@ -77,7 +79,15 @@ function View({
         {announcementsTabData === null ? (
           <Grid sx={container} container spacing={2}>
             <Grid item xs={4}>
-              <Skeleton variant="rectangular" width="100%" height={200} />
+              {createArrayFrom1ToN(2).map(i => (
+                <Skeleton
+                  key={i}
+                  variant="rectangular"
+                  width="100%"
+                  height={200}
+                  sx={{ marginBottom: '30px' }}
+                />
+              ))}
             </Grid>
             <Grid item xs={8}>
               {createArrayFrom1ToN(4).map(i => (
@@ -94,14 +104,37 @@ function View({
         ) : (
           <Grid sx={container} container spacing={2}>
             <Grid item xs={4}>
-              <Container disableGutters>
+              <Stack gap="30px">
                 <Card
                   sx={{ width: '100%', padding: '20px' }}
                   elevation={4}
                   variant="elevation"
                 >
                   <Stack justifyContent="flex-start" spacing={1}>
-                    <h3>Próximas Atividades</h3>
+                    <Container
+                      disableGutters
+                      sx={{ display: 'flex', justifyContent: 'row' }}
+                    >
+                      <img src={jitsiLogo} alt="Jitsi Meet" />
+                      <h3 style={{ fontWeight: 500 }}>Jitsi</h3>
+                    </Container>
+
+                    <Button
+                      variant="contained"
+                      href="https://google.com"
+                      target="__blank"
+                    >
+                      Entrar
+                    </Button>
+                  </Stack>
+                </Card>
+                <Card
+                  sx={{ width: '100%', padding: '20px' }}
+                  elevation={4}
+                  variant="elevation"
+                >
+                  <Stack justifyContent="flex-start" spacing={1}>
+                    <h3 style={{ fontWeight: 500 }}>Próximas Atividades</h3>
                     {announcementsTabData.upcomingAssignments.map(ua => (
                       <Link sx={{ fontSize: '15px' }} key={ua.id}>
                         {ua.title}
@@ -109,7 +142,7 @@ function View({
                     ))}
                   </Stack>
                 </Card>
-              </Container>
+              </Stack>
             </Grid>
             <Grid item xs={8}>
               <Stack
@@ -189,8 +222,15 @@ function View({
             gap="30px"
             sx={{ marginTop: '30px' }}
           >
-            <Skeleton variant="rectangular" width="100%" height={200} />
-
+            {createArrayFrom1ToN(2).map(i => (
+              <Skeleton
+                key={i}
+                variant="rectangular"
+                width="100%"
+                height={200}
+                sx={{ marginBottom: '30px' }}
+              />
+            ))}
             {createArrayFrom1ToN(4).map(i => (
               <Skeleton
                 key={i}
@@ -210,14 +250,37 @@ function View({
             gap="30px"
             sx={{ marginTop: '30px' }}
           >
-            <Container disableGutters>
+            <Stack gap="30px">
               <Card
                 sx={{ width: '100%', padding: '20px' }}
                 elevation={4}
                 variant="elevation"
               >
                 <Stack justifyContent="flex-start" spacing={1}>
-                  <h3>Próximas Atividades</h3>
+                  <Container
+                    disableGutters
+                    sx={{ display: 'flex', justifyContent: 'row' }}
+                  >
+                    <img src={jitsiLogo} alt="Jitsi Meet" />
+                    <h3 style={{ fontWeight: 500 }}>Jitsi</h3>
+                  </Container>
+
+                  <Button
+                    variant="contained"
+                    href="https://google.com"
+                    target="__blank"
+                  >
+                    Entrar
+                  </Button>
+                </Stack>
+              </Card>
+              <Card
+                sx={{ width: '100%', padding: '20px' }}
+                elevation={4}
+                variant="elevation"
+              >
+                <Stack justifyContent="flex-start" spacing={1}>
+                  <h3 style={{ fontWeight: 500 }}>Próximas Atividades</h3>
                   {announcementsTabData.upcomingAssignments.map(ua => (
                     <Link sx={{ fontSize: '15px' }} key={ua.id}>
                       {ua.title}
@@ -225,7 +288,7 @@ function View({
                   ))}
                 </Stack>
               </Card>
-            </Container>
+            </Stack>
             <Stack
               sx={{ width: '100%' }}
               alignItems="center"