fix: dao logo icon component

terra-money · Mar 3, 2023 · 1c5664f · 1c5664f
1 parent df527c2
commit 1c5664f
Show file tree

Hide file tree

Showing 16 changed files with 77 additions and 86 deletions.
diff --git a/apps/enterprise/src/components/dao-logo/DAOLogo.module.sass b/apps/enterprise/src/components/dao-logo/DAOLogo.module.sass
diff --git a/apps/enterprise/src/components/dao-logo/DAOLogo.tsx b/apps/enterprise/src/components/dao-logo/DAOLogo.tsx
@@ -1,36 +1,62 @@
-import classNames from 'classnames';
 import { SafeImage } from 'components/safe-image/SafeImage';
 import { forwardRef } from 'react';
 import { ReactComponent as LogoIcon } from 'components/assets/LogoSmall.svg';
-import styles from './DAOLogo.module.sass';
+import styled from 'styled-components';
+import { roundedCSS } from 'lib/ui/utils/roundedCSS';
+import { centerContentCSS } from 'lib/ui/utils/centerContentCSS';
+import { Text } from 'lib/ui/Text';
+import { getSameDimensionsCSS } from 'lib/ui/utils/getSameDimensionsCSS';
 
-type Variant = 'small' | 'large';
+export const daoLogoSizes = ['s', 'm', 'l'] as const;
+
+type DaoLogoSize = typeof daoLogoSizes[number];
+
+const logoSizeRecord: Record<DaoLogoSize, number> = {
+  s: 40,
+  m: 48,
+  l: 60
+}
 
 interface DAOLogoProps {
-  className?: string;
-  variant?: Variant;
-  logo: string | undefined;
-  onClick?: () => void;
+  logo?: string
+  size?: DaoLogoSize
+  className?: string
 }
 
+const Container = styled.div<{ size: DaoLogoSize }>`
+  background: ${({ theme }) => theme.colors.backgroundGlass.toCssValue()};
+  ${roundedCSS};
+  ${centerContentCSS};
+
+  padding: 8px;
+
+  height: ${({ size }) => getSameDimensionsCSS(logoSizeRecord[size])};
+
+  img {
+    object-fit: cover;
+    ${({ size }) => getSameDimensionsCSS(logoSizeRecord[size] * 0.64)};
+  }
+`
+
+
 export const DAOLogo = forwardRef<any, DAOLogoProps>((props, ref) => {
-  const { className, variant = 'small', logo, onClick, ...rest } = props;
+  const { logo, size = 'm', className } = props;
 
   return (
-    <div
-      className={classNames(className, styles.root, {
-        [styles.link]: Boolean(onClick),
-      })}
+    <Container
       ref={ref}
-      onClick={onClick}
-      data-variant={variant}
-      {...rest}
+      size={size}
+      className={className}
     >
       <SafeImage
-        fallback={<LogoIcon className={styles.placeholder} />}
+        fallback={(
+          <Text size={20} color="supporting">
+            <LogoIcon />
+          </Text>
+        )}
         src={logo}
         render={(params) => <img ref={ref} {...params} alt="" />}
       />
-    </div>
+    </Container>
   );
 });
diff --git a/apps/enterprise/src/components/layout/Favourites.module.sass b/apps/enterprise/src/components/layout/Favourites.module.sass
@@ -8,7 +8,4 @@
 
   .icon
     cursor: pointer
-    width: 48px !important
-    height: 48px !important
-    padding: 12px !important
     background-color: var(--section-background-color)
diff --git a/apps/enterprise/src/pages/create-proposal/Header.tsx b/apps/enterprise/src/pages/create-proposal/Header.tsx
@@ -22,7 +22,9 @@ export const Header = forwardRef((props: HeaderProps, ref: Ref<HTMLDivElement>)
   if (compact) {
     return (
       <Container ref={ref} className={classNames(className, styles.root, styles.compact)}>
-        <DAOLogo className={styles.logo} logo={dao.logo} />
+        <div className={styles.logo}>
+          <DAOLogo size="s" logo={dao.logo} />
+        </div>
         <Text className={styles.name} variant="heading2">
           {title}
         </Text>
@@ -36,7 +38,9 @@ export const Header = forwardRef((props: HeaderProps, ref: Ref<HTMLDivElement>)
         <Text className={styles.back} variant="link" onClick={() => navigate(-1)}>
           Back
         </Text>
-        <DAOLogo className={styles.logo} logo={dao.logo} />
+        <div className={styles.logo}>
+          <DAOLogo size="s" logo={dao.logo} />
+        </div>
         <Text className={styles.name} variant="heading2">
           {title}
         </Text>

diff --git a/apps/enterprise/src/pages/create-proposal/MobileCreateProposalHeader.tsx b/apps/enterprise/src/pages/create-proposal/MobileCreateProposalHeader.tsx
@@ -14,7 +14,7 @@ export const MobileCreateProposalHeader = ({ title }: MobileCreateProposalHeader
   return (
     <VStack gap={24}>
       <HStack gap={8} alignItems="center">
-        <DAOLogo logo={dao.logo} />
+        <DAOLogo size="s" logo={dao.logo} />
         <Text size={24} weight="bold">
           {title}
         </Text>

diff --git a/apps/enterprise/src/pages/dao/Header.module.sass b/apps/enterprise/src/pages/dao/Header.module.sass
@@ -50,9 +50,6 @@
 
 .logo
   cursor: pointer
-  width: 48px !important
-  height: 48px !important
-  padding: 12px !important
 
 .favourite, .logo
   background-color: var(--section-background-color)
diff --git a/apps/enterprise/src/pages/dao/Header.tsx b/apps/enterprise/src/pages/dao/Header.tsx
@@ -24,7 +24,9 @@ export const Header = forwardRef((props: HeaderProps, ref: Ref<HTMLDivElement>)
   if (compact) {
     return (
       <Container ref={ref} className={classNames(className, styles.root, styles.compact)}>
-        <DAOLogo className={styles.logo} logo={dao.logo} />
+        <div className={styles.logo}>
+          <DAOLogo size="m" logo={dao.logo} />
+        </div>
         <FavouriteToggle className={styles.favourite} dao={dao} />
         <Text className={styles.name} variant="heading2">
           {dao.name}
@@ -45,7 +47,9 @@ export const Header = forwardRef((props: HeaderProps, ref: Ref<HTMLDivElement>)
               Back
             </Text>
           </InternalLink>
-          <DAOLogo className={styles.logo} logo={dao.logo} />
+          <div className={styles.logo}>
+            <DAOLogo size="m" logo={dao.logo} />
+          </div>
           <FavouriteToggle className={styles.favourite} dao={dao} />
           <Text className={styles.name} variant="heading2">
             {dao.name}

diff --git a/apps/enterprise/src/pages/dao/MobileDaoHeader.tsx b/apps/enterprise/src/pages/dao/MobileDaoHeader.tsx
@@ -13,7 +13,7 @@ export const MobileDaoHeader = () => {
     <VStack gap={24}>
       <HStack gap={8}>
         <FavouriteToggle size="small" dao={dao} />
-        <DAOLogo logo={dao.logo} />
+        <DAOLogo size="s" logo={dao.logo} />
       </HStack>
       <Text size={24} weight="bold">
         {dao.name}

diff --git a/apps/enterprise/src/pages/dao/staking/NFTStaking.tsx b/apps/enterprise/src/pages/dao/staking/NFTStaking.tsx
@@ -75,7 +75,7 @@ export const NftStakingConnectedView = () => {
           <Container className={styles.staking} component="section" direction="column">
             <VStack gap={40}>
               <Container className={styles.header}>
-                <DAOLogo logo={dao.logo} variant="large" />
+                <DAOLogo logo={dao.logo} size="l" />
                 <Text variant="label" className={styles.title}>
                   Voting power
                 </Text>

diff --git a/apps/enterprise/src/pages/dao/staking/TokenStaking.tsx b/apps/enterprise/src/pages/dao/staking/TokenStaking.tsx
@@ -105,7 +105,7 @@ export const TokenStakingConnectedView = () => {
           <Container className={styles.staking} component="section" direction="column">
             <VStack gap={40}>
               <Container className={styles.header}>
-                <DAOLogo logo={dao.logo} variant="large" />
+                <DAOLogo logo={dao.logo} size="l" />
                 <Text variant="label" className={styles.title}>
                   Voting power
                 </Text>

diff --git a/apps/enterprise/src/pages/proposal/Header.tsx b/apps/enterprise/src/pages/proposal/Header.tsx
@@ -23,7 +23,9 @@ export const Header = forwardRef((props: HeaderProps, ref: Ref<HTMLDivElement>)
   if (compact) {
     return (
       <Container ref={ref} className={classNames(className, styles.root, styles.compact)}>
-        <DAOLogo className={styles.logo} logo={proposal.dao.logo} />
+        <div className={styles.logo} >
+          <DAOLogo size="s" logo={proposal.dao.logo} />
+        </div>
         <Text className={styles.name} variant="heading2">
           {proposal.title}
         </Text>
@@ -38,7 +40,9 @@ export const Header = forwardRef((props: HeaderProps, ref: Ref<HTMLDivElement>)
         <Text className={styles.back} variant="link" onClick={() => navigate(-1)}>
           Back
         </Text>
-        <DAOLogo className={styles.logo} logo={proposal.dao.logo} />
+        <div className={styles.logo} >
+          <DAOLogo size="s" logo={proposal.dao.logo} />
+        </div>
         <Text className={styles.name} variant="heading2">
           {proposal.title}
         </Text>

diff --git a/apps/enterprise/src/pages/proposal/LogoValueView.tsx b/apps/enterprise/src/pages/proposal/LogoValueView.tsx
@@ -8,7 +8,7 @@ interface LogoValueViewProps {
 export const LogoValueView = ({ value }: LogoValueViewProps) => {
   return (
     <HStack alignItems="center" gap={4}>
-      <DAOLogo logo={value} />
+      <DAOLogo size="s" logo={value} />
       {value}
     </HStack>
   )

diff --git a/apps/enterprise/src/pages/proposal/SmallScreenProposalHeader.tsx b/apps/enterprise/src/pages/proposal/SmallScreenProposalHeader.tsx
@@ -11,7 +11,7 @@ export const SmallScreenProposalHeader = () => {
   return (
     <VStack gap={24}>
       <HStack gap={8}>
-        <DAOLogo logo={dao.logo} />
+        <DAOLogo size="s" logo={dao.logo} />
       </HStack>
       <Text size={24} weight="bold">
         {proposal.title}

diff --git a/apps/enterprise/src/pages/shared/DAOCard.module.sass b/apps/enterprise/src/pages/shared/DAOCard.module.sass
@@ -14,8 +14,6 @@
       height: 48px
       grid-row: 1 / span 2 !important
     .favourite
-      width: 48px
-      height: 48px
       border-radius: 50%
   &:not(.skeleton)
     cursor: pointer
@@ -26,16 +24,6 @@
 .logo
   grid-column: 1
   grid-row: 1 / span 2
-  width: 48px
-  height: 48px
-  border-radius: 50%
-  background-color: #262829
-  display: flex
-  align-items: center
-  justify-content: center
-  img
-    width: 32px
-    height: 32px
 
 .name
   display: block

diff --git a/apps/enterprise/src/pages/shared/DAOCard.tsx b/apps/enterprise/src/pages/shared/DAOCard.tsx
@@ -29,20 +29,20 @@ export const DAOCard = (props: DAOCardProps) => {
     );
   }
 
-  const logo = <DAOLogo logo={dao.logo} className={styles.logo} />;
-
   const description =
     dao.type === undefined
       ? undefined
       : dao.type === 'multisig'
-      ? 'Multisig DAO'
-      : dao.type === 'nft'
-      ? 'NFT Community DAO'
-      : 'Community Token DAO';
+        ? 'Multisig DAO'
+        : dao.type === 'nft'
+          ? 'NFT Community DAO'
+          : 'Community Token DAO';
 
   return (
     <Container className={classNames(className, styles.root)} onClick={() => navigate(`/dao/${dao.address}`)}>
-      {logo}
+      <div className={styles.logo}>
+        <DAOLogo logo={dao.logo} />
+      </div>
       <Text className={styles.name} variant="heading4">
         {dao.name}
       </Text>

diff --git a/apps/enterprise/src/pages/shared/ProposalCard.tsx b/apps/enterprise/src/pages/shared/ProposalCard.tsx
@@ -96,8 +96,8 @@ export const ProposalCard = (props: ProposalCardProps) => {
     dao.type === 'multisig'
       ? proposal.totalVotes
       : proposal.status === 'in_progress'
-      ? totalStaked
-      : proposal.totalVotes;
+        ? totalStaked
+        : proposal.totalVotes;
 
   return (
     <Container
@@ -119,7 +119,7 @@ export const ProposalCard = (props: ProposalCardProps) => {
           {description}
         </Text>
         <Container className={styles.footer}>
-          <DAOLogo logo={dao.logo} />
+          <DAOLogo size="s" logo={dao.logo} />
           <Text className={styles.name} variant="text">
             {dao.name}
           </Text>