feat: fix satoshi amount and icon + contribution milestone circular p…

…rogress

src/components/icons/svg/SatoshiIconTilted.tsx

@@ -1,107 +1,42 @@
 import { Icon, IconProps } from '@chakra-ui/react'
 
-export const SatoshiIconTilted = ({
-  dash,
-  scale = 1,
-  ...rest
-}: IconProps & { dash?: boolean; scale?: number }) => {
-  const height = scale * 25
-
-  if (dash) {
-    return (
-      <Icon
-        width="auto"
-        height={`${height}px`}
-        viewBox="0 0 10 11"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        paddingBottom="2px"
-        {...rest}
-      >
-        <g clipPath="url(#clip0_593_123592)">
-          <path
-            d="M5.00054 10.6241C7.74663 10.6241 9.97277 8.39799 9.97277 5.65191C9.97277 2.90583 7.74663 0.679688 5.00054 0.679688C2.25446 0.679688 0.0283203 2.90583 0.0283203 5.65191C0.0283203 8.39799 2.25446 10.6241 5.00054 10.6241Z"
-            fill="none"
-          />
-          <path
-            d="M6.38162 1.78854L5.75098 1.62109L5.46484 2.69875L6.09549 2.8662L6.38162 1.78854Z"
-            fill="currentColor"
-          />
-          <path
-            d="M4.53397 8.74069L3.90332 8.57324L3.61718 9.6509L4.24783 9.81835L4.53397 8.74069Z"
-            fill="currentColor"
-          />
-          <path
-            d="M7.60794 4.95487L7.77539 4.32422L3.2787 3.13026L3.11125 3.76091L7.60794 4.95487Z"
-            fill="currentColor"
-          />
-          <path
-            d="M7.16849 6.61893L7.33594 5.98828L2.83925 4.79433L2.6718 5.42497L7.16849 6.61893Z"
-            fill="currentColor"
-          />
-          <path
-            d="M6.73782 8.23905L6.90527 7.6084L2.40858 6.41444L2.24113 7.04509L6.73782 8.23905Z"
-            fill="currentColor"
-          />
-        </g>
-        <defs>
-          <clipPath id="clip0_593_123592">
-            <rect
-              width="10"
-              height="10"
-              fill="currentColor"
-              transform="translate(0 0.652344)"
-            />
-          </clipPath>
-        </defs>
-      </Icon>
-    )
-  }
-
+export const SatoshiIconTilted = (props: IconProps) => {
   return (
     <Icon
-      width="auto"
-      height={`${height}px`}
-      viewBox="0 0 10 11"
+      viewBox="0 0 18 18"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      paddingBottom="3px"
-      {...rest}
+      {...props}
     >
-      <g clipPath="url(#clip0_593_123592)">
+      <g clipPath="url(#clip0_899_62912)">
         <path
-          d="M5.00054 10.6241C7.74663 10.6241 9.97277 8.39799 9.97277 5.65191C9.97277 2.90583 7.74663 0.679688 5.00054 0.679688C2.25446 0.679688 0.0283203 2.90583 0.0283203 5.65191C0.0283203 8.39799 2.25446 10.6241 5.00054 10.6241Z"
+          d="M9.00176 17.9469C13.9447 17.9469 17.9518 13.9398 17.9518 8.99688C17.9518 4.05393 13.9447 0.046875 9.00176 0.046875C4.05881 0.046875 0.0517578 4.05393 0.0517578 8.99688C0.0517578 13.9398 4.05881 17.9469 9.00176 17.9469Z"
           fill="none"
         />
         <path
-          d="M6.38162 1.78854L5.75098 1.62109L5.46484 2.69875L6.09549 2.8662L6.38162 1.78854Z"
+          d="M11.4877 2.04457L10.3525 1.74316L9.83749 3.68295L10.9727 3.98436L11.4877 2.04457Z"
           fill="currentColor"
         />
         <path
-          d="M4.53397 8.74069L3.90332 8.57324L3.61718 9.6509L4.24783 9.81835L4.53397 8.74069Z"
+          d="M8.16105 14.5587L7.02588 14.2573L6.51083 16.1971L7.646 16.4985L8.16105 14.5587Z"
           fill="currentColor"
         />
         <path
-          d="M7.60794 4.95487L7.77539 4.32422L3.2787 3.13026L3.11125 3.76091L7.60794 4.95487Z"
+          d="M13.6942 7.74454L13.9956 6.60938L5.90156 4.46025L5.60016 5.59542L13.6942 7.74454Z"
           fill="currentColor"
         />
         <path
-          d="M7.16849 6.61893L7.33594 5.98828L2.83925 4.79433L2.6718 5.42497L7.16849 6.61893Z"
+          d="M12.9032 10.7401L13.2046 9.60498L5.11055 7.45586L4.80914 8.59103L12.9032 10.7401Z"
           fill="currentColor"
         />
         <path
-          d="M6.73782 8.23905L6.90527 7.6084L2.40858 6.41444L2.24113 7.04509L6.73782 8.23905Z"
+          d="M12.1283 13.6552L12.4297 12.52L4.33564 10.3709L4.03424 11.5061L12.1283 13.6552Z"
           fill="currentColor"
         />
       </g>
       <defs>
-        <clipPath id="clip0_593_123592">
-          <rect
-            width="10"
-            height="10"
-            fill="currentColor"
-            transform="translate(0 0.652344)"
-          />
+        <clipPath id="clip0_899_62912">
+          <rect width="18" height="18" fill="none" />
         </clipPath>
       </defs>
     </Icon>

src/components/molecules/projectDisplay/ActivityBrief.tsx

@@ -1,14 +1,12 @@
 import { CircularProgress, HStack, Text, VStack } from '@chakra-ui/react'
-import { useEffect, useState } from 'react'
-import { createUseStyles } from 'react-jss'
+import { useEffect, useMemo, useState } from 'react'
 
 import { Countdown } from '../../../pages/projectView/projectActivityPanel/components/Countdown'
-import { fonts } from '../../../styles'
 import {
   ProjectFragment,
   ProjectMilestone,
 } from '../../../types/generated/graphql'
-import { isActive, useMobileMode } from '../../../utils'
+import { isActive } from '../../../utils'
 import { getProjectBalance } from '../../../utils/helpers'
 import { SatoshiAmount } from '../../ui'
 
@@ -17,27 +15,12 @@ interface IActivityBrief {
   project: ProjectFragment
 }
 
-const useStyles = createUseStyles({
-  circularProgress: {
-    position: 'relative',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    '& .amount-label-sat': {
-      alignItems: 'flex-start',
-      justifyContent: 'center',
-    },
-  },
-})
-
 export const ActivityBrief = ({ loading, project }: IActivityBrief) => {
-  const classes = useStyles()
-  const isMobile = useMobileMode()
   const [currentMilestone, setCurrentMilestone] = useState<ProjectMilestone>()
   const [milestoneIndex, setMilestoneIndex] = useState<number>(0)
   const [prevMilestone, setPrevMilestone] = useState(0)
 
-  const balance = getProjectBalance(project)
+  const balance = useMemo(() => getProjectBalance(project), [project])
 
   useEffect(() => {
     if (project.milestones && project.milestones.length > 0) {
@@ -59,7 +42,7 @@ export const ActivityBrief = ({ loading, project }: IActivityBrief) => {
       })
       setPrevMilestone(prevTotal)
     }
-  }, [project])
+  }, [balance, project])
 
   const getTrackColor = () => {
     switch (milestoneIndex % 3) {
@@ -99,10 +82,9 @@ export const ActivityBrief = ({ loading, project }: IActivityBrief) => {
         <CircularProgress
           capIsRound
           isIndeterminate={loading}
-          className={classes.circularProgress}
           value={circularPercentage}
-          size="105px"
-          thickness="15px"
+          size="116px"
+          thickness="16px"
           color={getColor()}
           trackColor={getTrackColor()}
         />
@@ -120,12 +102,12 @@ export const ActivityBrief = ({ loading, project }: IActivityBrief) => {
           100,
       )
       return (
-        <Text
-          fontSize="14px"
-          fontFamily={fonts.mono}
-          color={'neutral.600'}
-          maxW="100%"
-        >{`${percentage}% of ${currentMilestone.name}`}</Text>
+        <Text pl={2} color="neutral.600" w="100%">
+          <Text w="100%" fontWeight={500} display="inline">
+            {percentage}% of Milestone {milestoneIndex}:
+          </Text>{' '}
+          {currentMilestone.name}
+        </Text>
       )
     }
 
@@ -135,30 +117,10 @@ export const ActivityBrief = ({ loading, project }: IActivityBrief) => {
   const showCountdown = isActive(project.status) && Boolean(project.expiresAt)
 
   return (
-    <HStack
-      width="100%"
-      padding={isMobile ? '20px 20px 0px 20px' : '10px 20px'}
-      justifyContent="space-between"
-    >
+    <HStack width="100%" padding={3} justifyContent="start">
       {renderCircularProgress()}
-      <VStack flex="1" spacing="5px" width="100%" overflow="hidden">
-        {!isMobile && (
-          <Text
-            fontSize="18px"
-            fontWeight={600}
-            color="neutral.900"
-            wordBreak="break-word"
-          >
-            {project.title}
-          </Text>
-        )}
-        <SatoshiAmount
-          fontSize="32px"
-          fontFamily={fonts.mono}
-          fontWeight={400}
-          fontStyle={'normal'}
-          color="primary.600"
-        >
+      <VStack flex="1" spacing={0} width="100%" px={2} alignItems="start">
+        <SatoshiAmount variant="satoshi" color="primary.600">
           {balance}
         </SatoshiAmount>
         {getMilestoneValue()}

src/components/molecules/projectDisplay/ProjectEntryCard.tsx

@@ -1,5 +1,5 @@
 import { CloseIcon } from '@chakra-ui/icons'
-import { Box, HStack, Image, Spacer, Stack } from '@chakra-ui/react'
+import { Box, HStack, Image, Spacer, Stack, Text } from '@chakra-ui/react'
 import { DateTime } from 'luxon'
 import { useMemo } from 'react'
 import { BiPencil } from 'react-icons/bi'
@@ -8,14 +8,13 @@ import { useNavigate } from 'react-router-dom'
 
 import { getPath } from '../../../constants'
 import { AvatarElement } from '../../../pages/projectView/projectMainBody/components'
-import { fonts } from '../../../styles'
 import {
   EntryForProjectFragment,
   EntryStatus,
 } from '../../../types/generated/graphql'
 import { getShortAmountLabel, toInt } from '../../../utils'
 import { CardLayout } from '../../layouts'
-import { Body1, Body2, H2, MonoBody1 } from '../../typography'
+import { Body1, Body2, H2 } from '../../typography'
 import { ICard, IconButtonComponent, SatoshiAmount } from '../../ui'
 import { EntryStatusLabel } from '../../ui/EntryStatusLabel'
 import { ProjectEntryCardThumbnailPlaceholder } from './ProjectEntryCardThumbnailPlaceholder'
@@ -163,21 +162,20 @@ export const ProjectEntryCard = ({ entry, onEdit, onDelete }: Props) => {
           spacing={{ base: '10px', lg: '22px' }}
           overflow="hidden"
         >
-          <HStack spacing={'10px'} align={'center'} flex={0}>
+          <HStack
+            spacing={'10px'}
+            align={'center'}
+            flex={0}
+            color="primary.400"
+          >
             <HStack spacing={1}>
-              <MonoBody1 color="primary.400" fontWeight={'bold'}>
-                {entry.fundersCount}
-              </MonoBody1>
-              <BsHeartFill color={'primary.400'} />
+              <Text variant="body1">{entry.fundersCount}</Text>
+              <Text variant="body1">
+                <BsHeartFill />
+              </Text>
             </HStack>
 
-            <SatoshiAmount
-              fontFamily={fonts.mono}
-              color="primary.400"
-              fontSize="16px"
-              fontWeight="bold"
-              scale={0.8}
-            >
+            <SatoshiAmount variant="body1">
               {getShortAmountLabel(entry.amountFunded)}
             </SatoshiAmount>
           </HStack>

src/components/molecules/projectDisplay/RewardCard.tsx

@@ -5,23 +5,16 @@ import { BiPencil } from 'react-icons/bi'
 import { TRewards } from '../../../pages/projectCreate/types'
 import { ProjectRewardForCreateUpdateFragment } from '../../../types/generated/graphql'
 import { CardLayout } from '../../layouts'
-import {
-  ICard,
-  IconButtonComponent,
-  ImageWithReload,
-  SatoshiAmount,
-} from '../../ui'
+import { ICard, IconButtonComponent, ImageWithReload } from '../../ui'
 
 type Props = ICard & {
   reward: TRewards | ProjectRewardForCreateUpdateFragment
-  isSatoshi: boolean
   handleEdit?: any
   handleRemove?: any
 }
 
 export const RewardCard = ({
   reward,
-  isSatoshi,
   handleEdit,
   handleRemove,
   ...rest
@@ -46,16 +39,12 @@ export const RewardCard = ({
         <HStack width="100%" justifyContent={'space-between'} paddingX="4px">
           <HStack>
             <VStack spacing="0px">
-              {isSatoshi ? (
-                <SatoshiAmount color="primary.400">{reward.cost}</SatoshiAmount>
-              ) : (
-                <Text color={'neutral.1000'} fontWeight="bold">
-                  {/*
+              <Text color={'neutral.1000'} fontWeight="bold">
+                {/*
                     Divided by 100 as cost is in cents
                   */}
-                  {`$ ${reward.cost / 100}`}
-                </Text>
-              )}
+                {`$ ${reward.cost / 100}`}
+              </Text>
               <Text
                 whiteSpace="nowrap"
                 fontSize="12px"