magic-csb/ihealth-kit-registration
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat; munu stryle

Browse Source
This commit is contained in:
EleanorMao
2023-05-01 21:22:14 +08:00
parent 97fdafc657
commit 1931dbd152
10 changed files with 40 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Menu/Menu.tsx
View File

@ -27,7 +27,8 @@ export const Menu: FC<MenuProps> = ({ onLogout, onClose }) => {
<StyledCloseIcon component={CloseSvg} onClick={onClose} />
<StyledActivateButton block href={Paths.Activate}>Activate Kit</StyledActivateButton>
{menuConfig.map((item) => (
<StyledMenuItem key={item.title}>
<StyledMenuItem key={item.title} to={item.href} target={item.target}
rel={item.target === '_blank' ? "noopener noreferrer" : undefined}>
<StyledIcon component={item.icon} />
{item.title}
</StyledMenuItem>
@ -42,7 +43,8 @@ export const Menu: FC<MenuProps> = ({ onLogout, onClose }) => {
<Breakpoint s up>
<StyledPlainMenuContainer>
{menuConfig.map((item) => (
<StyledPlainMenuItem key={item.title}>
<StyledPlainMenuItem key={item.title} to={item.href} target={item.target}
rel={item.target === '_blank' ? "noopener noreferrer" : undefined}>
<StyledIcon component={item.icon} />
{item.title}
</StyledPlainMenuItem>

13
src/components/Menu/styled.ts
View File

@ -1,6 +1,7 @@
import styled from 'styled-components'
import { Button } from '../Button'
import Icon from '@ant-design/icons'
import { NavLink } from 'react-router-dom'
export const StyledExtraContent = styled.div`
text-align: center;
@ -43,7 +44,7 @@ export const StyledActivateButton = styled(Button)`
border-radius: 8px;
margin-bottom: 11px;
`
export const StyledMenuItem = styled.div`
export const StyledMenuItem = styled(NavLink)`
height: 64px;
line-height: 64px;
text-align: center;
@ -52,6 +53,8 @@ export const StyledMenuItem = styled.div`
font-size: 16px;
letter-spacing: 0.02em;
color: #000022;
text-decoration: none;
display: block;
`
export const StyledIcon = styled(Icon)`
margin-right: 6px;
@ -85,14 +88,20 @@ export const StyledPlainMenuContainer = styled.aside`
}
`
export const StyledPlainMenuItem = styled.div`
export const StyledPlainMenuItem = styled(NavLink)`
height: 64px;
line-height: 64px;
padding: 0 20px;
color: #000022;
font-weight: 500;
font-size: 16px;
display: block;
letter-spacing: 0.02em;
position: relative;
border-bottom: 2px solid #FDFDFD;
text-decoration: none;
&:focus, &:active, &.active {
color: ${props => props.theme.brandPrimary};
}
`

4
src/icons/bell.svg
View File

@ -1,4 +1,4 @@
<svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9999 2.02502C9.90788 2.02502 7.83999 2.88157 6.36072 4.36085C4.88144 5.84012 4.02489 7.90801 4.02489 10C4.02489 14.6015 3.06305 17.3784 2.13697 18.9852C2.13807 18.9883 2.13958 18.9916 2.14154 18.9951C2.14258 18.9969 2.14464 19 2.14464 19H21.8551C21.8551 19 21.8572 18.9969 21.8582 18.9951C21.8602 18.9916 21.8617 18.9883 21.8628 18.9852C20.9367 17.3784 19.9749 14.6015 19.9749 10C19.9749 7.90801 19.1183 5.84012 17.6391 4.36085C16.1598 2.88157 14.0919 2.02502 11.9999 2.02502ZM4.9465 2.94663C6.80085 1.09229 9.37745 0.0250244 11.9999 0.0250244C14.6223 0.0250244 17.1989 1.09229 19.0533 2.94663C20.9076 4.80098 21.9749 7.37758 21.9749 10C21.9749 14.3334 22.8817 16.7534 23.6028 17.999L23.6034 18C24.3493 19.2919 23.4168 20.9946 21.8784 21L21.8749 21H2.12489L2.12137 21C0.582952 20.9946 -0.349523 19.2919 0.39637 18L0.396965 17.999C1.11809 16.7534 2.02489 14.3334 2.02489 10C2.02489 7.37758 3.09215 4.80098 4.9465 2.94663Z" fill="#000022"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.9999 19C8.55219 19 8.9999 19.4477 8.9999 20V21C8.9999 21.7956 9.31597 22.5587 9.87858 23.1213C10.4412 23.6839 11.2043 24 11.9999 24C12.7956 24 13.5586 23.6839 14.1212 23.1213C14.6838 22.5587 14.9999 21.7956 14.9999 21V20C14.9999 19.4477 15.4476 19 15.9999 19C16.5522 19 16.9999 19.4477 16.9999 20V21C16.9999 22.3261 16.4731 23.5979 15.5354 24.5355C14.5978 25.4732 13.326 26 11.9999 26C10.6738 26 9.40205 25.4732 8.46437 24.5355C7.52669 23.5979 6.9999 22.3261 6.9999 21V20C6.9999 19.4477 7.44762 19 7.9999 19Z" fill="#000022"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9999 2.02502C9.90788 2.02502 7.83999 2.88157 6.36072 4.36085C4.88144 5.84012 4.02489 7.90801 4.02489 10C4.02489 14.6015 3.06305 17.3784 2.13697 18.9852C2.13807 18.9883 2.13958 18.9916 2.14154 18.9951C2.14258 18.9969 2.14464 19 2.14464 19H21.8551C21.8551 19 21.8572 18.9969 21.8582 18.9951C21.8602 18.9916 21.8617 18.9883 21.8628 18.9852C20.9367 17.3784 19.9749 14.6015 19.9749 10C19.9749 7.90801 19.1183 5.84012 17.6391 4.36085C16.1598 2.88157 14.0919 2.02502 11.9999 2.02502ZM4.9465 2.94663C6.80085 1.09229 9.37745 0.0250244 11.9999 0.0250244C14.6223 0.0250244 17.1989 1.09229 19.0533 2.94663C20.9076 4.80098 21.9749 7.37758 21.9749 10C21.9749 14.3334 22.8817 16.7534 23.6028 17.999L23.6034 18C24.3493 19.2919 23.4168 20.9946 21.8784 21L21.8749 21H2.12489L2.12137 21C0.582952 20.9946 -0.349523 19.2919 0.39637 18L0.396965 17.999C1.11809 16.7534 2.02489 14.3334 2.02489 10C2.02489 7.37758 3.09215 4.80098 4.9465 2.94663Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.9999 19C8.55219 19 8.9999 19.4477 8.9999 20V21C8.9999 21.7956 9.31597 22.5587 9.87858 23.1213C10.4412 23.6839 11.2043 24 11.9999 24C12.7956 24 13.5586 23.6839 14.1212 23.1213C14.6838 22.5587 14.9999 21.7956 14.9999 21V20C14.9999 19.4477 15.4476 19 15.9999 19C16.5522 19 16.9999 19.4477 16.9999 20V21C16.9999 22.3261 16.4731 23.5979 15.5354 24.5355C14.5978 25.4732 13.326 26 11.9999 26C10.6738 26 9.40205 25.4732 8.46437 24.5355C7.52669 23.5979 6.9999 22.3261 6.9999 21V20C6.9999 19.4477 7.44762 19 7.9999 19Z" fill="currentColor"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

2
src/icons/gear.svg
View File

@ -1,3 +1,3 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.7178 2.66085C11.9925 2.57219 12.2921 2.60651 12.5395 2.755L15.4626 4.50886C15.8209 4.49285 16.1798 4.49286 16.5381 4.50889L19.449 2.7669C19.6945 2.62003 19.9911 2.58528 20.2638 2.67145C22.1741 3.27497 23.9304 4.28646 25.4111 5.63587C25.6234 5.82931 25.7422 6.10468 25.7374 6.39182L25.6802 9.78962C25.8776 10.0927 26.0587 10.4062 26.2228 10.7285L29.186 12.376C29.4355 12.5147 29.6138 12.7535 29.676 13.0321C30.112 14.9847 30.1166 17.0089 29.6895 18.9635C29.6281 19.2445 29.4487 19.4854 29.197 19.6248L26.2224 21.2723C26.0584 21.5944 25.8774 21.9075 25.6802 22.2104L25.7374 25.6082C25.7422 25.8953 25.6234 26.1707 25.4111 26.3641C23.9335 27.7106 22.1846 28.725 20.2822 29.3391C20.0076 29.4278 19.708 29.3935 19.4605 29.245L16.5374 27.4911C16.1791 27.5071 15.8203 27.5071 15.462 27.4911L12.551 29.2331C12.3056 29.38 12.009 29.4147 11.7363 29.3285C9.82599 28.725 8.06968 27.7135 6.58896 26.3641C6.37668 26.1707 6.25783 25.8953 6.26268 25.6081L6.31994 22.218C6.12371 21.9117 5.94278 21.5959 5.7778 21.2718L2.81411 19.624C2.5646 19.4853 2.38627 19.2465 2.32407 18.9679C1.88811 17.0153 1.88351 14.9911 2.31059 13.0365C2.37199 12.7555 2.55142 12.5146 2.80304 12.3752L5.77768 10.7277C5.94167 10.4056 6.12265 10.0925 6.31988 9.78961L6.26268 6.39182C6.25784 6.10466 6.37671 5.82929 6.58899 5.63585C8.0666 4.28938 9.81543 3.27496 11.7178 2.66085ZM8.27018 6.82083L8.32489 10.0707C8.32844 10.2812 8.26543 10.4875 8.14485 10.6601C7.87663 11.0441 7.6418 11.4504 7.44295 11.8745C7.35355 12.0652 7.20625 12.2228 7.02204 12.3248L4.17771 13.9001C3.92892 15.2891 3.93237 16.7117 4.18791 18.0995L7.02347 19.676C7.20629 19.7776 7.35263 19.9341 7.4419 20.1232C7.64511 20.5539 7.88214 20.9677 8.15075 21.3609C8.26754 21.5319 8.32839 21.7349 8.32489 21.9419L8.27021 25.179C9.35109 26.0921 10.5871 26.8038 11.9194 27.2803L14.699 25.6169C14.8751 25.5116 15.0793 25.4629 15.2839 25.4775C15.7607 25.5116 16.2394 25.5116 16.7162 25.4775C16.9212 25.4629 17.1258 25.5117 17.302 25.6175L20.0906 27.2906C21.4185 26.8066 22.6506 26.0918 23.7299 25.1792L23.6752 21.9293C23.6716 21.7188 23.7346 21.5125 23.8552 21.3399C24.1234 20.9559 24.3583 20.5496 24.5571 20.1255C24.6465 19.9348 24.7938 19.7772 24.978 19.6752L27.8224 18.0999C28.0712 16.7109 28.0677 15.2883 27.8122 13.9005L24.9766 12.324C24.793 12.2219 24.6463 12.0647 24.5571 11.8745C24.3583 11.4504 24.1234 11.0441 23.8552 10.6601C23.7346 10.4875 23.6716 10.2812 23.6752 10.0707L23.7299 6.82096C22.649 5.90786 21.413 5.19614 20.0806 4.7197L17.301 6.38308C17.125 6.48843 16.9208 6.53708 16.7162 6.52244C16.2394 6.48833 15.7607 6.48833 15.2839 6.52244C15.0789 6.53711 14.8743 6.48824 14.698 6.38248L11.9095 4.70935C10.5815 5.19334 9.34945 5.90817 8.27018 6.82083ZM16 11C13.2386 11 11 13.2386 11 16C11 18.7614 13.2386 21 16 21C18.7615 21 21 18.7614 21 16C21 13.2386 18.7615 11 16 11ZM9.00003 16C9.00003 12.134 12.134 8.99999 16 8.99999C19.866 8.99999 23 12.134 23 16C23 19.866 19.866 23 16 23C12.134 23 9.00003 19.866 9.00003 16Z" fill="#000022"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.7178 2.66085C11.9925 2.57219 12.2921 2.60651 12.5395 2.755L15.4626 4.50886C15.8209 4.49285 16.1798 4.49286 16.5381 4.50889L19.449 2.7669C19.6945 2.62003 19.9911 2.58528 20.2638 2.67145C22.1741 3.27497 23.9304 4.28646 25.4111 5.63587C25.6234 5.82931 25.7422 6.10468 25.7374 6.39182L25.6802 9.78962C25.8776 10.0927 26.0587 10.4062 26.2228 10.7285L29.186 12.376C29.4355 12.5147 29.6138 12.7535 29.676 13.0321C30.112 14.9847 30.1166 17.0089 29.6895 18.9635C29.6281 19.2445 29.4487 19.4854 29.197 19.6248L26.2224 21.2723C26.0584 21.5944 25.8774 21.9075 25.6802 22.2104L25.7374 25.6082C25.7422 25.8953 25.6234 26.1707 25.4111 26.3641C23.9335 27.7106 22.1846 28.725 20.2822 29.3391C20.0076 29.4278 19.708 29.3935 19.4605 29.245L16.5374 27.4911C16.1791 27.5071 15.8203 27.5071 15.462 27.4911L12.551 29.2331C12.3056 29.38 12.009 29.4147 11.7363 29.3285C9.82599 28.725 8.06968 27.7135 6.58896 26.3641C6.37668 26.1707 6.25783 25.8953 6.26268 25.6081L6.31994 22.218C6.12371 21.9117 5.94278 21.5959 5.7778 21.2718L2.81411 19.624C2.5646 19.4853 2.38627 19.2465 2.32407 18.9679C1.88811 17.0153 1.88351 14.9911 2.31059 13.0365C2.37199 12.7555 2.55142 12.5146 2.80304 12.3752L5.77768 10.7277C5.94167 10.4056 6.12265 10.0925 6.31988 9.78961L6.26268 6.39182C6.25784 6.10466 6.37671 5.82929 6.58899 5.63585C8.0666 4.28938 9.81543 3.27496 11.7178 2.66085ZM8.27018 6.82083L8.32489 10.0707C8.32844 10.2812 8.26543 10.4875 8.14485 10.6601C7.87663 11.0441 7.6418 11.4504 7.44295 11.8745C7.35355 12.0652 7.20625 12.2228 7.02204 12.3248L4.17771 13.9001C3.92892 15.2891 3.93237 16.7117 4.18791 18.0995L7.02347 19.676C7.20629 19.7776 7.35263 19.9341 7.4419 20.1232C7.64511 20.5539 7.88214 20.9677 8.15075 21.3609C8.26754 21.5319 8.32839 21.7349 8.32489 21.9419L8.27021 25.179C9.35109 26.0921 10.5871 26.8038 11.9194 27.2803L14.699 25.6169C14.8751 25.5116 15.0793 25.4629 15.2839 25.4775C15.7607 25.5116 16.2394 25.5116 16.7162 25.4775C16.9212 25.4629 17.1258 25.5117 17.302 25.6175L20.0906 27.2906C21.4185 26.8066 22.6506 26.0918 23.7299 25.1792L23.6752 21.9293C23.6716 21.7188 23.7346 21.5125 23.8552 21.3399C24.1234 20.9559 24.3583 20.5496 24.5571 20.1255C24.6465 19.9348 24.7938 19.7772 24.978 19.6752L27.8224 18.0999C28.0712 16.7109 28.0677 15.2883 27.8122 13.9005L24.9766 12.324C24.793 12.2219 24.6463 12.0647 24.5571 11.8745C24.3583 11.4504 24.1234 11.0441 23.8552 10.6601C23.7346 10.4875 23.6716 10.2812 23.6752 10.0707L23.7299 6.82096C22.649 5.90786 21.413 5.19614 20.0806 4.7197L17.301 6.38308C17.125 6.48843 16.9208 6.53708 16.7162 6.52244C16.2394 6.48833 15.7607 6.48833 15.2839 6.52244C15.0789 6.53711 14.8743 6.48824 14.698 6.38248L11.9095 4.70935C10.5815 5.19334 9.34945 5.90817 8.27018 6.82083ZM16 11C13.2386 11 11 13.2386 11 16C11 18.7614 13.2386 21 16 21C18.7615 21 21 18.7614 21 16C21 13.2386 18.7615 11 16 11ZM9.00003 16C9.00003 12.134 12.134 8.99999 16 8.99999C19.866 8.99999 23 12.134 23 16C23 19.866 19.866 23 16 23C12.134 23 9.00003 19.866 9.00003 16Z" fill="currentColor"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

2
src/icons/history.svg
View File

@ -1,3 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.125 4.25002V7.64612L11.9469 9.33909C12.089 9.42445 12.1914 9.56279 12.2316 9.72366C12.2717 9.88453 12.2463 10.0548 12.1609 10.1969C12.0756 10.339 11.9372 10.4414 11.7764 10.4816C11.6155 10.5217 11.4453 10.4963 11.3031 10.411L8.17812 8.53596C8.08563 8.48039 8.00911 8.40183 7.95599 8.30791C7.90287 8.21399 7.87497 8.10792 7.875 8.00002V4.25002C7.875 4.08426 7.94085 3.92529 8.05806 3.80808C8.17527 3.69087 8.33424 3.62502 8.5 3.62502C8.66576 3.62502 8.82473 3.69087 8.94194 3.80808C9.05915 3.92529 9.125 4.08426 9.125 4.25002ZM8.5 0.500023C7.51406 0.497567 6.53742 0.690675 5.62661 1.06817C4.71579 1.44566 3.88889 2.00005 3.19375 2.69924C2.62578 3.27424 2.12109 3.82737 1.625 4.40627V3.00002C1.625 2.83426 1.55915 2.67529 1.44194 2.55808C1.32473 2.44087 1.16576 2.37502 1 2.37502C0.83424 2.37502 0.675268 2.44087 0.558058 2.55808C0.440848 2.67529 0.375 2.83426 0.375 3.00002V6.12502C0.375 6.29078 0.440848 6.44975 0.558058 6.56697C0.675268 6.68418 0.83424 6.75002 1 6.75002H4.125C4.29076 6.75002 4.44973 6.68418 4.56694 6.56697C4.68415 6.44975 4.75 6.29078 4.75 6.12502C4.75 5.95926 4.68415 5.80029 4.56694 5.68308C4.44973 5.56587 4.29076 5.50002 4.125 5.50002H2.32812C2.88672 4.84221 3.44297 4.22268 4.07734 3.58049C4.94598 2.71186 6.05133 2.11847 7.25529 1.87446C8.45924 1.63045 9.70841 1.74665 10.8467 2.20853C11.985 2.67041 12.9619 3.45749 13.6555 4.47144C14.349 5.48538 14.7283 6.68121 14.7461 7.90952C14.7639 9.13782 14.4193 10.3441 13.7554 11.3777C13.0915 12.4113 12.1377 13.2263 11.0132 13.7209C9.88879 14.2155 8.6435 14.3678 7.43299 14.1587C6.22249 13.9496 5.10043 13.3885 4.20703 12.5453C4.14732 12.4889 4.07708 12.4448 4.00032 12.4155C3.92356 12.3862 3.84179 12.3724 3.75967 12.3747C3.67754 12.377 3.59668 12.3955 3.5217 12.429C3.44672 12.4626 3.37908 12.5106 3.32266 12.5703C3.26623 12.63 3.22212 12.7003 3.19283 12.777C3.16355 12.8538 3.14967 12.9356 3.152 13.0177C3.15432 13.0998 3.17279 13.1807 3.20636 13.2557C3.23993 13.3306 3.28795 13.3983 3.34766 13.4547C4.23785 14.2948 5.32012 14.9042 6.5 15.2298C7.67989 15.5554 8.92153 15.5873 10.1166 15.3226C11.3116 15.058 12.4237 14.505 13.3559 13.7117C14.288 12.9184 15.0118 11.9091 15.4642 10.7718C15.9165 9.63442 16.0836 8.40366 15.9509 7.18689C15.8182 5.97011 15.3897 4.80431 14.7029 3.79122C14.016 2.77813 13.0916 1.94854 12.0104 1.37485C10.9292 0.801167 9.72399 0.50082 8.5 0.500023Z" fill="black"/>
<path d="M9.125 4.25002V7.64612L11.9469 9.33909C12.089 9.42445 12.1914 9.56279 12.2316 9.72366C12.2717 9.88453 12.2463 10.0548 12.1609 10.1969C12.0756 10.339 11.9372 10.4414 11.7764 10.4816C11.6155 10.5217 11.4453 10.4963 11.3031 10.411L8.17812 8.53596C8.08563 8.48039 8.00911 8.40183 7.95599 8.30791C7.90287 8.21399 7.87497 8.10792 7.875 8.00002V4.25002C7.875 4.08426 7.94085 3.92529 8.05806 3.80808C8.17527 3.69087 8.33424 3.62502 8.5 3.62502C8.66576 3.62502 8.82473 3.69087 8.94194 3.80808C9.05915 3.92529 9.125 4.08426 9.125 4.25002ZM8.5 0.500023C7.51406 0.497567 6.53742 0.690675 5.62661 1.06817C4.71579 1.44566 3.88889 2.00005 3.19375 2.69924C2.62578 3.27424 2.12109 3.82737 1.625 4.40627V3.00002C1.625 2.83426 1.55915 2.67529 1.44194 2.55808C1.32473 2.44087 1.16576 2.37502 1 2.37502C0.83424 2.37502 0.675268 2.44087 0.558058 2.55808C0.440848 2.67529 0.375 2.83426 0.375 3.00002V6.12502C0.375 6.29078 0.440848 6.44975 0.558058 6.56697C0.675268 6.68418 0.83424 6.75002 1 6.75002H4.125C4.29076 6.75002 4.44973 6.68418 4.56694 6.56697C4.68415 6.44975 4.75 6.29078 4.75 6.12502C4.75 5.95926 4.68415 5.80029 4.56694 5.68308C4.44973 5.56587 4.29076 5.50002 4.125 5.50002H2.32812C2.88672 4.84221 3.44297 4.22268 4.07734 3.58049C4.94598 2.71186 6.05133 2.11847 7.25529 1.87446C8.45924 1.63045 9.70841 1.74665 10.8467 2.20853C11.985 2.67041 12.9619 3.45749 13.6555 4.47144C14.349 5.48538 14.7283 6.68121 14.7461 7.90952C14.7639 9.13782 14.4193 10.3441 13.7554 11.3777C13.0915 12.4113 12.1377 13.2263 11.0132 13.7209C9.88879 14.2155 8.6435 14.3678 7.43299 14.1587C6.22249 13.9496 5.10043 13.3885 4.20703 12.5453C4.14732 12.4889 4.07708 12.4448 4.00032 12.4155C3.92356 12.3862 3.84179 12.3724 3.75967 12.3747C3.67754 12.377 3.59668 12.3955 3.5217 12.429C3.44672 12.4626 3.37908 12.5106 3.32266 12.5703C3.26623 12.63 3.22212 12.7003 3.19283 12.777C3.16355 12.8538 3.14967 12.9356 3.152 13.0177C3.15432 13.0998 3.17279 13.1807 3.20636 13.2557C3.23993 13.3306 3.28795 13.3983 3.34766 13.4547C4.23785 14.2948 5.32012 14.9042 6.5 15.2298C7.67989 15.5554 8.92153 15.5873 10.1166 15.3226C11.3116 15.058 12.4237 14.505 13.3559 13.7117C14.288 12.9184 15.0118 11.9091 15.4642 10.7718C15.9165 9.63442 16.0836 8.40366 15.9509 7.18689C15.8182 5.97011 15.3897 4.80431 14.7029 3.79122C14.016 2.77813 13.0916 1.94854 12.0104 1.37485C10.9292 0.801167 9.72399 0.50082 8.5 0.500023Z" fill="currentColor"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

2
src/icons/home.svg
View File

@ -1,3 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.15717 0.420883C7.38748 0.210599 7.6881 0.0939941 8 0.0939941C8.3119 0.0939941 8.61252 0.210599 8.84283 0.420883C8.84314 0.421162 8.84344 0.421442 8.84375 0.421722L15.0922 6.1L15.101 6.10816C15.2245 6.22481 15.3234 6.36499 15.392 6.52045C15.4605 6.67591 15.4972 6.84351 15.4999 7.01337L15.5 7.02348V14.25C15.5 14.5816 15.3683 14.8995 15.1339 15.1339C14.8995 15.3684 14.5815 15.5 14.25 15.5H10.5C10.1685 15.5 9.85054 15.3684 9.61612 15.1339C9.38169 14.8995 9.25 14.5816 9.25 14.25V10.5H6.75V14.25C6.75 14.5816 6.6183 14.8995 6.38388 15.1339C6.14946 15.3684 5.83152 15.5 5.5 15.5H1.75C1.41848 15.5 1.10054 15.3684 0.866117 15.1339C0.631696 14.8995 0.5 14.5816 0.5 14.25V7.02348L0.500082 7.01337C0.50283 6.84351 0.539539 6.67591 0.608047 6.52045C0.676556 6.36499 0.775478 6.22481 0.89899 6.10816L0.907791 6.1L7.15625 0.421722C7.15656 0.421442 7.15686 0.421162 7.15717 0.420883ZM1.75592 7.01831L7.99846 1.3454L8 1.34399L8.00154 1.3454L14.2441 7.0183C14.2457 7.02015 14.2471 7.02225 14.2481 7.02452C14.2491 7.02689 14.2498 7.02941 14.25 7.03198V14.25H10.5V10.5C10.5 10.1685 10.3683 9.85058 10.1339 9.61616C9.89946 9.38174 9.58152 9.25005 9.25 9.25005H6.75C6.41848 9.25005 6.10054 9.38174 5.86612 9.61616C5.6317 9.85058 5.5 10.1685 5.5 10.5V14.25H1.75V7.03198C1.75022 7.02941 1.75086 7.02689 1.75191 7.02452C1.75291 7.02225 1.75427 7.02015 1.75592 7.01831Z" fill="#000022"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.15717 0.420883C7.38748 0.210599 7.6881 0.0939941 8 0.0939941C8.3119 0.0939941 8.61252 0.210599 8.84283 0.420883C8.84314 0.421162 8.84344 0.421442 8.84375 0.421722L15.0922 6.1L15.101 6.10816C15.2245 6.22481 15.3234 6.36499 15.392 6.52045C15.4605 6.67591 15.4972 6.84351 15.4999 7.01337L15.5 7.02348V14.25C15.5 14.5816 15.3683 14.8995 15.1339 15.1339C14.8995 15.3684 14.5815 15.5 14.25 15.5H10.5C10.1685 15.5 9.85054 15.3684 9.61612 15.1339C9.38169 14.8995 9.25 14.5816 9.25 14.25V10.5H6.75V14.25C6.75 14.5816 6.6183 14.8995 6.38388 15.1339C6.14946 15.3684 5.83152 15.5 5.5 15.5H1.75C1.41848 15.5 1.10054 15.3684 0.866117 15.1339C0.631696 14.8995 0.5 14.5816 0.5 14.25V7.02348L0.500082 7.01337C0.50283 6.84351 0.539539 6.67591 0.608047 6.52045C0.676556 6.36499 0.775478 6.22481 0.89899 6.10816L0.907791 6.1L7.15625 0.421722C7.15656 0.421442 7.15686 0.421162 7.15717 0.420883ZM1.75592 7.01831L7.99846 1.3454L8 1.34399L8.00154 1.3454L14.2441 7.0183C14.2457 7.02015 14.2471 7.02225 14.2481 7.02452C14.2491 7.02689 14.2498 7.02941 14.25 7.03198V14.25H10.5V10.5C10.5 10.1685 10.3683 9.85058 10.1339 9.61616C9.89946 9.38174 9.58152 9.25005 9.25 9.25005H6.75C6.41848 9.25005 6.10054 9.38174 5.86612 9.61616C5.6317 9.85058 5.5 10.1685 5.5 10.5V14.25H1.75V7.03198C1.75022 7.02941 1.75086 7.02689 1.75191 7.02452C1.75291 7.02225 1.75427 7.02015 1.75592 7.01831Z" fill="currentColor"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

6
src/icons/question.svg
View File

@ -1,5 +1,5 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 5C9.92487 5 5 9.92487 5 16C5 22.0751 9.92487 27 16 27C22.0751 27 27 22.0751 27 16C27 9.92487 22.0751 5 16 5ZM3 16C3 8.8203 8.8203 3 16 3C23.1797 3 29 8.8203 29 16C29 23.1797 23.1797 29 16 29C8.8203 29 3 23.1797 3 16Z" fill="#000022"/>
<path d="M16 24C16.8284 24 17.5 23.3284 17.5 22.5C17.5 21.6716 16.8284 21 16 21C15.1716 21 14.5 21.6716 14.5 22.5C14.5 23.3284 15.1716 24 16 24Z" fill="#000022"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2779 9.34254C15.1002 9.00195 16.005 8.91283 16.8779 9.08647C17.7508 9.2601 18.5526 9.68869 19.182 10.318C19.8113 10.9474 20.2399 11.7492 20.4135 12.6221C20.5872 13.495 20.4981 14.3998 20.1575 15.2221C19.8169 16.0443 19.2401 16.7471 18.5001 17.2416C18.0413 17.5482 17.5325 17.7661 17 17.8875V18C17 18.5523 16.5523 19 16 19C15.4477 19 15 18.5523 15 18V17C15 16.7348 15.1054 16.4804 15.2929 16.2929C15.4804 16.1054 15.7348 16 16 16C16.4945 16 16.9778 15.8534 17.3889 15.5787C17.8 15.304 18.1205 14.9135 18.3097 14.4567C18.4989 13.9999 18.5484 13.4972 18.452 13.0123C18.3555 12.5273 18.1174 12.0819 17.7678 11.7322C17.4181 11.3826 16.9727 11.1445 16.4877 11.048C16.0028 10.9516 15.5001 11.0011 15.0433 11.1903C14.5865 11.3795 14.196 11.7 13.9213 12.1111C13.6466 12.5222 13.5 13.0055 13.5 13.5C13.5 14.0523 13.0523 14.5 12.5 14.5C11.9477 14.5 11.5 14.0523 11.5 13.5C11.5 12.61 11.7639 11.74 12.2584 10.9999C12.7529 10.2599 13.4557 9.68314 14.2779 9.34254Z" fill="#000022"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 5C9.92487 5 5 9.92487 5 16C5 22.0751 9.92487 27 16 27C22.0751 27 27 22.0751 27 16C27 9.92487 22.0751 5 16 5ZM3 16C3 8.8203 8.8203 3 16 3C23.1797 3 29 8.8203 29 16C29 23.1797 23.1797 29 16 29C8.8203 29 3 23.1797 3 16Z" fill="currentColor"/>
<path d="M16 24C16.8284 24 17.5 23.3284 17.5 22.5C17.5 21.6716 16.8284 21 16 21C15.1716 21 14.5 21.6716 14.5 22.5C14.5 23.3284 15.1716 24 16 24Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2779 9.34254C15.1002 9.00195 16.005 8.91283 16.8779 9.08647C17.7508 9.2601 18.5526 9.68869 19.182 10.318C19.8113 10.9474 20.2399 11.7492 20.4135 12.6221C20.5872 13.495 20.4981 14.3998 20.1575 15.2221C19.8169 16.0443 19.2401 16.7471 18.5001 17.2416C18.0413 17.5482 17.5325 17.7661 17 17.8875V18C17 18.5523 16.5523 19 16 19C15.4477 19 15 18.5523 15 18V17C15 16.7348 15.1054 16.4804 15.2929 16.2929C15.4804 16.1054 15.7348 16 16 16C16.4945 16 16.9778 15.8534 17.3889 15.5787C17.8 15.304 18.1205 14.9135 18.3097 14.4567C18.4989 13.9999 18.5484 13.4972 18.452 13.0123C18.3555 12.5273 18.1174 12.0819 17.7678 11.7322C17.4181 11.3826 16.9727 11.1445 16.4877 11.048C16.0028 10.9516 15.5001 11.0011 15.0433 11.1903C14.5865 11.3795 14.196 11.7 13.9213 12.1111C13.6466 12.5222 13.5 13.0055 13.5 13.5C13.5 14.0523 13.0523 14.5 12.5 14.5C11.9477 14.5 11.5 14.0523 11.5 13.5C11.5 12.61 11.7639 11.74 12.2584 10.9999C12.7529 10.2599 13.4557 9.68314 14.2779 9.34254Z" fill="currentColor"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

3
src/routes/AppRoutes.tsx
View File

@ -6,6 +6,7 @@ import { Home } from 'pages/activation/home'
import { Login } from 'pages/activation/login'
import { Activate } from 'pages/activation/activate'
import { Dashboard } from 'pages/customerPortal/dashboard'
import { RequireAuth } from './RequireAuth'
export const AppRoutes: FC = () => {
return (
@ -15,7 +16,7 @@ export const AppRoutes: FC = () => {
<Route path={Paths.Login} element={<Login />} />
<Route path={Paths.Activate} element={<Activate />} />
</Route>
<Route path={Paths.Account} element={<HomeLayout alwaysShowIcon />}>
<Route path={Paths.Account} element={<RequireAuth><HomeLayout alwaysShowIcon /></RequireAuth>}>
<Route index element={<Navigate replace to={Paths.Dashboard} />} />
<Route path={Paths.Dashboard} element={<Dashboard />} />
</Route>

14
src/routes/RequireAuth.tsx Normal file
View File

@ -0,0 +1,14 @@
import React, { FC, PropsWithChildren, useState } from 'react'
import { observer } from 'mobx-react-lite'
import { AuthStore } from '../stores/AuthStore'
import { Navigate, useLocation } from 'react-router-dom'
import { Paths } from './Paths'
export const RequireAuth: FC<PropsWithChildren> = observer(({ children }) => {
const [store] = useState(AuthStore.instance())
const location = useLocation()
if (!store.logined) {
return <Navigate to={Paths.Login} state={{ from: location }} replace />
}
return <>{children}</>
})

1
src/stores/AuthStore.ts
View File

@ -39,6 +39,7 @@ export class AuthStore {
}
get logined() {
console.log(this.token)
return !!this.token
}