menu: UI enhancements in desktop sizes
- add product dialog - enhance product page layout for desktop size
This commit is contained in:
@@ -1,9 +1,10 @@
|
||||
interface DescIcon1Type {
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
pathColor?: string;
|
||||
}
|
||||
|
||||
const DescIcon1 = ({ className, onClick }: DescIcon1Type) => {
|
||||
const DescIcon1 = ({ className, onClick,pathColor }: DescIcon1Type) => {
|
||||
return (
|
||||
<svg
|
||||
width="22"
|
||||
@@ -19,25 +20,25 @@ const DescIcon1 = ({ className, onClick }: DescIcon1Type) => {
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M0.622 8C0.622 12.0667 3.93333 15.378 8 15.378C12.068 15.378 15.378 12.0673 15.378 8C15.378 3.93267 12.068 0.622 8 0.622C3.93333 0.622 0.622 3.93333 0.622 8ZM0 8C0 12.4113 3.58867 16 8 16C12.4113 16 16 12.4113 16 8C16 3.58867 12.4113 0 8 0C3.58867 0 0 3.58867 0 8Z"
|
||||
fill="#000044"
|
||||
fill={pathColor}
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M8.67666 12.4099C8.76199 12.4159 8.84666 12.4186 8.92999 12.4186C10.0253 12.4186 10.9353 11.9226 11.5613 10.9852C12.4507 9.65324 12.6693 7.50791 12.1027 5.88857C11.2907 6.28391 8.50732 7.77191 8.00399 9.81391C7.79132 10.6759 8.01732 11.5486 8.67666 12.4099ZM8.92999 12.8886C8.82332 12.8886 8.71332 12.8846 8.60332 12.8766C8.56307 12.8843 8.5215 12.881 8.48292 12.8672C8.44435 12.8533 8.41019 12.8294 8.38399 12.7979C7.57266 11.7852 7.29199 10.7432 7.54932 9.69991C7.82199 8.59524 8.68132 7.52658 10.1033 6.52258C10.744 6.07023 11.4254 5.67854 12.1387 5.35258C12.1673 5.34006 12.1981 5.33341 12.2293 5.33303C12.2606 5.33264 12.2915 5.33853 12.3204 5.35034C12.3494 5.36216 12.3756 5.37965 12.3976 5.40179C12.4196 5.42393 12.437 5.45027 12.4487 5.47924C13.1887 7.28124 12.9787 9.70724 11.9507 11.2472C11.234 12.3206 10.1893 12.8886 8.92999 12.8886Z"
|
||||
fill="#000044"
|
||||
fill={pathColor}
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M8.18132 12.2934C8.18332 12.2174 8.25932 10.3887 10.996 7.21873C11.0397 7.17058 11.0997 7.14028 11.1644 7.13363C11.2291 7.12699 11.294 7.14447 11.3467 7.18273C11.3719 7.20046 11.3931 7.22329 11.409 7.24975C11.4248 7.2762 11.4349 7.3057 11.4386 7.33631C11.4423 7.36692 11.4396 7.39798 11.4305 7.42745C11.4214 7.45692 11.4063 7.48416 11.386 7.5074C8.77265 10.5341 8.68065 12.2881 8.67998 12.3054C8.67598 12.4301 8.56532 12.5294 8.43065 12.5294C8.28665 12.5254 8.17799 12.4207 8.18132 12.2934ZM3.85465 5.89007C3.39865 7.05473 3.49665 8.5894 4.11065 9.56207C4.54598 10.2527 5.21065 10.6181 6.03265 10.6181H6.03665C6.52465 10.0381 6.71265 9.4374 6.59665 8.82873C6.32265 7.39673 4.48932 6.24873 3.85465 5.89007ZM6.13599 11.0901C6.11572 11.09 6.09556 11.0873 6.07599 11.0821C5.06799 11.0954 4.25065 10.6547 3.71798 9.81007C2.98665 8.65007 2.90665 6.78207 3.53332 5.46673C3.54663 5.43891 3.56533 5.41402 3.58835 5.39349C3.61136 5.37297 3.63823 5.35722 3.66739 5.34717C3.69654 5.33712 3.72741 5.33297 3.75818 5.33496C3.78896 5.33694 3.81903 5.34502 3.84665 5.35873C3.96132 5.41607 6.67998 6.79007 7.05332 8.74207C7.20332 9.53007 6.95332 10.2947 6.30932 11.0134C6.28754 11.0378 6.26083 11.0573 6.23095 11.0707C6.20107 11.084 6.1687 11.0902 6.13599 11.0901Z"
|
||||
fill="#000044"
|
||||
fill={pathColor}
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M6.23468 10.9731C6.17243 10.9707 6.11367 10.9438 6.07121 10.8982C6.02874 10.8526 6.00603 10.7921 6.00801 10.7298C6.00801 10.7098 5.90001 9.86847 4.24134 7.5078C4.20531 7.4564 4.19086 7.39292 4.20108 7.33098C4.2113 7.26904 4.24538 7.21357 4.29601 7.17647C4.32093 7.15837 4.34922 7.14543 4.37921 7.13841C4.40919 7.13139 4.44028 7.13043 4.47065 7.13559C4.50101 7.14074 4.53004 7.15191 4.55603 7.16843C4.58203 7.18495 4.60446 7.20649 4.62201 7.2318C6.39335 9.7518 6.47801 10.6845 6.47535 10.7431C6.47396 10.8043 6.44883 10.8625 6.40528 10.9054C6.36172 10.9483 6.30317 10.9726 6.24201 10.9731H6.23468Z"
|
||||
fill="#000044"
|
||||
fill={pathColor}
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
interface DescIcon2Type {
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
pathColor?: string;
|
||||
}
|
||||
|
||||
const DescIcon2 = ({ className, onClick }: DescIcon2Type) => {
|
||||
const DescIcon2 = ({ className, onClick, pathColor }: DescIcon2Type) => {
|
||||
return (
|
||||
<svg
|
||||
width="22"
|
||||
@@ -19,25 +20,25 @@ const DescIcon2 = ({ className, onClick }: DescIcon2Type) => {
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M0.622 8C0.622 12.0667 3.93333 15.378 8 15.378C12.068 15.378 15.378 12.0673 15.378 8C15.378 3.93267 12.068 0.622 8 0.622C3.93333 0.622 0.622 3.93333 0.622 8ZM0 8C0 12.4113 3.58867 16 8 16C12.4113 16 16 12.4113 16 8C16 3.58867 12.4113 0 8 0C3.58867 0 0 3.58867 0 8Z"
|
||||
fill="#000044"
|
||||
fill={pathColor}
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M5.66468 12.188H5.43935C4.44268 12.188 3.63135 11.4654 3.63135 10.578V6.52269C3.63135 6.10202 3.68601 5.46269 3.84001 4.92936C4.07801 4.10736 4.45868 3.84469 4.78068 3.78736L4.97268 3.49402C4.99645 3.45728 5.02903 3.42705 5.06745 3.4061C5.10587 3.38514 5.14892 3.37411 5.19268 3.37402H6.21268C6.29601 3.37402 6.37401 3.41336 6.42335 3.48002L6.65068 3.78536C7.51135 3.92069 7.69735 5.33069 7.69735 6.52269V8.45602C7.69735 8.60269 7.57935 8.72269 7.43401 8.72269C7.36376 8.72216 7.29658 8.69379 7.24722 8.6438C7.19785 8.59381 7.17033 8.52628 7.17068 8.45602V6.52269C7.17068 5.15669 6.91801 4.30869 6.51201 4.30869C6.471 4.30864 6.43057 4.29896 6.39398 4.28044C6.35739 4.26191 6.32566 4.23505 6.30135 4.20202L6.08201 3.90802H5.33401L5.15068 4.18869C5.12691 4.22544 5.09433 4.25566 5.05591 4.27662C5.01749 4.29757 4.97445 4.3086 4.93068 4.30869C4.40401 4.30869 4.15868 5.62936 4.15868 6.52269V10.578C4.15868 11.1714 4.73268 11.6534 5.43868 11.6534H5.66468C5.81001 11.6534 5.92801 11.7734 5.92801 11.9207C5.92801 12.068 5.81001 12.188 5.66468 12.188Z"
|
||||
fill="#000044"
|
||||
fill={pathColor}
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M6.42005 8.47088C6.3498 8.47018 6.28269 8.44164 6.23345 8.39152C6.18421 8.34141 6.15685 8.27381 6.15738 8.20355V5.81088C6.15738 5.66422 6.27538 5.54422 6.42072 5.54422C6.56605 5.54422 6.68405 5.66422 6.68405 5.81088V8.20355C6.68405 8.35088 6.56605 8.47022 6.42072 8.47022L6.42005 8.47088ZM5.70805 3.64088C6.17605 3.64088 6.55538 3.45022 6.55538 3.21555C6.55538 2.98022 6.17605 2.78955 5.70872 2.78955C5.24072 2.78955 4.86072 2.98022 4.86072 3.21555C4.86072 3.45022 5.24072 3.64088 5.70805 3.64088ZM5.84272 10.2656C5.80497 10.2656 5.76767 10.2574 5.73337 10.2417C5.69908 10.2259 5.6686 10.2029 5.64405 10.1742C5.59806 10.1206 5.57494 10.0512 5.57968 9.9807C5.58442 9.91025 5.61663 9.84448 5.66938 9.79755L9.01738 6.83555C9.04851 6.8079 9.08575 6.78802 9.12605 6.77755C9.59787 6.66896 10.0826 6.62699 10.5661 6.65288C11.6214 6.71488 12.3847 7.14622 12.7714 7.90088C12.8038 7.9635 12.8102 8.03633 12.7894 8.10368C12.7686 8.17102 12.7221 8.22748 12.6601 8.26088C12.6294 8.27719 12.5957 8.2872 12.5611 8.29032C12.5265 8.29344 12.4916 8.2896 12.4585 8.27904C12.4254 8.26848 12.3948 8.25141 12.3683 8.22883C12.3419 8.20625 12.3203 8.17861 12.3047 8.14755C11.6381 6.85022 9.67805 7.20355 9.31339 7.28222L6.01605 10.2002C5.96825 10.2425 5.90656 10.2658 5.84272 10.2656Z"
|
||||
fill="#000044"
|
||||
fill={pathColor}
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M5.84268 13.2275C5.7856 13.2274 5.73011 13.2087 5.68468 13.1741C5.65192 13.1491 5.62538 13.1168 5.60711 13.0798C5.58885 13.0428 5.57935 13.0021 5.57935 12.9608V9.99881C5.57908 9.94125 5.59744 9.88515 5.63168 9.83889C5.66593 9.79263 5.71422 9.75869 5.76935 9.74214L12.4647 7.76747C12.5039 7.7559 12.5453 7.75374 12.5854 7.76115C12.6256 7.76856 12.6635 7.78535 12.696 7.81014C12.7627 7.86081 12.802 7.94014 12.802 8.02347V10.9861C12.8021 11.0436 12.7837 11.0995 12.7495 11.1457C12.7152 11.1918 12.667 11.2256 12.612 11.2421L5.91668 13.2175C5.89284 13.2243 5.86815 13.2277 5.84335 13.2275H5.84268ZM6.10668 10.1988V12.6048L12.2747 10.7855V8.38014L6.10668 10.1988Z"
|
||||
fill="#000044"
|
||||
fill={pathColor}
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
interface DescIcon3Type {
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
pathColor?: string;
|
||||
}
|
||||
|
||||
const DescIcon3 = ({ className, onClick }: DescIcon3Type) => {
|
||||
const DescIcon3 = ({ className, onClick, pathColor }: DescIcon3Type) => {
|
||||
return (
|
||||
<svg
|
||||
width="22"
|
||||
@@ -19,7 +20,7 @@ const DescIcon3 = ({ className, onClick }: DescIcon3Type) => {
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M0.622 8C0.622 12.0667 3.93333 15.378 8 15.378C12.0667 15.378 15.378 12.0667 15.378 8C15.378 3.93333 12.068 0.622 8 0.622C3.93333 0.622 0.622 3.93333 0.622 8ZM0 8C0 12.4113 3.58867 16 8 16C12.4113 16 16 12.4113 16 8C16 3.58867 12.4113 0 8 0C3.58867 0 0 3.58867 0 8Z"
|
||||
fill="#000044"
|
||||
fill={pathColor}
|
||||
/>
|
||||
<mask
|
||||
id="mask0_14735_5698"
|
||||
@@ -42,18 +43,18 @@ const DescIcon3 = ({ className, onClick }: DescIcon3Type) => {
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M5.79528 4.01336C5.71861 4.09803 5.64195 4.1947 5.55395 4.2787C5.46061 4.3667 5.43061 4.45203 5.47728 4.5807C5.55995 4.80603 5.57061 5.04403 5.56928 5.28536C5.56261 6.0487 5.55995 6.81203 5.57061 7.57536C5.57395 7.7807 5.48928 7.9127 5.32728 7.99936C5.01661 8.16603 4.68395 8.20936 4.34528 8.1127C4.02528 8.0227 3.83195 7.7147 3.85861 7.3207C3.87261 7.10603 3.93528 6.8947 3.97528 6.68203C3.98728 6.62003 3.99795 6.55803 4.00861 6.4967C3.96795 6.50736 3.94595 6.52336 3.93528 6.54336C3.70995 6.9967 3.53195 7.4647 3.55795 7.9847C3.57928 8.41403 3.83795 8.7627 4.23795 8.8507C4.43528 8.89403 4.65128 8.90003 4.85128 8.8707C5.51328 8.77336 6.07795 8.07136 6.04461 7.46736C6.01128 6.83403 6.04195 6.1967 6.03461 5.5607C6.03195 5.30203 6.04195 5.05203 6.17261 4.82003C6.18135 4.80203 6.18616 4.78238 6.18674 4.76239C6.18731 4.74239 6.18363 4.7225 6.17595 4.70403C6.05528 4.4767 5.92795 4.2527 5.79528 4.01336ZM11.8259 7.75803C11.5939 7.80603 11.3859 7.85603 11.1766 7.89136C10.8799 7.94003 10.5819 7.9827 10.2859 7.8847C9.62595 7.6687 9.22728 7.1887 9.04461 6.54003C8.91128 6.0667 8.84328 5.57403 8.75795 5.08803C8.71528 4.84803 8.69795 4.6047 8.66595 4.3327C8.59661 4.43936 8.54861 4.5247 8.48928 4.6007C8.42661 4.6807 8.42061 4.76403 8.42595 4.86203C8.44661 5.24536 8.46928 5.6287 8.46728 6.01203C8.46395 6.47203 8.39061 6.92203 8.16861 7.33203C8.09728 7.46403 8.00528 7.58403 7.92261 7.70936C7.90483 7.67803 7.89913 7.64127 7.90661 7.60603C7.96128 7.23803 7.99795 6.8687 7.93261 6.4987C7.81728 5.85136 7.45461 5.35336 6.97928 4.92736C6.93528 4.8887 6.88128 4.8607 6.82995 4.83203C6.74328 4.78203 6.66328 4.80336 6.63328 4.89536C6.57195 5.07936 6.49728 5.2667 6.48195 5.4567C6.45928 5.74603 6.74261 6.07003 7.02461 6.11536C7.18461 6.1407 7.33928 6.18203 7.42661 6.32603C7.52661 6.49136 7.64395 6.6627 7.68195 6.8467C7.73661 7.11403 7.72528 7.39536 7.74661 7.6707C7.75861 7.82536 7.68528 7.9227 7.56528 8.00803C7.18061 8.28136 6.75661 8.4647 6.30728 8.5967C6.26395 8.60936 6.22128 8.62536 6.14528 8.6507C7.80728 9.06936 8.70728 7.9567 8.74061 6.54603C8.75928 6.6207 8.76928 6.66536 8.78195 6.70936C8.86595 7.0027 8.92395 7.30803 9.03928 7.58936C9.34995 8.34536 10.1699 8.80936 10.9366 8.6627C11.4993 8.5547 12.0526 8.39603 12.6353 8.41136L12.8806 7.76203C12.6966 7.6187 12.5219 7.49736 12.3659 7.35603C12.1833 7.19136 12.0173 7.00803 11.8426 6.8347C11.6393 6.63336 11.4226 6.45003 11.1479 6.35536C10.6719 6.19136 10.0993 6.51803 10.0006 7.0107C10.1213 6.96936 10.2399 6.92536 10.3606 6.88803C10.5479 6.82936 10.7366 6.8287 10.9166 6.9147C11.2953 7.0947 11.5633 7.3967 11.8259 7.75803Z"
|
||||
fill="#000044"
|
||||
fill={pathColor}
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M11.8259 7.75803C11.5639 7.3967 11.2952 7.09469 10.9166 6.9147C10.7366 6.8287 10.5479 6.82936 10.3599 6.88803C10.2399 6.92536 10.1212 6.96936 9.99989 7.01069C10.0986 6.51803 10.6719 6.19136 11.1479 6.35536C11.4226 6.45003 11.6392 6.63336 11.8426 6.83536C12.0172 7.0087 12.1826 7.19136 12.3659 7.35603C12.5219 7.49736 12.6966 7.61869 12.8799 7.76203L12.6352 8.41136C12.0526 8.39603 11.4992 8.5547 10.9366 8.6627C10.1699 8.80936 9.34989 8.34536 9.03856 7.58936C8.92323 7.30803 8.86523 7.0027 8.78189 6.70936C8.76923 6.66536 8.75923 6.6207 8.74056 6.54603C8.70723 7.9567 7.80723 9.06936 6.14523 8.65069C6.22123 8.62536 6.26389 8.60936 6.30723 8.5967C6.75589 8.4647 7.18056 8.28136 7.56456 8.00803C7.68456 7.9227 7.75789 7.82536 7.74656 7.67069C7.72523 7.39536 7.73656 7.11403 7.68189 6.8467C7.64389 6.6627 7.52656 6.49136 7.42656 6.32669C7.33923 6.18136 7.18456 6.1407 7.02456 6.11536C6.74256 6.07003 6.45923 5.74603 6.48189 5.4567C6.49723 5.2667 6.57189 5.07936 6.63256 4.89536C6.66323 4.80336 6.74256 4.78203 6.82989 4.83203C6.88123 4.86136 6.93523 4.8887 6.97923 4.92736C7.45456 5.35336 7.81723 5.85136 7.93256 6.4987C7.99789 6.8687 7.96123 7.2387 7.90589 7.60603C7.89855 7.64135 7.90448 7.67814 7.92256 7.70936C8.00523 7.58403 8.09723 7.46403 8.16856 7.33203C8.39056 6.92203 8.46389 6.47203 8.46723 6.01203C8.46923 5.6287 8.44723 5.24536 8.42589 4.86203C8.42056 4.76403 8.42656 4.6807 8.48923 4.6007C8.54923 4.5247 8.59589 4.43936 8.66589 4.3327C8.69789 4.6047 8.71523 4.8487 8.75723 5.08803C8.84389 5.5747 8.91056 6.0667 9.04389 6.54003C9.22723 7.1887 9.62589 7.66803 10.2859 7.88536C10.5819 7.9827 10.8799 7.94003 11.1766 7.89136C11.3866 7.85603 11.5939 7.80603 11.8259 7.75803ZM5.79523 4.01336C5.92856 4.25203 6.05523 4.4767 6.17523 4.70403C6.18302 4.72245 6.18681 4.74232 6.18635 4.76231C6.18589 4.78231 6.18119 4.80198 6.17256 4.82003C6.04189 5.05203 6.03189 5.30203 6.03456 5.56069C6.04189 6.19669 6.01123 6.83403 6.04523 7.46736C6.07723 8.07136 5.51323 8.77403 4.85189 8.87069C4.64788 8.90042 4.4402 8.89365 4.23856 8.8507C3.83856 8.76269 3.57923 8.41403 3.55856 7.98403C3.53189 7.46403 3.70989 6.99736 3.93523 6.54403C3.94589 6.5227 3.96789 6.50736 4.00856 6.4967C3.99789 6.55803 3.98723 6.62003 3.97523 6.68203C3.93523 6.89536 3.87256 7.10603 3.85856 7.32136C3.83189 7.7147 4.02523 8.0227 4.34523 8.11336C4.50832 8.16023 4.67908 8.17428 4.84764 8.15471C5.0162 8.13515 5.17921 8.08234 5.32723 7.99936C5.48923 7.91269 5.57389 7.78069 5.57056 7.57536C5.55989 6.81203 5.56256 6.0487 5.56923 5.28536C5.57123 5.04403 5.55989 4.80603 5.47723 4.5807C5.43056 4.45203 5.46056 4.3667 5.55389 4.2787C5.64256 4.1947 5.71856 4.09936 5.79523 4.01336Z"
|
||||
fill="#000044"
|
||||
fill={pathColor}
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
d="M5.17733 12.4445H4.804V11.7225H4.37333V12.4445H4V10.6732H4.37333V11.3298H4.804V10.6732H5.17733V12.4445ZM6.74467 12.4445L6.67733 12.1125H6.23067L6.16133 12.4445H5.754L6.202 10.6665H6.69667L7.15067 12.4445H6.74467ZM6.6 11.7198L6.54133 11.4292C6.52733 11.3652 6.51067 11.2812 6.49067 11.1785C6.47627 11.1054 6.46338 11.0321 6.452 10.9585C6.44188 11.0265 6.43055 11.0943 6.418 11.1618C6.402 11.2565 6.36467 11.4418 6.308 11.7198H6.6ZM7.72733 12.4445V10.6732H8.09867V12.0572H8.62733V12.4438L7.72733 12.4445ZM10.1173 12.4445L10.05 12.1125H9.60333L9.534 12.4445H9.12667L9.57467 10.6665H10.0693L10.5227 12.4445H10.1173ZM9.97267 11.7198L9.91333 11.4292C9.9 11.3652 9.88267 11.2812 9.86267 11.1785C9.84828 11.1054 9.83539 11.0321 9.824 10.9585C9.81411 11.0265 9.80299 11.0943 9.79067 11.1618C9.774 11.2565 9.73733 11.4418 9.68067 11.7198H9.97267ZM11.1 12.4445V10.6732H11.4713V12.0572H12V12.4438L11.1 12.4445Z"
|
||||
fill="#000044"
|
||||
fill={pathColor}
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
|
||||
Reference in New Issue
Block a user