refactor: change button style

src/components/common/PatientData/index.tsx

@@ -1,5 +1,6 @@
 import { deletePatient } from '@/store/slices/patient'
 import { PatientDataProps } from '@/types/components'
+import Image from 'next/image'
 import React from 'react'
 import { toast } from 'react-toastify'
 
@@ -44,9 +45,21 @@ const PatientData: React.FC<PatientDataProps> = ({
       <Data>{patient.phoneNumber || '-'}</Data>
       <Data>{patient.address || '-'}</Data>
       <Data>
-        <Button onClick={() => onEdit()}>Edit</Button>
+        <Button onClick={() => onEdit()}>
+          <Image
+            src={'/images/edit.svg'}
+            width={20}
+            height={20}
+            alt={'Edit Icon'}
+          />
+        </Button>
         <Button altBg={true} onClick={() => onDelete()}>
-          Delete
+          <Image
+            src={'/images/delete.svg'}
+            width={20}
+            height={20}
+            alt={'Delete Icon'}
+          />
         </Button>
       </Data>
     </>

src/components/common/PatientData/style.ts

@@ -1,7 +1,6 @@
-import styled from 'styled-components'
-
-import { blue, mediumPink, white } from '@/styles/colors'
+import { blue, mediumPink } from '@/styles/colors'
 import { spacingM, spacingS } from '@/styles/spaces'
+import styled from 'styled-components'
 
 export const Row = styled.div`
   display: grid;
@@ -21,14 +20,19 @@ export const Data = styled.div<{ pointer?: boolean }>`
   display: grid;
   gap: ${spacingS};
   cursor: ${({ pointer }) => (pointer ? 'pointer' : 'default')};
+  align-items: center;
 `
 
 export const Button = styled.div<{ altBg?: boolean }>`
   background-color: ${({ altBg }) => (altBg ? mediumPink : blue)};
-  padding: ${spacingS} ${spacingM};
+  padding: ${spacingS} 0;
   border-radius: ${spacingS};
-  text-align: center;
-  color: ${white};
   cursor: pointer;
-  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  span {
+    filter: invert(100);
+  }
 `

src/components/common/RecordData/index.tsx

@@ -3,6 +3,7 @@ import { deleteRecord } from '@/store/slices/record'
 
 import { Record } from '@/types/models'
 import { NextRouter } from 'next/dist/client/router'
+import Image from 'next/image'
 
 import { Button, Data } from './style'
 
@@ -29,9 +30,21 @@ const RecordData = (
       <Data>{record.description || '-'}</Data>
       <Data>{record.honor || '-'}</Data>
       <Data>
-        <Button onClick={() => onEdit()}>Edit</Button>
+        <Button onClick={() => onEdit()}>
+          <Image
+            src={'/images/edit.svg'}
+            width={20}
+            height={20}
+            alt={'Edit Icon'}
+          />
+        </Button>
         <Button altBg={true} onClick={() => onDelete()}>
-          Delete
+          <Image
+            src={'/images/delete.svg'}
+            width={20}
+            height={20}
+            alt={'Delete Icon'}
+          />
         </Button>
       </Data>
     </>

src/components/common/RecordData/style.ts

@@ -1,5 +1,5 @@
-import { blue, mediumPink, white } from '@/styles/colors'
-import { spacingM, spacingS } from '@/styles/spaces'
+import { blue, mediumPink } from '@/styles/colors'
+import { spacingS } from '@/styles/spaces'
 import styled from 'styled-components'
 
 export const Data = styled.div<{ pointer?: boolean }>`
@@ -13,10 +13,14 @@ export const Data = styled.div<{ pointer?: boolean }>`
 
 export const Button = styled.div<{ altBg?: boolean }>`
   background-color: ${({ altBg }) => (altBg ? mediumPink : blue)};
-  padding: ${spacingS} ${spacingM};
+  padding: ${spacingS} 0;
   border-radius: ${spacingS};
-  text-align: center;
-  color: ${white};
   cursor: pointer;
-  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  span {
+    filter: invert(100);
+  }
 `

src/components/pages/login/LoginForm/style.ts

@@ -5,7 +5,6 @@ import {
   darkGrey2,
   lightGrey,
   orange,
-  pink,
   white,
 } from '@/styles/colors'
 import { spacingM, spacingS, spacingXL, spacingXXL1 } from '@/styles/spaces'
@@ -68,7 +67,7 @@ export const Button = styled.button`
   outline: none;
   border: none;
   cursor: pointer;
-  background-color: ${pink};
+  background-color: ${blue};
   color: ${white};
   padding: 0.5rem 3rem;
   margin-top: 1rem;

src/components/pages/patient/PatientsData/index.tsx

@@ -7,6 +7,7 @@ import { getPatients } from '@/store/slices/patient'
 import { PatientResponse } from '@/types/connection'
 
 import { useRouter } from 'next/dist/client/router'
+import Image from 'next/image'
 import { useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -71,7 +72,14 @@ const PatientsData: React.FC<{ searchTerm?: string }> = ({ searchTerm }) => {
         <Title>Phone Num</Title>
         <Title>Address</Title>
         <Data>
-          <Button onClick={() => onCreate()}>Create</Button>
+          <Button onClick={() => onCreate()}>
+            <Image
+              src={'/images/add.svg'}
+              width={20}
+              height={20}
+              alt={'Add Icon'}
+            />
+          </Button>
         </Data>
       </Row>
       {renderData()}

src/components/pages/patient/PatientsData/style.ts

@@ -1,4 +1,4 @@
-import { blue, white } from '@/styles/colors'
+import { blue } from '@/styles/colors'
 import { spacingM, spacingS } from '@/styles/spaces'
 import styled from 'styled-components'
 
@@ -20,7 +20,6 @@ export const Row = styled.div<{header?: boolean}>`
 export const Title = styled.div`
   text-align: left;
   font-size: 20px;
-  margin-bottom: ${spacingM};
 `
 
 export const Data = styled.div`
@@ -38,9 +37,14 @@ export const Text = styled.h1`
 
 export const Button = styled.div`
   background-color: ${blue};
-  padding: ${spacingS} ${spacingM};
+  padding: ${spacingS} 0;
   border-radius: ${spacingS};
-  text-align: center;
-  color: ${white};
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  span {
+    filter: invert(100);
+  }
 `

src/components/pages/record/RecordsData/index.tsx

@@ -5,6 +5,8 @@ import { getPatientRecords } from '@/store/slices/record'
 
 import { RecordResponse } from '@/types/connection'
 import { useRouter } from 'next/dist/client/router'
+
+import Image from 'next/image'
 import { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -43,7 +45,12 @@ const RecordsData = () => {
         <Header>#</Header>
         <Header>
           <Button onClick={() => route.replace(`/patient/${id}/form`)}>
-            Create
+            <Image
+              src={'/images/add.svg'}
+              width={20}
+              height={20}
+              alt={'Add Icon'}
+            />
           </Button>
         </Header>
       </Row>

src/components/pages/record/RecordsData/style.ts

@@ -1,16 +1,17 @@
-import { blue, lightBlue, white } from '@/styles/colors'
+import { blue, lightBlue } from '@/styles/colors'
 import { spacingM, spacingS } from '@/styles/spaces'
 import styled from 'styled-components'
 
 export const Section = styled.section``
 
 export const Row = styled.div<{header?: boolean}>`
   display: grid;
-  grid-template-columns: 1.5fr 2fr 2fr 2fr 3fr 2fr 0.5fr;
+  grid-template-columns: 1.5fr 2fr 2fr 2fr 3fr 2fr 0.8fr;
   padding: ${spacingM};
   font-weight: ${({ header }) => header ? 'bold' : 'normal'};
   border-bottom: 1px solid ${blue};
   gap: ${spacingS};
+  align-items: center;
   
   :hover {
     background-color: ${({ header }) => !header && lightBlue};
@@ -21,9 +22,14 @@ export const Header = styled.div``
 
 export const Button = styled.div`
   background-color: ${blue};
-  padding: ${spacingS} ${spacingM};
+  padding: ${spacingS} 0;
   border-radius: ${spacingS};
-  text-align: center;
-  color: ${white};
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  span {
+    filter: invert(100);
+  }
 `