Updating styles for the footer and course select

When we updated bootstrap, the elements in the footer became misaligned. To fix this, I used the classes from the current 5.1 version of bootstrap. Additionally, when selecting courses, the current version of MYR makes the header and paragraph of each course underlined. I just changed the style for this so that each part of the card does not have an underline upon opening the course menu. Then, when someone hovers over the course, only the header becomes underlined.
engaging-computing · May 15, 2023 · 7eb7657 · 7eb7657
1 parent c4f8287
commit 7eb7657
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 14 deletions.
diff --git a/src/components/structural/Footer.js b/src/components/structural/Footer.js
@@ -9,39 +9,39 @@ class Footer extends Component {
             <footer>
                 <div className="row m-3 text-center" >
                     <div className="col-lg-4 d-flex">
-                        <span><strong>MYR:</strong></span>
+                        <span><strong>MYR:&nbsp;</strong></span>
                         <ul className="pl-2 list-inline">
                             <li className="pl-2 list-inline-item">
-                                <a href="https://learnmyr.org/about/" target="_blank" rel="noopener noreferrer" className = "text-decoration-none">About</a>
+                                <a href="https://learnmyr.org/about/" target="_blank" rel="noopener noreferrer" className="text-decoration-none">About</a>
                             </li>
                             <li className="pl-2 list-inline-item">
                                 <a href="https://learnmyr.org/about/support/" target="_blank" rel="noopener noreferrer" className="text-decoration-none">Support</a>
                             </li>
                             <li className="pl-2 list-inline-item">
-                                <a href="https://learnmyr.org/about/team/" target="_blank" rel="noopener noreferrer" className = "text-decoration-none">Team </a>
+                                <a href="https://learnmyr.org/about/team/" target="_blank" rel="noopener noreferrer" className="text-decoration-none">Team</a>
                             </li>
                             <li className="pl-2 list-inline-item">
-                                <a href="https://github.com/engaging-computing/MYR" target="_blank" rel="noopener noreferrer" className = "text-decoration-none">GitHub</a>
+                                <a href="https://github.com/engaging-computing/MYR" target="_blank" rel="noopener noreferrer" className="text-decoration-none">GitHub</a>
                             </li>
                         </ul>
                     </div>
                     <div className="col-lg-4 d-none d-md-block text-center">
                         <div>© 2018 - {new Date().getFullYear()}<span>&nbsp;</span>
-                            <a href="https://sites.uml.edu/engaging-computing/" target="_blank" rel="noopener noreferrer" className = "text-decoration-none">University of Massachusetts Lowell, Engaging Computing Group</a>
+                            <a href="https://sites.uml.edu/engaging-computing/" target="_blank" rel="noopener noreferrer" className="text-decoration-none">University of Massachusetts Lowell, Engaging Computing Group</a>
                         </div>
                     </div>
                     <div className="col-sm-12 d-block d-md-none text-center">
                         <div>© 2018 - {new Date().getFullYear()}<br />
-                            <a href="https://sites.uml.edu/engaging-computing/" target="_blank" rel="noopener noreferrer" className = "text-decoration-none">University of Massachusetts Lowell,<br />Engaging Computing Group</a>
+                            <a href="https://sites.uml.edu/engaging-computing/" target="_blank" rel="noopener noreferrer" className="text-decoration-none">University of Massachusetts Lowell,<br />Engaging Computing Group</a>
                         </div>
                     </div>
                     <div className="col-lg-4">
-                        <ul className=" list-inline text-lg-right">
+                        <ul className=" list-inline text-lg-end">
                             <li className="pl-2 list-inline-item">
-                                <a href="https://learnmyr.org/about/privacy/" target="_blank" rel="noopener noreferrer" className = "text-decoration-none">Privacy Policy</a>
+                                <a href="https://learnmyr.org/about/privacy/" target="_blank" rel="noopener noreferrer" className="text-decoration-none">Privacy Policy</a>
                             </li>
                             <li className="pl-2 list-inline-item">
-                                <a href="https://learnmyr.org/about/tos/" target="_blank" rel="noopener noreferrer" className = "text-decoration-none">Terms of Service</a>
+                                <a href="https://learnmyr.org/about/tos/" target="_blank" rel="noopener noreferrer" className="text-decoration-none">Terms of Service</a>
                             </li>
                         </ul>
                     </div>

diff --git a/src/css/CourseSelect.css b/src/css/CourseSelect.css
@@ -4,12 +4,13 @@
     color: #333;
 }
 
-.course-listing p:hover {
-    color: #000;
+.course-listing a {
+    text-decoration: none;
 }
 
-.course-listing a:hover {
-    text-decoration: none;
+
+.course-listing a:hover h4 {
+    text-decoration: underline;
     color: blue;
 }
 
@@ -32,4 +33,4 @@ div#courses {
 #lesson fieldset {
     height: 16vh;
     margin: 0;
-}
+}