Merge pull request #20 from leomurca/feature/professor_classroomHEADmain

Feature/professor classroom

1 files changed, 138 insertions, 0 deletions

diff --git a/src/screens/professor/Classroom/AssignmentsTab/styles.js b/src/screens/professor/Classroom/AssignmentsTab/styles.js
new file mode 100644
index 0000000..0493789
--- /dev/null
+++ b/src/screens/professor/Classroom/AssignmentsTab/styles.js
@@ -0,0 +1,138 @@
+// ========== Desktop ==========
+const desktopExternalContainer = {
+  display: 'flex',
+  flexDirection: 'column',
+  marginTop: '50px',
+  height: '100vh',
+  alignItems: 'flex-end',
+};
+
+const desktopInnerContainer = {
+  width: '90%',
+  marginBottom: '30px',
+};
+
+const desktopSectionTitle = {
+  padding: '10px',
+  borderBottom: '2px solid #00420D',
+  color: '#00420D',
+};
+
+const desktopAssignmentContainer = {
+  width: '95%',
+  padding: '20px',
+  borderBottom: '2px solid #BCBCBC',
+};
+
+const desktopAssignmentTypography = {};
+
+const desktopAssignmentLink = {
+  color: 'black',
+  textDecoration: 'underline #000000',
+};
+
+const desktopAssignmentDueDate = {
+  marginTop: '15px',
+  fontSize: '15px',
+};
+
+const desktopAssignmentScores = {
+  fontSize: '15px',
+};
+
+const desktopEmptyStateContainer = {
+  display: 'flex',
+  justifyContent: 'center',
+  marginTop: '30px',
+};
+
+const desktop = {
+  externalContainer: desktopExternalContainer,
+  innerContainer: desktopInnerContainer,
+  sectionTitle: desktopSectionTitle,
+  assignmentContainer: desktopAssignmentContainer,
+  assignmentTypography: desktopAssignmentTypography,
+  assignmentLink: desktopAssignmentLink,
+  assignmentDueDate: desktopAssignmentDueDate,
+  assignmentScores: desktopAssignmentScores,
+  emptyStateContainer: desktopEmptyStateContainer,
+};
+
+// ========== Mobile ==========
+const mobileExternalContainer = {
+  marginTop: '50px',
+  height: '100vh',
+};
+
+const mobileInnerContainer = {
+  width: '100%',
+  marginBottom: '30px',
+  marginTop: '30px',
+};
+
+const mobileSectionTitle = {
+  padding: '10px',
+  borderBottom: '2px solid #00420D',
+  color: '#00420D',
+};
+
+const mobileAssignmentContainer = {
+  width: '100%',
+  padding: '20px',
+  borderBottom: '2px solid #BCBCBC',
+};
+
+const mobileAssignmentTypography = {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  display: '-webkit-box',
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: 'vertical',
+};
+
+const mobileAssignmentLink = {
+  color: 'black',
+  textDecoration: 'underline #000000',
+};
+
+const mobileAssignmentDueDate = {
+  marginTop: '10px',
+  fontSize: '12px',
+};
+
+const mobileAssignmentScores = {
+  fontSize: '12px',
+};
+
+const mobileEmptyStateContainer = {
+  display: 'flex',
+  justifyContent: 'center',
+  marginTop: '30px',
+};
+
+const mobile = {
+  externalContainer: mobileExternalContainer,
+  innerContainer: mobileInnerContainer,
+  sectionTitle: mobileSectionTitle,
+  assignmentContainer: mobileAssignmentContainer,
+  assignmentTypography: mobileAssignmentTypography,
+  assignmentLink: mobileAssignmentLink,
+  assignmentDueDate: mobileAssignmentDueDate,
+  assignmentScores: mobileAssignmentScores,
+  emptyStateContainer: mobileEmptyStateContainer,
+};
+
+// ========== Unset ==========
+const unset = {
+  externalContainer: null,
+  innerContainer: null,
+  sectionTitle: null,
+  assignmentContainer: null,
+  assignmentTypography: null,
+  assignmentLink: null,
+  assignmentDueDate: null,
+  assignmentScores: null,
+};
+
+const styles = { desktop, mobile, unset };
+export default styles;