From f333b17c15861b23717b251f6b69565f59fc3b7f Mon Sep 17 00:00:00 2001
From: German Urrustarazu <germanurrus@gmail.com>
Date: Fri, 28 Oct 2022 19:52:13 -0300
Subject: [PATCH 01/21] basic updates

---
 .../client/src/helpers/theme/definitions.js       |  7 +++++++
 .../packages/client/src/layout/PageContainer.tsx  | 15 +++++++++++++++
 .../packages/client/src/pages/UserProfile.tsx     | 13 +++++++++++++
 frontend/packages/client/src/pages/index.js       |  5 ++++-
 4 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 frontend/packages/client/src/layout/PageContainer.tsx
 create mode 100644 frontend/packages/client/src/pages/UserProfile.tsx

diff --git a/frontend/packages/client/src/helpers/theme/definitions.js b/frontend/packages/client/src/helpers/theme/definitions.js
index 943e529ee..e10c64b41 100644
--- a/frontend/packages/client/src/helpers/theme/definitions.js
+++ b/frontend/packages/client/src/helpers/theme/definitions.js
@@ -9,6 +9,13 @@ const definitions = {
   lineHeights: {
     shorter: 1.2858,
   },
+  breakpoints: {
+    // update this
+    sm: '360px',
+    md: '48em',
+    lg: '62em',
+    xl: '80em',
+  },
   fontSizes: {
     xxs: '0.625rem', // 10px
     xs: '0.75rem',
diff --git a/frontend/packages/client/src/layout/PageContainer.tsx b/frontend/packages/client/src/layout/PageContainer.tsx
new file mode 100644
index 000000000..379d99458
--- /dev/null
+++ b/frontend/packages/client/src/layout/PageContainer.tsx
@@ -0,0 +1,15 @@
+import { Container } from '@chakra-ui/react';
+
+interface Props {
+  children?: React.ReactNode;
+}
+
+const PageContainer: React.FC<Props> = ({ children }) => {
+  return (
+    <Container maxW="1320px" pt="40px" px="20px" centerContent>
+      {children}
+    </Container>
+  );
+};
+
+export default PageContainer;
diff --git a/frontend/packages/client/src/pages/UserProfile.tsx b/frontend/packages/client/src/pages/UserProfile.tsx
new file mode 100644
index 000000000..5e7173e89
--- /dev/null
+++ b/frontend/packages/client/src/pages/UserProfile.tsx
@@ -0,0 +1,13 @@
+import PageContainer from 'layout/PageContainer';
+
+const UserProfile: React.FC = () => {
+  return (
+    <PageContainer>
+      {
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin finibus nisi mauris, ut accumsan diam rutrum non. Pellentesque ac pretium urna. Praesent scelerisque mollis nisl, non imperdiet odio rutrum id. Donec fringilla rutrum mi sed pulvinar. Vestibulum sed sem posuere, sagittis nibh in, ullamcorper nibh. Suspendisse vehicula, purus nec facilisis luctus, mauris dui dapibus massa, sed convallis tortor elit vitae magna.'
+      }
+    </PageContainer>
+  );
+};
+
+export default UserProfile;
diff --git a/frontend/packages/client/src/pages/index.js b/frontend/packages/client/src/pages/index.js
index 1e7bc4bc8..5c506043d 100644
--- a/frontend/packages/client/src/pages/index.js
+++ b/frontend/packages/client/src/pages/index.js
@@ -15,6 +15,7 @@ const Community = lazy(() => import('./Community'));
 const CommunityEditor = lazy(() => import('./CommunityEditor'));
 const CommunityCreate = lazy(() => import('./CommunityCreate'));
 const BrowseCommunities = lazy(() => import('./BrowseCommunities'));
+const UserProfile = lazy(() => import('./UserProfile'));
 
 export default function AppPages() {
   return (
@@ -48,7 +49,9 @@ export default function AppPages() {
             <Route path="/community/:communityId">
               <Community />
             </Route>
-
+            <Route path="/profile">
+              <UserProfile />
+            </Route>
             <Route exact path="/debug-contract">
               <Debug />
             </Route>

From 87fa29c4e568a81234cba9c7bcc1aa93b171abf5 Mon Sep 17 00:00:00 2001
From: German Urrustarazu <germanurrus@gmail.com>
Date: Mon, 31 Oct 2022 13:09:54 -0300
Subject: [PATCH 02/21] install types

---
 frontend/packages/client/package.json |  3 ++-
 frontend/yarn.lock                    | 21 +++++++++++++++++++--
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/frontend/packages/client/package.json b/frontend/packages/client/package.json
index 6bb507d02..18ebeee99 100644
--- a/frontend/packages/client/package.json
+++ b/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",
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 4e5ecbeb9..c49bb5f3a 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -4970,6 +4970,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-copy-to-clipboard@^5.0.4":
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.4.tgz#558f2c38a97f53693e537815f6024f1e41e36a7e"
+  integrity sha512-otTJsJpofYAeaIeOwV5xBUGpo6exXG2HX7X4nseToCB2VgPEBxGBHCm/FecZ676doNR7HCSTVtmohxfG2b3/yQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@<18.0.0":
   version "17.0.17"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.17.tgz#2e3743277a793a96a99f1bf87614598289da68a1"
@@ -6322,7 +6329,7 @@ babel-jest@^27.4.2, babel-jest@^27.5.1:
     graceful-fs "^4.2.9"
     slash "^3.0.0"
 
-babel-loader@8.1.0, babel-loader@^8.0.0, babel-loader@^8.2.3:
+babel-loader@8.1.0, babel-loader@^8.0.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.1.0.tgz#c611d5112bd5209abe8b9fa84c3e4da25275f1c3"
   integrity sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==
@@ -6333,6 +6340,16 @@ babel-loader@8.1.0, babel-loader@^8.0.0, babel-loader@^8.2.3:
     pify "^4.0.1"
     schema-utils "^2.6.5"
 
+babel-loader@^8.2.3:
+  version "8.2.5"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.5.tgz#d45f585e654d5a5d90f5350a779d7647c5ed512e"
+  integrity sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ==
+  dependencies:
+    find-cache-dir "^3.3.1"
+    loader-utils "^2.0.0"
+    make-dir "^3.1.0"
+    schema-utils "^2.6.5"
+
 babel-plugin-add-react-displayname@^0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/babel-plugin-add-react-displayname/-/babel-plugin-add-react-displayname-0.0.5.tgz#339d4cddb7b65fd62d1df9db9fe04de134122bd5"
@@ -13504,7 +13521,7 @@ make-dir@^2.0.0, make-dir@^2.1.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
-make-dir@^3.0.0, make-dir@^3.0.2:
+make-dir@^3.0.0, make-dir@^3.0.2, make-dir@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
   integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==

From d0344735b1fc3c57c8f244d176ac714dc42d8c8d Mon Sep 17 00:00:00 2001
From: German Urrustarazu <germanurrus@gmail.com>
Date: Mon, 31 Oct 2022 13:10:06 -0300
Subject: [PATCH 03/21] convert to tsx

---
 .../src/components/{Tooltip.js => Tooltip.tsx}   | 16 +++++++++++++---
 frontend/packages/client/src/components/index.js |  1 +
 2 files changed, 14 insertions(+), 3 deletions(-)
 rename frontend/packages/client/src/components/{Tooltip.js => Tooltip.tsx} (67%)

diff --git a/frontend/packages/client/src/components/Tooltip.js b/frontend/packages/client/src/components/Tooltip.tsx
similarity index 67%
rename from frontend/packages/client/src/components/Tooltip.js
rename to frontend/packages/client/src/components/Tooltip.tsx
index 5e46eb162..f891e6ef6 100644
--- a/frontend/packages/client/src/components/Tooltip.js
+++ b/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;
diff --git a/frontend/packages/client/src/components/index.js b/frontend/packages/client/src/components/index.js
index 88dcb050b..f81f7fd63 100644
--- a/frontend/packages/client/src/components/index.js
+++ b/frontend/packages/client/src/components/index.js
@@ -60,3 +60,4 @@ export { default as FilterPill } from './FilterPill';
 export { default as BrowseCommunityButton } from './BrowseCommunityButton';
 export * from './Proposal';
 export { Card } from './Card';
+export { default as Tooltip } from './Tooltip';

From 0a182167d40988a6756504ec89061ec7ff15a512 Mon Sep 17 00:00:00 2001
From: German Urrustarazu <germanurrus@gmail.com>
Date: Mon, 31 Oct 2022 13:10:13 -0300
Subject: [PATCH 04/21] add space def

---
 .../packages/client/src/helpers/theme/definitions.js   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/packages/client/src/helpers/theme/definitions.js b/frontend/packages/client/src/helpers/theme/definitions.js
index e10c64b41..ab917a506 100644
--- a/frontend/packages/client/src/helpers/theme/definitions.js
+++ b/frontend/packages/client/src/helpers/theme/definitions.js
@@ -9,12 +9,12 @@ const definitions = {
   lineHeights: {
     shorter: 1.2858,
   },
+  // https://chakra-ui.com/docs/styled-system/responsive-styles
   breakpoints: {
-    // update this
-    sm: '360px',
-    md: '48em',
-    lg: '62em',
-    xl: '80em',
+    sm: '22.5em', // from 0 to 360px
+    md: '48em', // 768px => from 360px up to 768px: mobile
+    lg: '62em', // 992px => from 768px to 992px: tablet
+    xl: '80em', // 1280px => from 992px to 1280px: desktop
   },
   fontSizes: {
     xxs: '0.625rem', // 10px

From ff78619b41df2a76ec9312219213c0216f4a9129 Mon Sep 17 00:00:00 2001
From: German Urrustarazu <germanurrus@gmail.com>
Date: Mon, 31 Oct 2022 13:14:44 -0300
Subject: [PATCH 05/21] add wallet address component

---
 .../client/src/components/WalletAddress.tsx   | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 frontend/packages/client/src/components/WalletAddress.tsx

diff --git a/frontend/packages/client/src/components/WalletAddress.tsx b/frontend/packages/client/src/components/WalletAddress.tsx
new file mode 100644
index 000000000..513587766
--- /dev/null
+++ b/frontend/packages/client/src/components/WalletAddress.tsx
@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { Svg } from '@cast/shared-components';
+import { Tooltip } from 'components';
+import { Flex, HStack, Text } from '@chakra-ui/react';
+
+const WalletAddress: React.FC<{ addr: string }> = ({ addr }) => {
+  const [addressCopied, setAddressCopied] = useState<boolean>(false);
+
+  const markAddressCopied = () => setAddressCopied(true);
+
+  useEffect(() => {
+    let timeout: NodeJS.Timeout;
+    if (addressCopied) {
+      timeout = setTimeout(() => {
+        setAddressCopied(false);
+      }, 500);
+    }
+    return () => clearTimeout(timeout);
+  }, [addressCopied]);
+
+  return (
+    <Tooltip
+      classNames="is-flex is-flex-grow-1 is-align-items-center transition-all"
+      position="top"
+      text="Copied!"
+      alwaysVisible={true}
+      enabled={addressCopied}
+    >
+      <CopyToClipboard text={addr} onCopy={markAddressCopied}>
+        <HStack height="32px" spacing={1} bg="grey.300" borderRadius="base">
+          <Flex alignItems="center" py={1}>
+            <Text fontWeight="bold" color="grey.500" fontSize="md">
+              {addr}
+            </Text>
+          </Flex>
+          <Flex alignItems="center" py={1} height="23px">
+            <Svg name="Copy" />
+          </Flex>
+        </HStack>
+      </CopyToClipboard>
+    </Tooltip>
+  );
+};
+
+export default WalletAddress;

From 7fc72ee9fbb338a17152a34738e3f1d75713480b Mon Sep 17 00:00:00 2001
From: German Urrustarazu <germanurrus@gmail.com>
Date: Mon, 31 Oct 2022 13:14:55 -0300
Subject: [PATCH 06/21] update page container

---
 frontend/packages/client/src/layout/PageContainer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/packages/client/src/layout/PageContainer.tsx b/frontend/packages/client/src/layout/PageContainer.tsx
index 379d99458..9c8a49004 100644
--- a/frontend/packages/client/src/layout/PageContainer.tsx
+++ b/frontend/packages/client/src/layout/PageContainer.tsx
@@ -6,7 +6,7 @@ interface Props {
 
 const PageContainer: React.FC<Props> = ({ children }) => {
   return (
-    <Container maxW="1320px" pt="40px" px="20px" centerContent>
+    <Container maxW="1320px" py="40px" px="20px" centerContent>
       {children}
     </Container>
   );

From 661fb8754f7d98feb0a37ffa2cb244f54a251cb1 Mon Sep 17 00:00:00 2001
From: German Urrustarazu <germanurrus@gmail.com>
Date: Mon, 31 Oct 2022 13:15:03 -0300
Subject: [PATCH 07/21] temp updates

---
 .../packages/client/src/pages/UserProfile.tsx | 69 ++++++++++++++++++-
 1 file changed, 66 insertions(+), 3 deletions(-)

diff --git a/frontend/packages/client/src/pages/UserProfile.tsx b/frontend/packages/client/src/pages/UserProfile.tsx
index 5e7173e89..030a541e5 100644
--- a/frontend/packages/client/src/pages/UserProfile.tsx
+++ b/frontend/packages/client/src/pages/UserProfile.tsx
@@ -1,11 +1,74 @@
+import Blockies from 'react-blockies';
+import { useWebContext } from 'contexts/Web3';
+import { CommunityLinks } from 'components';
+import WalletAddress from 'components/WalletAddress';
+import { useMediaQuery } from 'hooks';
+import { Box, Flex, Spacer } from '@chakra-ui/react';
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
 import PageContainer from 'layout/PageContainer';
 
 const UserProfile: React.FC = () => {
+  const {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    user: { addr },
+  } = useWebContext();
+
+  const isBiggerThanMobile = useMediaQuery();
+
   return (
     <PageContainer>
-      {
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin finibus nisi mauris, ut accumsan diam rutrum non. Pellentesque ac pretium urna. Praesent scelerisque mollis nisl, non imperdiet odio rutrum id. Donec fringilla rutrum mi sed pulvinar. Vestibulum sed sem posuere, sagittis nibh in, ullamcorper nibh. Suspendisse vehicula, purus nec facilisis luctus, mauris dui dapibus massa, sed convallis tortor elit vitae magna.'
-      }
+      <Flex width="100%" flexWrap={['wrap', null, 'nowrap']}>
+        <Flex maxWidth={[null, null, '400px']} width="100%" flexWrap="wrap">
+          <Flex minW="100%">
+            <Blockies
+              seed={addr}
+              size={10}
+              scale={isBiggerThanMobile ? 12.4 : 9.6}
+              className="blockies"
+            />
+          </Flex>
+          <Flex pt="24px" minW="100%">
+            <Box maxW="193px">
+              <WalletAddress addr={addr} />
+            </Box>
+          </Flex>
+          <Flex bg="blue" minW="100%">
+            Buttons
+          </Flex>
+          <Flex minW="100%">
+            <CommunityLinks
+              instagramUrl="dfdf"
+              twitterUrl="dfdf"
+              websiteUrl="dfdf"
+              discordUrl="dfdf"
+              githubUrl="dfdf"
+            />
+          </Flex>
+        </Flex>
+        {/* <Spacer minWidth={[0, 0, '72px']} /> */}
+        <Flex flexGrow={1}>
+          <Tabs>
+            <TabList>
+              <Tab>Activity</Tab>
+              <Tab>Communities</Tab>
+              <Tab>Memberships</Tab>
+            </TabList>
+
+            <TabPanels>
+              <TabPanel>
+                <p>All Activities</p>
+              </TabPanel>
+              <TabPanel>
+                <p>Communities!</p>
+              </TabPanel>
+              <TabPanel>
+                <p>Memberships</p>
+              </TabPanel>
+            </TabPanels>
+          </Tabs>
+        </Flex>
+      </Flex>
     </PageContainer>
   );
 };

From 0b74aac0e06d0609cd44984643151ba83c08e92c Mon Sep 17 00:00:00 2001
From: German Urrustarazu <germanurrus@gmail.com>
Date: Mon, 31 Oct 2022 19:34:02 -0300
Subject: [PATCH 08/21] add sharedropdown component

---
 .../client/src/components/ShareDropdown.tsx   | 92 +++++++++++++++++++
 1 file changed, 92 insertions(+)
 create mode 100644 frontend/packages/client/src/components/ShareDropdown.tsx

diff --git a/frontend/packages/client/src/components/ShareDropdown.tsx b/frontend/packages/client/src/components/ShareDropdown.tsx
new file mode 100644
index 000000000..cbb0eca55
--- /dev/null
+++ b/frontend/packages/client/src/components/ShareDropdown.tsx
@@ -0,0 +1,92 @@
+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;
+}
+const ShareDropdown: React.FC<ShareDropdownProps> = ({
+  isIconOnly = true,
+  twitterShareString = '',
+  copyString = '',
+}) => {
+  const isBiggerThanMobile = useMediaQuery();
+
+  const twitterPost = `https://twitter.com/intent/tweet?text=${encodeURIComponent(
+    twitterShareString
+  )} `;
+
+  return (
+    <>
+      <Menu>
+        <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 ? 1 : 0.88}
+              >
+                Share
+              </Text>
+            ) : null}
+          </Flex>
+        </MenuButton>
+        <MenuList borderRadius="2xl" maxW="192px" minW="192px">
+          <MenuItem display="flex" alignItems="center" minHeight="48px">
+            <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={2}>
+            <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;

From 16680601fccb4ce110a9f498df86ea37353a60b5 Mon Sep 17 00:00:00 2001
From: German Urrustarazu <germanurrus@gmail.com>
Date: Mon, 31 Oct 2022 19:34:27 -0300
Subject: [PATCH 09/21] update styles

---
 .../client/src/helpers/theme/definitions.js   | 20 +----------
 .../src/helpers/theme/foundations/borders.js  |  4 +--
 .../src/helpers/theme/foundations/colors.js   | 35 +++++++++++++++++++
 .../client/src/helpers/theme/index.js         |  2 ++
 4 files changed, 40 insertions(+), 21 deletions(-)
 create mode 100644 frontend/packages/client/src/helpers/theme/foundations/colors.js

diff --git a/frontend/packages/client/src/helpers/theme/definitions.js b/frontend/packages/client/src/helpers/theme/definitions.js
index ab917a506..4a0216ece 100644
--- a/frontend/packages/client/src/helpers/theme/definitions.js
+++ b/frontend/packages/client/src/helpers/theme/definitions.js
@@ -20,7 +20,7 @@ const definitions = {
     xxs: '0.625rem', // 10px
     xs: '0.75rem',
     sm: '0.875rem',
-    md: '1rem',
+    md: '1rem', // 16px
     lg: '1.125rem',
     xl: '1.25rem',
     '2xl': '1.5rem',
@@ -32,24 +32,6 @@ const definitions = {
     '8xl': '6rem',
     '9xl': '8rem',
   },
-  // colors used in CAST designs
-  colors: {
-    red: {
-      600: '#C2130A',
-      500: '#F54339',
-      300: '#F8746D',
-      1000: '#FFF6F5',
-    },
-    grey: {
-      600: '#4D4D4D',
-      500: '#636363',
-      300: '#DCDCDC',
-      200: '#F9F9F9',
-    },
-    yellow: {
-      500: '#FBD84D',
-    },
-  },
 };
 
 export default definitions;
diff --git a/frontend/packages/client/src/helpers/theme/foundations/borders.js b/frontend/packages/client/src/helpers/theme/foundations/borders.js
index f2a802183..3e74aac79 100644
--- a/frontend/packages/client/src/helpers/theme/foundations/borders.js
+++ b/frontend/packages/client/src/helpers/theme/foundations/borders.js
@@ -1,7 +1,7 @@
-import definitions from '../definitions';
+import colors from './colors';
 
 const borders = {
-  light: `1px solid ${definitions.colors.grey[300]}`,
+  light: `1px solid ${colors.grey[300]}`,
 };
 
 export default borders;
diff --git a/frontend/packages/client/src/helpers/theme/foundations/colors.js b/frontend/packages/client/src/helpers/theme/foundations/colors.js
new file mode 100644
index 000000000..193434f11
--- /dev/null
+++ b/frontend/packages/client/src/helpers/theme/foundations/colors.js
@@ -0,0 +1,35 @@
+// Theme color definitions are here:
+// https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/foundations/colors.ts
+
+const colors = {
+  // colors used in CAST designs
+  blackAlpha: {
+    50: 'rgba(0, 0, 0, 0.04)',
+    100: 'rgba(0, 0, 0, 0.06)',
+    200: 'rgba(0, 0, 0, 0.08)',
+    300: 'rgba(0, 0, 0, 0.16)',
+    400: 'rgba(0, 0, 0, 0.24)',
+    500: 'rgba(0, 0, 0, 0.36)',
+    600: 'rgba(0, 0, 0, 0.48)',
+    700: 'rgba(0, 0, 0, 0.64)',
+    800: 'rgba(0, 0, 0, 0.80)',
+    900: 'rgba(0, 0, 0, 0.92)',
+  },
+  red: {
+    600: '#C2130A',
+    500: '#F54339',
+    300: '#F8746D',
+    1000: '#FFF6F5',
+  },
+  grey: {
+    600: '#4D4D4D',
+    500: '#636363',
+    300: '#DCDCDC',
+    200: '#F9F9F9',
+  },
+  yellow: {
+    500: '#FBD84D',
+  },
+};
+
+export default colors;
diff --git a/frontend/packages/client/src/helpers/theme/index.js b/frontend/packages/client/src/helpers/theme/index.js
index 1ef1ed729..ca5149333 100644
--- a/frontend/packages/client/src/helpers/theme/index.js
+++ b/frontend/packages/client/src/helpers/theme/index.js
@@ -19,6 +19,7 @@ import definitions from './definitions';
 //
 // Foundational style overrides
 import borders from './foundations/borders';
+import colors from './foundations/colors';
 // ***********************************
 //
 // ***********************************
@@ -31,6 +32,7 @@ const overrides = {
   ...definitions,
   styles,
   borders,
+  colors,
   // Other foundational style overrides go here
   components: {
     Input,

From 5f5f6041268771a8d310918193cd1ddda4b56ae6 Mon Sep 17 00:00:00 2001
From: German Urrustarazu <germanurrus@gmail.com>
Date: Mon, 31 Oct 2022 19:55:18 -0300
Subject: [PATCH 10/21] updates

---
 .../components/Proposal/HeaderNavigation.js   |  2 +-
 .../src/components/Proposal/ShareDropdown.js  | 92 -----------------
 .../Proposal/ShareProposalDropdown.js         | 28 ++++++
 .../client/src/components/ShareDropdown.tsx   |  6 +-
 .../client/src/components/WalletAddress.tsx   | 15 ++-
 .../packages/client/src/components/index.js   |  1 +
 .../client/src/helpers/theme/definitions.js   | 10 +-
 .../packages/client/src/pages/UserProfile.tsx | 10 +-
 frontend/packages/client/src/pages/index.js   |  2 +-
 .../shared-components/src/Svg/Copy.js         | 99 +++++++++++++------
 10 files changed, 125 insertions(+), 140 deletions(-)
 delete mode 100644 frontend/packages/client/src/components/Proposal/ShareDropdown.js
 create mode 100644 frontend/packages/client/src/components/Proposal/ShareProposalDropdown.js

diff --git a/frontend/packages/client/src/components/Proposal/HeaderNavigation.js b/frontend/packages/client/src/components/Proposal/HeaderNavigation.js
index a8360955c..16ab06776 100644
--- a/frontend/packages/client/src/components/Proposal/HeaderNavigation.js
+++ b/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,
diff --git a/frontend/packages/client/src/components/Proposal/ShareDropdown.js b/frontend/packages/client/src/components/Proposal/ShareDropdown.js
deleted file mode 100644
index 5e6044476..000000000
--- a/frontend/packages/client/src/components/Proposal/ShareDropdown.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import { useRef, useState } from 'react';
-import CopyToClipboard from 'react-copy-to-clipboard';
-import { Svg } from '@cast/shared-components';
-import { useOnClickOutside } from 'hooks';
-import { FRONTEND_URL } from 'const';
-import classnames from 'classnames';
-
-export default function ShareDropdown({
-  communityId,
-  proposalId,
-  proposalName = '',
-  isMobile,
-  userVoted,
-} = {}) {
-  const [dropdownStatus, setDropdownStatus] = useState('');
-  const dropdownRef = useRef();
-  // use for click out on dropdown
-  const closeDropDown = () => {
-    setDropdownStatus('');
-  };
-  useOnClickOutside(dropdownRef, closeDropDown);
-
-  const styleButtons = isMobile ? { maxHeight: '32px' } : { maxHeight: '40px' };
-
-  const stylesShareButton = classnames(
-    'button rounded-lg is-flex has-text-weight-bold has-background-white px-4 ml-4',
-    { 'small-text': isMobile }
-  );
-
-  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 (
-    <div className={`dropdown ${dropdownStatus} is-right`}>
-      <div className="dropdown-trigger">
-        <div
-          className={stylesShareButton}
-          style={styleButtons}
-          onClick={() => setDropdownStatus('is-active')}
-        >
-          <Svg name="Share" /> <span className="ml-3">Share</span>
-        </div>
-      </div>
-      <div
-        className="dropdown-menu"
-        id="dropdown-menu"
-        role="menu"
-        ref={dropdownRef}
-      >
-        <div className="dropdown-content rounded">
-          <CopyToClipboard text={proposalUrl} onCopy={closeDropDown}>
-            <div
-              className="columns p-0 m-0 is-mobile button is-white "
-              style={{ minHeight: '48px' }}
-            >
-              <div className="column is-flex is-align-items-center is-justify-content-flex-end is-3 pr-1">
-                <Svg name="Copy" />
-              </div>
-              <div className="column is-flex is-align-items-center">
-                <span className="has-text-weight-bold">Copy Link</span>
-              </div>
-            </div>
-          </CopyToClipboard>
-          <div className="border-light" />
-          <div
-            className="columns p-0 m-0 is-mobile button is-white "
-            style={{ minHeight: '48px' }}
-          >
-            <div className="column is-flex is-align-items-center is-justify-content-flex-end is-3 pr-1">
-              <Svg name="Twitter" />
-            </div>
-            <div className="column is-flex is-align-items-center">
-              <a
-                className="twitter-share-button has-text-weight-bold has-text-black"
-                href={twitterPost}
-                target="_blank"
-                rel="noreferrer noopenner"
-              >
-                Tweet
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/frontend/packages/client/src/components/Proposal/ShareProposalDropdown.js b/frontend/packages/client/src/components/Proposal/ShareProposalDropdown.js
new file mode 100644
index 000000000..efc8b09f9
--- /dev/null
+++ b/frontend/packages/client/src/components/Proposal/ShareProposalDropdown.js
@@ -0,0 +1,28 @@
+import { ShareDropdown } from 'components';
+import { FRONTEND_URL } from 'const';
+import { Box } from '@chakra-ui/react';
+
+export default function ShareProposalDropdown({
+  communityId,
+  proposalId,
+  proposalName = '',
+  userVoted,
+} = {}) {
+  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}
+      />
+    </Box>
+  );
+}
diff --git a/frontend/packages/client/src/components/ShareDropdown.tsx b/frontend/packages/client/src/components/ShareDropdown.tsx
index cbb0eca55..8585b1df2 100644
--- a/frontend/packages/client/src/components/ShareDropdown.tsx
+++ b/frontend/packages/client/src/components/ShareDropdown.tsx
@@ -51,7 +51,7 @@ const ShareDropdown: React.FC<ShareDropdownProps> = ({
               <Text
                 fontWeight="bold"
                 ml={3}
-                fontSize={isBiggerThanMobile ? 1 : 0.88}
+                fontSize={isBiggerThanMobile ? 'md' : 'sm'}
               >
                 Share
               </Text>
@@ -59,7 +59,7 @@ const ShareDropdown: React.FC<ShareDropdownProps> = ({
           </Flex>
         </MenuButton>
         <MenuList borderRadius="2xl" maxW="192px" minW="192px">
-          <MenuItem display="flex" alignItems="center" minHeight="48px">
+          <MenuItem display="flex" alignItems="center" minHeight="48px" pl={3}>
             <CopyToClipboard text={copyString} onCopy={() => {}}>
               <Flex alignItems="center">
                 <Svg name="Copy" />
@@ -70,7 +70,7 @@ const ShareDropdown: React.FC<ShareDropdownProps> = ({
             </CopyToClipboard>
           </MenuItem>
           <MenuDivider border="light" borderColor="grey.300" my={0} />
-          <MenuItem display="flex" alignItems="center" minHeight="48px" pl={2}>
+          <MenuItem display="flex" alignItems="center" minHeight="48px" pl={3}>
             <Svg name="Twitter" />
             <Link
               href={twitterPost}
diff --git a/frontend/packages/client/src/components/WalletAddress.tsx b/frontend/packages/client/src/components/WalletAddress.tsx
index 513587766..a6022fb95 100644
--- a/frontend/packages/client/src/components/WalletAddress.tsx
+++ b/frontend/packages/client/src/components/WalletAddress.tsx
@@ -28,14 +28,21 @@ const WalletAddress: React.FC<{ addr: string }> = ({ addr }) => {
       enabled={addressCopied}
     >
       <CopyToClipboard text={addr} onCopy={markAddressCopied}>
-        <HStack height="32px" spacing={1} bg="grey.300" borderRadius="base">
-          <Flex alignItems="center" py={1}>
+        <HStack
+          height="32px"
+          spacing={1}
+          bg="grey.300"
+          borderRadius="base"
+          p={1}
+          cursor="pointer"
+        >
+          <Flex alignItems="center">
             <Text fontWeight="bold" color="grey.500" fontSize="md">
               {addr}
             </Text>
           </Flex>
-          <Flex alignItems="center" py={1} height="23px">
-            <Svg name="Copy" />
+          <Flex alignItems="center" height="23px">
+            <Svg name="Copy" width="16" height="17" bold={false} />
           </Flex>
         </HStack>
       </CopyToClipboard>
diff --git a/frontend/packages/client/src/components/index.js b/frontend/packages/client/src/components/index.js
index f81f7fd63..252e1c74f 100644
--- a/frontend/packages/client/src/components/index.js
+++ b/frontend/packages/client/src/components/index.js
@@ -61,3 +61,4 @@ export { default as BrowseCommunityButton } from './BrowseCommunityButton';
 export * from './Proposal';
 export { Card } from './Card';
 export { default as Tooltip } from './Tooltip';
+export { default as ShareDropdown } from './ShareDropdown';
diff --git a/frontend/packages/client/src/helpers/theme/definitions.js b/frontend/packages/client/src/helpers/theme/definitions.js
index 4a0216ece..325ac51b7 100644
--- a/frontend/packages/client/src/helpers/theme/definitions.js
+++ b/frontend/packages/client/src/helpers/theme/definitions.js
@@ -18,12 +18,12 @@ const definitions = {
   },
   fontSizes: {
     xxs: '0.625rem', // 10px
-    xs: '0.75rem',
-    sm: '0.875rem',
+    xs: '0.75rem', // 12px
+    sm: '0.875rem', // 14px
     md: '1rem', // 16px
-    lg: '1.125rem',
-    xl: '1.25rem',
-    '2xl': '1.5rem',
+    lg: '1.125rem', // 18px
+    xl: '1.25rem', // 20px
+    '2xl': '1.5rem', // 24px
     '3xl': '1.875rem',
     '4xl': '2.25rem',
     '5xl': '3rem',
diff --git a/frontend/packages/client/src/pages/UserProfile.tsx b/frontend/packages/client/src/pages/UserProfile.tsx
index 030a541e5..e69feac57 100644
--- a/frontend/packages/client/src/pages/UserProfile.tsx
+++ b/frontend/packages/client/src/pages/UserProfile.tsx
@@ -1,6 +1,8 @@
 import Blockies from 'react-blockies';
+import { useParams } from 'react-router-dom';
 import { useWebContext } from 'contexts/Web3';
 import { CommunityLinks } from 'components';
+import ShareDropdown from 'components/ShareDropdown';
 import WalletAddress from 'components/WalletAddress';
 import { useMediaQuery } from 'hooks';
 import { Box, Flex, Spacer } from '@chakra-ui/react';
@@ -16,6 +18,8 @@ const UserProfile: React.FC = () => {
 
   const isBiggerThanMobile = useMediaQuery();
 
+  const { addr: userAddres } = useParams<{ addr: string }>();
+
   return (
     <PageContainer>
       <Flex width="100%" flexWrap={['wrap', null, 'nowrap']}>
@@ -33,8 +37,8 @@ const UserProfile: React.FC = () => {
               <WalletAddress addr={addr} />
             </Box>
           </Flex>
-          <Flex bg="blue" minW="100%">
-            Buttons
+          <Flex minW="100%">
+            <ShareDropdown twitterShareString={''} copyString={''} />
           </Flex>
           <Flex minW="100%">
             <CommunityLinks
@@ -46,7 +50,7 @@ const UserProfile: React.FC = () => {
             />
           </Flex>
         </Flex>
-        {/* <Spacer minWidth={[0, 0, '72px']} /> */}
+        <Spacer minWidth={[0, 0, '72px']} maxWidth={[0, 0, '72px']} />
         <Flex flexGrow={1}>
           <Tabs>
             <TabList>
diff --git a/frontend/packages/client/src/pages/index.js b/frontend/packages/client/src/pages/index.js
index 5c506043d..52ec89066 100644
--- a/frontend/packages/client/src/pages/index.js
+++ b/frontend/packages/client/src/pages/index.js
@@ -49,7 +49,7 @@ export default function AppPages() {
             <Route path="/community/:communityId">
               <Community />
             </Route>
-            <Route path="/profile">
+            <Route path="/profile/:addr">
               <UserProfile />
             </Route>
             <Route exact path="/debug-contract">
diff --git a/frontend/packages/shared-components/src/Svg/Copy.js b/frontend/packages/shared-components/src/Svg/Copy.js
index 72732709f..dd7da045a 100644
--- a/frontend/packages/shared-components/src/Svg/Copy.js
+++ b/frontend/packages/shared-components/src/Svg/Copy.js
@@ -1,33 +1,70 @@
-const Copy = ({ width = '24', height = '24' }) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g clipPath="url(#clip0_2518_6960)">
-      <path
-        d="M14.5 14H18.25C18.6642 14 19 13.6642 19 13.25V5.75C19 5.33579 18.6642 5 18.25 5L10.75 5C10.3358 5 10 5.33579 10 5.75L10 9.5"
-        stroke="black"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M5.75 19L13.25 19C13.6642 19 14 18.6642 14 18.25L14 10.75C14 10.3358 13.6642 10 13.25 10L5.75 10C5.33579 10 5 10.3358 5 10.75L5 18.25C5 18.6642 5.33579 19 5.75 19Z"
-        stroke="black"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_2518_6960">
-        <rect width="16" height="16" fill="white" transform="translate(4 4)" />
-      </clipPath>
-    </defs>
-  </svg>
-);
+const Copy = ({ width = '24', height = '24', bold = true }) => {
+  if (!bold) {
+    return (
+      <svg
+        width={width}
+        height={height}
+        viewBox="0 0 16 17"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clipPath="url(#clip0_3629_19075)">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M6.4 2.1H14.4L14.4 10.1H11.2V6.9C11.2 6.01635 10.4837 5.3 9.6 5.3H6.4L6.4 2.1ZM4.8 5.3L4.8 2.1C4.8 1.21634 5.51634 0.5 6.4 0.5H14.4C15.2837 0.5 16 1.21635 16 2.1V10.1C16 10.9837 15.2837 11.7 14.4 11.7H11.2V14.9C11.2 15.7837 10.4837 16.5 9.6 16.5L1.6 16.5C0.716344 16.5 0 15.7837 0 14.9V6.9C0 6.01634 0.716344 5.3 1.6 5.3H4.8ZM9.6 10.9V6.9H1.6V14.9L9.6 14.9V10.9Z"
+            fill="#636363"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_3629_19075">
+            <rect
+              width="16"
+              height="16"
+              fill="white"
+              transform="translate(0 0.5)"
+            />
+          </clipPath>
+        </defs>
+      </svg>
+    );
+  }
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_2518_6960)">
+        <path
+          d="M14.5 14H18.25C18.6642 14 19 13.6642 19 13.25V5.75C19 5.33579 18.6642 5 18.25 5L10.75 5C10.3358 5 10 5.33579 10 5.75L10 9.5"
+          stroke="black"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M5.75 19L13.25 19C13.6642 19 14 18.6642 14 18.25L14 10.75C14 10.3358 13.6642 10 13.25 10L5.75 10C5.33579 10 5 10.3358 5 10.75L5 18.25C5 18.6642 5.33579 19 5.75 19Z"
+          stroke="black"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2518_6960">
+          <rect
+            width="16"
+            height="16"
+            fill="white"
+            transform="translate(4 4)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
 
 export default Copy;

From ef6e35579fcdcfd6535bcf6e446a351aaddf3268 Mon Sep 17 00:00:00 2001
From: German Urrustarazu <germanurrus@gmail.com>
Date: Tue, 1 Nov 2022 11:24:21 -0300
Subject: [PATCH 11/21] updates

---
 ...lDropdown.js => ShareProposalDropdown.tsx} | 25 +++++++++++++------
 .../client/src/components/ShareDropdown.tsx   |  6 ++++-
 .../packages/client/src/pages/UserProfile.tsx | 17 +++++++++----
 frontend/packages/client/src/pages/index.js   |  2 +-
 4 files changed, 36 insertions(+), 14 deletions(-)
 rename frontend/packages/client/src/components/Proposal/{ShareProposalDropdown.js => ShareProposalDropdown.tsx} (60%)

diff --git a/frontend/packages/client/src/components/Proposal/ShareProposalDropdown.js b/frontend/packages/client/src/components/Proposal/ShareProposalDropdown.tsx
similarity index 60%
rename from frontend/packages/client/src/components/Proposal/ShareProposalDropdown.js
rename to frontend/packages/client/src/components/Proposal/ShareProposalDropdown.tsx
index efc8b09f9..7c4a8a310 100644
--- a/frontend/packages/client/src/components/Proposal/ShareProposalDropdown.js
+++ b/frontend/packages/client/src/components/Proposal/ShareProposalDropdown.tsx
@@ -2,12 +2,20 @@ import { ShareDropdown } from 'components';
 import { FRONTEND_URL } from 'const';
 import { Box } from '@chakra-ui/react';
 
-export default function ShareProposalDropdown({
-  communityId,
-  proposalId,
-  proposalName = '',
-  userVoted,
-} = {}) {
+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(
@@ -22,7 +30,10 @@ export default function ShareProposalDropdown({
         isIconOnly={false}
         twitterShareString={twitterPost}
         copyString={proposalUrl}
+        offset={[-85, 2]}
+        direction="rtl"
       />
     </Box>
   );
-}
+};
+export default ShareProposalDropdown;
diff --git a/frontend/packages/client/src/components/ShareDropdown.tsx b/frontend/packages/client/src/components/ShareDropdown.tsx
index 8585b1df2..1ea42697f 100644
--- a/frontend/packages/client/src/components/ShareDropdown.tsx
+++ b/frontend/packages/client/src/components/ShareDropdown.tsx
@@ -16,11 +16,15 @@ 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();
 
@@ -30,7 +34,7 @@ const ShareDropdown: React.FC<ShareDropdownProps> = ({
 
   return (
     <>
-      <Menu>
+      <Menu offset={offset} direction={direction}>
         <MenuButton
           transition="all 0.2s"
           borderWidth="1px"
diff --git a/frontend/packages/client/src/pages/UserProfile.tsx b/frontend/packages/client/src/pages/UserProfile.tsx
index e69feac57..5799a0f4d 100644
--- a/frontend/packages/client/src/pages/UserProfile.tsx
+++ b/frontend/packages/client/src/pages/UserProfile.tsx
@@ -1,10 +1,9 @@
 import Blockies from 'react-blockies';
-import { useParams } from 'react-router-dom';
 import { useWebContext } from 'contexts/Web3';
 import { CommunityLinks } from 'components';
 import ShareDropdown from 'components/ShareDropdown';
 import WalletAddress from 'components/WalletAddress';
-import { useMediaQuery } from 'hooks';
+import { useMediaQuery, useQueryParams } from 'hooks';
 import { Box, Flex, Spacer } from '@chakra-ui/react';
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
 import PageContainer from 'layout/PageContainer';
@@ -18,7 +17,15 @@ const UserProfile: React.FC = () => {
 
   const isBiggerThanMobile = useMediaQuery();
 
-  const { addr: userAddres } = useParams<{ addr: string }>();
+  const { userAddress }: { userAddress: string } = useQueryParams({
+    userAddress: 'addr',
+  });
+
+  // if there's an address provided in the query param then use it to get user information
+  const currentUserAddr =
+    userAddress === addr || !!userAddress ? addr : userAddress;
+
+  // Load here info for currentUserAddr with hook
 
   return (
     <PageContainer>
@@ -26,7 +33,7 @@ const UserProfile: React.FC = () => {
         <Flex maxWidth={[null, null, '400px']} width="100%" flexWrap="wrap">
           <Flex minW="100%">
             <Blockies
-              seed={addr}
+              seed={currentUserAddr}
               size={10}
               scale={isBiggerThanMobile ? 12.4 : 9.6}
               className="blockies"
@@ -34,7 +41,7 @@ const UserProfile: React.FC = () => {
           </Flex>
           <Flex pt="24px" minW="100%">
             <Box maxW="193px">
-              <WalletAddress addr={addr} />
+              <WalletAddress addr={currentUserAddr} />
             </Box>
           </Flex>
           <Flex minW="100%">
diff --git a/frontend/packages/client/src/pages/index.js b/frontend/packages/client/src/pages/index.js
index 52ec89066..5c506043d 100644
--- a/frontend/packages/client/src/pages/index.js
+++ b/frontend/packages/client/src/pages/index.js
@@ -49,7 +49,7 @@ export default function AppPages() {
             <Route path="/community/:communityId">
               <Community />
             </Route>
-            <Route path="/profile/:addr">
+            <Route path="/profile">
               <UserProfile />
             </Route>
             <Route exact path="/debug-contract">

From b12c9c314319189ca586a9c543157f870fb1efe2 Mon Sep 17 00:00:00 2001
From: German Urrustarazu <germanurrus@gmail.com>
Date: Tue, 1 Nov 2022 12:56:27 -0300
Subject: [PATCH 12/21] updates

---
 .../UserProfile/ShareProfileDropdown.tsx      | 27 ++++++
 .../packages/client/src/components/index.js   |  2 +
 .../src/helpers/theme/components/Button.ts    | 22 +++++
 .../src/helpers/theme/components/Link.js      |  5 +
 .../client/src/helpers/theme/definitions.js   |  4 +
 .../client/src/helpers/theme/index.js         |  2 +
 .../packages/client/src/pages/UserProfile.tsx | 94 ++++++++++++-------
 7 files changed, 124 insertions(+), 32 deletions(-)
 create mode 100644 frontend/packages/client/src/components/UserProfile/ShareProfileDropdown.tsx
 create mode 100644 frontend/packages/client/src/helpers/theme/components/Button.ts

diff --git a/frontend/packages/client/src/components/UserProfile/ShareProfileDropdown.tsx b/frontend/packages/client/src/components/UserProfile/ShareProfileDropdown.tsx
new file mode 100644
index 000000000..5ff731752
--- /dev/null
+++ b/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;
diff --git a/frontend/packages/client/src/components/index.js b/frontend/packages/client/src/components/index.js
index 252e1c74f..d219ec481 100644
--- a/frontend/packages/client/src/components/index.js
+++ b/frontend/packages/client/src/components/index.js
@@ -62,3 +62,5 @@ export * from './Proposal';
 export { Card } from './Card';
 export { default as Tooltip } from './Tooltip';
 export { default as ShareDropdown } from './ShareDropdown';
+export { default as WalletAddress } from './WalletAddress';
+export { default as ShareProfileDropdown } from './UserProfile/ShareProfileDropdown';
diff --git a/frontend/packages/client/src/helpers/theme/components/Button.ts b/frontend/packages/client/src/helpers/theme/components/Button.ts
new file mode 100644
index 000000000..1c2e2b525
--- /dev/null
+++ b/frontend/packages/client/src/helpers/theme/components/Button.ts
@@ -0,0 +1,22 @@
+const Button = {
+  baseStyle: {
+    borderRadius: '3xl',
+    _hover: {
+      textDecoration: 'none',
+    },
+  },
+  sizes: {
+    lg: {
+      height: 11, // 2.75rem => 44px
+    },
+    md: {
+      height: 10, // 2.5rem => 40px
+    },
+    sm: {
+      height: 8, //2.125 => 34px
+    },
+  },
+  defaultProps: {},
+};
+
+export default Button;
diff --git a/frontend/packages/client/src/helpers/theme/components/Link.js b/frontend/packages/client/src/helpers/theme/components/Link.js
index 419dc21c2..db83bd1de 100644
--- a/frontend/packages/client/src/helpers/theme/components/Link.js
+++ b/frontend/packages/client/src/helpers/theme/components/Link.js
@@ -3,6 +3,11 @@ const Link = {
     underlined: {
       textDecoration: 'underline',
     },
+    noHover: {
+      _hover: {
+        textDecoration: 'none',
+      },
+    },
   },
 };
 
diff --git a/frontend/packages/client/src/helpers/theme/definitions.js b/frontend/packages/client/src/helpers/theme/definitions.js
index 325ac51b7..d8a4b1652 100644
--- a/frontend/packages/client/src/helpers/theme/definitions.js
+++ b/frontend/packages/client/src/helpers/theme/definitions.js
@@ -9,6 +9,10 @@ const definitions = {
   lineHeights: {
     shorter: 1.2858,
   },
+  sizes: {
+    8: '2.125rem', // 34 px for button size small
+    11: '2.75rem', // 44 px for button size large
+  },
   // https://chakra-ui.com/docs/styled-system/responsive-styles
   breakpoints: {
     sm: '22.5em', // from 0 to 360px
diff --git a/frontend/packages/client/src/helpers/theme/index.js b/frontend/packages/client/src/helpers/theme/index.js
index ca5149333..1bafc5b40 100644
--- a/frontend/packages/client/src/helpers/theme/index.js
+++ b/frontend/packages/client/src/helpers/theme/index.js
@@ -1,6 +1,7 @@
 //
 // ***********************************
 // Component style overrides for Chakra components
+import Button from './components/Button';
 import Input from './components/Input';
 import Link from './components/Link';
 import Text from './components/Text';
@@ -39,6 +40,7 @@ const overrides = {
     Card: CardStyle,
     Link,
     Text,
+    Button,
     // Other components go here
   },
 };
diff --git a/frontend/packages/client/src/pages/UserProfile.tsx b/frontend/packages/client/src/pages/UserProfile.tsx
index 5799a0f4d..e92d52ae7 100644
--- a/frontend/packages/client/src/pages/UserProfile.tsx
+++ b/frontend/packages/client/src/pages/UserProfile.tsx
@@ -1,11 +1,26 @@
 import Blockies from 'react-blockies';
+import { Link as RouterLink } from 'react-router-dom';
 import { useWebContext } from 'contexts/Web3';
-import { CommunityLinks } from 'components';
-import ShareDropdown from 'components/ShareDropdown';
-import WalletAddress from 'components/WalletAddress';
+import {
+  CommunityLinks,
+  ShareProfileDropdown,
+  WalletAddress,
+} from 'components';
 import { useMediaQuery, useQueryParams } from 'hooks';
-import { Box, Flex, Spacer } from '@chakra-ui/react';
-import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
+import {
+  Box,
+  Button,
+  Flex,
+  HStack,
+  Link,
+  Spacer,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  VStack,
+} from '@chakra-ui/react';
 import PageContainer from 'layout/PageContainer';
 
 const UserProfile: React.FC = () => {
@@ -22,8 +37,8 @@ const UserProfile: React.FC = () => {
   });
 
   // if there's an address provided in the query param then use it to get user information
-  const currentUserAddr =
-    userAddress === addr || !!userAddress ? addr : userAddress;
+  const currentUserAddr: string =
+    userAddress === addr || !userAddress ? addr : userAddress;
 
   // Load here info for currentUserAddr with hook
 
@@ -31,31 +46,46 @@ const UserProfile: React.FC = () => {
     <PageContainer>
       <Flex width="100%" flexWrap={['wrap', null, 'nowrap']}>
         <Flex maxWidth={[null, null, '400px']} width="100%" flexWrap="wrap">
-          <Flex minW="100%">
-            <Blockies
-              seed={currentUserAddr}
-              size={10}
-              scale={isBiggerThanMobile ? 12.4 : 9.6}
-              className="blockies"
-            />
-          </Flex>
-          <Flex pt="24px" minW="100%">
-            <Box maxW="193px">
-              <WalletAddress addr={currentUserAddr} />
-            </Box>
-          </Flex>
-          <Flex minW="100%">
-            <ShareDropdown twitterShareString={''} copyString={''} />
-          </Flex>
-          <Flex minW="100%">
-            <CommunityLinks
-              instagramUrl="dfdf"
-              twitterUrl="dfdf"
-              websiteUrl="dfdf"
-              discordUrl="dfdf"
-              githubUrl="dfdf"
-            />
-          </Flex>
+          <VStack spacing={5}>
+            <Flex minW="100%">
+              <Blockies
+                seed={currentUserAddr}
+                size={10}
+                scale={isBiggerThanMobile ? 12.4 : 9.6}
+                className="blockies"
+              />
+            </Flex>
+            <Flex minW="100%">
+              <Box maxW="193px">
+                <WalletAddress addr={currentUserAddr} />
+              </Box>
+            </Flex>
+            <Flex minW="100%">
+              <HStack spacing={2}>
+                <Link as={RouterLink} to="/profile/edit" variant="noHover">
+                  <Button
+                    size="lg"
+                    color="black"
+                    colorScheme="whiteAlpha"
+                    borderWidth="1px"
+                    borderColor="black"
+                  >
+                    Edit Profile
+                  </Button>
+                </Link>
+                <ShareProfileDropdown userAddr={currentUserAddr} />
+              </HStack>
+            </Flex>
+            <Flex minW="100%">
+              <CommunityLinks
+                instagramUrl="dfdf"
+                twitterUrl="dfdf"
+                websiteUrl="dfdf"
+                discordUrl="dfdf"
+                githubUrl="dfdf"
+              />
+            </Flex>
+          </VStack>
         </Flex>
         <Spacer minWidth={[0, 0, '72px']} maxWidth={[0, 0, '72px']} />
         <Flex flexGrow={1}>

From 1942a93e7407524b977dcca8390c43e4916143d2 Mon Sep 17 00:00:00 2001
From: German Urrustarazu <germanurrus@gmail.com>
Date: Wed, 2 Nov 2022 13:04:40 -0300
Subject: [PATCH 13/21] hide title if no links

---
 .../packages/client/src/components/CommunityLinks.js     | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/packages/client/src/components/CommunityLinks.js b/frontend/packages/client/src/components/CommunityLinks.js
index 33ccea87f..49965b589 100644
--- a/frontend/packages/client/src/components/CommunityLinks.js
+++ b/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"

From af79128ef1d827c0873d9ce418f98fa565eee3ad Mon Sep 17 00:00:00 2001
From: German Urrustarazu <germanurrus@gmail.com>
Date: Wed, 2 Nov 2022 13:04:46 -0300
Subject: [PATCH 14/21] add custom tab

---
 .../client/src/components/CustomTab.tsx       | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 frontend/packages/client/src/components/CustomTab.tsx

diff --git a/frontend/packages/client/src/components/CustomTab.tsx b/frontend/packages/client/src/components/CustomTab.tsx
new file mode 100644
index 000000000..eeb0d119c
--- /dev/null
+++ b/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;

From 0f0569d34d09d5c04615cacc4166ed90205d97ef Mon Sep 17 00:00:00 2001
From: German Urrustarazu <germanurrus@gmail.com>
Date: Wed, 2 Nov 2022 13:04:57 -0300
Subject: [PATCH 15/21] add component

---
 frontend/packages/client/src/components/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/packages/client/src/components/index.js b/frontend/packages/client/src/components/index.js
index d219ec481..bfe5ea455 100644
--- a/frontend/packages/client/src/components/index.js
+++ b/frontend/packages/client/src/components/index.js
@@ -64,3 +64,4 @@ export { default as Tooltip } from './Tooltip';
 export { default as ShareDropdown } from './ShareDropdown';
 export { default as WalletAddress } from './WalletAddress';
 export { default as ShareProfileDropdown } from './UserProfile/ShareProfileDropdown';
+export { default as CustomTab } from './CustomTab';

From 2fb699e501b8f9b442d8bc2066f5008267792272 Mon Sep 17 00:00:00 2001
From: German Urrustarazu <germanurrus@gmail.com>
Date: Wed, 2 Nov 2022 13:05:06 -0300
Subject: [PATCH 16/21] customize tabs

---
 .../src/helpers/theme/components/Tabs.ts      | 37 +++++++++++++++++++
 .../client/src/helpers/theme/index.js         |  2 +
 2 files changed, 39 insertions(+)
 create mode 100644 frontend/packages/client/src/helpers/theme/components/Tabs.ts

diff --git a/frontend/packages/client/src/helpers/theme/components/Tabs.ts b/frontend/packages/client/src/helpers/theme/components/Tabs.ts
new file mode 100644
index 000000000..0c39c026e
--- /dev/null
+++ b/frontend/packages/client/src/helpers/theme/components/Tabs.ts
@@ -0,0 +1,37 @@
+const Tabs = {
+  variants: {
+    profile: {
+      tab: {
+        _first: {
+          marginStart: 0,
+        },
+        _selected: {
+          borderBottom: '2px solid',
+          borderColor: 'black',
+          fontWeight: 'bold',
+          color: 'black',
+        },
+        _focus: {
+          'box-shadow': 'none',
+        },
+        marginLeft: 3,
+        marginRight: 3,
+        paddingLeft: 0,
+        paddingRight: 0,
+      },
+      tablist: {
+        color: 'grey.500',
+        borderBottom: '1px solid',
+        borderColor: 'inherit',
+        fontSize: 'lg',
+        lineHeight: '23px',
+      },
+      tabpanel: {
+        marginTop: 10,
+        padding: 0,
+      },
+    },
+  },
+};
+
+export default Tabs;
diff --git a/frontend/packages/client/src/helpers/theme/index.js b/frontend/packages/client/src/helpers/theme/index.js
index 1bafc5b40..16077157d 100644
--- a/frontend/packages/client/src/helpers/theme/index.js
+++ b/frontend/packages/client/src/helpers/theme/index.js
@@ -4,6 +4,7 @@
 import Button from './components/Button';
 import Input from './components/Input';
 import Link from './components/Link';
+import Tabs from './components/Tabs';
 import Text from './components/Text';
 // ***********************************
 //
@@ -41,6 +42,7 @@ const overrides = {
     Link,
     Text,
     Button,
+    Tabs,
     // Other components go here
   },
 };

From 272f4fdedeaf1d7050c7369a2dabe8aa552aff4f Mon Sep 17 00:00:00 2001
From: German Urrustarazu <germanurrus@gmail.com>
Date: Wed, 2 Nov 2022 13:05:47 -0300
Subject: [PATCH 17/21] update page

---
 .../packages/client/src/pages/UserProfile.tsx | 45 ++++++++++++-------
 1 file changed, 30 insertions(+), 15 deletions(-)

diff --git a/frontend/packages/client/src/pages/UserProfile.tsx b/frontend/packages/client/src/pages/UserProfile.tsx
index e92d52ae7..5bc25aa43 100644
--- a/frontend/packages/client/src/pages/UserProfile.tsx
+++ b/frontend/packages/client/src/pages/UserProfile.tsx
@@ -3,6 +3,7 @@ import { Link as RouterLink } from 'react-router-dom';
 import { useWebContext } from 'contexts/Web3';
 import {
   CommunityLinks,
+  CustomTab,
   ShareProfileDropdown,
   WalletAddress,
 } from 'components';
@@ -14,7 +15,6 @@ import {
   HStack,
   Link,
   Spacer,
-  Tab,
   TabList,
   TabPanel,
   TabPanels,
@@ -41,11 +41,22 @@ const UserProfile: React.FC = () => {
     userAddress === addr || !userAddress ? addr : userAddress;
 
   // Load here info for currentUserAddr with hook
+  const {
+    instagramUrl,
+    twitterUrl,
+    websiteUrl,
+    discordUrl,
+    githubUrl,
+  }: { [key: string]: string } = {};
 
   return (
     <PageContainer>
       <Flex width="100%" flexWrap={['wrap', null, 'nowrap']}>
-        <Flex maxWidth={[null, null, '400px']} width="100%" flexWrap="wrap">
+        <Flex
+          maxWidth={[null, null, '300px', '400px']}
+          width="100%"
+          flexWrap="wrap"
+        >
           <VStack spacing={5}>
             <Flex minW="100%">
               <Blockies
@@ -78,33 +89,37 @@ const UserProfile: React.FC = () => {
             </Flex>
             <Flex minW="100%">
               <CommunityLinks
-                instagramUrl="dfdf"
-                twitterUrl="dfdf"
-                websiteUrl="dfdf"
-                discordUrl="dfdf"
-                githubUrl="dfdf"
+                instagramUrl={instagramUrl}
+                twitterUrl={twitterUrl}
+                websiteUrl={websiteUrl}
+                discordUrl={discordUrl}
+                githubUrl={githubUrl}
               />
             </Flex>
           </VStack>
         </Flex>
-        <Spacer minWidth={[0, 0, '72px']} maxWidth={[0, 0, '72px']} />
+        <Spacer minWidth={[0, 0, 0, '72px']} maxWidth={[0, 0, 0, '72px']} />
         <Flex flexGrow={1}>
-          <Tabs>
+          <Tabs
+            minWidth="100%"
+            isFitted={!isBiggerThanMobile}
+            variant="profile"
+          >
             <TabList>
-              <Tab>Activity</Tab>
-              <Tab>Communities</Tab>
-              <Tab>Memberships</Tab>
+              <CustomTab>Activity</CustomTab>
+              <CustomTab>Communities</CustomTab>
+              <CustomTab>Memberships</CustomTab>
             </TabList>
 
             <TabPanels>
               <TabPanel>
-                <p>All Activities</p>
+                <p>Here Show all Activities</p>
               </TabPanel>
               <TabPanel>
-                <p>Communities!</p>
+                <p>Show Communities!</p>
               </TabPanel>
               <TabPanel>
-                <p>Memberships</p>
+                <p>Show Memberships</p>
               </TabPanel>
             </TabPanels>
           </Tabs>

From 625ec59390194ba21e8ace348221c34beff664a2 Mon Sep 17 00:00:00 2001
From: German Urrustarazu <germanurrus@gmail.com>
Date: Wed, 2 Nov 2022 13:14:15 -0300
Subject: [PATCH 18/21] remove other colos

---
 .../client/src/helpers/theme/foundations/colors.js       | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/frontend/packages/client/src/helpers/theme/foundations/colors.js b/frontend/packages/client/src/helpers/theme/foundations/colors.js
index 193434f11..7a541fb1b 100644
--- a/frontend/packages/client/src/helpers/theme/foundations/colors.js
+++ b/frontend/packages/client/src/helpers/theme/foundations/colors.js
@@ -4,16 +4,7 @@
 const colors = {
   // colors used in CAST designs
   blackAlpha: {
-    50: 'rgba(0, 0, 0, 0.04)',
-    100: 'rgba(0, 0, 0, 0.06)',
-    200: 'rgba(0, 0, 0, 0.08)',
-    300: 'rgba(0, 0, 0, 0.16)',
-    400: 'rgba(0, 0, 0, 0.24)',
-    500: 'rgba(0, 0, 0, 0.36)',
     600: 'rgba(0, 0, 0, 0.48)',
-    700: 'rgba(0, 0, 0, 0.64)',
-    800: 'rgba(0, 0, 0, 0.80)',
-    900: 'rgba(0, 0, 0, 0.92)',
   },
   red: {
     600: '#C2130A',

From 214448fae2f51614f4735f0e0cad59b4c365909f Mon Sep 17 00:00:00 2001
From: German Urrustarazu <germanurrus@gmail.com>
Date: Wed, 2 Nov 2022 14:34:59 -0300
Subject: [PATCH 19/21] update theme

---
 .../src/Button/Button.stories.js              | 15 +++++++++++++
 .../src}/theme/components/Button.ts           |  1 +
 .../src}/theme/components/Tabs.ts             |  0
 .../src}/theme/foundations/colors.js          |  0
 frontend/yarn.lock                            | 21 +++----------------
 5 files changed, 19 insertions(+), 18 deletions(-)
 create mode 100644 frontend/packages/shared-components/src/Button/Button.stories.js
 rename frontend/packages/{client/src/helpers => shared-components/src}/theme/components/Button.ts (92%)
 rename frontend/packages/{client/src/helpers => shared-components/src}/theme/components/Tabs.ts (100%)
 rename frontend/packages/{client/src/helpers => shared-components/src}/theme/foundations/colors.js (100%)

diff --git a/frontend/packages/shared-components/src/Button/Button.stories.js b/frontend/packages/shared-components/src/Button/Button.stories.js
new file mode 100644
index 000000000..711deb534
--- /dev/null
+++ b/frontend/packages/shared-components/src/Button/Button.stories.js
@@ -0,0 +1,15 @@
+import { Button } from '@chakra-ui/react';
+
+export default {
+  title: 'Shared Components/Button',
+  component: Button,
+  argTypes: {
+    size: {
+      options: ['lg', 'md', 'sm'],
+    },
+  },
+};
+
+const Template = (args) => <Button {...args}>Button</Button>;
+
+export const Controls = Template.bind({});
diff --git a/frontend/packages/client/src/helpers/theme/components/Button.ts b/frontend/packages/shared-components/src/theme/components/Button.ts
similarity index 92%
rename from frontend/packages/client/src/helpers/theme/components/Button.ts
rename to frontend/packages/shared-components/src/theme/components/Button.ts
index 1c2e2b525..5f13ae69d 100644
--- a/frontend/packages/client/src/helpers/theme/components/Button.ts
+++ b/frontend/packages/shared-components/src/theme/components/Button.ts
@@ -1,5 +1,6 @@
 const Button = {
   baseStyle: {
+    // adds rounded border
     borderRadius: '3xl',
     _hover: {
       textDecoration: 'none',
diff --git a/frontend/packages/client/src/helpers/theme/components/Tabs.ts b/frontend/packages/shared-components/src/theme/components/Tabs.ts
similarity index 100%
rename from frontend/packages/client/src/helpers/theme/components/Tabs.ts
rename to frontend/packages/shared-components/src/theme/components/Tabs.ts
diff --git a/frontend/packages/client/src/helpers/theme/foundations/colors.js b/frontend/packages/shared-components/src/theme/foundations/colors.js
similarity index 100%
rename from frontend/packages/client/src/helpers/theme/foundations/colors.js
rename to frontend/packages/shared-components/src/theme/foundations/colors.js
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index c95344d76..bf3501633 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -6355,7 +6355,7 @@ babel-jest@^27.4.2, babel-jest@^27.5.1:
     graceful-fs "^4.2.9"
     slash "^3.0.0"
 
-babel-loader@8.1.0, babel-loader@^8.0.0:
+babel-loader@8.1.0, babel-loader@^8.0.0, babel-loader@^8.2.3:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.1.0.tgz#c611d5112bd5209abe8b9fa84c3e4da25275f1c3"
   integrity sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==
@@ -6366,16 +6366,6 @@ babel-loader@8.1.0, babel-loader@^8.0.0:
     pify "^4.0.1"
     schema-utils "^2.6.5"
 
-babel-loader@^8.2.3:
-  version "8.2.5"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.5.tgz#d45f585e654d5a5d90f5350a779d7647c5ed512e"
-  integrity sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ==
-  dependencies:
-    find-cache-dir "^3.3.1"
-    loader-utils "^2.0.0"
-    make-dir "^3.1.0"
-    schema-utils "^2.6.5"
-
 babel-plugin-add-react-displayname@^0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/babel-plugin-add-react-displayname/-/babel-plugin-add-react-displayname-0.0.5.tgz#339d4cddb7b65fd62d1df9db9fe04de134122bd5"
@@ -13547,7 +13537,7 @@ make-dir@^2.0.0, make-dir@^2.1.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
-make-dir@^3.0.0, make-dir@^3.0.2, make-dir@^3.1.0:
+make-dir@^3.0.0, make-dir@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
   integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
@@ -16781,12 +16771,7 @@ react-error-boundary@^3.1.4:
   dependencies:
     "@babel/runtime" "^7.12.5"
 
-react-error-overlay@^6.0.11:
-  version "6.0.11"
-  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
-  integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
-
-react-error-overlay@^6.0.9:
+react-error-overlay@6.0.9, react-error-overlay@^6.0.11, react-error-overlay@^6.0.9:
   version "6.0.9"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==

From 5511a3770e01375c035a71bab87f0cd78cb17d78 Mon Sep 17 00:00:00 2001
From: German Urrustarazu <germanurrus@gmail.com>
Date: Wed, 2 Nov 2022 15:41:06 -0300
Subject: [PATCH 20/21] remove font def

---
 frontend/packages/client/src/App.sass         |  1 -
 .../packages/shared-components/package.json   |  1 +
 frontend/yarn.lock                            | 26 ++++++++++++++++---
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/frontend/packages/client/src/App.sass b/frontend/packages/client/src/App.sass
index f56712528..ce3a8efc7 100644
--- a/frontend/packages/client/src/App.sass
+++ b/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
diff --git a/frontend/packages/shared-components/package.json b/frontend/packages/shared-components/package.json
index c4f9eab9d..0d8420266 100644
--- a/frontend/packages/shared-components/package.json
+++ b/frontend/packages/shared-components/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "main": "src/index.js",
   "dependencies": {
+    "@fontsource/dm-sans": "^4.5.9",
     "@types/jest": "^29.1.2",
     "@types/node": "^18.8.5",
     "@types/react": "^18.0.21",
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index bf3501633..8846665a6 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -2444,6 +2444,11 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@fontsource/dm-sans@^4.5.9":
+  version "4.5.9"
+  resolved "https://registry.yarnpkg.com/@fontsource/dm-sans/-/dm-sans-4.5.9.tgz#a48f9c815728ebb47e1c58e5176a9d4aa6cb25ea"
+  integrity sha512-qaFvSBJhoeley1A9myRUUuHbm9sz7ADyC2WodezBzdFSPs2VD/p5WPPwtpVE8b1SglQrOPAnxA7s3fH5zOtiMQ==
+
 "@gar/promisify@^1.0.1":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
@@ -6355,7 +6360,7 @@ babel-jest@^27.4.2, babel-jest@^27.5.1:
     graceful-fs "^4.2.9"
     slash "^3.0.0"
 
-babel-loader@8.1.0, babel-loader@^8.0.0, babel-loader@^8.2.3:
+babel-loader@8.1.0, babel-loader@^8.0.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.1.0.tgz#c611d5112bd5209abe8b9fa84c3e4da25275f1c3"
   integrity sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==
@@ -6366,6 +6371,16 @@ babel-loader@8.1.0, babel-loader@^8.0.0, babel-loader@^8.2.3:
     pify "^4.0.1"
     schema-utils "^2.6.5"
 
+babel-loader@^8.2.3:
+  version "8.2.5"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.5.tgz#d45f585e654d5a5d90f5350a779d7647c5ed512e"
+  integrity sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ==
+  dependencies:
+    find-cache-dir "^3.3.1"
+    loader-utils "^2.0.0"
+    make-dir "^3.1.0"
+    schema-utils "^2.6.5"
+
 babel-plugin-add-react-displayname@^0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/babel-plugin-add-react-displayname/-/babel-plugin-add-react-displayname-0.0.5.tgz#339d4cddb7b65fd62d1df9db9fe04de134122bd5"
@@ -13537,7 +13552,7 @@ make-dir@^2.0.0, make-dir@^2.1.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
-make-dir@^3.0.0, make-dir@^3.0.2:
+make-dir@^3.0.0, make-dir@^3.0.2, make-dir@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
   integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
@@ -16771,7 +16786,12 @@ react-error-boundary@^3.1.4:
   dependencies:
     "@babel/runtime" "^7.12.5"
 
-react-error-overlay@6.0.9, react-error-overlay@^6.0.11, react-error-overlay@^6.0.9:
+react-error-overlay@^6.0.11:
+  version "6.0.11"
+  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
+  integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
+
+react-error-overlay@^6.0.9:
   version "6.0.9"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==

From 437382812e5e8ab12f42771b19e045b07d612906 Mon Sep 17 00:00:00 2001
From: German Urrustarazu <germanurrus@gmail.com>
Date: Wed, 2 Nov 2022 15:41:59 -0300
Subject: [PATCH 21/21] update component

---
 .../src/Button/Button.stories.js                  | 15 +++++++++++++++
 .../src/theme/components/Button.ts                |  3 +++
 .../shared-components/src/theme/definitions.js    |  6 +++---
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/frontend/packages/shared-components/src/Button/Button.stories.js b/frontend/packages/shared-components/src/Button/Button.stories.js
index 711deb534..212165b50 100644
--- a/frontend/packages/shared-components/src/Button/Button.stories.js
+++ b/frontend/packages/shared-components/src/Button/Button.stories.js
@@ -5,8 +5,23 @@ export default {
   component: Button,
   argTypes: {
     size: {
+      control: {
+        type: 'select',
+      },
       options: ['lg', 'md', 'sm'],
     },
+    border: {
+      control: {
+        type: 'select',
+      },
+      options: ['', 'light'],
+    },
+    bgColor: {
+      control: {
+        type: 'select',
+      },
+      options: ['yellow.500', 'grey.300'],
+    },
   },
 };
 
diff --git a/frontend/packages/shared-components/src/theme/components/Button.ts b/frontend/packages/shared-components/src/theme/components/Button.ts
index 5f13ae69d..9b94564aa 100644
--- a/frontend/packages/shared-components/src/theme/components/Button.ts
+++ b/frontend/packages/shared-components/src/theme/components/Button.ts
@@ -5,6 +5,9 @@ const Button = {
     _hover: {
       textDecoration: 'none',
     },
+    _focus: {
+      'box-shadow': 'none',
+    },
   },
   sizes: {
     lg: {
diff --git a/frontend/packages/shared-components/src/theme/definitions.js b/frontend/packages/shared-components/src/theme/definitions.js
index d8a4b1652..5c7763de8 100644
--- a/frontend/packages/shared-components/src/theme/definitions.js
+++ b/frontend/packages/shared-components/src/theme/definitions.js
@@ -2,9 +2,9 @@
 // https://v1.chakra-ui.com/docs/styled-system/theming/theme
 const definitions = {
   fonts: {
-    body: 'DM Sans',
-    heading: 'DM Sans',
-    mono: 'DM Sans',
+    body: `'DM Sans', sans-serif`,
+    heading: `'DM Sans', sans-serif`,
+    mono: `'DM Sans', sans-serif`,
   },
   lineHeights: {
     shorter: 1.2858,