Merge pull request #57 from linkfang/dev

Fixed sync up issue and accessibility issues
linkfang · Jan 22, 2024 · 0bc7098 · 0bc7098
2 parents b28d050 + f7ba97f
commit 0bc7098
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 21 deletions.
diff --git a/src/components/common/Avatar.tsx b/src/components/common/Avatar.tsx
@@ -5,8 +5,8 @@ const Avatar = ({ firstName, lastName, size = 42, fontSize = 16 }: TAvatarProps)
     <div
       css={{
         fontSize,
-        backgroundColor: '#fde3cf',
-        color: '#f56a00',
+        backgroundColor: 'hsl(26, 92%, 95%)',
+        color: 'hsl(26, 97%, 46%)',
         width: size,
         height: size,
         borderRadius: size,

diff --git a/src/components/common/MoreOptions.tsx b/src/components/common/MoreOptions.tsx
@@ -1,6 +1,6 @@
 import { MoreOutlined } from '@ant-design/icons'
 import { Dropdown, type MenuProps, Modal, App } from 'antd'
-import EditExpertise from '../expertise/EditExpertise'
+import EditExpertiseAndSKills from '../expertise/EditExpertiseAndSkills'
 import { useState } from 'react'
 import { trpc } from '@/utils/trpc'
 import type { TEditingData } from '@/type/general'
@@ -18,11 +18,17 @@ const findToBeDeleted = (preData: (Record<string, string | number> & { id: numbe
 
 const MoreOptions = () => {
   const { notification } = App.useApp()
+  const trpcUtils = trpc.useUtils()
 
   const [shouldOpen, setShouldOpen] = useState(false)
   const [type, setType] = useState<'Expertise' | 'Skills'>('Expertise')
   const isEditingExpertise = type === 'Expertise'
 
+  const refetchOnSuccess = () => {
+    trpcUtils.findManyPerson.refetch()
+    trpcUtils.findManyProject.refetch()
+  }
+
   const {
     data: expertiseData,
     refetch: refetchExpertise,
@@ -41,13 +47,15 @@ const MoreOptions = () => {
 
   const { mutate: mutateExpertise, isLoading: isMutatingExpertise } = trpc.editManyExpertise.useMutation({
     onSuccess: () => {
+      refetchOnSuccess()
       refetchExpertise()
       notification.success({ message: 'Updated expertise' })
     },
   })
 
   const { mutate: mutateSkills, isLoading: isMutatingSkills } = trpc.editManySkills.useMutation({
     onSuccess: () => {
+      refetchOnSuccess()
       refetchSkills()
       notification.success({ message: 'Updated skills' })
     },
@@ -104,7 +112,7 @@ const MoreOptions = () => {
         onCancel={() => setShouldOpen(false)}
         css={{ minWidth: 600 }}
       >
-        <EditExpertise
+        <EditExpertiseAndSKills
           data={isEditingExpertise ? expertiseData : skillsData}
           closeModal={() => setShouldOpen(false)}
           callbackFunc={isEditingExpertise ? editExpertiseCallback : editSkillCallback}

diff --git a/src/components/expertise/EditExpertise.tsx → ...ents/expertise/EditExpertiseAndSkills.tsx b/src/components/expertise/EditExpertise.tsx → ...ents/expertise/EditExpertiseAndSkills.tsx
@@ -28,7 +28,7 @@ const overlapLineStyle = {
   backgroundColor: '#4f5456',
 } as const
 
-const EditExpertise = ({ closeModal, callbackFunc, data, isMutating, isFetching }: TEditExpertiseProps) => {
+const EditExpertiseAndSKills = ({ closeModal, callbackFunc, data, isMutating, isFetching }: TEditExpertiseProps) => {
   const [editingData, setEditingData] = useState<TEditingData[]>()
 
   const { notification } = App.useApp()
@@ -165,4 +165,4 @@ const EditExpertise = ({ closeModal, callbackFunc, data, isMutating, isFetching
   )
 }
 
-export default EditExpertise
+export default EditExpertiseAndSKills
diff --git a/src/components/layout/NavLayout.tsx b/src/components/layout/NavLayout.tsx
@@ -164,17 +164,18 @@ const NavLayout = ({ content }: { content: ReactNode }) => {
           {content}
         </main>
 
-        <button
-          css={{
-            display: openNav ? 'block' : 'none',
-            border: 'none',
-            backgroundColor: 'rgba(0,0,0,0.3)',
-            position: 'fixed',
-            inset: 0,
-            zIndex: 99,
-          }}
-          onClick={() => setOpenNav(false)}
-        ></button>
+        {openNav && (
+          <button
+            css={{
+              border: 'none',
+              backgroundColor: 'rgba(0,0,0,0.3)',
+              position: 'fixed',
+              inset: 0,
+              zIndex: 99,
+            }}
+            onClick={() => setOpenNav(false)}
+          ></button>
+        )}
 
         <nav css={navMenuStyle(openNav)}>
           <div

diff --git a/src/constants/styles.ts b/src/constants/styles.ts
@@ -5,10 +5,10 @@ export const COLORS = {
   primaryHighlight: '#edf5fa',
   lightblue: '#F7FBFC',
   lightGrey: '#F0F4F6',
-  textGrey: '#A4ACB0',
+  textGrey: 'hsl(200, 7%, 46%)',
   grey: '#D9D9D9',
   green: '#149200',
-  orange: '#D3A128',
+  orange: '#c28b0a',
   errorRed: '#cd201f',
   textBlack: '#151515',
   bgColor: '#F7FBFC',

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -7,6 +7,7 @@ import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
 import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
 import { useQueryClient } from '@tanstack/react-query'
 import { App, ConfigProvider, notification } from 'antd'
+import { COLORS } from '@/constants/styles'
 
 dayjs.extend(isSameOrBefore)
 dayjs.extend(isSameOrAfter)
@@ -26,8 +27,12 @@ const MyApp: AppType = ({ Component, pageProps }) => {
   return (
     <ConfigProvider
       theme={{
-        token: { fontSize: 16 },
-        components: { Table: { fontSize: 14 }, DatePicker: { fontSize: 14 }, Button: { fontSize: 14 } },
+        token: { fontSize: 16, colorPrimary: COLORS.primary },
+        components: {
+          Table: { fontSize: 14 },
+          DatePicker: { fontSize: 14 },
+          Button: { fontSize: 14 },
+        },
       }}
     >
       <App>

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -24,3 +24,8 @@ ul.ant-pagination > li.ant-pagination-total-text {
 .ant-modal-confirm-paragraph {
   max-width: 100% !important;
 }
+
+td.ant-table-cell a {
+  color: #0072ba;
+  text-decoration: underline;
+}