diff --git a/client/src/assets/images/headers/treehero.png b/client/src/assets/images/headers/treehero.png new file mode 100644 index 00000000..e88f43c3 Binary files /dev/null and b/client/src/assets/images/headers/treehero.png differ diff --git a/client/src/pages/Userprofile/UserInfoContainer.js b/client/src/pages/Userprofile/UserInfoContainer.js index 67fc9342..92a48365 100644 --- a/client/src/pages/Userprofile/UserInfoContainer.js +++ b/client/src/pages/Userprofile/UserInfoContainer.js @@ -1,9 +1,11 @@ -import React from 'react'; -import { Avatar, Box, Typography } from '@mui/material'; import { Star } from '@mui/icons-material'; +import { Avatar, Box, Typography } from '@mui/material'; +import React from 'react'; + import TreeIcon from '@/assets/images/addtree/tree12.svg'; import AdoptionIcon from '@/components/Icons/AdoptionIcon/AdoptionIcon'; import { TooltipBottom } from '@/components/Tooltip'; + import './UserInfoContainer.scss'; const iconStyle = { @@ -52,22 +54,46 @@ const UserIcons = ({ adoptedCount, likedCount, plantedCount }) => ( ); -const UserInfoContainer = ({ adoptedTrees, likedTrees, plantedTrees, user }) => { +const UserInfoContainer = ({ + adoptedTrees, + likedTrees, + plantedTrees, + user, +}) => { const { name, nickname, email, picture } = user; return ( -
- -
- - {name} - {nickname} - {email} -
-
- ) -} -export default UserInfoContainer + <> + + + + + + + {name} + {nickname} + {email} + + + +
+

About

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. At in + dignissim semper a sed nec in arcu amet. In quis non amet non + blandit elit. Aliquet rhoncus hac ornare diam egestas. Dictumst + molestie at orci arcu, sed nunc pretium. Ultrices id vitae + pellentesque tellus eu adipiscing. Cursus morbi ultricies ipsum + sagittis. Tristique interdum et, enim, pharetra duis. Sapien, + posuere sapien etiam in vel in nec. Enim, vivamus egestas at non + neque. +

+
+ + + ); +}; +export default UserInfoContainer; diff --git a/client/src/pages/Userprofile/UserInfoContainer.scss b/client/src/pages/Userprofile/UserInfoContainer.scss index 478647f8..ce030be6 100644 --- a/client/src/pages/Userprofile/UserInfoContainer.scss +++ b/client/src/pages/Userprofile/UserInfoContainer.scss @@ -1,11 +1,32 @@ .user-info-container { - display: inline-flex; - align-items: center; - margin-bottom: 2em; - - .user-avatar { - width: 8em; - height: 8em; - margin: 0 3em 0 2em; + display: block; + + .hero { + background-color: #300; + background: linear-gradient( rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.6) ), url(../../assets/images/headers/treehero.png); + height: 200px; + display: flex; + align-items: end; + position: relative; + + .avatar-box { + display: flex; + align-items: end; + position: relative; + } + + .avatar-image { + width: 8em; + height: 8em; + margin: 0 1em 0 2em; + bottom: -20px; + border: solid 2px #FFF; + } + + .avatar-info { + padding-bottom: 1em; + color: #FFF; + } } -} \ No newline at end of file + +} diff --git a/client/src/tests/Userprofile.test.js b/client/src/tests/Userprofile.test.js new file mode 100644 index 00000000..d74e6795 --- /dev/null +++ b/client/src/tests/Userprofile.test.js @@ -0,0 +1,45 @@ +import { useAuth0 } from '@auth0/auth0-react'; +import { render, waitFor } from '@testing-library/react'; +import React from 'react'; +import { MemoryRouter } from 'react-router-dom'; + +import { + useUserAdoptedQuery, + useUserLikedQuery, + useUserPlantedQuery, + useUserTreeHistoryQuery, +} from '@/api/queries'; +import Userprofile from '@/pages/Userprofile/UserProfile'; + +jest.mock('@auth0/auth0-react'); +jest.mock('@/api/queries'); + +describe('UserProfile', () => { + beforeEach(() => { + // Reset mocks before each test + useAuth0.mockClear(); + useUserAdoptedQuery.mockClear(); + useUserLikedQuery.mockClear(); + useUserPlantedQuery.mockClear(); + useUserTreeHistoryQuery.mockClear(); + }); + it('renders UserProfile correctly', async () => { + useAuth0.mockReturnValue({ + user: { nickname: 'testUser', email: 'test@example.com' }, + }); + useUserAdoptedQuery.mockReturnValue({ data: [{ id: 1, name: 'Tree 1' }] }); + useUserLikedQuery.mockReturnValue({ data: [{ id: 2, name: 'Tree 2' }] }); + useUserPlantedQuery.mockReturnValue({ data: [{ id: 3, name: 'Tree 3' }] }); + useUserTreeHistoryQuery.mockReturnValue({ + data: [{ id: 4, name: 'Tree 4' }], + }); + const userProfile = render( + + + , + ); + await waitFor(() => { + expect(userProfile).toMatchSnapshot(); + }) + }); +}); diff --git a/client/src/tests/__snapshots__/Userprofile.test.js.snap b/client/src/tests/__snapshots__/Userprofile.test.js.snap new file mode 100644 index 00000000..312aeb8d --- /dev/null +++ b/client/src/tests/__snapshots__/Userprofile.test.js.snap @@ -0,0 +1,1720 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`UserProfile renders UserProfile correctly 1`] = ` +{ + "asFragment": [Function], + "baseElement": .emotion-0 { + margin-top: 6em; +} + +.emotion-4 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + width: 40px; + height: 40px; + font-family: "Roboto","Helvetica","Arial",sans-serif; + font-size: 1.25rem; + line-height: 1; + border-radius: 50%; + overflow: hidden; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + color: #fff; + background-color: #bdbdbd; +} + +.emotion-5 { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: 1em; + height: 1em; + display: inline-block; + fill: currentColor; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + font-size: 1.5rem; + width: 75%; + height: 75%; +} + +.emotion-7 { + margin-bottom: 16px; +} + +.emotion-8 { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: 1em; + height: 1em; + display: inline-block; + fill: currentColor; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + font-size: 1.5rem; +} + +.emotion-10 { + margin: 0; + font-family: "Roboto","Helvetica","Arial",sans-serif; + font-weight: 400; + font-size: 1rem; + line-height: 1.5; + letter-spacing: 0.00938em; +} + +.emotion-13 { + background-color: #fff; + color: rgba(0, 0, 0, 0.87); + -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + border-radius: 4px; + box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12); + width: 100%; + margin-bottom: 16px; +} + +.emotion-14 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding-left: 16px; + padding-right: 16px; + min-height: 48px; +} + +@media (min-width:600px) { + .emotion-14 { + padding-left: 24px; + padding-right: 24px; + } +} + +.emotion-15 { + margin: 0; + font-family: "Roboto","Helvetica","Arial",sans-serif; + font-weight: 400; + font-size: 1.5rem; + line-height: 1.334; + letter-spacing: 0em; +} + +.emotion-16 { + width: 100%; + overflow-x: auto; +} + +.emotion-17 { + display: table; + width: 100%; + border-collapse: collapse; + border-spacing: 0; +} + +.emotion-17 caption { + font-family: "Roboto","Helvetica","Arial",sans-serif; + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + letter-spacing: 0.01071em; + padding: 16px; + color: rgba(0, 0, 0, 0.6); + text-align: left; + caption-side: bottom; +} + +.emotion-18 { + display: table-header-group; +} + +.emotion-19 { + color: inherit; + display: table-row; + vertical-align: middle; + outline: 0; +} + +.emotion-19.MuiTableRow-hover:hover { + background-color: rgba(0, 0, 0, 0.04); +} + +.emotion-19.Mui-selected { + background-color: rgba(25, 118, 210, 0.08); +} + +.emotion-19.Mui-selected:hover { + background-color: rgba(25, 118, 210, 0.12); +} + +.emotion-20 { + font-family: "Roboto","Helvetica","Arial",sans-serif; + font-weight: 500; + font-size: 0.875rem; + line-height: 1.5rem; + letter-spacing: 0.01071em; + display: table-cell; + vertical-align: inherit; + border-bottom: 1px solid rgba(224, 224, 224, 1); + text-align: left; + padding: 16px; + color: rgba(0, 0, 0, 0.87); +} + +.emotion-21 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + box-sizing: border-box; + -webkit-tap-highlight-color: transparent; + background-color: transparent; + outline: 0; + border: 0; + margin: 0; + border-radius: 0; + padding: 0; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + -moz-appearance: none; + -webkit-appearance: none; + -webkit-text-decoration: none; + text-decoration: none; + color: inherit; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + -webkit-flex-direction: inherit; + -ms-flex-direction: inherit; + flex-direction: inherit; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-21::-moz-focus-inner { + border-style: none; +} + +.emotion-21.Mui-disabled { + pointer-events: none; + cursor: default; +} + +@media print { + .emotion-21 { + -webkit-print-color-adjust: exact; + color-adjust: exact; + } +} + +.emotion-21:focus { + color: rgba(0, 0, 0, 0.6); +} + +.emotion-21:hover { + color: rgba(0, 0, 0, 0.6); +} + +.emotion-21:hover .MuiTableSortLabel-icon { + opacity: 0.5; +} + +.emotion-21.Mui-active { + color: rgba(0, 0, 0, 0.87); +} + +.emotion-21.Mui-active .MuiTableSortLabel-icon { + opacity: 1; + color: rgba(0, 0, 0, 0.6); +} + +.emotion-22 { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: 1em; + height: 1em; + display: inline-block; + fill: currentColor; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + font-size: 1.5rem; + font-size: 18px; + margin-right: 4px; + margin-left: 4px; + opacity: 0; + -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +.emotion-26 { + display: table-row-group; +} + +.emotion-28 { + font-family: "Roboto","Helvetica","Arial",sans-serif; + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + letter-spacing: 0.01071em; + display: table-cell; + vertical-align: inherit; + border-bottom: 1px solid rgba(224, 224, 224, 1); + text-align: left; + padding: 16px; + color: rgba(0, 0, 0, 0.87); +} + +.emotion-32 { + overflow: auto; + color: rgba(0, 0, 0, 0.87); + font-size: 0.875rem; +} + +.emotion-32:last-child { + padding: 0; +} + +.emotion-33 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding-left: 16px; + padding-right: 16px; + min-height: 56px; + min-height: 52px; + padding-right: 2px; +} + +@media (min-width:600px) { + .emotion-33 { + padding-left: 24px; + padding-right: 24px; + } +} + +@media (min-width:0px) { + @media (orientation: landscape) { + .emotion-33 { + min-height: 48px; + } + } +} + +@media (min-width:600px) { + .emotion-33 { + min-height: 64px; + } +} + +@media (min-width:0px) and (orientation: landscape) { + .emotion-33 { + min-height: 52px; + } +} + +@media (min-width:600px) { + .emotion-33 { + min-height: 52px; + padding-right: 2px; + } +} + +.emotion-33 .MuiTablePagination-actions { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + margin-left: 20px; +} + +.emotion-34 { + -webkit-flex: 1 1 100%; + -ms-flex: 1 1 100%; + flex: 1 1 100%; +} + +.emotion-35 { + font-family: "Roboto","Helvetica","Arial",sans-serif; + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + letter-spacing: 0.01071em; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.emotion-36 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + box-sizing: border-box; + -webkit-tap-highlight-color: transparent; + background-color: transparent; + outline: 0; + border: 0; + margin: 0; + border-radius: 0; + padding: 0; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + -moz-appearance: none; + -webkit-appearance: none; + -webkit-text-decoration: none; + text-decoration: none; + color: inherit; + text-align: center; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + font-size: 1.5rem; + padding: 8px; + border-radius: 50%; + overflow: visible; + color: rgba(0, 0, 0, 0.54); + -webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + color: inherit; +} + +.emotion-36::-moz-focus-inner { + border-style: none; +} + +.emotion-36.Mui-disabled { + pointer-events: none; + cursor: default; +} + +@media print { + .emotion-36 { + -webkit-print-color-adjust: exact; + color-adjust: exact; + } +} + +.emotion-36:hover { + background-color: rgba(0, 0, 0, 0.04); +} + +@media (hover: none) { + .emotion-36:hover { + background-color: transparent; + } +} + +.emotion-36.Mui-disabled { + background-color: transparent; + color: rgba(0, 0, 0, 0.26); +} + +.emotion-40 { + display: block; + -webkit-background-size: cover; + background-size: cover; + background-repeat: no-repeat; + -webkit-background-position: center; + background-position: center; + width: 100%; + object-fit: cover; + width: 32px; + aspect-ratio: 1/1; +} + + +
+
+ +
+
+
+ Tree History +
+
+
+ + + + + + + + + + + + + + + +
+ + id + + + + + name + + +
+ December 31 1969 + + Tree 4 +
+
+
+
+
+
+

+ 1–1 of 1 +

+
+ + +
+
+
+
+
+
+
+ + tree + + + Privacy Policy + + + License + +
+
+
+ , + "container": .emotion-0 { + margin-top: 6em; +} + +.emotion-4 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + width: 40px; + height: 40px; + font-family: "Roboto","Helvetica","Arial",sans-serif; + font-size: 1.25rem; + line-height: 1; + border-radius: 50%; + overflow: hidden; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + color: #fff; + background-color: #bdbdbd; +} + +.emotion-5 { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: 1em; + height: 1em; + display: inline-block; + fill: currentColor; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + font-size: 1.5rem; + width: 75%; + height: 75%; +} + +.emotion-7 { + margin-bottom: 16px; +} + +.emotion-8 { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: 1em; + height: 1em; + display: inline-block; + fill: currentColor; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + font-size: 1.5rem; +} + +.emotion-10 { + margin: 0; + font-family: "Roboto","Helvetica","Arial",sans-serif; + font-weight: 400; + font-size: 1rem; + line-height: 1.5; + letter-spacing: 0.00938em; +} + +.emotion-13 { + background-color: #fff; + color: rgba(0, 0, 0, 0.87); + -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + border-radius: 4px; + box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12); + width: 100%; + margin-bottom: 16px; +} + +.emotion-14 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding-left: 16px; + padding-right: 16px; + min-height: 48px; +} + +@media (min-width:600px) { + .emotion-14 { + padding-left: 24px; + padding-right: 24px; + } +} + +.emotion-15 { + margin: 0; + font-family: "Roboto","Helvetica","Arial",sans-serif; + font-weight: 400; + font-size: 1.5rem; + line-height: 1.334; + letter-spacing: 0em; +} + +.emotion-16 { + width: 100%; + overflow-x: auto; +} + +.emotion-17 { + display: table; + width: 100%; + border-collapse: collapse; + border-spacing: 0; +} + +.emotion-17 caption { + font-family: "Roboto","Helvetica","Arial",sans-serif; + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + letter-spacing: 0.01071em; + padding: 16px; + color: rgba(0, 0, 0, 0.6); + text-align: left; + caption-side: bottom; +} + +.emotion-18 { + display: table-header-group; +} + +.emotion-19 { + color: inherit; + display: table-row; + vertical-align: middle; + outline: 0; +} + +.emotion-19.MuiTableRow-hover:hover { + background-color: rgba(0, 0, 0, 0.04); +} + +.emotion-19.Mui-selected { + background-color: rgba(25, 118, 210, 0.08); +} + +.emotion-19.Mui-selected:hover { + background-color: rgba(25, 118, 210, 0.12); +} + +.emotion-20 { + font-family: "Roboto","Helvetica","Arial",sans-serif; + font-weight: 500; + font-size: 0.875rem; + line-height: 1.5rem; + letter-spacing: 0.01071em; + display: table-cell; + vertical-align: inherit; + border-bottom: 1px solid rgba(224, 224, 224, 1); + text-align: left; + padding: 16px; + color: rgba(0, 0, 0, 0.87); +} + +.emotion-21 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + box-sizing: border-box; + -webkit-tap-highlight-color: transparent; + background-color: transparent; + outline: 0; + border: 0; + margin: 0; + border-radius: 0; + padding: 0; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + -moz-appearance: none; + -webkit-appearance: none; + -webkit-text-decoration: none; + text-decoration: none; + color: inherit; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + -webkit-flex-direction: inherit; + -ms-flex-direction: inherit; + flex-direction: inherit; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.emotion-21::-moz-focus-inner { + border-style: none; +} + +.emotion-21.Mui-disabled { + pointer-events: none; + cursor: default; +} + +@media print { + .emotion-21 { + -webkit-print-color-adjust: exact; + color-adjust: exact; + } +} + +.emotion-21:focus { + color: rgba(0, 0, 0, 0.6); +} + +.emotion-21:hover { + color: rgba(0, 0, 0, 0.6); +} + +.emotion-21:hover .MuiTableSortLabel-icon { + opacity: 0.5; +} + +.emotion-21.Mui-active { + color: rgba(0, 0, 0, 0.87); +} + +.emotion-21.Mui-active .MuiTableSortLabel-icon { + opacity: 1; + color: rgba(0, 0, 0, 0.6); +} + +.emotion-22 { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: 1em; + height: 1em; + display: inline-block; + fill: currentColor; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + font-size: 1.5rem; + font-size: 18px; + margin-right: 4px; + margin-left: 4px; + opacity: 0; + -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +.emotion-26 { + display: table-row-group; +} + +.emotion-28 { + font-family: "Roboto","Helvetica","Arial",sans-serif; + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + letter-spacing: 0.01071em; + display: table-cell; + vertical-align: inherit; + border-bottom: 1px solid rgba(224, 224, 224, 1); + text-align: left; + padding: 16px; + color: rgba(0, 0, 0, 0.87); +} + +.emotion-32 { + overflow: auto; + color: rgba(0, 0, 0, 0.87); + font-size: 0.875rem; +} + +.emotion-32:last-child { + padding: 0; +} + +.emotion-33 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding-left: 16px; + padding-right: 16px; + min-height: 56px; + min-height: 52px; + padding-right: 2px; +} + +@media (min-width:600px) { + .emotion-33 { + padding-left: 24px; + padding-right: 24px; + } +} + +@media (min-width:0px) { + @media (orientation: landscape) { + .emotion-33 { + min-height: 48px; + } + } +} + +@media (min-width:600px) { + .emotion-33 { + min-height: 64px; + } +} + +@media (min-width:0px) and (orientation: landscape) { + .emotion-33 { + min-height: 52px; + } +} + +@media (min-width:600px) { + .emotion-33 { + min-height: 52px; + padding-right: 2px; + } +} + +.emotion-33 .MuiTablePagination-actions { + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + margin-left: 20px; +} + +.emotion-34 { + -webkit-flex: 1 1 100%; + -ms-flex: 1 1 100%; + flex: 1 1 100%; +} + +.emotion-35 { + font-family: "Roboto","Helvetica","Arial",sans-serif; + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + letter-spacing: 0.01071em; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.emotion-36 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + box-sizing: border-box; + -webkit-tap-highlight-color: transparent; + background-color: transparent; + outline: 0; + border: 0; + margin: 0; + border-radius: 0; + padding: 0; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + -moz-appearance: none; + -webkit-appearance: none; + -webkit-text-decoration: none; + text-decoration: none; + color: inherit; + text-align: center; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + font-size: 1.5rem; + padding: 8px; + border-radius: 50%; + overflow: visible; + color: rgba(0, 0, 0, 0.54); + -webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + color: inherit; +} + +.emotion-36::-moz-focus-inner { + border-style: none; +} + +.emotion-36.Mui-disabled { + pointer-events: none; + cursor: default; +} + +@media print { + .emotion-36 { + -webkit-print-color-adjust: exact; + color-adjust: exact; + } +} + +.emotion-36:hover { + background-color: rgba(0, 0, 0, 0.04); +} + +@media (hover: none) { + .emotion-36:hover { + background-color: transparent; + } +} + +.emotion-36.Mui-disabled { + background-color: transparent; + color: rgba(0, 0, 0, 0.26); +} + +.emotion-40 { + display: block; + -webkit-background-size: cover; + background-size: cover; + background-repeat: no-repeat; + -webkit-background-position: center; + background-position: center; + width: 100%; + object-fit: cover; + width: 32px; + aspect-ratio: 1/1; +} + +
+
+ +
+
+
+ Tree History +
+
+
+ + + + + + + + + + + + + + + +
+ + id + + + + + name + + +
+ December 31 1969 + + Tree 4 +
+
+
+
+
+
+

+ 1–1 of 1 +

+
+ + +
+
+
+
+
+
+
+ + tree + + + Privacy Policy + + + License + +
+
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`;