layout improvements

frontend/pages/welcome.js

@@ -23,6 +23,7 @@ import {
   AccordionButton,
   AccordionPanel,
   AccordionIcon,
+  Divider,
 } from "@chakra-ui/react";
 import StepProgress from "../src/components/StepProgress";
 import { ArrowLeftIcon, ArrowRightIcon } from "@chakra-ui/icons";
@@ -95,7 +96,7 @@ const Welcome = () => {
           <Fade in>
             <Stack spacing={4}>
               <Stack
-                px={12}
+                px={[0, 12, null]}
                 // mt={24}
                 bgColor="gray.50"
                 borderRadius="xl"
@@ -119,7 +120,7 @@ const Welcome = () => {
                 </Text>
               </Stack>
               <Stack
-                px={12}
+                px={[0, 12, null]}
                 // mt={24}
                 bgColor="gray.50"
                 borderRadius="xl"
@@ -176,7 +177,7 @@ const Welcome = () => {
                 </Accordion>
               </Stack>
               <Stack
-                px={12}
+                px={[0, 12, null]}
                 // mt={24}
                 bgColor="gray.50"
                 borderRadius="xl"
@@ -298,7 +299,7 @@ const Welcome = () => {
           <Fade in>
             <Stack px="7%">
               <Stack
-                px={12}
+                px={[0, 12, null]}
                 // mt={24}
                 bgColor="gray.50"
                 borderRadius="xl"
@@ -345,14 +346,18 @@ const Welcome = () => {
                 )}
               <SubscriptionsList />
               {showSubscriptionForm && (
-                <>
-                  <Heading pt={12}>{`Let's add new subscription!`}</Heading>
+                <Flex direction="column" pt={6}>
+                  <Divider bgColor="gray.500" borderWidth="2px" />
+                  <Heading
+                    size="md"
+                    pt={2}
+                  >{`Let's add new subscription!`}</Heading>
 
                   <NewSubscription
                     isFreeOption={false}
                     onClose={SubscriptonCreatedCallback}
                   />
-                </>
+                </Flex>
               )}
               {!showSubscriptionForm && (
                 <Button
@@ -370,7 +375,7 @@ const Welcome = () => {
           <Fade in>
             <Stack>
               <Stack
-                px={12}
+                px={[0, 12, null]}
                 // mt={24}
                 bgColor="gray.50"
                 borderRadius="xl"

frontend/src/Theme/Tooltip/index.js

@@ -18,6 +18,24 @@ const baseStyle = (props) => {
   };
 };
 
+const variantSuggestion = (props) => {
+  const bg = mode("primary.700", "primary.300")(props);
+  return {
+    "--tooltip-bg": `colors.${bg}`,
+    px: "8px",
+    py: "2px",
+    bg: "var(--tooltip-bg)",
+    "--popper-arrow-bg": "var(--tooltip-bg)",
+    color: mode("whiteAlpha.900", "gray.900")(props),
+    borderRadius: "md",
+    fontWeight: "medium",
+    fontSize: "sm",
+    boxShadow: "md",
+    maxW: "320px",
+    zIndex: "tooltip",
+  };
+};
+
 const variantOnboarding = (props) => {
   const bg = mode("secondary.700", "secondary.300")(props);
   return {
@@ -38,6 +56,7 @@ const variantOnboarding = (props) => {
 
 const variants = {
   onboarding: variantOnboarding,
+  suggestion: variantSuggestion,
 };
 
 export default {

frontend/src/components/NewModalSubscripton.js

@@ -1,182 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { useSubscriptions } from "../core/hooks";
-import {
-  Input,
-  Stack,
-  Text,
-  HStack,
-  useRadioGroup,
-  FormControl,
-  FormErrorMessage,
-  ModalBody,
-  ModalCloseButton,
-  ModalHeader,
-  Button,
-  ModalFooter,
-  Spinner,
-  IconButton,
-} from "@chakra-ui/react";
-import RadioCard from "./RadioCard";
-import { useForm } from "react-hook-form";
-import { GithubPicker } from "react-color";
-import { BiRefresh } from "react-icons/bi";
-import { makeColor } from "../core/utils/makeColor";
-const NewSubscription = ({
-  isFreeOption,
-  onClose,
-  initialAddress,
-  initialType,
-}) => {
-  const [color, setColor] = useState(makeColor());
-  const { typesCache, createSubscription } = useSubscriptions();
-  const { handleSubmit, errors, register } = useForm({});
-  const [radioState, setRadioState] = useState(
-    initialType ?? "ethereum_blockchain"
-  );
-  let { getRootProps, getRadioProps } = useRadioGroup({
-    name: "type",
-    defaultValue: radioState,
-    onChange: setRadioState,
-  });
-
-  const group = getRootProps();
-
-  useEffect(() => {
-    if (createSubscription.isSuccess) {
-      onClose();
-    }
-  }, [createSubscription.isSuccess, onClose]);
-
-  if (typesCache.isLoading) return <Spinner />;
-
-  const createSubscriptionWrap = (props) => {
-    createSubscription.mutate({
-      ...props,
-      color: color,
-      type: isFreeOption ? "free" : radioState,
-    });
-  };
-
-  const handleChangeColorComplete = (color) => {
-    setColor(color.hex);
-  };
-
-  return (
-    <form onSubmit={handleSubmit(createSubscriptionWrap)}>
-      <ModalHeader>Subscribe to a new address</ModalHeader>
-      <ModalCloseButton />
-      <ModalBody>
-        <FormControl isInvalid={errors.label}>
-          <Input
-            my={2}
-            type="text"
-            autoComplete="off"
-            placeholder="Enter label"
-            name="label"
-            ref={register({ required: "label is required!" })}
-          ></Input>
-          <FormErrorMessage color="unsafe.400" pl="1">
-            {errors.label && errors.label.message}
-          </FormErrorMessage>
-        </FormControl>
-        <FormControl isInvalid={errors.address}>
-          <Input
-            type="text"
-            autoComplete="off"
-            my={2}
-            placeholder="Enter address"
-            defaultValue={initialAddress ?? undefined}
-            isReadOnly={!!initialAddress}
-            name="address"
-            ref={register({ required: "address is required!" })}
-          ></Input>
-          <FormErrorMessage color="unsafe.400" pl="1">
-            {errors.address && errors.address.message}
-          </FormErrorMessage>
-        </FormControl>
-        <Stack my={16} direction="column">
-          <Text fontWeight="600">
-            {isFreeOption
-              ? `Free subscription is only availible Ethereum blockchain source`
-              : `On which source?`}
-          </Text>
-
-          <FormControl isInvalid={errors.subscription_type}>
-            <HStack {...group} alignItems="stretch">
-              {typesCache.data.map((type) => {
-                const radio = getRadioProps({
-                  value: type.id,
-                  isDisabled:
-                    (initialAddress && initialType) ||
-                    !type.active ||
-                    (isFreeOption && type.id !== "ethereum_blockchain"),
-                });
-                return (
-                  <RadioCard key={`subscription_type_${type.id}`} {...radio}>
-                    {type.name}
-                  </RadioCard>
-                );
-              })}
-            </HStack>
-            <Input
-              type="hidden"
-              placeholder="subscription_type"
-              name="subscription_type"
-              ref={register({ required: "select type" })}
-              value={radioState}
-              onChange={() => null}
-            ></Input>
-            <FormErrorMessage color="unsafe.400" pl="1">
-              {errors.subscription_type && errors.subscription_type.message}
-            </FormErrorMessage>
-          </FormControl>
-        </Stack>
-        <FormControl isInvalid={errors.color}>
-          <Stack direction="row" pb={2}>
-            <Text fontWeight="600" alignSelf="center">
-              Label color
-            </Text>{" "}
-            <IconButton
-              size="md"
-              color={"white.100"}
-              _hover={{ bgColor: { color } }}
-              bgColor={color}
-              variant="outline"
-              onClick={() => setColor(makeColor())}
-              icon={<BiRefresh />}
-            />
-            <Input
-              type="input"
-              placeholder="color"
-              name="color"
-              ref={register({ required: "color is required!" })}
-              value={color}
-              onChange={() => null}
-              w="200px"
-            ></Input>
-          </Stack>
-
-          <GithubPicker onChangeComplete={handleChangeColorComplete} />
-
-          <FormErrorMessage color="unsafe.400" pl="1">
-            {errors.color && errors.color.message}
-          </FormErrorMessage>
-        </FormControl>
-      </ModalBody>
-      <ModalFooter>
-        <Button
-          type="submit"
-          colorScheme="suggested"
-          isLoading={createSubscription.isLoading}
-        >
-          Confirm
-        </Button>
-        <Button colorScheme="gray" onClick={onClose}>
-          Cancel
-        </Button>
-      </ModalFooter>
-    </form>
-  );
-};
-
-export default NewSubscription;

frontend/src/components/NewSubscription.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, Fragment } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { useSubscriptions } from "../core/hooks";
 import {
   Input,
@@ -12,7 +12,6 @@ import {
   Spinner,
   IconButton,
   ButtonGroup,
-  Spacer,
   Flex,
 } from "@chakra-ui/react";
 import RadioCard from "./RadioCard";
@@ -33,7 +32,7 @@ const _NewSubscription = ({
   const [color, setColor] = useState(makeColor());
   const { handleSubmit, errors, register } = useForm({});
   const { typesCache, createSubscription } = useSubscriptions();
-  // const { handleSubmit, errors, register } = useForm({});
+
   const [radioState, setRadioState] = useState(
     initialType ?? "ethereum_blockchain"
   );
@@ -46,31 +45,19 @@ const _NewSubscription = ({
   const [subscriptionAdressFormatRadio, setsubscriptionAdressFormatRadio] =
     useState("input:address");
 
-  let { getRootProps, getRadioProps } = useRadioGroup({
+  let { getRadioProps } = useRadioGroup({
     name: "type",
     defaultValue: radioState,
     onChange: setRadioState,
   });
 
-  let {
-    getRootProps: getRootPropsSubscription,
-    getRadioProps: getRadioPropsSubscription,
-  } = useRadioGroup({
+  let { getRadioProps: getRadioPropsSubscription } = useRadioGroup({
     name: "subscription",
     defaultValue: subscriptionAdressFormatRadio,
     onChange: setsubscriptionAdressFormatRadio,
   });
 
-  console.log(
-    useRadioGroup({
-      name: "subscription1",
-      onChange: setsubscriptionAdressFormatRadio,
-    })
-  );
 
-  const group = getRootProps();
-
-  const subscriptionAddressTypeGroup = getRootPropsSubscription();
 
   useEffect(() => {
     if (setIsLoading) {
@@ -101,7 +88,13 @@ const _NewSubscription = ({
         type: isFreeOption ? "ethereum_blockchain" : radioState,
       });
     },
-    [createSubscription, isFreeOption, color, radioState]
+    [
+      createSubscription,
+      isFreeOption,
+      color,
+      radioState,
+      subscriptionAdressFormatRadio,
+    ]
   );
 
   if (typesCache.isLoading) return <Spinner />;
@@ -123,8 +116,16 @@ const _NewSubscription = ({
   return (
     <form onSubmit={handleSubmit(createSubscriptionWrapper)}>
       <Stack my={4} direction="column">
-        <FormControl isInvalid={errors?.subscription_type}>
-          <HStack {...group} alignItems="stretch">
+        <Stack spacing={1} w="100%">
+          <Text fontWeight="600">Source:</Text>
+          {/* position must be relative otherwise radio boxes add strange spacing on selection */}
+          <Stack
+            spacing={1}
+            w="100%"
+            direction="row"
+            flexWrap="wrap"
+            position="relative"
+          >
             {typesCache.data.map((type) => {
               const radio = getRadioProps({
                 value: type.id,
@@ -135,72 +136,88 @@ const _NewSubscription = ({
               });
 
               return (
-                <RadioCard key={`subscription_type_${type.id}`} {...radio}>
-                  {type.name}
+                <RadioCard
+                  px="8px"
+                  py="4px"
+                  mt="2px"
+                  w="190px"
+                  {...radio}
+                  key={`subscription_type_${type.id}`}
+                  label={type.description}
+                  iconURL={type.icon_url}
+                >
+                  {type.name.slice(9, type.name.length)}
                 </RadioCard>
               );
             })}
-          </HStack>
-          <Stack my={4} direction="column">
-            <FormControl isInvalid={errors?.subscription_type}>
-              <HStack {...subscriptionAddressTypeGroup} alignItems="stretch">
-                {search(radioState, typesCache.data).choices.map(
-                  (addition_selects) => {
-                    console.log(typeof addition_selects);
-                    const radio = getRadioPropsSubscription({
-                      value: addition_selects,
-                      isDisabled: addition_selects.startsWith("tag"),
-                    });
-                    return (
-                      <RadioCard
-                        key={`subscription_tags_${addition_selects}`}
-                        {...radio}
-                      >
-                        {mapper[addition_selects]}
-                      </RadioCard>
-                    );
-                  }
-                )}
-              </HStack>
-            </FormControl>
           </Stack>
+        </Stack>
 
+        <Flex direction="row" w="100%" flexWrap="wrap" pt={4}>
+          {/* position must be relative otherwise radio boxes add strange spacing on selection */}
+          <HStack flexGrow={0} flexBasis="140px" position="relative">
+            {search(radioState, typesCache.data).choices.length > 0 && (
+              <Text fontWeight="600">Type:</Text>
+            )}
+            {search(radioState, typesCache.data).choices.map(
+              (addition_selects) => {
+                const radio = getRadioPropsSubscription({
+                  value: addition_selects,
+                  isDisabled: addition_selects.startsWith("tag"),
+                });
+                return (
+                  <RadioCard
+                    px="4px"
+                    py="2px"
+                    key={`subscription_tags_${addition_selects}`}
+                    {...radio}
+                  >
+                    {mapper[addition_selects]}
+                  </RadioCard>
+                );
+              }
+            )}
+          </HStack>
           {subscriptionAdressFormatRadio.startsWith("input") &&
             radioState != "ethereum_whalewatch" && (
-              <FormControl isInvalid={errors?.address}>
-                <Input
-                  type="text"
-                  autoComplete="off"
-                  my={2}
-                  placeholder="Address to subscribe to"
-                  name="address"
-                  ref={register({ required: "address is required!" })}
-                ></Input>
-                <FormErrorMessage color="unsafe.400" pl="1">
-                  {errors?.address && errors?.address.message}
-                </FormErrorMessage>
-              </FormControl>
+              <Flex flexBasis="240px" flexGrow={1}>
+                <FormControl isInvalid={errors?.address}>
+                  <Input
+                    type="text"
+                    autoComplete="off"
+                    my={2}
+                    placeholder="Address to subscribe to"
+                    name="address"
+                    ref={register({ required: "address is required!" })}
+                  ></Input>
+                  <FormErrorMessage color="unsafe.400" pl="1">
+                    {errors?.address && errors?.address.message}
+                  </FormErrorMessage>
+                </FormControl>
+              </Flex>
             )}
-          <Input
-            type="hidden"
-            placeholder="subscription_type"
-            name="subscription_type"
-            ref={register({ required: "select type" })}
-            value={radioState}
-            onChange={() => null}
-          ></Input>
-          <FormErrorMessage color="unsafe.400" pl="1">
-            {errors?.subscription_type && errors?.subscription_type.message}
-          </FormErrorMessage>
-        </FormControl>
+        </Flex>
+        <Input
+          type="hidden"
+          placeholder="subscription_type"
+          name="subscription_type"
+          ref={register({ required: "select type" })}
+          value={radioState}
+          onChange={() => null}
+        ></Input>
       </Stack>
       <FormControl isInvalid={errors?.color}>
         {!isModal ? (
-          <Flex direction="row" pb={2} flexWrap="wrap">
-            <Stack pt={2} direction="row" h="min-content">
-              <Text fontWeight="600" alignSelf="center">
-                Label color
-              </Text>{" "}
+          <Flex direction="row" pb={2} flexWrap="wrap" alignItems="baseline">
+            <Text fontWeight="600" alignSelf="center">
+              Label color
+            </Text>{" "}
+            <Stack
+              // pt={2}
+              direction={["row", "row", null]}
+              h="min-content"
+              alignSelf="center"
+            >
               <IconButton
                 size="md"
                 // colorScheme="primary"
@@ -221,8 +238,9 @@ const _NewSubscription = ({
                 w="200px"
               ></Input>
             </Stack>
-            <Flex p={2}>
+            <Flex p={2} flexBasis="120px" flexGrow={1} alignSelf="center">
               <CirclePicker
+                width="100%"
                 onChangeComplete={handleChangeColorComplete}
                 circleSpacing={1}
                 circleSize={24}
@@ -263,7 +281,7 @@ const _NewSubscription = ({
         </FormErrorMessage>
       </FormControl>
 
-      <ButtonGroup direction="row" justifyContent="space-evenly">
+      <ButtonGroup direction="row" justifyContent="flex-end" w="100%">
         <Button
           type="submit"
           colorScheme="suggested"
@@ -271,7 +289,7 @@ const _NewSubscription = ({
         >
           Confirm
         </Button>
-        <Spacer />
+
         <Button colorScheme="gray" onClick={onClose}>
           Cancel
         </Button>

frontend/src/components/RadioCard.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { useRadio, Box, Flex } from "@chakra-ui/react";
+import { useRadio, Box, Flex, Tooltip, Image } from "@chakra-ui/react";
 
 const RadioCard = (props) => {
   const { getInputProps, getCheckboxProps } = useRadio(props);
@@ -8,38 +8,48 @@ const RadioCard = (props) => {
   const checkbox = getCheckboxProps();
 
   return (
-    <Flex as="label" h="fill-availible">
-      <input {...input} />
-      <Box
-        justifyContent="left"
-        alignContent="center"
-        {...checkbox}
-        cursor="pointer"
-        borderWidth="1px"
-        borderRadius="md"
-        boxShadow="md"
-        _disabled={{
-          bg: "gray.300",
-          color: "gray.900",
-          borderColor: "gray.300",
-        }}
-        _checked={{
-          bg: "secondary.900",
-          color: "white",
-          borderColor: "secondary.900",
-        }}
-        _focus={{
-          boxShadow: "outline",
-        }}
-        px={5}
-        py={3}
-        fontWeight="600"
-      >
-        {props.children}
-      </Box>
-    </Flex>
+    <Tooltip
+      hidden={props.label ? false : true}
+      label={props.label}
+      variant="suggestion"
+      openDelay={500}
+    >
+      <Flex as="label" h="fill-availible">
+        <input {...input} />
+        <Box
+          alignContent="center"
+          {...checkbox}
+          cursor="pointer"
+          borderWidth="1px"
+          borderRadius="lg"
+          boxShadow="md"
+          _disabled={{
+            bg: "gray.300",
+            color: "gray.900",
+            borderColor: "gray.300",
+          }}
+          _checked={{
+            // bg: "secondary.900",
+
+            color: "secondary.900",
+            borderColor: "secondary.900",
+            borderWidth: "4px",
+          }}
+          justifyContent="center"
+          px={props.px}
+          mt={props.mt}
+          py={props.py}
+          w={props.w}
+          fontWeight="600"
+        >
+          {props.iconURL && (
+            <Image display="inline-block" w="16px" src={props.iconURL} />
+          )}{" "}
+          {props.children}
+        </Box>
+      </Flex>
+    </Tooltip>
   );
 };
 
-// const RadioCard = chakra(RadioCard_);
 export default RadioCard;

frontend/src/components/stream-cards/EthereumWhalewatch.js

@@ -21,7 +21,7 @@ import { useToast } from "../../core/hooks";
 import { useSubscriptions } from "../../core/hooks";
 import moment from "moment";
 import { AiOutlineMonitor } from "react-icons/ai";
-import NewSubscription from "../NewModalSubscripton";
+import NewSubscription from "../NewSubscription";
 
 const EthereumWhalewatchCard_ = ({
   entry,