update styling of footer and about section to include some more margi…

…n and padding
nattvara · Apr 20, 2024 · 6f82008 · 6f82008
1 parent b5903f2
commit 6f82008
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 8 deletions.
diff --git a/gui/components/promo/AboutTheStudy/AboutTheStudy.tsx b/gui/components/promo/AboutTheStudy/AboutTheStudy.tsx
@@ -4,7 +4,7 @@ import styles from "./styles.module.css";
 
 const AboutTheStudy = () => {
   return (
-    <section id="about-the-study">
+    <section id="about-the-study" className={styles.section}>
       <Container>
         <SimpleGrid cols={1}>
           <Title order={1} className={styles.title}>

diff --git a/gui/components/promo/AboutTheStudy/styles.module.css b/gui/components/promo/AboutTheStudy/styles.module.css
@@ -1,4 +1,9 @@
 
+.section {
+  margin-top: 100px;
+  margin-bottom: 100px;
+}
+
 .title {
   text-align: center;
   margin-bottom: 2rem;

diff --git a/gui/components/promo/Footer/Footer.tsx b/gui/components/promo/Footer/Footer.tsx
@@ -10,25 +10,20 @@ const Footer = () => {
     <footer className={styles.footer}>
       <Container>
         <Grid gutter={0}>
-          <Grid.Col span={5}>
+          <Grid.Col span={12}>
             <Space h="xl" />
             <Text size="xl" mb="md">
               Course Copilot
             </Text>
             <Text mb="xs">This project is part of a master&apos;s thesis at KTH Royal Institute of Technology.</Text>
             <Space h="xl" />
-            <Space h="xl" />
-          </Grid.Col>
-          <Grid.Col span={5} offset={2}>
-            <Space h="xl" />
-            <Space h="xl" />
             <Button
               leftSection={<IconMail size={14} />}
               variant="default"
               component="a"
               href={`mailto:${ContactEmail}`}
             >
-              Contact Researcher
+              Contact the researcher
             </Button>
           </Grid.Col>
         </Grid>

diff --git a/gui/components/promo/Footer/styles.module.css b/gui/components/promo/Footer/styles.module.css
@@ -1,4 +1,6 @@
 
 .footer {
   background-color: var(--mantine-color-gray-2);
+  padding-top: 100px;
+  padding-bottom: 200px;
 }