fix: syllabus minor styling issues

wasedatime · May 29, 2022 · 4bc712d · 4bc712d
1 parent 626ceca
commit 4bc712d
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 24 deletions.
diff --git a/syllabus/src/components/CourseItem.tsx b/syllabus/src/components/CourseItem.tsx
@@ -324,7 +324,7 @@ const CourseItem = ({
         }}
         className="bg-white hover:bg-light-bgSide dark:bg-dark-bgMain dark:border-dark-text3 dark:shadow-none dark:hover:bg-dark-bgSide"
       >
-        <StyledHeading className="dark:text-dark-main">
+        <StyledHeading className="dark:text-dark-text1">
           {highlightedTitle}
         </StyledHeading>
         {expandable && (
@@ -369,7 +369,7 @@ const CourseItem = ({
 
         <DescriptionWrapper
           isLarger={isRelatedCourse}
-          className="dark:text-dark-text1"
+          className="dark:text-dark-text2"
         >
           <Description>{yearTerm}</Description>
           <Description>

diff --git a/syllabus/src/components/labs/Lab.tsx b/syllabus/src/components/labs/Lab.tsx
@@ -131,6 +131,10 @@ const ReviewsModal = styled.div`
   `}
 `;
 
+const LabHeader = styled.div`
+  padding: 1em;
+`;
+
 const ReviewsWrapper = styled(SimpleBar)`
   height: 100%;
   padding: 1em;
@@ -260,11 +264,12 @@ const Lab = ({ name, reviews, school }) => {
 
       {open && (
         <ReviewsModal className="bg-light-bgMain text-light-text2 dark:bg-dark-bgMain dark:text-dark-text2">
-          <ReviewsWrapper>
+          <LabHeader>
             <CloseButton onClick={() => setOpen(false)}>×</CloseButton>
-
             <ReviewProfName>{name}</ReviewProfName>
+          </LabHeader>
 
+          <ReviewsWrapper>
             <SectionHeader>{t("labs.review.Basics")}</SectionHeader>
             {itemTable("theme")}
             {itemTable("coreTime")}

diff --git a/syllabus/src/components/syllabus/SchoolFilterForm.tsx b/syllabus/src/components/syllabus/SchoolFilterForm.tsx
@@ -62,6 +62,14 @@ const WiderPopup = styled(Popup)<ThemeComponentProps>`
 `;
 
 const StyledTab = styled(Tab)<ThemeComponentProps>`
+  .tabular.menu {
+    display: flex;
+    flex-direction: row;
+    .item {
+      flex: 1;
+    }
+  }
+
   ${(props) =>
     props.$isDark &&
     `

diff --git a/syllabus/src/components/timetable/Timetable.tsx b/syllabus/src/components/timetable/Timetable.tsx
@@ -53,8 +53,14 @@ const ScrollableTimetable = styled("div")`
   -webkit-overflow-scrolling: touch;
 `;
 
-const StyledMessage = styled(Message)<StyledMessageProps>`
-  ${(props) => props.$isDark && "opacity: 0.6;"}
+const StyledWarningMessage = styled(Message)<StyledMessageProps>`
+  ${(props) => props.$isDark && `background-color: ${timetableColors.dark.deeperBrown} !important;`}
+  ${(props) => props.$isDark && `color: ${timetableColors.dark.lightBrown} !important;`}
+`;
+
+const StyledSuccessMessage = styled(Message)<StyledMessageProps>`
+  ${(props) => props.$isDark && `background-color: ${timetableColors.dark.deepGreen} !important;`}
+  ${(props) => props.$isDark && `color: ${timetableColors.dark.lightGreen} !important;`}
 `;
 
 interface Props extends WithTranslation {
@@ -122,27 +128,15 @@ const Timetable = ({ addedCoursesAndPrefs, t }: Props) => {
                 </h5>
                 <br />
                 <Section>
-                  <Message
+                  <StyledWarningMessage
                     warning
                     header={
-                      <h5
-                        style={
-                          theme === "dark"
-                            ? { color: timetableColors.light.lightBrown }
-                            : {}
-                        }
-                      >
+                      <h5>
                         <b>{t("timetable.You haven't added any courses")}</b>
                       </h5>
                     }
                     content={
-                      <p
-                        style={
-                          theme === "dark"
-                            ? { color: timetableColors.light.lightBrown }
-                            : {}
-                        }
-                      >
+                      <p>
                         {t("timetable.Go to")}{" "}
                         <a href="/syllabus">{t("timetable.Syllabus")} </a>{" "}
                         {t("timetable.and try adding one!")}
@@ -153,9 +147,9 @@ const Timetable = ({ addedCoursesAndPrefs, t }: Props) => {
                   />
                 </Section>
                 <Section>
-                  <StyledMessage success size="mini" $isDark={theme === "dark"}>
+                  <StyledSuccessMessage success size="mini" $isDark={theme === "dark"}>
                     <p>{t("timetable.SaveSpace")}</p>
-                  </StyledMessage>
+                  </StyledSuccessMessage>
                 </Section>
               </Article>
             </Wrapper>

diff --git a/syllabus/src/containers/SyllabusContainer.tsx b/syllabus/src/containers/SyllabusContainer.tsx
@@ -401,7 +401,7 @@ class SyllabusContainer extends React.Component<
                 />
               ) : (
                 <div style={{ padding: "2em" }}>
-                  <Message info>{t("message.choose school request")}</Message>
+                  <Message info style={theme === "dark" ? { opacity: 0.7 } : {}}>{t("message.choose school request")}</Message>
                   <SchoolFilterContainer
                     checkedSchools={[]}
                     handleToggleFilter={() => {}}