CAS-664: User Profile Page Layout

frontend/packages/client/package.json

@@ -18,13 +18,14 @@
     "@tanstack/react-query": "4.3.3",
     "@tanstack/react-query-devtools": "4.3.3",
     "@trivago/prettier-plugin-sort-imports": "^3.3.0",
-    "buffer": "^6.0.3",
     "@types/jest": "^29.1.2",
     "@types/node": "^18.8.5",
     "@types/react": "^18.0.21",
     "@types/react-blockies": "^1.4.1",
+    "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "^18.0.6",
     "@types/react-router-dom": "^5.3.3",
+    "buffer": "^6.0.3",
     "bulma": "0.9.3",
     "bulma-popover": "^1.1.1",
     "classnames": "^2.2.6",

frontend/packages/client/src/App.sass

@@ -1,4 +1,3 @@
-@import url('https://fonts.googleapis.com/css?family=DM+Sans:regular,bold,italic&subset=latin,latin-ext')
 @charset "utf-8"
 
 // Set brand colors

frontend/packages/client/src/components/CommunityLinks.js

@@ -8,9 +8,16 @@ export default function CommunityLinks({
   discordUrl,
   githubUrl,
 } = {}) {
+  const showTitle = [
+    instagramUrl,
+    twitterUrl,
+    websiteUrl,
+    discordUrl,
+    githubUrl,
+  ].every((val) => !!val);
   return (
     <div className="columns my-0 is-multiline">
-      <Title className="column is-12 py-0">Links</Title>
+      {showTitle && <Title className="column is-12 py-0">Links</Title>}
       {websiteUrl && (
         <a
           className="column pt-0 pb-1 is-12 is-flex is-align-items-center has-text-black"

frontend/packages/client/src/components/CustomTab.tsx

@@ -0,0 +1,34 @@
+import { forwardRef } from 'react';
+import { Svg } from '@cast/shared-components';
+import {
+  Flex,
+  HStack,
+  Tab,
+  useMultiStyleConfig,
+  useTab,
+} from '@chakra-ui/react';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const CustomTab = forwardRef<HTMLElement, any>((props, ref) => {
+  // 1. Reuse the `useTab` hook
+  const tabProps = useTab({ ...props, ref });
+  const isSelected = !!tabProps['aria-selected'];
+
+  // 2. Hook into the Tabs `size`, `variant`, props
+  const styles = useMultiStyleConfig('Tabs', tabProps);
+
+  return (
+    <Tab __css={styles.tab} {...tabProps}>
+      <HStack spacing={2}>
+        <Flex {...(isSelected ? { fontWeight: 'bold' } : {})}>
+          {tabProps.children}
+        </Flex>
+        {isSelected ? (
+          <Svg name="Star" width="13" height="13" fill="black" />
+        ) : null}
+      </HStack>
+    </Tab>
+  );
+});
+
+export default CustomTab;

frontend/packages/client/src/components/Proposal/HeaderNavigation.js

@@ -1,7 +1,7 @@
 import { JoinCommunityButton } from 'components';
 import { useMediaQuery, useVotesForAddress } from 'hooks';
 import BackButton from './BackButton';
-import ShareDropdown from './ShareDropdown';
+import ShareDropdown from './ShareProposalDropdown';
 
 const HeaderNavigation = ({
   communityId,

frontend/packages/client/src/components/Proposal/ShareProposalDropdown.tsx

@@ -0,0 +1,39 @@
+import { ShareDropdown } from 'components';
+import { FRONTEND_URL } from 'const';
+import { Box } from '@chakra-ui/react';
+
+interface ShareProposalDropdownProps {
+  communityId: string;
+  proposalId: string;
+  proposalName: string;
+  userVoted: boolean;
+}
+const ShareProposalDropdown: React.FC<ShareProposalDropdownProps> = (
+  {
+    communityId,
+    proposalId,
+    proposalName = '',
+    userVoted,
+  } = {} as ShareProposalDropdownProps
+) => {
+  const proposalUrl = `${FRONTEND_URL}/#/community/${communityId}/proposal/${proposalId}`;
+
+  const twitterPost = `https://twitter.com/intent/tweet?text=${encodeURIComponent(
+    userVoted
+      ? `I just voted on ${proposalName} on CAST! ${proposalUrl}`
+      : `Check out ${proposalName} on CAST! ${proposalUrl}`
+  )} `;
+
+  return (
+    <Box ml={4}>
+      <ShareDropdown
+        isIconOnly={false}
+        twitterShareString={twitterPost}
+        copyString={proposalUrl}
+        offset={[-85, 2]}
+        direction="rtl"
+      />
+    </Box>
+  );
+};
+export default ShareProposalDropdown;

frontend/packages/client/src/components/ShareDropdown.tsx

@@ -0,0 +1,96 @@
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { Svg } from '@cast/shared-components';
+import { useMediaQuery } from 'hooks';
+import {
+  Flex,
+  Link,
+  Menu,
+  MenuButton,
+  MenuDivider,
+  MenuItem,
+  MenuList,
+  Text,
+} from '@chakra-ui/react';
+
+interface ShareDropdownProps {
+  twitterShareString: string;
+  copyString: string;
+  isIconOnly?: boolean;
+  offset?: [number, number];
+  direction?: 'ltr' | 'rtl';
+}
+const ShareDropdown: React.FC<ShareDropdownProps> = ({
+  isIconOnly = true,
+  twitterShareString = '',
+  copyString = '',
+  offset,
+  direction,
+}) => {
+  const isBiggerThanMobile = useMediaQuery();
+
+  const twitterPost = `https://twitter.com/intent/tweet?text=${encodeURIComponent(
+    twitterShareString
+  )} `;
+
+  return (
+    <>
+      <Menu offset={offset} direction={direction}>
+        <MenuButton
+          transition="all 0.2s"
+          borderWidth="1px"
+          borderColor="black"
+          _hover={{ borderColor: 'blackAlpha.600' }}
+          maxH={isBiggerThanMobile ? '40px' : '32px'}
+          {...(isIconOnly
+            ? { px: '13px', py: '21px', borderRadius: 'full' }
+            : {
+                px: 4,
+                py: 2,
+                borderRadius: '3xl',
+              })}
+        >
+          <Flex alignItems="center">
+            <Svg name="Share" />
+            {!isIconOnly ? (
+              <Text
+                fontWeight="bold"
+                ml={3}
+                fontSize={isBiggerThanMobile ? 'md' : 'sm'}
+              >
+                Share
+              </Text>
+            ) : null}
+          </Flex>
+        </MenuButton>
+        <MenuList borderRadius="2xl" maxW="192px" minW="192px">
+          <MenuItem display="flex" alignItems="center" minHeight="48px" pl={3}>
+            <CopyToClipboard text={copyString} onCopy={() => {}}>
+              <Flex alignItems="center">
+                <Svg name="Copy" />
+                <Text fontWeight="bold" ml={3}>
+                  Copy Link
+                </Text>
+              </Flex>
+            </CopyToClipboard>
+          </MenuItem>
+          <MenuDivider border="light" borderColor="grey.300" my={0} />
+          <MenuItem display="flex" alignItems="center" minHeight="48px" pl={3}>
+            <Svg name="Twitter" />
+            <Link
+              href={twitterPost}
+              target="_blank"
+              rel="noreferrer noopenner"
+              className="twitter-share-button"
+              fontWeight="bold"
+              ml={3}
+              _hover={{ textDecoration: 'none' }}
+            >
+              Tweet
+            </Link>
+          </MenuItem>
+        </MenuList>
+      </Menu>
+    </>
+  );
+};
+export default ShareDropdown;

frontend/packages/client/src/components/Tooltip.js → frontend/packages/client/src/components/Tooltip.tsx

@@ -1,11 +1,19 @@
-export default function Tooltip({
+interface TooltipProps {
+  enabled: boolean;
+  position: 'left' | 'right' | 'top' | 'bottom';
+  text: string;
+  children?: React.ReactNode;
+  classNames: string;
+  alwaysVisible: boolean;
+}
+const Tooltip: React.FC<TooltipProps> = ({
   enabled = true,
   position,
   text,
   children,
   classNames = '',
   alwaysVisible = false,
-}) {
+}) => {
   const positionConfig = {
     left: 'has-tooltip-left',
     right: 'has-tooltip-right',
@@ -23,4 +31,6 @@ export default function Tooltip({
       {children}
     </span>
   );
-}
+};
+
+export default Tooltip;

frontend/packages/client/src/components/UserProfile/ShareProfileDropdown.tsx

@@ -0,0 +1,27 @@
+import { ShareDropdown } from 'components';
+import { FRONTEND_URL } from 'const';
+import { Box } from '@chakra-ui/react';
+
+interface ShareProfileDropdownProps {
+  userAddr: string;
+}
+const ShareProfileDropdown: React.FC<ShareProfileDropdownProps> = ({
+  userAddr,
+}) => {
+  const profileUrl = `${FRONTEND_URL}/#/profile?addr=${userAddr}`;
+
+  const twitterPost = `https://twitter.com/intent/tweet?text=${encodeURIComponent(
+    `Check at my profile in ${profileUrl} on CAST! `
+  )} `;
+
+  return (
+    <Box ml={4}>
+      <ShareDropdown
+        isIconOnly={true}
+        twitterShareString={twitterPost}
+        copyString={profileUrl}
+      />
+    </Box>
+  );
+};
+export default ShareProfileDropdown;