@homefile/components-v2 2.3.0 → 2.4.0

package/dist/stories/inboxTile/MessagePanel.stories.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MessageChatPanel, MessagePanel, RightPanel } from '../../components';
+import { action } from '@storybook/addon-actions';
+import { messagesMock } from '../../mocks';
+import { Fragment, useState } from 'react';
+export default {
+    title: 'Components/Inbox',
+    component: MessagePanel,
+    args: {
+        messages: messagesMock,
+    },
+    decorators: [
+        (Story) => (_jsx(RightPanel, { isOpen: true, onClose: action('onClose'), children: _jsx(Story, {}) })),
+    ],
+};
+export const MessagePanelComponent = (args) => {
+    const [showMessageChat, setShowMessageChat] = useState(false);
+    const [selectedMessage, setSelectedMessage] = useState(undefined);
+    const handleMessageChatToggle = () => setShowMessageChat(!showMessageChat);
+    return (_jsxs(Fragment, { children: [_jsx(MessagePanel, Object.assign({}, args, { onClick: (message) => {
+                    setSelectedMessage(message);
+                    handleMessageChatToggle();
+                } })), _jsx(RightPanel, { isOpen: showMessageChat, onClose: handleMessageChatToggle, children: _jsx(MessageChatPanel, { message: selectedMessage, onReply: action('onReply'), onClose: action('onCloseChatPanel'), onBack: handleMessageChatToggle }) })] }));
+};

package/dist/theme/colors.d.ts

@@ -113,7 +113,10 @@ export declare const colors: {
         1: string;
         2: string;
     };
-    skyGradient: string;
+    dayGradient: string;
+    morningGradient: string;
+    eveningGradient: string;
+    nightGradient: string;
     overlay: string;
     overlayWhite: string;
 };

package/dist/theme/colors.js

@@ -113,7 +113,10 @@ export const colors = {
         1: '#f5ddf4',
         2: '#F544DA',
     },
-    skyGradient: 'linear(to-b, #cff1fc, #F9FEFF)',
+    dayGradient: 'linear(to-b, #cff1fc, #F9FEFF)',
+    morningGradient: 'linear(to-b, #d2abf1, #f7dcac)',
+    eveningGradient: 'linear(to-b, #bcc5f2, #ee91f3)',
+    nightGradient: 'linear(to-b, #7a7bcf, #a4b0d7)',
     overlay: '#00000040',
     overlayWhite: '#FFFFFF80',
 };

package/dist/utils/Animations.utils.d.ts

@@ -0,0 +1,6 @@
+export type TimeOfDay = 'morning' | 'day' | 'evening' | 'night';
+export type Season = 'spring' | 'summer' | 'fall' | 'winter';
+export type TimeOfDaySeason = `${TimeOfDay}-${Season}`;
+export declare const getTimeOfDay: () => TimeOfDay;
+export declare const getSeason: () => Season;
+export declare const getTimeOfDaySeason: () => TimeOfDaySeason;

package/dist/utils/Animations.utils.js

@@ -0,0 +1,31 @@
+export const getTimeOfDay = () => {
+    const currentHour = new Date().getHours();
+    switch (true) {
+        case currentHour >= 6 && currentHour < 12:
+            return 'morning';
+        case currentHour >= 12 && currentHour < 18:
+            return 'day';
+        case currentHour >= 18 && currentHour < 21:
+            return 'evening';
+        default:
+            return 'night';
+    }
+};
+export const getSeason = () => {
+    const currentMonth = new Date().getMonth();
+    switch (true) {
+        case currentMonth >= 2 && currentMonth < 5:
+            return 'spring';
+        case currentMonth >= 5 && currentMonth < 8:
+            return 'summer';
+        case currentMonth >= 8 && currentMonth < 11:
+            return 'fall';
+        default:
+            return 'winter';
+    }
+};
+export const getTimeOfDaySeason = () => {
+    const timeOfDay = getTimeOfDay();
+    const season = getSeason();
+    return `${timeOfDay}-${season}`;
+};

package/dist/utils/Avatars.utils.d.ts

@@ -1 +1 @@
-export declare const randomColor: (index: number) => string;
+export declare const randomColor: (index?: number) => string;

package/dist/utils/Avatars.utils.js

@@ -33,7 +33,7 @@ const colors = [
     '#DE9E35',
     '#37323E',
 ];
-export const randomColor = (index) => {
+export const randomColor = (index = Math.floor(Math.random() * 30)) => {
     if (index >= colors.length) {
         return colors[index % colors.length];
     }

package/dist/utils/index.d.ts

@@ -1,4 +1,5 @@
 export * from './AddMedia.utils';
+export * from './Animations.utils';
 export * from './Avatars.utils';
 export * from './BrowserDetectors.utils';
 export * from './BubblesTour.utils';

package/dist/utils/index.js

@@ -1,4 +1,5 @@
 export * from './AddMedia.utils';
+export * from './Animations.utils';
 export * from './Avatars.utils';
 export * from './BrowserDetectors.utils';
 export * from './BubblesTour.utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",

package/src/assets/images/animations/index.ts

@@ -0,0 +1,15 @@
+import TreesDay from './trees-day-summer.png'
+import TreesDayFall from './trees-day-fall.png'
+import TreesDayWinter from './trees-day-winter.png'
+import TreesEvening from './trees-evening.png'
+import TreesMorning from './trees-morning.png'
+import TreesNight from './trees-night.png'
+
+export {
+  TreesDay,
+  TreesDayFall,
+  TreesDayWinter,
+  TreesEvening,
+  TreesMorning,
+  TreesNight,
+}

package/src/assets/images/chat-bubble.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <g id="Group_21874" data-name="Group 21874" transform="translate(-1764 -254)">
+    <g id="Union_41" data-name="Union 41" transform="translate(1764 254)" fill="#fff">
+      <path d="M 6.399946212768555 19.02802085876465 L 4.829119682312012 16.40986061096191 L 4.683469772338867 16.16709899902344 L 4.400369644165039 16.16709899902344 L 2.999699831008911 16.16709899902344 C 1.621359825134277 16.16709899902344 0.4999998509883881 15.04533958435059 0.4999998509883881 13.66650009155273 L 0.4999998509883881 2.999699831008911 C 0.4999998509883881 1.621359825134277 1.621359825134277 0.4999998509883881 2.999699831008911 0.4999998509883881 L 17.00009918212891 0.4999998509883881 C 18.37843894958496 0.4999998509883881 19.49979972839355 1.621359825134277 19.49979972839355 2.999699831008911 L 19.49979972839355 13.66650009155273 C 19.49979972839355 15.04533958435059 18.37843894958496 16.16709899902344 17.00009918212891 16.16709899902344 L 8.399879455566406 16.16709899902344 L 8.116809844970703 16.16709899902344 L 7.971149921417236 16.40982055664062 L 6.399946212768555 19.02802085876465 Z" stroke="none"/>
+      <path d="M 6.399997234344482 18.05625152587891 L 7.833739757537842 15.66709995269775 L 17.00009918212891 15.66709995269775 C 18.10273933410645 15.66709995269775 18.99979972839355 14.76962947845459 18.99979972839355 13.66650009155273 L 18.99979972839355 2.999699831008911 C 18.99979972839355 1.897059917449951 18.10273933410645 0.9999998807907104 17.00009918212891 0.9999998807907104 L 2.999699831008911 0.9999998807907104 C 1.897059917449951 0.9999998807907104 0.9999998807907104 1.897059917449951 0.9999998807907104 2.999699831008911 L 0.9999998807907104 13.66650009155273 C 0.9999998807907104 14.76962947845459 1.897059917449951 15.66709995269775 2.999699831008911 15.66709995269775 L 4.966569900512695 15.66709995269775 L 6.399997234344482 18.05625152587891 M 6.399899959564209 19.99979972839355 L 4.400369644165039 16.66709899902344 L 2.999699831008911 16.66709899902344 C 1.34279990196228 16.66709899902344 -1.358032193365943e-07 15.32339954376221 -1.358032193365943e-07 13.66650009155273 L -1.358032193365943e-07 2.999699831008911 C -1.358032193365943e-07 1.34279990196228 1.34279990196228 -1.358032193365943e-07 2.999699831008911 -1.358032193365943e-07 L 17.00009918212891 -1.358032193365943e-07 C 18.6569995880127 -1.358032193365943e-07 19.99979972839355 1.34279990196228 19.99979972839355 2.999699831008911 L 19.99979972839355 13.66650009155273 C 19.99979972839355 15.32339954376221 18.6569995880127 16.66709899902344 17.00009918212891 16.66709899902344 L 8.399879455566406 16.66709899902344 L 6.399899959564209 19.99979972839355 Z" stroke="none" fill="#1c7ab4"/>
+    </g>
+  </g>
+</svg>

package/src/assets/images/document2.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20.852" height="21.158" viewBox="0 0 20.852 21.158">
+  <g id="Group_21880" data-name="Group 21880" transform="translate(-13.43 -0.001)">
+    <path id="Path_17605" data-name="Path 17605" d="M13.43,0V21.158H34.281V3.591L30.028,0Z" transform="translate(0 0)" fill="#d2edef"/>
+    <path id="Path_17606" data-name="Path 17606" d="M77.93,0V3.389h3.481Z" transform="translate(-47.13)" fill="#324458"/>
+    <path id="Path_17607" data-name="Path 17607" d="M13.43,94.821Z" transform="translate(0 -73.662)" fill="#28b5a8"/>
+    <rect id="Rectangle_25619" data-name="Rectangle 25619" width="5.587" height="0.632" transform="translate(15.576 3.073)" fill="#324458"/>
+    <rect id="Rectangle_25620" data-name="Rectangle 25620" width="16.429" height="0.632" transform="translate(15.641 7.362)" fill="#324458"/>
+    <rect id="Rectangle_25621" data-name="Rectangle 25621" width="16.429" height="0.632" transform="translate(15.641 9.314)" fill="#324458"/>
+    <rect id="Rectangle_25622" data-name="Rectangle 25622" width="16.429" height="0.632" transform="translate(15.641 11.268)" fill="#324458"/>
+    <rect id="Rectangle_25623" data-name="Rectangle 25623" width="16.429" height="0.632" transform="translate(15.641 13.223)" fill="#324458"/>
+    <rect id="Rectangle_25624" data-name="Rectangle 25624" width="16.429" height="0.632" transform="translate(15.641 15.177)" fill="#324458"/>
+    <rect id="Rectangle_25625" data-name="Rectangle 25625" width="7.453" height="0.632" transform="translate(15.641 17.328)" fill="#324458"/>
+  </g>
+</svg>

package/src/assets/images/index.ts

@@ -17,6 +17,7 @@ import Building from './building.svg'
 import Calc from './calc.svg'
 import Calendar2 from './calendar2.svg'
 import Catalog from './catalog.svg'
+import ChatBubble from './chat-bubble.svg'
 import Check from './check.svg'
 import CheckInCircle from './check-in-circle.svg'
 import CheckPen from './check-pen.svg'
@@ -39,6 +40,7 @@ import Diamond from './diamond.svg'
 import DiningRoom from './dining-room.svg'
 import DocIcon from './doc-icon.svg'
 import Document from './document.svg'
+import Document2 from './document2.svg'
 import Drop from './drop.svg'
 import DropCalendar from './drop-calendar.svg'
 import Electricity from './electricity.svg'
@@ -176,6 +178,7 @@ export {
   Calc,
   Calendar2,
   Catalog,
+  ChatBubble,
   Check,
   CheckInCircle,
   CheckPen,
@@ -198,6 +201,7 @@ export {
   DiningRoom,
   DocIcon,
   Document,
+  Document2,
   Drop,
   DropCalendar,
   Electricity,
@@ -317,6 +321,7 @@ export {
 }
 
 export * from './alerts'
+export * from './animations'
 export * from './appliances'
 export * from './clouds-animation'
 export * from './form'

package/src/assets/locales/en/index.json

@@ -167,6 +167,10 @@
     "recipient": "recipient",
     "title": "Contacts"
   },
+  "counter": {
+    "of": "of",
+    "showing": "Showing"
+  },
   "daysOfWeek": {
     "1": "Monday",
     "2": "Tuesday",
@@ -288,6 +292,7 @@
   },
   "forms": {
     "addAll": "Add All",
+    "all": "All",
     "apartmentNumber": "Apartment, Suite, Unit, Building, Floor, etc.",
     "city": "City",
     "companyEmail": "Company email",
@@ -311,6 +316,7 @@
     "lastName": "Last name",
     "link": "Link",
     "message": "Message",
+    "new": "New",
     "moreDetails": "Add Optional Details",
     "obs": "Additional information",
     "password": "Password",
@@ -465,7 +471,11 @@
     "altImage": "image"
   },
   "inbox": {
-    "forwardTo": "To use Receipt Autofiler, simply forward reciepts to "
+    "createReply": "Create Reply",
+    "enterContent": "Enter content",
+    "forwardTo": "To use Receipt Autofiler, simply forward reciepts to ",
+    "from": "From: ",
+    "message": "Message"
   },
   "launchpad": {
     "menu": {
@@ -628,15 +638,6 @@
       "shared": "Shared",
       "updated": "Updated"
     },
-    "types": {
-      "contact": "Contact",
-      "file": "File",
-      "folder": "Folder",
-      "receipt": "Receipt",
-      "user": "User",
-      "tile": "Tile",
-      "payment": "Payment"
-    },
     "title": "Notifications"
   },
   "partner": {

package/src/components/animations/CloudsAnimation.tsx

@@ -1,16 +1,16 @@
-import {
-  Airplane,
-  Cloud1,
-  Cloud2,
-  Cloud3,
-  TreesCrop,
-  TreesCrop2,
-} from '@/assets/images'
+import { Fragment, PropsWithChildren, useEffect, useState } from 'react'
+import { Airplane, Cloud1, Cloud2, Cloud3 } from '@/assets/images'
 import { useWindowDimensions } from '@/hooks'
 import { colors } from '@/theme/colors'
+import {
+  TimeOfDay,
+  getTimeOfDay,
+  TimeOfDaySeason,
+  getTimeOfDaySeason,
+} from '@/utils'
 import { Box, Image } from '@chakra-ui/react'
 import { keyframes } from '@emotion/react'
-import { Fragment, PropsWithChildren } from 'react'
+import { WeatherTrees } from './WeatherTrees'
 
 export const moveLeftToRightAirplane = keyframes`
     0% {
@@ -77,6 +77,22 @@ export const moveRightToLeftWithFade3 = keyframes`
     }
   `
 export const CloudsAnimation = ({ children }: PropsWithChildren<{}>) => {
+  const [timeOfDay, setTimeOfDay] = useState<TimeOfDay>(getTimeOfDay())
+  const timeOfDaySeason = getTimeOfDaySeason()
+  const gradients: Record<TimeOfDay, string> = {
+    day: colors.dayGradient,
+    evening: colors.eveningGradient,
+    morning: colors.morningGradient,
+    night: colors.nightGradient,
+  }
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTimeOfDay(getTimeOfDay())
+    }, 60000)
+
+    return () => clearInterval(interval)
+  }, [])
   const {
     windowDimensions: { width },
   } = useWindowDimensions()
@@ -88,7 +104,7 @@ export const CloudsAnimation = ({ children }: PropsWithChildren<{}>) => {
       minH="100vh"
       w="full"
       position="relative"
-      bgGradient={colors.skyGradient}
+      bgGradient={gradients[timeOfDay]}
       overflowX="hidden"
       overflowY="scroll"
     >
@@ -156,22 +172,23 @@ export const CloudsAnimation = ({ children }: PropsWithChildren<{}>) => {
         animation={`${moveLeftToRightAirplane} 500s cubic-bezier(1, 1, 1, 500) infinite`}
         zIndex="1"
       />
-      <Image
-        src={TreesCrop}
+      <WeatherTrees
+        timeOfDaySeason={timeOfDaySeason}
         position="fixed"
         bottom="0"
-        right="2"
+        right="0"
         w="auto"
-        h="80px"
+        h="100px"
         zIndex="1"
       />
-      <Image
-        src={TreesCrop2}
+      <WeatherTrees
+        timeOfDaySeason={timeOfDaySeason}
         position="fixed"
         bottom="0"
         left="2"
         w="auto"
-        h="80px"
+        transform="rotateY(180deg)"
+        h="100px"
         zIndex="1"
       />
     </Box>

package/src/components/animations/WeatherTrees.tsx

@@ -0,0 +1,37 @@
+import {
+  TreesDay,
+  TreesDayFall,
+  TreesDayWinter,
+  TreesEvening,
+  TreesMorning,
+  TreesNight,
+} from '@/assets/images'
+import { TimeOfDaySeason } from '@/utils'
+import { Image, ImageProps } from '@chakra-ui/react'
+
+export interface WeatherTreesI extends ImageProps {
+  timeOfDaySeason: TimeOfDaySeason
+}
+
+export const WeatherTrees = ({ timeOfDaySeason, ...props }: WeatherTreesI) => {
+  const images: Record<TimeOfDaySeason, string> = {
+    'day-summer': TreesDay,
+    'day-fall': TreesDayFall,
+    'day-winter': TreesDayWinter,
+    'day-spring': TreesDay,
+    'evening-summer': TreesEvening,
+    'evening-fall': TreesEvening,
+    'evening-winter': TreesDayWinter,
+    'evening-spring': TreesEvening,
+    'morning-summer': TreesMorning,
+    'morning-fall': TreesMorning,
+    'morning-winter': TreesDayWinter,
+    'morning-spring': TreesMorning,
+    'night-summer': TreesNight,
+    'night-fall': TreesNight,
+    'night-winter': TreesDayWinter,
+    'night-spring': TreesNight,
+  }
+
+  return <Image {...props} src={images[timeOfDaySeason]} alt="trees" />
+}

package/src/components/animations/index.ts

@@ -1,2 +1,3 @@
 export * from './CloudsAnimation'
 export * from './HomieAnimation'
+export * from './WeatherTrees'

package/src/components/badge/TextBadge.tsx

@@ -19,7 +19,7 @@ export const TextBadge = ({
       py="0.1rem"
       px="0.5rem"
       _hover={{
-        width,
+        width: showAnimation ? width : 'fit-content',
       }}
       transition="all 0.2s ease-in-out"
     >

package/src/components/folderPanel/folderDetails/FilesCounter.tsx

@@ -1,9 +1,7 @@
 import { t } from 'i18next'
-import { Box, Flex, Text, chakra } from '@chakra-ui/react'
-import { BeatLoader } from 'react-spinners'
-import { colors } from '@/theme/colors'
 import { FilesCounterI } from '@/interfaces'
 import { pluralize } from '@/utils'
+import { BaseCounter } from '@/components'
 
 export const FilesCounter = ({
   totalFiles,
@@ -22,23 +20,10 @@ export const FilesCounter = ({
   )} ${totalFiles} ${files}`
 
   return (
-    <Box w="100%">
-      <Flex justify="space-between" align="center">
-        {!uploading && (
-          <Text variant="home">{totalFiles > 1 ? moreThanOne : one}</Text>
-        )}
-        {uploading && (
-          <Text variant="home">
-            <chakra.span fontWeight="bold">
-              {t('folderSharing.uploading')}
-            </chakra.span>
-            {` ${uploadingFiles} ${files}`}
-            <chakra.span ml="2">
-              <BeatLoader size="4px" color={colors.blue[6]} />
-            </chakra.span>
-          </Text>
-        )}
-      </Flex>
-    </Box>
+    <BaseCounter
+      text={totalFiles > 1 ? moreThanOne : one}
+      uploading={uploading}
+      uploadingText={` ${uploadingFiles ?? ''} ${files}`}
+    />
   )
 }

package/src/components/footers/FooterButtons.tsx

@@ -5,9 +5,10 @@ export const FooterButtons = ({
   button1,
   button2,
   button3,
+  px = 'base',
 }: FooterButtonsI) => {
   return (
-    <Flex align="center" justifyContent="space-between" w="full" px="base">
+    <Flex align="center" justifyContent="space-between" w="full" px={px}>
       <Flex align="center" gap="2">
         {button1 ? (
           <Button

package/src/components/forms/BaseCounter.tsx

@@ -0,0 +1,30 @@
+import { t } from 'i18next'
+import { Box, chakra, Flex, Text } from '@chakra-ui/react'
+import { BeatLoader } from 'react-spinners'
+import { colors } from '@/theme/colors'
+import { BaseCounterI } from '@/interfaces'
+
+export const BaseCounter = ({
+  text,
+  uploading,
+  uploadingText,
+}: BaseCounterI) => {
+  return (
+    <Box w="100%">
+      <Flex justify="space-between" align="center">
+        {!uploading && <Text variant="home">{text}</Text>}
+        {uploading && (
+          <Text variant="home">
+            <chakra.span fontWeight="bold">
+              {t('folderSharing.uploading')}
+            </chakra.span>
+            {uploadingText}
+            <chakra.span ml="2">
+              <BeatLoader size="4px" color={colors.blue[6]} />
+            </chakra.span>
+          </Text>
+        )}
+      </Flex>
+    </Box>
+  )
+}

package/src/components/forms/index.ts

@@ -2,5 +2,6 @@ export * from './dynamicForm'
 export * from './readOnly'
 export * from './Address'
 export * from './AddressStored'
+export * from './BaseCounter'
 export * from './Collapsible'
 export * from './EditItemName'

package/src/components/homeAssistant/HomeAssistantWrapper.tsx

@@ -1,45 +1,59 @@
-import { PropsWithChildren } from 'react'
-import { t } from 'i18next'
-import { Box, Center, GridItem, Image } from '@chakra-ui/react'
+import { PropsWithChildren, useEffect, useState } from 'react'
+import { Box, GridItem, Image } from '@chakra-ui/react'
 import {
   ContainerHeader,
   TileTooltip,
   moveRightToLeftWithFade,
   moveRightToLeft,
   moveLeftToRightAirplane,
+  WeatherTrees,
 } from '@/components'
+import { Airplane, Cloud1, Cloud2, Cloud3, IA } from '@/assets/images'
 import {
-  Airplane,
-  Cloud1,
-  Cloud2,
-  Cloud3,
-  IA,
-  TreesCrop,
-} from '@/assets/images'
-import { getImageAltText } from '@/utils'
+  getTimeOfDay,
+  getTimeOfDaySeason,
+  TimeOfDay,
+  TimeOfDaySeason,
+} from '@/utils'
 import { colors } from '@/theme/colors'
 
 export const HomeAssistantWrapper = ({
   children,
   showAirplane,
   title,
-  zIndex
+  zIndex,
 }: PropsWithChildren<{
   showAirplane?: boolean
   title: string
   zIndex?: string
 }>) => {
-  const treesAlt = getImageAltText(TreesCrop)
+  const [timeOfDay, setTimeOfDay] = useState<TimeOfDay>(getTimeOfDay())
+  const timeOfDaySeason = getTimeOfDaySeason()
+  const gradients: Record<TimeOfDay, string> = {
+    day: colors.dayGradient,
+    evening: colors.eveningGradient,
+    morning: colors.morningGradient,
+    night: colors.nightGradient,
+  }
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTimeOfDay(getTimeOfDay())
+    }, 60000)
+
+    return () => clearInterval(interval)
+  }, [])
 
   return (
     <GridItem colSpan={[1, 2]} zIndex={zIndex}>
       <TileTooltip label="homeAssistant">
         <Box
-          bgGradient={colors.skyGradient}
+          bgGradient={gradients[timeOfDay]}
           boxShadow="base"
           h="full"
           position="relative"
           overflow="hidden"
+          transition="background 1s ease-in-out"
         >
           <ContainerHeader title={title} titleIcon={IA} />
           <>{children}</>
@@ -77,14 +91,13 @@ export const HomeAssistantWrapper = ({
               animation={`${moveLeftToRightAirplane} 500s cubic-bezier(1, 1, 1, 500) infinite`}
             />
           )}
-          <Image
-            src={TreesCrop}
-            alt={treesAlt}
+          <WeatherTrees
+            timeOfDaySeason={timeOfDaySeason}
             position="absolute"
             bottom="0"
             right="2"
             w="auto"
-            h="70px"
+            h="100px"
           />
         </Box>
       </TileTooltip>

package/src/components/inboxTile/InboxForwardBanner.tsx

@@ -1,5 +1,5 @@
 import { t } from 'i18next'
-import { AspectRatio, Flex, Text, Image } from '@chakra-ui/react'
+import { AspectRatio, Flex, Text, Image, chakra } from '@chakra-ui/react'
 import { IA } from '@/assets/images'
 
 export const InboxForwardBanner = () => {
@@ -11,15 +11,16 @@ export const InboxForwardBanner = () => {
 
       <Text variant="home" lineHeight="1">
         {t('inbox.forwardTo')}
-        <Text
-          variant="home"
+        <chakra.span
+          fontFamily="secondary"
+          fontSize="sm"
           lineHeight="1"
           color="neutral.black"
           fontWeight="bold"
           display="inline"
         >
           homefileit@homefile.com.
-        </Text>
+        </chakra.span>
       </Text>
     </Flex>
   )

package/src/components/inboxTile/index.ts

@@ -1,3 +1,4 @@
+export * from './panel'
 export * from './InboxCard'
 export * from './InboxForwardBanner'
 export * from './InboxTile'