wip: css NavPanel.jsx second attempt

Phone-Review-App · Dec 7, 2023 · ac7c5f6 · ac7c5f6
1 parent c61d9a6
commit ac7c5f6
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 7 deletions.
diff --git a/client/src/components/NavPanel.jsx b/client/src/components/NavPanel.jsx
@@ -27,10 +27,26 @@ const NavPanel = ({provider_id}) => {
     return (
         <>
         <div className="nav-panel">
+            <span>
             <Button className="button arrow" text={"<"} onClick={handleGoLeft} />
+
+            </span>
+            <span>
             <Button className="button arrow" text={">"} onClick={handleGoRight} />
+
+            </span>
             <div className="current-provider">
-                <Button className="button provider_name" text={`${providers[provider_data?.current].name}`}/>
+            <span align="center">
+                <Button className="button provider_name" text={
+                <span>
+                    {
+                        `${providers[provider_data?.current].name}`
+                    }
+                </span>
+                    } 
+                    ></Button> 
+
+            </span>
             </div>
         </div>
         </>

diff --git a/client/src/styles/NavPanel.css b/client/src/styles/NavPanel.css
@@ -1,10 +1,25 @@
 .nav-panel {
-    border: 10px solid black;
-    border-radius: 12px;
-    padding: 10px;
-    color:aqua;
-    text-align: center;
+    align-items: center;
+    display: flex;
 }
 .arrow {
-    width: 50px;
+    align-items: center;
+    padding: 10px;
+    display: flex;
+    flex-direction: row;
+}
+
+.current-provider {
+    align-items:center;
+    padding: 15px;
+    display: flex;
+    flex-direction: row;
+    width: 200px;
+}
+.provider_name {
+    display:flex;
+    align-items: center;
+    justify-content: center;
+    width: 250px;
+    margin: 20px;
 }