From 79bb38a09866c804e7574983ed75b0adfe867b6f Mon Sep 17 00:00:00 2001
From: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>
Date: Thu, 16 Nov 2023 13:38:59 -0500
Subject: [PATCH] fix: use styles from frontend-content-header (#690)

---
 src/header/Header.jsx  | 22 +++++++-------
 src/header/header.scss | 65 ------------------------------------------
 src/index.scss         |  2 +-
 3 files changed, 11 insertions(+), 78 deletions(-)
 delete mode 100644 src/header/header.scss

diff --git a/src/header/Header.jsx b/src/header/Header.jsx
index 2cde27f8c..6cb4147f0 100644
--- a/src/header/Header.jsx
+++ b/src/header/Header.jsx
@@ -36,18 +36,16 @@ const Header = ({
   ];
   const outlineLink = `${studioBaseUrl}/course/${courseId}`;
   return (
-    <div className="site-header-desktop">
-      <StudioHeader
-        {...{
-          org: courseOrg,
-          number: courseNumber,
-          title: courseTitle,
-          isHiddenMainMenu,
-          mainMenuDropdowns,
-          outlineLink,
-        }}
-      />
-    </div>
+    <StudioHeader
+      {...{
+        org: courseOrg,
+        number: courseNumber,
+        title: courseTitle,
+        isHiddenMainMenu,
+        mainMenuDropdowns,
+        outlineLink,
+      }}
+    />
   );
 };
 
diff --git a/src/header/header.scss b/src/header/header.scss
deleted file mode 100644
index 43443641c..000000000
--- a/src/header/header.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-// This SCSS was partly copied from edx/frontend-app-support-tools/src/support-header/index.scss.
-$spacer: 1rem;
-$white: #FFFFFF;
-
-.btn-tertiary:hover {
-  color: white;
-  background-color: #00262B;
-}
-
-.course-title-lockup {
-  @media only screen and (max-width: 768px) {
-    padding-left: .5rem;
-    max-width: 70%;
-  }
-
-  @media only screen and (min-width: 769px) {
-    padding: .5rem;
-    padding-right: $spacer;
-    border-right: 1px solid #E5E5E5;
-    min-width: 70%;
-  }
-
-  overflow: hidden;
-
-  span {
-    color: #333333;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    line-height: 1.375rem;
-  }
-}
-
-.site-header-mobile,
-.site-header-desktop {
-  position: relative;
-  z-index: 1000;
-}
-
-.site-header-mobile {
-  img {
-    height: 1.5rem;
-  }
-}
-
-.site-header-desktop {
-  height: 3.75rem;
-  box-shadow: 0 1px 0 0 rgb(0 0 0 / .1);
-  background: $white;
-
-  .logo {
-    display: block;
-    box-sizing: content-box;
-    position: relative;
-    top: -.05em;
-    height: 1.75rem;
-    padding: $spacer 0;
-    margin-right: $spacer;
-
-    img {
-      display: block;
-      height: 100%;
-    }
-  }
-}
diff --git a/src/index.scss b/src/index.scss
index 2146be3a4..3a9f9c170 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -2,7 +2,7 @@
 @import "~@edx/brand/paragon/variables";
 @import "~@edx/paragon/scss/core/core";
 @import "~@edx/brand/paragon/overrides";
-@import "header/header";
+@import "~@edx/frontend-component-header/dist/index";
 @import "assets/scss/variables";
 @import "assets/scss/form";
 @import "assets/scss/utilities";