Add logos to the UI

WRadoslaw · Mar 17, 2024 · d13a7f6 · d13a7f6
1 parent 48d2a0b
commit d13a7f6
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 18 deletions.
diff --git a/packages/atlas/src/components/ChangeNowModal/ChangeNowModal.tsx b/packages/atlas/src/components/ChangeNowModal/ChangeNowModal.tsx
@@ -1,6 +1,7 @@
+import styled from '@emotion/styled'
 import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react'
 
-import { SvgAlertsInformative32 } from '@/assets/icons'
+import { SvgAlertsInformative32, SvgLogoChangenow } from '@/assets/icons'
 import { SwapExpired } from '@/components/ChangeNowModal/steps/SwapExpired'
 import { Spinner } from '@/components/_loaders/Spinner'
 import { DialogButtonProps } from '@/components/_overlays/Dialog'
@@ -111,7 +112,9 @@ export const ChangeNowModal = ({ type, onClose }: ChangeNowModalProps) => {
       onExitClick={step === ChangeNowModalStep.SWAP_EXPIRED ? undefined : () => onClose()}
       primaryButton={primaryButtonProps}
       secondaryButton={secondaryButton}
-      additionalActionsNode={step === ChangeNowModalStep.PROGRESS && primaryButtonProps ? <Spinner /> : null}
+      additionalActionsNode={
+        step === ChangeNowModalStep.PROGRESS && !primaryButtonProps ? <Spinner /> : <StyledSvgLogoChangenow />
+      }
     >
       {step === ChangeNowModalStep.INFO && <InformationStep {...commonProps} />}
       {step === ChangeNowModalStep.FORM && (
@@ -127,3 +130,8 @@ export const ChangeNowModal = ({ type, onClose }: ChangeNowModalProps) => {
     </DialogModal>
   )
 }
+
+const StyledSvgLogoChangenow = styled(SvgLogoChangenow)`
+  height: 30px;
+  width: 60px;
+`
diff --git a/packages/atlas/src/components/_crt/CrtPortfolioTable/CrtPortfolioTable.tsx b/packages/atlas/src/components/_crt/CrtPortfolioTable/CrtPortfolioTable.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import { useMemo, useState } from 'react'
+import { ReactElement, useMemo, useState } from 'react'
 import { useNavigate } from 'react-router'
 
 import { useBasicChannel } from '@/api/hooks/channel'
@@ -134,28 +134,28 @@ export const CrtPortfolioTable = ({ data, emptyState, isLoading }: CrtPortfolioT
 
 export const TokenInfo = ({
   tokenTitle,
-  tokenName,
   isVerified,
   channelId,
-}: Pick<PortfolioToken, 'tokenName' | 'tokenTitle' | 'isVerified' | 'channelId'>) => {
+  customAvatar,
+}: Pick<PortfolioToken, 'tokenName' | 'tokenTitle' | 'isVerified' | 'channelId'> & {
+  customAvatar?: ReactElement
+}) => {
   const { channel } = useBasicChannel(channelId ?? '')
   const navigate = useNavigate()
   return (
     <FlexBox minWidth="100px" alignItems="center" gap={2}>
-      <Avatar
-        assetUrls={channel?.avatarPhoto?.resolvedUrls}
-        onClick={() => (channelId ? navigate(absoluteRoutes.viewer.channel(channelId, { tab: 'Token' })) : undefined)}
-      />
-      <FlexBox flow="column" gap={0}>
+      {customAvatar ?? (
+        <Avatar
+          assetUrls={channel?.avatarPhoto?.resolvedUrls}
+          onClick={() => (channelId ? navigate(absoluteRoutes.viewer.channel(channelId, { tab: 'Token' })) : undefined)}
+        />
+      )}
+
+      <FlexBox alignItems="center">
         <Text variant="h200" as="h1">
           {tokenTitle}
         </Text>
-        <FlexBox alignItems="center" gap={1}>
-          <Text variant="t100" as="span" color="colorText">
-            {tokenName}
-          </Text>
-          {isVerified && <SvgActionVerified />}
-        </FlexBox>
+        {isVerified && <SvgActionVerified />}
       </FlexBox>
     </FlexBox>
   )

diff --git a/packages/atlas/src/views/viewer/PortfolioView/tabs/PortfolioTokenTab.tsx b/packages/atlas/src/views/viewer/PortfolioView/tabs/PortfolioTokenTab.tsx
@@ -8,7 +8,7 @@ import {
   useGetTokenRevenueSharesCountQuery,
   useGetTokenRevenueSharesQuery,
 } from '@/api/queries/__generated__/creatorTokens.generated'
-import { SvgActionChevronB } from '@/assets/icons'
+import { SvgActionChevronB, SvgLogoJoystream } from '@/assets/icons'
 import { SvgEmptyStateIllustration } from '@/assets/illustrations'
 import { FlexBox } from '@/components/FlexBox'
 import { NumberFormat } from '@/components/NumberFormat'
@@ -32,6 +32,7 @@ import { useSubscribeAccountBalance, useTokenPrice } from '@/providers/joystream
 import { useJoystreamStore } from '@/providers/joystream/joystream.store'
 import { useTransactionManagerStore } from '@/providers/transactions/transactions.store'
 import { useUser } from '@/providers/user/user.hooks'
+import { cVar, square } from '@/styles'
 import { formatNumber } from '@/utils/number'
 import { StyledSvgJoyTokenMonochrome24 } from '@/views/studio/MyPaymentsView/PaymentsOverview/PaymentsOverview.styles'
 
@@ -267,7 +268,16 @@ export const PortfolioTokenTab = () => {
           data={[
             {
               name: (
-                <TokenInfo tokenName="Joystream" tokenTitle={atlasConfig.joystream.tokenTicker} isVerified={false} />
+                <TokenInfo
+                  tokenName="Joystream"
+                  tokenTitle={atlasConfig.joystream.tokenTicker}
+                  isVerified
+                  customAvatar={
+                    <JoystreamLogoWrapper>
+                      <SvgLogoJoystream />
+                    </JoystreamLogoWrapper>
+                  }
+                />
               ),
               price: (
                 <Text variant="t100" as="p">
@@ -331,3 +341,16 @@ const StyledTable = styled(Table)`
     }
   }
 `
+
+export const JoystreamLogoWrapper = styled.div`
+  ${square(32)};
+
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  background-color: ${cVar('colorBackgroundPrimary')};
+
+  svg {
+    ${square(20)};
+  }
+`