change close button style for backdrops

Author: neel1996

ui/src/Components/DashBoard/Repository/GitComponents/GitOperation/GitOperationComponent.js

@@ -7,6 +7,7 @@ import "../../../../styles/GitOperations.css";
 import CommitComponent from "./CommitComponent";
 import PushComponent from "./PushComponent";
 import StageComponent from "./StageComponent";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export default function GitOperationComponent(props) {
   library.add(fab);
@@ -435,16 +436,18 @@ export default function GitOperationComponent(props) {
           }}
         >
           {actionComponent(action)}
-
           <div
-            className="git-ops--backdrop--close"
+            className="w-14 h-14 mr-5 mt-6 rounded-full bg-red-500 text-white flex justify-center items-center shadow cursor-pointer fixed right-0 top-0"
             onClick={() => {
               setAction("");
               const localReload = viewReload + 1;
               setViewReload(localReload);
             }}
           >
-            X
+            <FontAwesomeIcon
+              className="flex text-center text-3xl my-auto"
+              icon={["fas", "times"]}
+            ></FontAwesomeIcon>
           </div>
         </div>
       ) : null}

ui/src/Components/DashBoard/Repository/RepoComponents/RepoDetails/FileExplorerComponent.js

@@ -337,14 +337,16 @@ export default function FileExplorerComponent(props) {
               }}
             >
               <div
-                className="close-btn-round"
+                className="w-14 h-14 mr-5 mt-6 rounded-full bg-red-500 text-white flex justify-center items-center shadow cursor-pointer fixed right-0 top-0"
                 onClick={() => {
                   setCodeViewToggle(false);
                 }}
               >
-                X
+                <FontAwesomeIcon
+                  className="flex text-center text-3xl my-auto"
+                  icon={["fas", "times"]}
+                ></FontAwesomeIcon>
               </div>
-
               <div className="code-view-area">
                 {memoizedCodeFileViewComponent}
               </div>

ui/src/Components/DashBoard/Repository/RepoComponents/RepoDetails/RepositoryDetails.js

@@ -229,20 +229,23 @@ export default function RepositoryDetails(props) {
               }
             }}
           >
-            <div
-              className="commitlogs-view"
-              onClick={() => {
-                setShowCommitLogs(false);
-              }}
-            >
-              X
-            </div>
             <div
               id="commit-log__cards"
               className="w-full xl:w-3/4 lg:w-5/6 md:w-11/12 sm:w-11/12 h-full block mx-auto my-auto mt-10 mb-10"
             >
               {memoizedCommitLogComponent}
             </div>
+            <div
+              className="w-14 h-14 mr-5 mt-6 rounded-full bg-red-500 text-white flex justify-center items-center shadow cursor-pointer fixed right-0 top-0"
+              onClick={() => {
+                setShowCommitLogs(false);
+              }}
+            >
+              <FontAwesomeIcon
+                className="flex text-center text-3xl my-auto"
+                icon={["fas", "times"]}
+              ></FontAwesomeIcon>
+            </div>
           </div>
         </>
       ) : null}
@@ -260,15 +263,18 @@ export default function RepositoryDetails(props) {
         >
           <>{action ? actionComponentPicker() : null}</>
           <div
-            className="action-view"
+            className="w-14 h-14 mr-5 mt-6 rounded-full bg-red-500 text-white flex justify-center items-center shadow cursor-pointer fixed top-0 right-0"
             onClick={() => {
               setBackdropToggle(false);
               setCodeViewToggle(false);
               setReloadView(true);
               setAction("");
             }}
           >
-            X
+            <FontAwesomeIcon
+              className="flex text-center text-3xl my-auto"
+              icon={["fas", "times"]}
+            ></FontAwesomeIcon>
           </div>
         </div>
       ) : null}