From abd66a137e76e6e68451e89dc491043535ef05fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= <leo@leomurca.xyz>
Date: Mon, 19 Dec 2022 21:46:09 -0300
Subject: [PATCH] Make publish announcement card and tabs responsive

---
 src/components/PublishAnnouncementCard/styles.js | 7 ++++++-
 src/screens/professor/Classroom/Header/index.js  | 2 +-
 src/screens/professor/Classroom/Header/styles.js | 4 +++-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/PublishAnnouncementCard/styles.js b/src/components/PublishAnnouncementCard/styles.js
index 282cd23..4bc58fd 100644
--- a/src/components/PublishAnnouncementCard/styles.js
+++ b/src/components/PublishAnnouncementCard/styles.js
@@ -19,12 +19,17 @@ const desktop = {
 // ========== Mobile ==========
 const mobilePublishAnnouncement = {
   cursor: 'pointer',
+  padding: '10px',
+  width: '100%',
   ':hover': {
     color: '#32A041',
   },
 };
 
-const mobileCard = {};
+const mobileCard = {
+  width: '100%',
+  padding: '10px ',
+};
 
 const mobile = {
   publishAnnouncement: mobilePublishAnnouncement,
diff --git a/src/screens/professor/Classroom/Header/index.js b/src/screens/professor/Classroom/Header/index.js
index 6a4a1a8..e077313 100644
--- a/src/screens/professor/Classroom/Header/index.js
+++ b/src/screens/professor/Classroom/Header/index.js
@@ -43,7 +43,7 @@ function Header({
           value={selectedTabOption}
           onChange={onSelectTabOption}
           aria-label="Tabs para informações da disciplina"
-          variant="fullWidth"
+          variant={layoutType === 'mobile' ? 'scrollable' : 'fullWidth'}
           sx={tabs}
         >
           {Object.values(TAB_OPTIONS).map(option => (
diff --git a/src/screens/professor/Classroom/Header/styles.js b/src/screens/professor/Classroom/Header/styles.js
index 58d19aa..babe6b3 100644
--- a/src/screens/professor/Classroom/Header/styles.js
+++ b/src/screens/professor/Classroom/Header/styles.js
@@ -6,14 +6,16 @@ const desktopTitle = {
 const desktopPaper = classColor => ({
   width: '100%',
   borderTop: `5px solid ${classColor}`,
-  padding: '20px',
+  padding: '30px',
 });
 
 const desktopTabs = {
+  display: 'flex',
   marginLeft: '-20px',
   marginRight: '-20px',
   marginBottom: '-20px',
   marginTop: '30px',
+  padding: '10px',
 };
 
 const desktopAvatar = {