refactor: use Typography

Tivix · Jul 3, 2024 · d34e512 · d34e512
1 parent 0152631
commit d34e512
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 7 deletions.
diff --git a/frontend/src/components/common/Card/Card.tsx b/frontend/src/components/common/Card/Card.tsx
@@ -1,11 +1,12 @@
 import { CardProps } from './Card.interface';
 import { PropsWithChildren } from 'react';
+import {Typography} from "@app/components/common/Typography";
 
 export const Card: React.FC<PropsWithChildren<CardProps>> = ({ title, children }) => {
   return (
     <div className="rounded-xl bg-white shadow-sm ring-1 ring-navy-200/5 lg:w-[750px]">
       <div className="px-4 py-6 sm:p-8">
-        <h3 className="text-xl font-semibold leading-6 text-navy-900">{title}</h3>
+        <Typography as="h3" variant="head-s/semibold">{title}</Typography>
         <div className="py-8">{children}</div>
       </div>
     </div>

diff --git a/frontend/src/components/modules/ProfileSetting/ProfileSettings.tsx b/frontend/src/components/modules/ProfileSetting/ProfileSettings.tsx
@@ -10,6 +10,7 @@ import { useProfileSettings } from '@app/components/modules/ProfileSetting/Profi
 import { CropImageModal } from './modules/CropImageModal';
 import { ReactNode } from 'react';
 import { DeleteImageModal } from './modules/DeleteImageModal';
+import {Typography} from "@app/components/common/Typography";
 
 export const ProfileSettings: React.FC<ProfileSettingsProps> = ({ data }) => {
   const { firstName, lastName, email, ladders, photo } = data;
@@ -53,7 +54,7 @@ export const ProfileSettings: React.FC<ProfileSettingsProps> = ({ data }) => {
       <Card title="Personal details">
         <div className="flex w-full flex-row border-b border-navy-200 px-4 py-6 sm:col-span-2 sm:px-0">
           <div className="grow">
-            <div className="mb-2 text-base font-medium leading-6 text-navy-900">Profile photo</div>
+            <Typography variant="body-m/medium" className="mb-2">Profile photo</Typography>
             <Avatar firstName={firstName} lastName={lastName} imageUrl={photo} variant="72" />
           </div>
           <div className="flex flex-row gap-4">
@@ -85,7 +86,7 @@ export const ProfileSettings: React.FC<ProfileSettingsProps> = ({ data }) => {
       <Card title="Notifications">
         <div className="flex flex-row">
           <div className="grow self-end">
-            <p>Send me notifications via</p>
+            <Typography variant="body-m/medium">Send me notifications via</Typography>
           </div>
           <div className="flex flex-row gap-8">
             <NotificationCheckbox icon={<SlackIcon />} />

diff --git a/frontend/src/components/modules/ProfileSetting/modules/CropImageModal/CropImageModal.tsx b/frontend/src/components/modules/ProfileSetting/modules/CropImageModal/CropImageModal.tsx
@@ -6,6 +6,7 @@ import { CropImageModalProps } from './CropImageModal.interface';
 import { useCropImageModal } from './CropImageModal.hooks';
 import { Button } from '@app/components/common/Button';
 import { ZOOM_SLIDER_MULTIPLIER } from './constants';
+import {Typography} from "@app/components/common/Typography";
 
 export const CropImageModal: React.FC<CropImageModalProps> = ({ imageSrc, open, onClose, onSave }) => {
   const { crop, zoom, handleCropChange, handleZoomChange, handleCropComplete, handleZoomInputChange, handleSave } =
@@ -14,9 +15,9 @@ export const CropImageModal: React.FC<CropImageModalProps> = ({ imageSrc, open,
   return (
     <Modal open={open} onClose={onClose} title="Crop your photo" hideHeaderCloseButton>
       <div className="flex flex-col items-center justify-center gap-6">
-        <p className="tracking-wider text-navy-600">
+        <Typography variant="body-m/regular" className="text-navy-600">
           For best results, use a PNG, JPG, or GIF image at least 300 x 300 px.
-        </p>
+        </Typography>
         <div className="relative h-80 w-80">
           {imageSrc ? (
             <Cropper

diff --git a/frontend/src/components/modules/ProfileSetting/modules/DeleteImageModal/DeleteImageModal.tsx b/frontend/src/components/modules/ProfileSetting/modules/DeleteImageModal/DeleteImageModal.tsx
@@ -1,14 +1,15 @@
 import { Modal } from '@app/components/common/Modal';
 import { Button } from '@app/components/common/Button';
 import { DeleteImageModalProps } from './DeleteImageModal.interface';
+import {Typography} from "@app/components/common/Typography";
 
 export const DeleteImageModal: React.FC<DeleteImageModalProps> = ({ open, onClose, onDelete }) => {
   return (
     <Modal open={open} onClose={onClose} title="Delete profile photo">
       <div className="flex flex-col items-center justify-center gap-6">
-        <p className="text-navy-600">
+        <Typography variant="body-m/regular" className="text-navy-600">
           Your current photo will be replaced with a default avatar. Do you want to proceed?
-        </p>
+        </Typography>
         <div className="flex w-full flex-row justify-end gap-4">
           <Button styleType="natural" variant="borderless" onClick={onClose}>
             Cancel