Added Christmas Tree svg to header

csm_web/frontend/src/components/App.tsx

@@ -13,6 +13,7 @@ import Section from "./section/Section";
 // Images
 import LogoNoText from "../../static/frontend/img/logo_no_text.svg";
 import LogOutIcon from "../../static/frontend/img/log_out.svg";
+import ChristmasTree from "../../static/frontend/img/christmas-tree.svg"; 
 
 // Styles
 import "../css/header.scss";
@@ -117,26 +118,38 @@ function Header(): React.ReactElement {
   }, [profiles, matcherActiveCourses]);
 
   return (
-    <header>
+    <header className="site-header">
       <div className="site-title-group">
         <Link to="/">
           <LogoNoText id="logo" />
         </Link>
         <NavLink className={homeNavlinkClass} to="/">
-          <h3 className="site-title">Scheduler</h3>
+          <h3 className="site-title">
+            Scheduler
+            <ChristmasTree className="christmastree"/>
+          </h3>
         </NavLink>
         <NavLink to="/resources" className={navlinkClass}>
-          <h3 className="site-title">Resources</h3>
+          <h3 className="site-title">
+            Resources
+            <ChristmasTree className="christmastree"/>
+          </h3>
         </NavLink>
         {activeMatcherRoles["COORDINATOR"].size > 0 || activeMatcherRoles["MENTOR"].size > 0 ? (
           <NavLink to="/matcher" className={navlinkClass}>
-            <h3 className="site-title">Matcher</h3>
+            <h3 className="site-title">
+              Matcher
+              <ChristmasTree className="christmastree"/>
+            </h3>
           </NavLink>
         ) : null}
       </div>
       <div className="site-title-group">
         <NavLink to="/policies" className={navlinkClassSubtitle}>
-          <h3 className="site-subtitle">Policies</h3>
+          <h3 className="site-subtitle">
+            Policies
+            <ChristmasTree className="christmastree"/>
+          </h3>
         </NavLink>
         <a id="logout-btn" href="/logout" title="Log out">
           <LogOutIcon width="1.25em" height="1.25em" />

csm_web/frontend/src/css/base/_variables.scss

@@ -1,9 +1,9 @@
 /// Colors
 
 // --csm-green: rgb(124, 233, 162);
-$csm-green: #9ae0b3;
-$csm-green-darkened: #75b38a;
-$csm-green-lightened: #d7ffe5;
+$csm-green: #ffaf4d;
+$csm-green-darkened: #cc7000;
+$csm-green-lightened: #ffd580;
 $csm-theme-csm61a: $csm-green;
 $csm-theme-csm61b: #63c5ff;
 $csm-theme-csm61c: #797c99;
@@ -41,7 +41,7 @@ $calendar-dragging-event: #ffd6dd;
 $calendar-creating-event: lightpink;
 $calendar-hover-event: #d2ffd2;
 $calendar-hover-shadow: #ccc;
-$calendar-select-event: #90ee90;
+$calendar-select-event: #cc7000;
 
 /// Fonts
 $default-font: "Montserrat", sans-serif;

csm_web/frontend/src/css/header.scss

@@ -12,11 +12,16 @@ header {
   box-shadow: 0 4px 4px rgb(188 188 188 / 25%);
 }
 
+body {
+  margin: 0;
+  padding: 0;
+}
+
 /// individual groups of site title items
 .site-title-group {
   display: flex;
   gap: 20px;
-  align-items: center;
+  margin: 0;
 }
 
 #logo {
@@ -110,3 +115,8 @@ header {
 .center-title {
   text-align: center;
 }
+
+.christmastree {
+  height: 30px;
+  width: 30px;
+}