wip css styling nav panel

client/src/components/NavPanel.jsx

@@ -1,7 +1,8 @@
 import React, {useMemo} from 'react';
 import { useNavigate } from "react-router-dom";
 import Button from "./Button";
-import providers from "../data/providers.json"
+import providers from "../data/providers.json";
+import '../styles/NavPanel.css'
 
 const NavPanel = ({provider_id}) => {
     const navigate = useNavigate();
@@ -27,18 +28,20 @@ const NavPanel = ({provider_id}) => {
     return (
         <>
         <div className="nav-panel">
+            <div className="nav-arrows">
             <span>
             <Button className="button arrow" text={"<"} onClick={handleGoLeft} />
 
             </span>
             <span>
             <Button className="button arrow" text={">"} onClick={handleGoRight} />
-
             </span>
+
+            </div>
             <div className="current-provider">
-            <span align="center">
-                <Button className="button provider_name" text={
-                <span>
+            <span >
+                <Button className="button" text={
+                <span className="provider_name">
                     {
                         `${providers[provider_data?.current].name}`
                     }

client/src/styles/NavPanel.css

@@ -1,25 +1,32 @@
 .nav-panel {
+    border: 2px solid black;
+    border-radius:12px;
     align-items: center;
-    display: flex;
+
+    /* display: flex; */
 }
 .arrow {
     align-items: center;
-    padding: 10px;
-    display: flex;
+    /* display: flex; */
     flex-direction: row;
 }
-
+.nav-arrows {
+    padding: 20px;
+}
 .current-provider {
     align-items:center;
     padding: 15px;
     display: flex;
-    flex-direction: row;
-    width: 200px;
+    flex-direction: column;
+    /* width: 200px; */
 }
 .provider_name {
-    display:flex;
-    align-items: center;
-    justify-content: center;
-    width: 250px;
-    margin: 20px;
+    /* display: flex; */
+    /* align-items: center; */
+    /* flex-direction: row; */
+    /* padding: 0px; */
+    /* height: 0px; */
+    /* width: 100%; */
+    /* margin: 0px; */
+    /* text-align: center; */
 }