Update dark mode UI to use Bootstrap icons

Issue-ID: AIMLFW-143

Change-Id: I9f948209ab7cc1fe39d623c58255f632dfefb623
Signed-off-by: Sohyeon Kim <sooooooohyeon5@naver.com>

diff --git a/package.json b/package.json
index 77de203..d71a6c6 100644 (file)
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^14.5.2",
     "axios": "^1.7.3",
     "bootstrap": "^5.3.3",
+    "bootstrap-icons": "^1.11.3",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.4",
     "react-dom": "^18.3.1",

diff --git a/src/components/home/navbar/NavbarComponent.js b/src/components/home/navbar/NavbarComponent.js
index d09261b..7c8c95f 100644 (file)
--- a/src/components/home/navbar/NavbarComponent.js
+++ b/src/components/home/navbar/NavbarComponent.js
@@ -18,6 +18,7 @@
 
 import React, { useState, useEffect } from 'react';
 import { Container, Nav, Navbar, NavDropdown, Button } from 'react-bootstrap';
+import 'bootstrap-icons/font/bootstrap-icons.css';
 import './NavbarComponent.css';
 
 function NavbarComponent() {
@@ -48,7 +49,7 @@ function NavbarComponent() {
             <NavDropdown.Item href='/TrainingJob/ListFeatureGroups'>List Feature Group</NavDropdown.Item>
           </NavDropdown>
           <Button onClick={toggleDarkMode} variant={isDarkMode ? 'dark' : 'primary'}>
-            {isDarkMode ? '🌞' : '🌜'}
+            {isDarkMode ? <i className='bi bi-sun-fill'></i> : <i className='bi bi-moon-stars-fill'></i>}
           </Button>
         </Nav>
       </Container>