updated close icon to bootstrap icon so it appears on mobile devices

darylbg · Sep 10, 2023 · b71d21c · b71d21c
1 parent af5ca0f
commit b71d21c
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 3 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "gh-pages": "^6.0.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.8.0",
+    "react-bootstrap-icons": "^1.10.3",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "react-webcam": "^7.1.1",

diff --git a/src/App.jsx b/src/App.jsx
@@ -7,10 +7,11 @@ import Webcam from "react-webcam";
 import YoutubeEmbedVideo from "youtube-embed-video";
 import ViewMenu from "./components/ViewMenu";
 import Dropdown from "react-bootstrap/Dropdown";
+import { X } from "react-bootstrap-icons";
 import {
   MoreHorizontal,
   MicOff,
-  X,
+  // X,
 } from "feather-icons-react/build/IconComponents";
 import "split-pane-react/esm/themes/default.css";
 import "./index.css";

diff --git a/src/index.css b/src/index.css
@@ -233,19 +233,20 @@ input:focus-visible {
   border-radius: 50%;
   margin-left: 5px;
   margin-top: 5px;
+  padding: 0;
 }
 
 .btn-box-shadow {
   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
 }
 
-.close-sidebar-btn:hover {
+.btn-box-shadow:hover {
   box-shadow: 1px 6px 10px rgba(0, 0, 0, 0.5);
   transition: all ease-in-out 0.2s;
 }
 
 .close-sidebar-btn svg {
-  height: 15px;
+  font-size: 30px;
 }
 
 /* search results */