Merge pull request #99 from bugout-dev/cards-improvement

Cards improvement

frontend/pages/stream/index.js

@@ -1,6 +1,49 @@
+import React, { useContext } from "react";
 import { getLayout } from "../../src/layouts/EntriesLayout";
+import StreamEntryDetails from "../../src/components/SteamEntryDetails";
+import UIContext from "../../src/core/providers/UIProvider/context";
+import {
+  Box,
+  Heading,
+  Text,
+  Stack,
+  UnorderedList,
+  ListItem,
+} from "@chakra-ui/react";
 const Entry = () => {
-  return "";
+  const ui = useContext(UIContext);
+
+  // return "";
+  if (ui.currentTransaction) {
+    return <StreamEntryDetails />;
+  } else
+    return (
+      <Box px="7%" pt={12}>
+        <>
+          <Stack direction="column">
+            <Heading>Stream view</Heading>
+            <Text>
+              In this view you can follow events that happen on your subscribed
+              addresses
+            </Text>
+            <UnorderedList pl={4}>
+              <ListItem>
+                Click filter icon on right top corner to filter by specific
+                address across your subscriptions
+              </ListItem>
+              <ListItem>
+                On event cards you can click at right corner to see detailed
+                view!
+              </ListItem>
+              <ListItem>
+                For any adress of interest here you can copy it and subscribe at
+                subscription screen
+              </ListItem>
+            </UnorderedList>
+          </Stack>
+        </>
+      </Box>
+    );
 };
 Entry.getLayout = getLayout;
 export default Entry;

frontend/pages/subscriptions.js

@@ -62,7 +62,6 @@ const Subscriptions = () => {
         <Center>
           <Spinner
             hidden={false}
-            // ref={loadMoreButtonRef}
             my={8}
             size="lg"
             color="primary.500"

frontend/src/components/AppNavbar.js

@@ -2,7 +2,6 @@ import React, { useState, useContext, useEffect } from "react";
 import RouterLink from "next/link";
 import {
   Flex,
-  Button,
   Image,
   Text,
   IconButton,
@@ -16,7 +15,6 @@ import {
   PopoverCloseButton,
   useBreakpointValue,
   Spacer,
-  Fade,
 } from "@chakra-ui/react";
 import {
   HamburgerIcon,
@@ -95,36 +93,6 @@ const AppNavbar = () => {
       {!ui.isMobileView && (
         <>
           <Flex width="100%" px={2}>
-            <Fade in={ui.entriesViewMode === "entry"}>
-              <Button
-                m={0}
-                alignSelf="center"
-                variant="outline"
-                justifyContent="space-evenly"
-                alignContent="center"
-                h="32px"
-                size="sm"
-                colorScheme="gray"
-                aria-label="App navigation"
-                leftIcon={<ArrowLeftIcon />}
-                onClick={() => {
-                  router.push(
-                    {
-                      pathname: "/stream",
-                      query: router.query,
-                    },
-                    undefined,
-                    { shallow: false }
-                  );
-                  // router.params?.entryId && ui.entriesViewMode === "entry"
-                  // ?
-                  ui.setEntriesViewMode("list");
-                  //   : router.nextRouter.back();
-                }}
-              >
-                Back to stream
-              </Button>
-            </Fade>
             <Spacer />
             <Flex placeSelf="flex-end">
               <SupportPopover />
@@ -185,8 +153,9 @@ const AppNavbar = () => {
                 aria-label="App navigation"
                 icon={<ArrowLeftIcon />}
                 onClick={() => {
-                  router.params?.entryId && ui.entriesViewMode === "entry"
+                  router.nextRouter.pathname === "/stream" &&
-                    ? ui.setEntriesViewMode("list")
+                  ui.isEntryDetailView
+                    ? ui.setEntryDetailView(false)
                     : router.nextRouter.back();
                 }}
               />
@@ -216,8 +185,9 @@ const AppNavbar = () => {
                 aria-label="App navigation"
                 icon={<ArrowRightIcon />}
                 onClick={() => {
-                  router.params?.entryId && ui.entriesViewMode === "list"
+                  router.nextRouter.pathname === "/stream" &&
-                    ? ui.setEntriesViewMode("entry")
+                  !ui.isEntryDetailView
+                    ? ui.setEntryDetailView(true)
                     : history.forward();
                 }}
               />

frontend/src/components/EntriesNavigation.js

@@ -32,7 +32,6 @@ import {
   TagCloseButton,
   Stack,
   Spacer,
-  useBoolean,
 } from "@chakra-ui/react";
 import { useSubscriptions } from "../core/hooks";
 import StreamEntry from "./StreamEntry";
@@ -40,9 +39,7 @@ import UIContext from "../core/providers/UIProvider/context";
 import { FaFilter } from "react-icons/fa";
 import useStream from "../core/hooks/useStream";
 import { ImCancelCircle } from "react-icons/im";
-import { IoStopCircleOutline, IoPlayCircleOutline } from "react-icons/io5";
 
-const pageSize = 25;
 const FILTER_TYPES = {
   ADDRESS: 0,
   GAS: 1,
@@ -64,7 +61,6 @@ const CONDITION = {
 
 const EntriesNavigation = () => {
   const ui = useContext(UIContext);
-  const [isStreamOn, setStreamState] = useBoolean(true);
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { subscriptionsCache } = useSubscriptions();
   const [newFilterState, setNewFilterState] = useState([
@@ -150,29 +146,22 @@ const EntriesNavigation = () => {
   };
 
   const { EntriesPages, isLoading, refetch, isFetching, remove } = useStream({
-    refreshRate: 1500,
     searchQuery: ui.searchTerm,
     start_time: streamBoundary.start_time,
     end_time: streamBoundary.end_time,
     include_start: streamBoundary.include_start,
     include_end: streamBoundary.include_end,
-    enabled: isStreamOn,
     updateStreamBoundaryWith: updateStreamBoundaryWith,
     streamBoundary: streamBoundary,
     setStreamBoundary: setStreamBoundary,
     isContent: false,
   });
 
-  // const handleScroll = ({ currentTarget }) => {
+  useEffect(() => {
-  //   if (
+    if (!streamBoundary.start_time && !streamBoundary.end_time) {
-  //     currentTarget.scrollTop + currentTarget.clientHeight >=
+      refetch();
-  //     0.5 * currentTarget.scrollHeight
+    }
-  //   ) {
+  }, [streamBoundary, refetch]);
-  //     if (!isLoading && hasPreviousPage) {
-  //       fetchPreviousPage();
-  //     }
-  //   }
-  // };
 
   const setFilterProps = useCallback(
     (filterIdx, props) => {
@@ -436,20 +425,6 @@ const EntriesNavigation = () => {
           </Drawer>
           <Flex h="3rem" w="100%" bgColor="gray.100" alignItems="center">
             <Flex maxW="90%">
-              <Flex direction="column">
-                <IconButton
-                  size="sm"
-                  onClick={() => setStreamState.toggle()}
-                  icon={
-                    isStreamOn ? (
-                      <IoStopCircleOutline size="32px" />
-                    ) : (
-                      <IoPlayCircleOutline size="32px" />
-                    )
-                  }
-                  colorScheme={isStreamOn ? "unsafe" : "suggested"}
-                />
-              </Flex>
               {filterState.map((filter, idx) => {
                 if (filter.type === FILTER_TYPES.DISABLED) return "";
                 return (

frontend/src/components/SteamEntryDetails.js

@@ -1,49 +1,15 @@
 import React, { useContext } from "react";
-import {
+import { Flex, HStack, Skeleton, Heading } from "@chakra-ui/react";
-  Flex,
+import { useTxInfo } from "../core/hooks";
-  HStack,
+import FourOFour from "./FourOFour";
-  Skeleton,
+import FourOThree from "./FourOThree";
-  Box,
+import Tags from "./Tags";
-  Heading,
+import Scrollable from "./Scrollable";
-  Center,
+import TxInfo from "./TxInfo";
-  Spinner,
+import UIContext from "../core/providers/UIProvider/context";
-} from "@chakra-ui/react";
-import { useTxInfo, useRouter } from "../../src/core/hooks";
-import FourOFour from "../../src/components/FourOFour";
-import FourOThree from "../../src/components/FourOThree";
-import Tags from "../../src/components/Tags";
-import { getLayout } from "../../src/layouts/EntriesLayout";
-import Scrollable from "../../src/components/Scrollable";
-import TxInfo from "../../src/components/TxInfo";
-import UIContext from "../../src/core/providers/UIProvider/context";
 
-const Entry = () => {
+const SteamEntryDetails = () => {
   const ui = useContext(UIContext);
-  const router = useRouter();
-  const { entryId } = router.params;
-
-  const callReroute = () => {
-    ui.setEntriesViewMode("list");
-    router.push({
-      pathname: `/stream`,
-      query: router.query,
-    });
-    const LoadingSpinner = () => (
-      <Box px="12%" my={12} width="100%">
-        <Center>
-          <Spinner
-            hidden={false}
-            my={0}
-            size="lg"
-            color="primary.500"
-            thickness="4px"
-            speed="1.5s"
-          />
-        </Center>
-      </Box>
-    );
-    return <LoadingSpinner />;
-  };
 
   const {
     data: entry,
@@ -54,20 +20,13 @@ const Entry = () => {
     error,
   } = useTxInfo({ tx: ui.currentTransaction });
   if (!isFetching) {
-    return callReroute();
+    return "";
   }
   if (isError && error.response.status === 404) return <FourOFour />;
   if (isError && error.response.status === 403) return <FourOThree />;
-  // if (!entry || isLoading) return "";
 
   return (
-    <Flex
+    <Flex id="Entry" height="100%" flexGrow="1" flexDirection="column">
-      id="Entry"
-      height="100%"
-      flexGrow="1"
-      flexDirection="column"
-      key={entryId}
-    >
       <Skeleton
         id="EntryNameSkeleton"
         mx={2}
@@ -79,7 +38,6 @@ const Entry = () => {
           <Heading
             overflow="hidden"
             width={entry?.context_url ? "calc(100% - 28px)" : "100%"}
-            // height="auto"
             minH="36px"
             style={{ marginLeft: "0" }}
             m={0}
@@ -118,5 +76,4 @@ const Entry = () => {
   );
 };
 
-Entry.getLayout = getLayout;
+export default SteamEntryDetails;
-export default Entry;

frontend/src/components/StreamEntry.js

@@ -9,16 +9,18 @@ import {
   Heading,
   Image,
   useMediaQuery,
+  Spacer,
+  Spinner,
 } from "@chakra-ui/react";
 import moment from "moment";
 import { ArrowRightIcon } from "@chakra-ui/icons";
-import { useRouter } from "../core/hooks";
 import UIContext from "../core/providers/UIProvider/context";
 import { useToast } from "../core/hooks";
+import { useSubscriptions } from "../core/hooks";
 
 const StreamEntry = ({ entry }) => {
+  const { subscriptionsCache } = useSubscriptions();
   const ui = useContext(UIContext);
-  const router = useRouter();
   const [copyString, setCopyString] = useState(false);
   const { onCopy, hasCopied } = useClipboard(copyString, 1);
   const toast = useToast();
@@ -31,17 +33,19 @@ const StreamEntry = ({ entry }) => {
       onCopy();
     }
   }, [copyString, onCopy, hasCopied, toast]);
-  const handleViewClicked = (entryId) => {
-    ui.setEntryId(entryId);
-    ui.setEntriesViewMode("entry");
-    ui.setCurrentTransaction(entry);
-    router.push({
-      pathname: `/stream/${entry.hash}`,
-      query: router.query,
-    });
-  };
 
   const [showFullView] = useMediaQuery(["(min-width: 420px)"]);
+  if (subscriptionsCache.isLoading) return <Spinner />;
+
+  const from_color =
+    subscriptionsCache.data.subscriptions.find((obj) => {
+      return obj.address === entry.from_address;
+    })?.color ?? "gray.500";
+
+  const to_color =
+    subscriptionsCache.data.subscriptions.find((obj) => {
+      return obj.address === entry.to_address;
+    })?.color ?? "gray.500";
 
   return (
     <Flex
@@ -53,7 +57,6 @@ const StreamEntry = ({ entry }) => {
       bgColor="gray.100"
       borderColor="white.300"
       transition="0.1s"
-      _hover={{ bg: "secondary.200" }}
       flexBasis="50px"
       direction="row"
       justifySelf="center"
@@ -80,9 +83,11 @@ const StreamEntry = ({ entry }) => {
             borderLeftRadius="md"
             borderColor="gray.600"
             spacing={0}
-            h="fit-content"
+            h="auto"
-            minH="fit-content"
+            // h="fit-content"
+            // minH="fit-content"
             overflowX="hidden"
+            overflowY="visible"
           >
             <Stack
               className="title"
@@ -93,7 +98,7 @@ const StreamEntry = ({ entry }) => {
               textAlign="center"
               spacing={0}
               alignItems="center"
-              bgColor="brand.300"
+              bgColor="gray.300"
             >
               <Image
                 boxSize="16px"
@@ -101,7 +106,17 @@ const StreamEntry = ({ entry }) => {
                   "https://upload.wikimedia.org/wikipedia/commons/0/05/Ethereum_logo_2014.svg"
                 }
               />
-              <Heading size="xs">Ethereum blockhain</Heading>
+              <Heading px={1} size="xs">
+                Hash
+              </Heading>
+              <Spacer />
+              <Text
+                isTruncated
+                onClick={() => setCopyString(entry.hash)}
+                pr={12}
+              >
+                {entry.hash}
+              </Text>
             </Stack>
             <Stack
               className="CardAddressesRow"
@@ -129,7 +144,7 @@ const StreamEntry = ({ entry }) => {
                 spacing={0}
               >
                 <Text
-                  bgColor="secondary.500"
+                  bgColor="gray.600"
                   h="100%"
                   fontSize="sm"
                   py="2px"
@@ -143,7 +158,7 @@ const StreamEntry = ({ entry }) => {
                     mx={0}
                     py="2px"
                     fontSize="sm"
-                    bgColor="secondary.200"
+                    bgColor={from_color}
                     isTruncated
                     w="calc(100%)"
                     h="100%"
@@ -166,9 +181,8 @@ const StreamEntry = ({ entry }) => {
                 spacing={0}
               >
                 <Text
-                  bgColor="primary.500"
+                  bgColor="gray.600"
                   h="100%"
-                  color="white"
                   py={1}
                   px={2}
                   w={showFullView ? null : "120px"}
@@ -177,7 +191,7 @@ const StreamEntry = ({ entry }) => {
                 </Text>
                 <Tooltip label={entry.to_address} aria-label="From:">
                   <Text
-                    bgColor="primary.200"
+                    bgColor={to_color}
                     isTruncated
                     w="calc(100%)"
                     h="100%"
@@ -188,31 +202,8 @@ const StreamEntry = ({ entry }) => {
                 </Tooltip>
               </Stack>
             </Stack>
-            <Stack
+            <Flex flexWrap="wrap" w="100%">
-              className="ValuesRow"
+              <Flex minH="2rem" minW="fit-content" flexGrow={1}>
-              direction={showFullView ? "row" : "column"}
-              alignItems={showFullView ? "center" : "flex-start"}
-              placeContent="space-evenly"
-              // h="1rem"
-              w="100%"
-              // h="1.6rem"
-              minH="2rem"
-              textAlign="center"
-              spacing={0}
-              bgColor="primimary.50"
-            >
-              <Stack
-                direction="row"
-                fontSize="sm"
-                fontWeight="600"
-                borderColor="gray.1200"
-                borderRightWidth={showFullView ? "1px" : "0px"}
-                placeContent="center"
-                spacing={0}
-                flexBasis="10px"
-                flexGrow={1}
-                w="100%"
-              >
                 <Text
                   h="100%"
                   fontSize="sm"
@@ -236,19 +227,8 @@ const StreamEntry = ({ entry }) => {
                     {entry.gasPrice}
                   </Text>
                 </Tooltip>
-              </Stack>
+              </Flex>
-              <Stack
+              <Flex h="2rem" minW="fit-content" flexGrow={1}>
-                direction="row"
-                fontSize="sm"
-                fontWeight="600"
-                borderColor="gray.1200"
-                borderRightWidth={showFullView ? "1px" : "0px"}
-                placeContent="center"
-                spacing={0}
-                flexBasis="10px"
-                flexGrow={1}
-                w="100%"
-              >
                 <Text
                   w={showFullView ? null : "120px"}
                   h="100%"
@@ -271,21 +251,8 @@ const StreamEntry = ({ entry }) => {
                     {entry.gas}
                   </Text>
                 </Tooltip>
-              </Stack>
+              </Flex>
-              <Stack
+              <Flex h="2rem" minW="fit-content" flexGrow={1}>
-                direction="row"
-                fontSize="sm"
-                fontWeight="600"
-                borderColor="gray.1200"
-                borderRightWidth={
-                  entry.timestamp ? (showFullView ? "1px" : "0px") : "0px"
-                }
-                placeContent="center"
-                spacing={0}
-                flexBasis="10px"
-                flexGrow={1}
-                w="100%"
-              >
                 <Text
                   w={showFullView ? null : "120px"}
                   h="100%"
@@ -308,38 +275,63 @@ const StreamEntry = ({ entry }) => {
                     {entry.value}
                   </Text>
                 </Tooltip>
-              </Stack>
+              </Flex>
-              {entry.timestamp && (
+
-                <Stack
+              <Flex h="2rem" minW="fit-content" flexGrow={1}>
-                  direction="row"
+                <Text
+                  w={showFullView ? null : "120px"}
+                  h="100%"
                   fontSize="sm"
-                  fontWeight="600"
+                  py="2px"
-                  placeContent="center"
+                  px={2}
-                  spacing={0}
+                  textAlign="justify"
-                  flexBasis="10px"
-                  flexGrow={1}
                 >
-                  <Text mx={0} py="2px" fontSize="sm" w="calc(100%)" h="100%">
+                  Nonce:
+                </Text>
+                <Tooltip label={entry.value} aria-label="Value:">
+                  <Text
+                    mx={0}
+                    py="2px"
+                    fontSize="sm"
+                    w="calc(100%)"
+                    h="100%"
+                    onClick={() => setCopyString(entry.value)}
+                  >
+                    {entry.nonce}
+                  </Text>
+                </Tooltip>
+              </Flex>
+              {entry.timestamp && (
+                <Flex h="auto" minW="fit-content">
+                  <Text
+                    px={1}
+                    mx={0}
+                    py="2px"
+                    fontSize="sm"
+                    w="calc(100%)"
+                    h="100%"
+                    borderColor="gray.700"
+                  >
                     {moment(entry.timestamp * 1000).format(
                       "DD MMM, YYYY, HH:mm:ss"
                     )}{" "}
                   </Text>
-                </Stack>
+                </Flex>
               )}
-            </Stack>
+            </Flex>
           </Stack>
         )}
         <Flex>
           <IconButton
             m={0}
-            onClick={() => handleViewClicked(entry)}
+            onClick={() => ui.setCurrentTransaction(entry)}
             h="full"
             // minH="24px"
             borderLeftRadius={0}
             variant="solid"
             px={0}
             minW="24px"
-            colorScheme="suggested"
+            colorScheme="secondary"
             icon={<ArrowRightIcon w="24px" />}
           />
         </Flex>

frontend/src/components/TxInfo.js

@@ -10,7 +10,9 @@ import {
   VStack,
 } from "@chakra-ui/react";
 import { Table, Thead, Tbody, Tr, Th, Td } from "@chakra-ui/react";
-const toEth = (wei) => { return wei / Math.pow(10, 18) }
+const toEth = (wei) => {
+  return wei / Math.pow(10, 18);
+};
 const TxABI = (props) => {
   const byteCode = props.byteCode;
   const abi = props.abi;

frontend/src/core/hooks/useStream.js

@@ -3,14 +3,12 @@ import { useQuery } from "react-query";
 import { queryCacheProps } from "./hookCommon";
 
 const useJournalEntries = ({
-  refreshRate,
   searchQuery,
   start_time,
   end_time,
   include_start,
   include_end,
   updateStreamBoundaryWith,
-  enabled,
 }) => {
   // set our get method
   const getStream =
@@ -49,7 +47,6 @@ const useJournalEntries = ({
         // TODO(andrey): Response should send page parameters inside "boundary" object (can be null).
         updateStreamBoundaryWith(response.boundaries);
       },
-      enabled: !!enabled,
     }
   );
 

frontend/src/core/hooks/useTxInfo.js

@@ -10,13 +10,21 @@ const useTxInfo = (transaction) => {
     return response.data;
   };
   const { data, isLoading, isFetchedAfterMount, refetch, isError, error } =
-    useQuery(["txinfo", (transaction.tx && transaction.tx.hash)], getTxInfo, {
+    useQuery(["txinfo", transaction.tx && transaction.tx.hash], getTxInfo, {
       ...queryCacheProps,
       enabled: !!transaction.tx,
       onError: (error) => toast(error, "error"),
     });
   const isFetching = !!transaction.tx;
-  return { data, isFetchedAfterMount, isLoading, refetch, isFetching, isError, error };
+  return {
+    data,
+    isFetchedAfterMount,
+    isLoading,
+    refetch,
+    isFetching,
+    isError,
+    error,
+  };
 };
 
 export default useTxInfo;

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

@@ -30,8 +30,6 @@ const UIProvider = ({ children }) => {
   const { modal, toggleModal } = useContext(ModalContext);
   const [searchTerm, setSearchTerm] = useQuery("q", "", true, false);
 
-  const [entryId, setEntryId] = useState();
-
   const [searchBarActive, setSearchBarActive] = useState(false);
 
   // ****** Session state *****
@@ -136,22 +134,30 @@ const UIProvider = ({ children }) => {
 
   // *********** Entries layout states **********************
 
+  //
+  // const [entryId, setEntryId] = useState();
+  // Current transaction to show in sideview
+  const [currentTransaction, _setCurrentTransaction] = useState(undefined);
+  const [isEntryDetailView, setEntryDetailView] = useState(false);
+
+  const setCurrentTransaction = (tx) => {
+    _setCurrentTransaction(tx);
+    setEntryDetailView(!!tx);
+  };
+
   /**
    * States that entries list box should be expanded
    * Default true in mobile mode and false in desktop mode
    */
   const [entriesViewMode, setEntriesViewMode] = useState(
-    router.params?.entryId ? "entry" : "list"
+    isMobileView ? "list" : "split"
   );
 
   useEffect(() => {
-    setEntriesViewMode(router.params?.entryId ? "entry" : "list");
+    setEntriesViewMode(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+      isMobileView ? (isEntryDetailView ? "entry" : "list") : "split"
-  }, [router.params?.id]);
+    );
-
+  }, [isEntryDetailView, isMobileView]);
-  // *********** TX stream state **********************
-
-  const [currentTransaction, setCurrentTransaction] = useState(undefined);
 
   // ********************************************************
 
@@ -175,14 +181,13 @@ const UIProvider = ({ children }) => {
         isLoggedIn,
         isAppReady,
         entriesViewMode,
-        setEntriesViewMode,
+        setEntryDetailView,
         modal,
         toggleModal,
-        entryId,
-        setEntryId,
         sessionId,
         currentTransaction,
         setCurrentTransaction,
+        isEntryDetailView,
       }}
     >
       {children}

frontend/src/layouts/EntriesLayout.js

@@ -20,6 +20,7 @@ const EntriesLayout = (props) => {
     <>
       <Flex id="Entries" flexGrow={1} maxW="100%">
         <SplitPane
+          allowResize={false}
           split="vertical"
           defaultSize={defaultWidth}
           primary="first"
@@ -29,7 +30,11 @@ const EntriesLayout = (props) => {
               ? { transition: "1s", width: "100%" }
               : ui.entriesViewMode === "entry"
               ? { transition: "1s", width: "0%" }
-              : { overflowX: "hidden", height: "100%" }
+              : {
+                  overflowX: "hidden",
+                  height: "100%",
+                  width: ui.isMobileView ? "100%" : "55%",
+                }
           }
           pane2Style={
             ui.entriesViewMode === "entry"

frontend/styles/styles.css

@@ -46,6 +46,7 @@
 }
 .Resizer.disabled:hover {
   border-color: transparent;
+  cursor: inherit;
 }
 
 .triangle {
@@ -156,7 +157,7 @@
   word-break: break-word;
 }
 
-.mde-preview  * {
+.mde-preview * {
   word-break: break-word;
 }
 
@@ -181,12 +182,10 @@
   padding: 0.5rem;
 }
 
-
 code {
   white-space: pre-line !important;
 }
 
-
 .fade-in-section {
   opacity: 0;
   transform: translateY(5vh);
@@ -195,8 +194,7 @@ code {
   will-change: opacity, visibility;
 }
 .fade-in-section.is-visible {
-
   opacity: 1;
   transform: none;
   visibility: visible;
-}
+}