Update welcome page css

source-academy · Jun 21, 2021 · 9ba4cb4 · 9ba4cb4
1 parent ce04285
commit 9ba4cb4
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 24 deletions.
diff --git a/src/pages/githubAssessments/GitHubClassroomWelcome.tsx b/src/pages/githubAssessments/GitHubClassroomWelcome.tsx
@@ -1,31 +1,34 @@
-import { H2, H4, UL } from '@blueprintjs/core';
-
-import ContentDisplay from '../../commons/ContentDisplay';
+import { Card, H2, H4, UL } from '@blueprintjs/core';
 
 const GitHubClassroomWelcome: React.FC = () => {
-  const content = (
-    <div>
-      <H2>Welcome to Source Academy with GitHub Classroom!</H2>
-      <br />
-      <H4>Source Academy does not find any course information for this account.</H4>
-      <div style={{ display: 'flex', justifyContent: 'center' }}>
-        <UL style={{ textAlign: 'justify', width: '60%' }}>
-          <li>
-            If you are enrolled in a Source Academy course that uses GitHub Classroom, check with
-            the course staff to make sure your account is added to the course.
-          </li>
-          <li>
-            If you are looking for a course to join, check{' '}
-            <a href="https://github.com/source-academy/general/blob/master/learner/README.md">
-              here
-            </a>{' '}
-            to find a course that suits your needs.
-          </li>
-        </UL>
-      </div>
+  return (
+    <div className="github-welcome">
+      <Card className="github-welcome-content">
+        <div style={{ marginTop: '20px', display: 'flex', justifyContent: 'center' }}>
+          <div>
+            <H2>Welcome to Source Academy with GitHub Classroom!</H2>
+            <br />
+            <H4>Source Academy does not find any course information for this account.</H4>
+            <div style={{ display: 'flex', justifyContent: 'center' }}>
+              <UL style={{ textAlign: 'justify' }}>
+                <li>
+                  If you are enrolled in a Source Academy course that uses GitHub Classroom, check
+                  with the course staff to make sure your account is added to the course.
+                </li>
+                <li>
+                  If you are looking for a course to join, check{' '}
+                  <a href="https://github.com/source-academy/general/blob/master/learner/README.md">
+                    here
+                  </a>{' '}
+                  to find a course that suits your needs.
+                </li>
+              </UL>
+            </div>
+          </div>
+        </div>
+      </Card>
     </div>
   );
-  return <ContentDisplay display={content} loadContentDispatch={() => {}} />;
 };
 
 export default GitHubClassroomWelcome;
diff --git a/src/styles/_github.scss b/src/styles/_github.scss
@@ -41,3 +41,19 @@
   width: auto;
   overflow-y: scroll;
 }
+
+.github-welcome {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  text-align: center;
+
+  .github-welcome-content {
+    padding: 10px 20px 10px 20px;
+    display: inline-block;
+    margin: 0 0 10px 0;
+    width: 80%;
+    @include mQ(750px) {
+      width: 90%;
+    }
+  }
+}