From b71d21c7059f3796b3076d619650d66c3d9c2ae7 Mon Sep 17 00:00:00 2001
From: darylblough <darylxcuf@gmail.com>
Date: Sun, 10 Sep 2023 14:03:33 +0100
Subject: [PATCH] updated close icon to bootstrap icon so it appears on mobile
 devices

---
 package-lock.json | 12 ++++++++++++
 package.json      |  1 +
 src/App.jsx       |  3 ++-
 src/index.css     |  5 +++--
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0461c03..9c6d284 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,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",
@@ -14825,6 +14826,17 @@
         }
       }
     },
+    "node_modules/react-bootstrap-icons": {
+      "version": "1.10.3",
+      "resolved": "https://registry.npmjs.org/react-bootstrap-icons/-/react-bootstrap-icons-1.10.3.tgz",
+      "integrity": "sha512-j4hSby6gT9/enhl3ybB1tfr1slZNAYXDVntcRrmVjxB3//2WwqrzpESVqKhyayYVaWpEtnwf9wgUQ03cuziwrw==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.6"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
diff --git a/package.json b/package.json
index 7d75ee9..3edb382 100644
--- 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
index b5ed375..b3454ab 100644
--- 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
index 006839b..8a6de7d 100644
--- 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 */