update button group styling

explorer-nextjs/package.json

@@ -12,6 +12,7 @@
     "@emotion/cache": "^11.13.5",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
+    "@mui/icons-material": "^5.16.11",
     "@mui/material": "^6.1.10",
     "@mui/material-nextjs": "^6.1.9",
     "@types/react-copy-to-clipboard": "^5.0.7",

explorer-nextjs/src/app/account/page.tsx

@@ -0,0 +1,31 @@
+import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
+import { Wrapper } from "@/components/wrapper";
+import { Box, Typography } from "@mui/material";
+
+export default function AccountPage() {
+  return (
+    <div>
+      <main>
+        <Box sx={{ p: 5 }}>
+          <Wrapper>
+            <Typography fontWeight="light">Account page</Typography>
+            <ExplorerButtonGroup
+              options={[
+                {
+                  label: "Node",
+                  link: "/node",
+                  isSelected: false,
+                },
+                {
+                  label: "Account",
+                  link: "/account",
+                  isSelected: true,
+                },
+              ]}
+            />
+          </Wrapper>
+        </Box>
+      </main>
+    </div>
+  );
+}

explorer-nextjs/src/app/explorer/page.tsx

@@ -1,3 +1,4 @@
+import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
 import { Wrapper } from "@/components/wrapper";
 import { Box, Typography } from "@mui/material";
 
@@ -8,6 +9,20 @@ export default function ExplorerPage() {
         <Box sx={{ p: 5 }}>
           <Wrapper>
             <Typography fontWeight="light">Explorer page</Typography>
+            <ExplorerButtonGroup
+              options={[
+                {
+                  label: "Node",
+                  link: "/explorer",
+                  isSelected: true,
+                },
+                {
+                  label: "Account",
+                  link: "/stake",
+                  isSelected: false,
+                },
+              ]}
+            />
           </Wrapper>
         </Box>
       </main>

explorer-nextjs/src/app/node/page.tsx

@@ -0,0 +1,31 @@
+import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
+import { Wrapper } from "@/components/wrapper";
+import { Box, Typography } from "@mui/material";
+
+export default function NodePage() {
+  return (
+    <div>
+      <main>
+        <Box sx={{ p: 5 }}>
+          <Wrapper>
+            <Typography fontWeight="light">Node page</Typography>
+            <ExplorerButtonGroup
+              options={[
+                {
+                  label: "Node",
+                  link: "/node",
+                  isSelected: true,
+                },
+                {
+                  label: "Account",
+                  link: "/account",
+                  isSelected: false,
+                },
+              ]}
+            />
+          </Wrapper>
+        </Box>
+      </main>
+    </div>
+  );
+}

explorer-nextjs/src/components/starRating/StarRating.tsx

@@ -1,4 +1,4 @@
-import { StarOutlineRounded, StarRounded } from "@mui/icons-material/";
+import { StarOutlineRounded, StarRounded } from "@mui/icons-material";
 import { Rating } from "@mui/material";
 
 const StarRating = ({

explorer-nextjs/src/components/toggleButton/ToggleButton.tsx

@@ -1,11 +1,13 @@
-import { Box, Button, ButtonGroup } from "@mui/material";
+import { Button, ButtonGroup } from "@mui/material";
 import { Link } from "../muiLink";
 
-type Options = {
+type Option = {
   label: string;
   isSelected: boolean;
   link: string;
-}[];
+};
+
+type Options = [Option, Option];
 
 const ExplorerButtonGroup = ({
   size = "small",
@@ -28,11 +30,9 @@ const ExplorerButtonGroup = ({
                 ? "primary.contrastText"
                 : "text.primary",
               "&:hover": {
-                bgcolor: option.isSelected
-                  ? "primary.main"
-                  : "background.paper",
+                bgcolor: option.isSelected ? "primary.main" : "",
               },
-              bgcolor: option.isSelected ? "primary.main" : "background.paper",
+              bgcolor: option.isSelected ? "primary.main" : "transparent",
             }}
             variant="outlined"
           >

package.json

@@ -13,7 +13,6 @@
     "ts-packages/*",
     "nym-wallet",
     "explorer",
-    "explorer-nextjs",
     "types",
     "clients/validator"
   ],
@@ -57,4 +56,4 @@
   "dependencies": {
     "lucide-react": "^0.453.0"
   }
-}
+}