Fix outline icons

csmberkeley · Feb 29, 2024 · 06c5b85 · 06c5b85
1 parent c747328
commit 06c5b85
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 4 deletions.
diff --git a/csm_web/frontend/src/components/App.tsx b/csm_web/frontend/src/components/App.tsx
@@ -141,7 +141,7 @@ function Header(): React.ReactElement {
           <h3 className="site-subtitle">Policies</h3>
         </NavLink>
         <a id="logout-btn" href="/logout" title="Log out">
-          <LogOutIcon width="1.25em" height="1.25em" />
+          <LogOutIcon className="icon" />
         </a>
       </div>
     </header>

diff --git a/csm_web/frontend/src/components/enrollment_automation/coordinator/ReleaseStage.tsx b/csm_web/frontend/src/components/enrollment_automation/coordinator/ReleaseStage.tsx
@@ -548,7 +548,7 @@ function MentorListItem({
     <div className={classString}>
       {removeIcon}
       <EyeIcon
-        className="icon mentor-list-icon mentor-list-item-view"
+        className="icon outline mentor-list-icon mentor-list-item-view"
         onClick={() => hasPreferences && setSelectedMentor(mentor)}
       />
       <div className="mentor-list-item-name">{mentor.name}</div>

diff --git a/csm_web/frontend/src/css/base/base.scss b/csm_web/frontend/src/css/base/base.scss
@@ -66,6 +66,11 @@ h6 {
   stroke: currentcolor;
 }
 
+// some icons are outline icons that require no fill
+.icon.outline {
+  fill: none;
+}
+
 /// Styling for relation label; used across multiple pages
 .relation-label {
   min-width: 60px;

diff --git a/csm_web/frontend/src/css/header.scss b/csm_web/frontend/src/css/header.scss
@@ -60,12 +60,12 @@ header {
   margin: auto 5px auto 30px;
 }
 
-#logout-btn * {
+#logout-btn .icon {
   vertical-align: middle;
   fill: #808080;
 }
 
-#logout-btn:hover * {
+#logout-btn:hover .icon {
   fill: #5e5e5e;
 }
 

diff --git a/csm_web/frontend/src/css/section.scss b/csm_web/frontend/src/css/section.scss
@@ -213,6 +213,7 @@
 }
 
 #copy-student-emails {
+  margin-right: 8px;
   cursor: pointer;
 }