Merge pull request #688 from bugout-dev/landing-improvements

Fixing layout colors when logged in.

frontend/pages/dashboard/[dashboardId].js

@@ -112,6 +112,7 @@ const Analytics = () => {
         direction="column"
         alignItems="center"
         minH="100vh"
+        color="black"
       >
         <Stack
           direction={["column", "row", null]}
@@ -122,6 +123,7 @@ const Analytics = () => {
           <Editable
             as={Heading}
             colorScheme="blue"
+            textColor="white"
             placeholder="enter note here"
             defaultValue={dashboardCache.data.resource_data.name}
             onSubmit={(nextValue) =>

frontend/pages/welcome.js

@@ -27,7 +27,7 @@ const Welcome = () => {
 
   return (
     <Scrollable>
-      <Stack px="7%" pt={4} w="100%" spacing={4} ref={scrollRef}>
+      <Stack px="7%" pt={4} w="100%" color="black" spacing={4} ref={scrollRef}>
         {/* <StepProgress
           numSteps={ui.onboardingSteps.length}
           currentStep={ui.onboardingStep}

frontend/src/components/AccountIconButton.js

@@ -36,6 +36,7 @@ const AccountIconButton = (props) => {
           zIndex="dropdown"
           width={["100vw", "100vw", "18rem", "20rem", "22rem", "24rem"]}
           borderRadius={0}
+          color="black"
         >
           <MenuGroup>
             <RouterLink href="/account/security" passHref>

frontend/src/components/AddNewIconButton.js

@@ -7,6 +7,7 @@ import {
   MenuGroup,
   MenuDivider,
   IconButton,
+  Text,
   chakra,
 } from "@chakra-ui/react";
 import { PlusSquareIcon } from "@chakra-ui/icons";
@@ -44,7 +45,7 @@ const AddNewIconButton = (props) => {
               })
             }
           >
-            New Dashboard...
+            <Text color="black">New Dashboard...</Text>
           </MenuItem>
           <MenuItem
             onClick={() =>
@@ -54,7 +55,7 @@ const AddNewIconButton = (props) => {
               })
             }
           >
-            New Subscription...
+            <Text color="black">New Subscription...</Text>
           </MenuItem>
 
           {ui.isInDashboard && <MenuItem>New report...</MenuItem>}

frontend/src/components/AppNavbar.js

@@ -76,7 +76,7 @@ const AppNavbar = () => {
             icon={<QuestionOutlineIcon />}
           />
         </PopoverTrigger>
-        <PopoverContent bgColor="white.100">
+        <PopoverContent bgColor="white.100" color="black">
           <PopoverArrow />
           <PopoverCloseButton />
           <PopoverHeader>Support</PopoverHeader>
@@ -110,7 +110,7 @@ const AppNavbar = () => {
           <Flex px={2}>
             <Spacer />
             <Flex placeSelf="flex-end">
-              <ButtonGroup variant="link" spacing={4} colorScheme="orange">
+              <ButtonGroup variant="link" spacing={4}>
                 {SITEMAP.map((item, idx) => {
                   if (
                     !item.children &&
@@ -121,10 +121,9 @@ const AppNavbar = () => {
                         key={`${idx}-${item.title}-landing-all-links`}
                         variant="link"
                         href={item.path}
-                        color="white"
                         isActive={!!(router.pathname === item.path)}
                       >
-                        {item.title}
+                        <Text color="black">{item.title}</Text>
                       </RouteButton>
                     );
                   } else if (!item.footerOnly) {
@@ -147,7 +146,7 @@ const AppNavbar = () => {
                                 passHref
                               >
                                 <MenuItem key={`menu-${idx}`} as={"a"} m={0}>
-                                  {child.title}
+                                  <Text color="black">{child.title}</Text>
                                 </MenuItem>
                               </RouterLink>
                             ))}
@@ -163,7 +162,6 @@ const AppNavbar = () => {
                       key={`${idx}-${item.title}-navlink`}
                       variant="link"
                       href={item.path}
-                      color="white"
                       isActive={!!(router.nextRouter.pathname === item.path)}
                     >
                       {item.title}

frontend/src/components/LandingNavbar.js

@@ -77,7 +77,7 @@ const LandingNavbar = () => {
                       key={`${idx}-${item.title}-landing-all-links`}
                       variant="link"
                       href={item.path}
-                      color="white"
+                      color="black"
                       isActive={!!(router.pathname === item.path)}
                     >
                       {item.title}

frontend/src/components/Report.js

@@ -100,6 +100,9 @@ const Report = ({ data, timeRange }) => {
       enableSlices={false}
       enableGridX={true}
       enableGridY={true}
+      theme={{
+        textColor: "white",
+      }}
     />
   );
 };

frontend/src/components/SubscriptionReport.js

@@ -105,7 +105,11 @@ const SubscriptionReport = ({
       flexBasis={plotMinW}
       direction="column"
     >
-      <Text fontSize="xs" textAlign="right">{`Latest block number: ${
+      <Text
+        fontSize="xs"
+        textAlign="right"
+        textColor="white"
+      >{`Latest block number: ${
         data?.blocks_state?.latest_labelled_block ?? "Not available"
       }`}</Text>
       <Flex
@@ -154,7 +158,7 @@ const SubscriptionReport = ({
           flexBasis={plotMinW}
           direction="column"
         >
-          <Heading size="md" pt={4}>
+          <Heading size="md" pt={4} textColor="white">
             Events
           </Heading>
           {eventKeys.map((key) => {

frontend/src/core/providers/OverlayProvider/index.js

@@ -270,7 +270,7 @@ const OverlayProvider = ({ children }) => {
       >
         <ModalOverlay />
 
-        <ModalContent>
+        <ModalContent textColor="black">
           <ModalHeader bgColor="white.200" py={2} fontSize="lg">
             {modal.type === MODAL_TYPES.NEW_SUBSCRIPTON &&
               "Subscribe to a new address"}
@@ -345,7 +345,7 @@ const OverlayProvider = ({ children }) => {
         }}
       >
         <DrawerOverlay />
-        <DrawerContent overflowY="scroll">
+        <DrawerContent overflowY="scroll" textColor="black">
           <DrawerCloseButton />
           <DrawerHeader borderBottomWidth="1px">
             {drawer.type === DRAWER_TYPES.NEW_DASHBOARD && "New dashboard"}

frontend/src/layouts/AppLayout.js

@@ -3,6 +3,7 @@ import { getLayout as getSiteLayout } from "./RootLayout";
 import React, { useContext, useEffect } from "react";
 import UIContext from "../core/providers/UIProvider/context";
 import AppNavbar from "../components/AppNavbar";
+import { BACKGROUND_COLOR } from "../core/constants";
 
 const AppLayout = ({ children }) => {
   const ui = useContext(UIContext);
@@ -18,6 +19,7 @@ const AppLayout = ({ children }) => {
   return (
     <Flex
       id="JournalsWrapper"
+      bgColor={BACKGROUND_COLOR}
       flexGrow={1}
       maxH="100%"
       w="100%"
@@ -45,7 +47,12 @@ const AppLayout = ({ children }) => {
           zIndex={1010}
         />
       )}
-      <Flex direction={"column"} bgColor="blue.900" id="Navbar">
+      <Flex
+        direction={"column"}
+        bgColor={BACKGROUND_COLOR}
+        borderBottom="1px solid white"
+        id="Navbar"
+      >
         <AppNavbar />
       </Flex>
       {ui.isAppReady && ui.isLoggedIn && children}