diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 8c55dfa3d..fc4da3409 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -18,7 +18,7 @@ export const Footer: FC = () => { color="gray.50" sx={{ a: { color: 'gray.50' } }} > - + © The{' '} diff --git a/src/components/Orcid/UserSettings.tsx b/src/components/Orcid/UserSettings.tsx index 45d4c657d..5ac930aaf 100644 --- a/src/components/Orcid/UserSettings.tsx +++ b/src/components/Orcid/UserSettings.tsx @@ -1,4 +1,4 @@ -import { AddIcon, CheckIcon, CloseIcon, EditIcon } from '@chakra-ui/icons'; +import { AddIcon, CheckIcon, CloseIcon, EditIcon, ExternalLinkIcon } from '@chakra-ui/icons'; import { Box, Button, @@ -25,6 +25,7 @@ import { SkeletonText, Stack, Text, + Tooltip, useBreakpointValue, useDisclosure, useEditableControls, @@ -32,7 +33,7 @@ import { } from '@chakra-ui/react'; import { useOrcid } from '@/lib/orcid/useOrcid'; import { OrcidLogo } from '@/components/images'; -import React, { Suspense, useCallback, useEffect, useRef, useState } from 'react'; +import { Suspense, useCallback, useEffect, useRef, useState } from 'react'; import { useOrcidPrefs } from '@/lib/orcid/useOrcidPrefs'; import { isValidIOrcidUser } from '@/api/orcid/models'; @@ -44,9 +45,13 @@ import { QueryErrorResetBoundary } from '@tanstack/react-query'; import { ErrorBoundary } from 'react-error-boundary'; import { getFallBackAlert } from '@/components/Feedbacks/SuspendedAlert'; -import { SearchQueryLink, SearchQueryLinkButton } from '@/components/SearchQueryLink'; +import { SearchQueryLinkButton } from '@/components/SearchQueryLink'; import { useColorModeColors } from '@/lib/useColorModeColors'; import { noop } from '@/utils/common/noop'; +import { SimpleLink } from '../SimpleLink'; +import Link from 'next/link'; +import { makeSearchParams } from '@/utils/common/search'; +import { ScixIconLogo } from '../images/ScixIconLogo'; export const UserSettings = () => { const isMobile = useBreakpointValue({ base: true, lg: false }); @@ -54,7 +59,7 @@ export const UserSettings = () => { const { background } = useColorModeColors(); const body = ( - <> + {({ reset }) => ( @@ -83,7 +88,7 @@ export const UserSettings = () => { - + ); if (isMobile) { @@ -445,10 +450,25 @@ const OrcidHeader = () => { return ( <> {user?.name} - - - {user?.orcid} - + + + + + + {user?.orcid} + + + + + + ); }; diff --git a/src/components/images/ScixIconLogo.tsx b/src/components/images/ScixIconLogo.tsx new file mode 100644 index 000000000..e398da78a --- /dev/null +++ b/src/components/images/ScixIconLogo.tsx @@ -0,0 +1,116 @@ +import { forwardRef, Ref } from 'react'; + +const ScixIcon = (props: React.SVGProps, ref: Ref) => ( + + + + + + + + + + + + + + + + + + + + + + +); + +export const ScixIconLogo = forwardRef(ScixIcon); diff --git a/src/pages/user/orcid/index.tsx b/src/pages/user/orcid/index.tsx index 5d844f87c..6be4f9ce9 100644 --- a/src/pages/user/orcid/index.tsx +++ b/src/pages/user/orcid/index.tsx @@ -73,7 +73,7 @@ const OrcidPage: NextPage = () => { returnFocusOnClose trapFocus onOverlayClick={onClose} - size="full" + size="xs" >