From 8069a5fa7c60a7c7e2ed89efa7dced238807a20d Mon Sep 17 00:00:00 2001
From: SirrorsMoore1975 <SirrorsMoore1975@github.com>
Date: Fri, 8 Dec 2023 03:34:41 +0800
Subject: [PATCH] wip css styling nav panel

---
 client/src/components/NavPanel.jsx | 13 ++++++++-----
 client/src/styles/NavPanel.css     | 29 ++++++++++++++++++-----------
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/client/src/components/NavPanel.jsx b/client/src/components/NavPanel.jsx
index 7a02d44..aa73e82 100644
--- a/client/src/components/NavPanel.jsx
+++ b/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}`
                     }
diff --git a/client/src/styles/NavPanel.css b/client/src/styles/NavPanel.css
index 64ae166..8697cb6 100644
--- a/client/src/styles/NavPanel.css
+++ b/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; */
 }
\ No newline at end of file