feat: new Layout
This commit is contained in:
zerosoul
+9
-9
@@ -11,10 +11,10 @@
|
|||||||
"@reduxjs/toolkit": "^1.8.1",
|
"@reduxjs/toolkit": "^1.8.1",
|
||||||
"@svgr/webpack": "^6.2.1",
|
"@svgr/webpack": "^6.2.1",
|
||||||
"@tippyjs/react": "^4.2.6",
|
"@tippyjs/react": "^4.2.6",
|
||||||
"@toast-ui/editor": "^3.1.3",
|
"@toast-ui/editor": "^3.1.4",
|
||||||
"@toast-ui/editor-plugin-code-syntax-highlight": "^3.0.0",
|
"@toast-ui/editor-plugin-code-syntax-highlight": "^3.0.0",
|
||||||
"@toast-ui/react-editor": "^3.1.3",
|
"@toast-ui/react-editor": "^3.1.3",
|
||||||
"@udecode/plate": "^10.6.0",
|
"@udecode/plate": "^10.6.2",
|
||||||
"animate.css": "^4.1.1",
|
"animate.css": "^4.1.1",
|
||||||
"axios": "^0.26.1",
|
"axios": "^0.26.1",
|
||||||
"babel-loader": "^8.2.4",
|
"babel-loader": "^8.2.4",
|
||||||
@@ -32,7 +32,7 @@
|
|||||||
"emoji-mart": "^3.0.1",
|
"emoji-mart": "^3.0.1",
|
||||||
"eslint": "^8.13.0",
|
"eslint": "^8.13.0",
|
||||||
"file-loader": "^6.2.0",
|
"file-loader": "^6.2.0",
|
||||||
"firebase": "^9.6.10",
|
"firebase": "^9.6.11",
|
||||||
"fs-extra": "^10.0.1",
|
"fs-extra": "^10.0.1",
|
||||||
"html-webpack-plugin": "^5.5.0",
|
"html-webpack-plugin": "^5.5.0",
|
||||||
"interactjs": "^1.10.11",
|
"interactjs": "^1.10.11",
|
||||||
@@ -44,7 +44,7 @@
|
|||||||
"mini-css-extract-plugin": "^2.6.0",
|
"mini-css-extract-plugin": "^2.6.0",
|
||||||
"re-resizable": "^6.9.5",
|
"re-resizable": "^6.9.5",
|
||||||
"react": "^18.0.0",
|
"react": "^18.0.0",
|
||||||
"react-dev-utils": "^12.0.0",
|
"react-dev-utils": "^12.0.1",
|
||||||
"react-dnd": "16.0.0",
|
"react-dnd": "16.0.0",
|
||||||
"react-dnd-html5-backend": "16.0.0",
|
"react-dnd-html5-backend": "16.0.0",
|
||||||
"react-dom": "^18.0.0",
|
"react-dom": "^18.0.0",
|
||||||
@@ -63,12 +63,12 @@
|
|||||||
"react-window": "^1.8.6",
|
"react-window": "^1.8.6",
|
||||||
"resolve": "^1.22.0",
|
"resolve": "^1.22.0",
|
||||||
"rooks": "^5.11.0",
|
"rooks": "^5.11.0",
|
||||||
"semver": "^7.3.6",
|
"semver": "^7.3.7",
|
||||||
"slate": "^0.76.1",
|
"slate": "^0.77.0",
|
||||||
"slate-auto-replace": "^0.12.1",
|
"slate-auto-replace": "^0.12.1",
|
||||||
"slate-history": "^0.66.0",
|
"slate-history": "^0.66.0",
|
||||||
"slate-hyperscript": "^0.67.0",
|
"slate-hyperscript": "^0.77.0",
|
||||||
"slate-react": "^0.76.1",
|
"slate-react": "^0.77.0",
|
||||||
"source-map-loader": "^3.0.1",
|
"source-map-loader": "^3.0.1",
|
||||||
"style-loader": "^3.3.1",
|
"style-loader": "^3.3.1",
|
||||||
"styled-components": "^5.3.5",
|
"styled-components": "^5.3.5",
|
||||||
@@ -78,7 +78,7 @@
|
|||||||
"webpack": "^5.72.0",
|
"webpack": "^5.72.0",
|
||||||
"webpack-dev-server": "^4.8.1",
|
"webpack-dev-server": "^4.8.1",
|
||||||
"webpack-manifest-plugin": "^5.0.0",
|
"webpack-manifest-plugin": "^5.0.0",
|
||||||
"workbox-webpack-plugin": "^6.5.2"
|
"workbox-webpack-plugin": "^6.5.3"
|
||||||
},
|
},
|
||||||
"resolutions": {
|
"resolutions": {
|
||||||
"prosemirror-tables": "^1.1.1"
|
"prosemirror-tables": "^1.1.1"
|
||||||
|
|||||||
@@ -0,0 +1,4 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M4.27721 6.1562L2.49022 9.82007C0.562623 13.7722 2.20385 18.5387 6.156 20.4663L9.81988 22.2533C13.772 24.1809 18.5385 22.5396 20.4661 18.5875L22.2531 14.9236C24.1807 10.9715 22.5395 6.20499 18.5873 4.2774L14.9234 2.49041C10.9713 0.562816 6.2048 2.20404 4.27721 6.1562Z" fill="#9274F6"/>
|
||||||
|
<path d="M12.8539 14.5377L14.0382 15.7238C14.0677 15.7504 14.0914 15.7828 14.108 15.819C14.1245 15.8551 14.1336 15.8942 14.1346 15.934C14.1356 15.9737 14.1285 16.0132 14.1137 16.0501C14.099 16.0871 14.0768 16.1206 14.0487 16.1487C14.0206 16.1768 13.9871 16.1989 13.9502 16.2137C13.9133 16.2284 13.8738 16.2355 13.834 16.2345C13.7943 16.2336 13.7552 16.2245 13.719 16.2079C13.6829 16.1914 13.6505 16.1676 13.6238 16.1382L12.1461 14.6605L10.6684 16.1382C10.6417 16.1676 10.6093 16.1914 10.5732 16.2079C10.5371 16.2245 10.498 16.2336 10.4582 16.2345C10.4185 16.2355 10.3789 16.2284 10.342 16.2137C10.3051 16.1989 10.2716 16.1768 10.2435 16.1487C10.2154 16.1206 10.1933 16.0871 10.1785 16.0501C10.1638 16.0132 10.1567 15.9737 10.1576 15.934C10.1586 15.8942 10.1677 15.8551 10.1842 15.819C10.2008 15.7828 10.2245 15.7504 10.254 15.7238L11.4388 14.5395H8.33511C8.29565 14.541 8.25628 14.5346 8.21937 14.5205C8.18246 14.5065 8.14876 14.4851 8.12029 14.4578C8.09183 14.4304 8.06918 14.3975 8.05371 14.3612C8.03825 14.3249 8.03027 14.2858 8.03027 14.2463C8.03027 14.2068 8.03825 14.1677 8.05371 14.1314C8.06918 14.095 8.09183 14.0622 8.12029 14.0348C8.14876 14.0074 8.18246 13.9861 8.21937 13.9721C8.25628 13.958 8.29565 13.9516 8.33511 13.9531H8.62851V9.26417H8.33511C8.29565 9.26571 8.25628 9.25926 8.21937 9.24522C8.18246 9.23118 8.14876 9.20984 8.12029 9.18246C8.09183 9.15509 8.06918 9.12225 8.05371 9.08591C8.03825 9.04957 8.03027 9.01049 8.03027 8.97099C8.03027 8.9315 8.03825 8.89242 8.05371 8.85608C8.06918 8.81974 8.09183 8.7869 8.12029 8.75953C8.14876 8.73215 8.18246 8.7108 8.21937 8.69677C8.25628 8.68273 8.29565 8.67628 8.33511 8.67782H11.8536V8.38443C11.8521 8.34497 11.8585 8.3056 11.8726 8.26869C11.8866 8.23177 11.9079 8.19807 11.9353 8.16961C11.9627 8.14114 11.9955 8.1185 12.0319 8.10303C12.0682 8.08756 12.1073 8.07959 12.1468 8.07959C12.1863 8.07959 12.2254 8.08756 12.2617 8.10303C12.298 8.1185 12.3309 8.14114 12.3583 8.16961C12.3856 8.19807 12.407 8.23177 12.421 8.26869C12.4351 8.3056 12.4415 8.34497 12.44 8.38443V8.67782H15.9585C16.0342 8.68078 16.1059 8.71296 16.1585 8.76762C16.211 8.82228 16.2404 8.89516 16.2404 8.97099C16.2404 9.04683 16.211 9.11971 16.1585 9.17437C16.1059 9.22903 16.0342 9.26121 15.9585 9.26417H15.6651V13.9531H15.9585C16.0342 13.9561 16.1059 13.9883 16.1585 14.0429C16.211 14.0976 16.2404 14.1705 16.2404 14.2463C16.2404 14.3221 16.211 14.395 16.1585 14.4497C16.1059 14.5043 16.0342 14.5365 15.9585 14.5395L12.8539 14.5377ZM11.7978 10.8428L13.0259 12.0708L13.8426 11.2541C13.8693 11.2246 13.9017 11.2009 13.9378 11.1843C13.974 11.1677 14.0131 11.1587 14.0528 11.1577C14.0926 11.1567 14.1321 11.1638 14.169 11.1786C14.2059 11.1933 14.2394 11.2154 14.2676 11.2435C14.2957 11.2717 14.3178 11.3052 14.3325 11.3421C14.3473 11.379 14.3544 11.4185 14.3534 11.4583C14.3524 11.498 14.3434 11.5371 14.3268 11.5733C14.3102 11.6094 14.2865 11.6418 14.257 11.6685L13.2331 12.6929C13.2059 12.7204 13.1736 12.7422 13.1379 12.7571C13.1023 12.7719 13.064 12.7796 13.0254 12.7796C12.9868 12.7796 12.9485 12.7719 12.9129 12.7571C12.8773 12.7422 12.8449 12.7204 12.8178 12.6929L11.5897 11.4648L9.21351 13.841V13.9513H15.0778V9.26238H9.21396V13.0135L11.3829 10.8437C11.4379 10.7888 11.5124 10.758 11.5901 10.758C11.6678 10.758 11.7423 10.7888 11.7973 10.8437L11.7978 10.8428Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.6 KiB |
@@ -0,0 +1,9 @@
|
|||||||
|
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.9663 14.3136C21.3125 13.2719 21.4999 12.1578 21.4999 10.9999C21.4999 5.20098 16.7989 0.5 10.9999 0.5C5.20098 0.5 0.5 5.20098 0.5 10.9999C0.5 12.1807 0.694902 13.3159 1.05429 14.3752C1.32395 14.3815 1.57876 14.3934 1.80817 14.4041C2.14992 14.4201 2.41759 14.4325 2.63488 14.4281L2.64317 14.428L2.72632 12.7465L2.72713 12.73L2.7286 12.7134L2.81793 11.7098L2.82096 11.6758L2.82674 11.6421L2.92757 11.0544C3.03194 10.4459 3.32484 9.88571 3.76488 9.4528C4.1382 9.08554 4.58512 8.83866 5.05767 8.71142C4.57269 8.45646 4.24194 7.94774 4.24194 7.36177C4.24194 6.5202 4.92418 5.83797 5.76575 5.83797C6.60733 5.83797 7.28956 6.5202 7.28956 7.36177C7.28956 7.93178 6.97659 8.42869 6.51311 8.69003C6.91875 8.78627 7.30791 8.96903 7.65078 9.23787C7.80273 9.00974 7.97847 8.79658 8.17598 8.60225C8.76559 8.02211 9.49046 7.66243 10.2484 7.52186C9.60152 7.23694 9.1499 6.5902 9.1499 5.83798C9.1499 4.82228 9.97329 3.9989 10.989 3.9989C12.0047 3.9989 12.8281 4.82228 12.8281 5.83798C12.8281 6.59098 12.3755 7.23828 11.7276 7.52274C12.4786 7.66272 13.1975 8.01694 13.7849 8.58411C13.9882 8.78046 14.1696 8.99691 14.3265 9.22923C14.6626 8.93881 15.0493 8.73628 15.4558 8.6221C14.9971 8.35949 14.6879 7.86519 14.6879 7.29869C14.6879 6.45712 15.3702 5.77489 16.2117 5.77489C17.0533 5.77489 17.7355 6.45712 17.7355 7.29869C17.7355 7.85303 17.4395 8.33823 16.997 8.60486C17.4811 8.72949 17.9396 8.97911 18.3212 9.35452C18.7613 9.78743 19.0542 10.3477 19.1586 10.9561L19.2594 11.5438L19.2654 11.5787L19.2684 11.6139L19.3893 13.0169L19.3899 13.0244L19.3904 13.032L19.4782 14.3227C19.5027 14.3244 19.5291 14.3259 19.5578 14.3272C19.847 14.3406 20.173 14.3326 20.5712 14.3227C20.6955 14.3196 20.8268 14.3164 20.9663 14.3136ZM20.2271 16.0149C19.946 16.0193 19.6895 16.0199 19.4797 16.0102C19.2 15.9972 18.8569 15.9646 18.5628 15.8394C18.4045 15.7721 18.2128 15.6586 18.0603 15.4622C17.9324 15.2975 17.8605 15.1111 17.8356 14.922L17.8304 14.9224L17.7101 13.1539L17.5929 11.7938L17.4981 11.2409C17.4534 10.9805 17.328 10.7408 17.1397 10.5555C16.6553 10.079 15.8693 10.0751 15.3747 10.5527C15.2011 10.7202 15.0785 10.934 15.0213 11.1659L15.11 11.6869L15.1118 11.6974L15.1133 11.708L15.2875 12.9164L15.2879 12.9189L15.4169 13.8332L15.4251 13.8918V13.9509V14.8442H15.4253C15.4253 15.2006 15.2977 15.55 15.0219 15.8037C14.758 16.0466 14.427 16.1381 14.131 16.127C13.5482 16.1052 12.9111 15.6548 12.9 14.8652H12.8997V13.993V13.9342L12.9079 13.876L13.0655 12.7515L13.0655 12.7515L13.0664 12.7452L13.2398 11.5734L13.2412 11.5644L13.2427 11.5555L13.3107 11.1558L13.2997 11.0914C13.2161 10.5999 12.9748 10.1439 12.6146 9.79604C11.7039 8.91661 10.2543 8.92083 9.35759 9.80316C9.03952 10.1161 8.81876 10.5133 8.72036 10.9467C8.72924 10.988 8.73725 11.0296 8.74436 11.0714L8.84343 11.6537L8.84848 11.6834L8.85139 11.7134L8.96567 12.8873L9.09527 13.8826L9.10232 13.9368V13.9914V14.9388H9.10418C9.10418 15.2934 8.97811 15.6423 8.70359 15.8965C8.44032 16.1403 8.10921 16.2328 7.81232 16.2216C7.22604 16.1995 6.59515 15.7449 6.5841 14.9597H6.57846V13.9614V13.9042L6.58618 13.8476L6.71229 12.9228L6.71229 12.9228L6.87918 11.6986L6.88114 11.6842L6.88359 11.67L6.99026 11.048C6.92391 10.9002 6.82943 10.7649 6.7114 10.6509C6.21682 10.1734 5.4308 10.1773 4.9464 10.6538C4.75808 10.8391 4.63273 11.0788 4.58807 11.3392L4.49302 11.8932L4.4082 12.8463L4.31546 14.7216V14.932H4.30823C4.29701 15.1382 4.2344 15.3528 4.09602 15.5461C3.94759 15.7535 3.75464 15.8768 3.58694 15.9504C3.28189 16.0842 2.93222 16.1072 2.66881 16.1126C2.4079 16.1178 2.1095 16.1048 1.81464 16.091C3.60644 19.3169 7.04825 21.4999 10.9999 21.4999C14.9826 21.4999 18.4474 19.2825 20.2271 16.0149ZM10.989 5.6094C10.8627 5.6094 10.7604 5.71174 10.7604 5.83798C10.7604 5.96422 10.8627 6.06656 10.989 6.06656C11.1152 6.06656 11.2176 5.96422 11.2176 5.83798C11.2176 5.71174 11.1152 5.6094 10.989 5.6094ZM16.2117 7.10712C16.1059 7.10712 16.0202 7.19289 16.0202 7.29869C16.0202 7.4045 16.1059 7.49027 16.2117 7.49027C16.3175 7.49027 16.4033 7.4045 16.4033 7.29869C16.4033 7.19289 16.3175 7.10712 16.2117 7.10712ZM19.5103 14.7677H19.5085L19.5026 14.6811C19.5079 14.7114 19.5103 14.7406 19.5103 14.7677ZM2.63071 14.863V14.7963C2.62689 14.821 2.62535 14.8435 2.62535 14.863H2.63071ZM5.57417 7.36177C5.57417 7.25597 5.65994 7.1702 5.76575 7.1702C5.87156 7.1702 5.95733 7.25597 5.95733 7.36177C5.95733 7.46758 5.87156 7.55335 5.76575 7.55335C5.65994 7.55335 5.57417 7.46758 5.57417 7.36177Z" fill="url(#paint0_linear_10204_30993)"/>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_10204_30993" x1="4.77145" y1="15.5437" x2="14.8698" y2="7.57937" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#056CF2"/>
|
||||||
|
<stop offset="1" stop-color="#4ECCC6"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.7 KiB |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12 2C17.5228 2 22 6.47715 22 12V19C22 20.6569 20.6569 22 19 22H16C15.4477 22 15 21.5523 15 21V15C15 14.4477 15.4477 14 16 14H20.5V12C20.5 7.30558 16.6944 3.5 12 3.5C7.30558 3.5 3.5 7.30558 3.5 12V14H8C8.55228 14 9 14.4477 9 15V21C9 21.5523 8.55228 22 8 22H5C3.34315 22 2 20.6569 2 19V12C2 6.47715 6.47715 2 12 2Z" fill="#70707B"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 444 B |
@@ -1,3 +1,3 @@
|
|||||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M17.5 17.5L12.5 12.5M14.1667 8.33333C14.1667 9.09938 14.0158 9.85792 13.7226 10.5657C13.4295 11.2734 12.9998 11.9164 12.4581 12.4581C11.9164 12.9998 11.2734 13.4295 10.5657 13.7226C9.85792 14.0158 9.09938 14.1667 8.33333 14.1667C7.56729 14.1667 6.80875 14.0158 6.10101 13.7226C5.39328 13.4295 4.75022 12.9998 4.20854 12.4581C3.66687 11.9164 3.23719 11.2734 2.94404 10.5657C2.65088 9.85792 2.5 9.09938 2.5 8.33333C2.5 6.78624 3.11458 5.30251 4.20854 4.20854C5.30251 3.11458 6.78624 2.5 8.33333 2.5C9.88043 2.5 11.3642 3.11458 12.4581 4.20854C13.5521 5.30251 14.1667 6.78624 14.1667 8.33333Z" stroke="#A1A1AA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
<path d="M10 2.5C14.1421 2.5 17.5 5.85786 17.5 10C17.5 11.7101 16.9276 13.2866 15.964 14.5483L20.7071 19.2929C21.0976 19.6834 21.0976 20.3166 20.7071 20.7071C20.3466 21.0676 19.7794 21.0953 19.3871 20.7903L19.2929 20.7071L14.5483 15.964C13.2866 16.9276 11.7101 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5ZM10 4.5C6.96243 4.5 4.5 6.96243 4.5 10C4.5 13.0376 6.96243 15.5 10 15.5C13.0376 15.5 15.5 13.0376 15.5 10C15.5 6.96243 13.0376 4.5 10 4.5Z" fill="#70707B"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 786 B After Width: | Height: | Size: 597 B |
@@ -1,3 +1,3 @@
|
|||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M12.0124 2.25006C12.7464 2.25852 13.4775 2.34332 14.1939 2.5031C14.5067 2.57285 14.7406 2.83357 14.7761 3.15202L14.9463 4.67887C15.0233 5.37992 15.6152 5.9109 16.3209 5.91164C16.5105 5.91194 16.6982 5.87244 16.8734 5.79489L18.2741 5.17962C18.5654 5.05165 18.9057 5.12142 19.1232 5.35368C20.1354 6.4347 20.8892 7.73121 21.3279 9.14564C21.4225 9.45064 21.3137 9.78209 21.0566 9.97156L19.8151 10.8867C19.461 11.1469 19.2518 11.5601 19.2518 11.9995C19.2518 12.439 19.461 12.8522 19.8159 13.113L21.0585 14.0284C21.3156 14.2178 21.4246 14.5493 21.3299 14.8544C20.8914 16.2685 20.138 17.565 19.1264 18.6462C18.9091 18.8784 18.569 18.9483 18.2777 18.8207L16.8714 18.2046C16.4691 18.0285 16.007 18.0543 15.6268 18.274C15.2466 18.4938 14.9935 18.8813 14.9452 19.3178L14.7761 20.8445C14.7413 21.1593 14.5124 21.4182 14.2043 21.4916C12.7558 21.8362 11.2467 21.8362 9.79828 21.4916C9.49015 21.4182 9.26129 21.1593 9.22643 20.8445L9.0576 19.32C9.00802 18.8843 8.75459 18.498 8.37467 18.279C7.99475 18.06 7.53345 18.0344 7.13244 18.2094L5.72582 18.8257C5.43446 18.9534 5.09428 18.8833 4.87703 18.651C3.86487 17.5685 3.11144 16.2706 2.67344 14.8549C2.57911 14.5499 2.68811 14.2187 2.94509 14.0294L4.18842 13.1134C4.54256 12.8532 4.75172 12.44 4.75172 12.0005C4.75172 11.5611 4.54256 11.1479 4.18796 10.8873L2.94541 9.97291C2.68804 9.78351 2.57894 9.45184 2.67361 9.14664C3.11236 7.73221 3.86619 6.4357 4.87837 5.35468C5.09584 5.12242 5.43618 5.05265 5.72749 5.18062L7.12786 5.79579C7.53081 5.97262 7.99404 5.94591 8.37601 5.72275C8.75633 5.50215 9.00953 5.11428 9.05841 4.6777L9.22849 3.15202C9.26401 2.83341 9.49811 2.5726 9.81105 2.503C10.5283 2.34348 11.2602 2.25871 12.0124 2.25006ZM11.9999 9.00001C10.3431 9.00001 8.99994 10.3432 8.99994 12C8.99994 13.6569 10.3431 15 11.9999 15C13.6568 15 14.9999 13.6569 14.9999 12C14.9999 10.3432 13.6568 9.00001 11.9999 9.00001Z" fill="#9CA3AF"/>
|
<path d="M2.2672 6.15302C2.52892 5.34708 2.96005 4.60729 3.52891 3.98033C3.62511 3.87431 3.77603 3.83652 3.91115 3.88463L5.27062 4.36863C5.6392 4.49978 6.04476 4.30859 6.17647 3.9416C6.18942 3.90551 6.1994 3.86844 6.20629 3.8308L6.46529 2.41527C6.49104 2.27452 6.5996 2.1632 6.74013 2.13341C7.1513 2.04627 7.57289 2.00195 8 2.00195C8.42685 2.00195 8.84818 2.04621 9.25912 2.13325C9.39961 2.16301 9.50816 2.27427 9.53397 2.41496L9.7937 3.83074C9.86392 4.21413 10.233 4.46825 10.618 4.39833C10.6559 4.39146 10.6931 4.38153 10.7293 4.36865L12.0888 3.88463C12.224 3.83652 12.3749 3.87431 12.4711 3.98033C13.04 4.60729 13.4711 5.34708 13.7328 6.15302C13.777 6.28899 13.7344 6.43805 13.625 6.53053L12.5231 7.46205C12.2247 7.7143 12.1882 8.1596 12.4416 8.45667C12.4665 8.48589 12.4937 8.51303 12.5231 8.53782L13.625 9.46935C13.7344 9.56183 13.777 9.71089 13.7328 9.84685C13.4711 10.6528 13.04 11.3926 12.4711 12.0196C12.3749 12.1256 12.224 12.1634 12.0888 12.1153L10.7294 11.6312C10.3608 11.5001 9.95524 11.6913 9.82353 12.0583C9.81058 12.0944 9.8006 12.1314 9.79368 12.1692L9.53397 13.5849C9.50816 13.7256 9.39961 13.8369 9.25912 13.8666C8.84818 13.9537 8.42685 13.9979 8 13.9979C7.57289 13.9979 7.1513 13.9536 6.74013 13.8665C6.5996 13.8367 6.49104 13.7254 6.46529 13.5846L6.2063 12.1691C6.13608 11.7857 5.76701 11.5316 5.38196 11.6015C5.3441 11.6084 5.30687 11.6184 5.27068 11.6312L3.91115 12.1153C3.77603 12.1634 3.62511 12.1256 3.52891 12.0196C2.96005 11.3926 2.52892 10.6528 2.2672 9.84685C2.22305 9.71089 2.26562 9.56183 2.37502 9.46935L3.47693 8.53783C3.77528 8.28558 3.81177 7.84027 3.55843 7.5432C3.53352 7.51399 3.50626 7.48685 3.47694 7.46206L2.37502 6.53053C2.26562 6.43805 2.22305 6.28899 2.2672 6.15302ZM6.24988 7.99988C6.24988 8.96638 7.03338 9.74988 7.99988 9.74988C8.96638 9.74988 9.74988 8.96638 9.74988 7.99988C9.74988 7.03338 8.96638 6.24988 7.99988 6.24988C7.03338 6.24988 6.24988 7.03338 6.24988 7.99988Z" fill="#344054"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 2.0 KiB |
@@ -7,7 +7,7 @@ import Avatar from "./Avatar";
|
|||||||
const StyledWrapper = styled.div`
|
const StyledWrapper = styled.div`
|
||||||
background-color: #e5e5e5;
|
background-color: #e5e5e5;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
bottom: 10px;
|
bottom: 16px;
|
||||||
margin: 8px;
|
margin: 8px;
|
||||||
width: 94%;
|
width: 94%;
|
||||||
width: -webkit-fill-available;
|
width: -webkit-fill-available;
|
||||||
|
|||||||
@@ -9,9 +9,14 @@ import Send from "../../../common/component/Send";
|
|||||||
import Contact from "../../../common/component/Contact";
|
import Contact from "../../../common/component/Contact";
|
||||||
import Layout from "../Layout";
|
import Layout from "../Layout";
|
||||||
import { renderMessageFragment } from "../utils";
|
import { renderMessageFragment } from "../utils";
|
||||||
|
import EditIcon from "../../../assets/icons/edit.svg";
|
||||||
import alertIcon from "../../../assets/icons/alert.svg?url";
|
import alertIcon from "../../../assets/icons/alert.svg?url";
|
||||||
import peopleIcon from "../../../assets/icons/people.svg?url";
|
import peopleIcon from "../../../assets/icons/people.svg?url";
|
||||||
import pinIcon from "../../../assets/icons/pin.svg?url";
|
import pinIcon from "../../../assets/icons/pin.svg?url";
|
||||||
|
import searchIcon from "../../../assets/icons/search.svg?url";
|
||||||
|
import headphoneIcon from "../../../assets/icons/headphone.svg?url";
|
||||||
|
import boardosIcon from "../../../assets/icons/app.boardos.svg?url";
|
||||||
|
import webrowseIcon from "../../../assets/icons/app.webrowse.svg?url";
|
||||||
import addIcon from "../../../assets/icons/add.svg?url";
|
import addIcon from "../../../assets/icons/add.svg?url";
|
||||||
import {
|
import {
|
||||||
// StyledNotification,
|
// StyledNotification,
|
||||||
@@ -20,8 +25,10 @@ import {
|
|||||||
StyledHeader,
|
StyledHeader,
|
||||||
} from "./styled";
|
} from "./styled";
|
||||||
import AddMemberModal from "./AddMemberModal";
|
import AddMemberModal from "./AddMemberModal";
|
||||||
|
import { NavLink, useLocation } from "react-router-dom";
|
||||||
|
|
||||||
export default function ChannelChat({ cid = "", dropFiles = [] }) {
|
export default function ChannelChat({ cid = "", dropFiles = [] }) {
|
||||||
|
const { pathname } = useLocation();
|
||||||
const [updateReadIndex] = useReadMessageMutation();
|
const [updateReadIndex] = useReadMessageMutation();
|
||||||
const updateReadDebounced = useDebounce(updateReadIndex, 300);
|
const updateReadDebounced = useDebounce(updateReadIndex, 300);
|
||||||
const [membersVisible, setMembersVisible] = useState(true);
|
const [membersVisible, setMembersVisible] = useState(true);
|
||||||
@@ -73,30 +80,57 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
|
|||||||
context="channel"
|
context="channel"
|
||||||
dropFiles={dropFiles}
|
dropFiles={dropFiles}
|
||||||
// ref={containerRef}
|
// ref={containerRef}
|
||||||
|
aside={
|
||||||
|
<>
|
||||||
|
<ul className="tools">
|
||||||
|
<li className="tool">
|
||||||
|
<Tooltip tip="Search" placement="left">
|
||||||
|
<img src={searchIcon} alt="opt icon" />
|
||||||
|
</Tooltip>
|
||||||
|
</li>
|
||||||
|
<li className="tool">
|
||||||
|
<Tooltip tip="Voice/Video Chat" placement="left">
|
||||||
|
<img src={headphoneIcon} alt="opt icon" />
|
||||||
|
</Tooltip>
|
||||||
|
</li>
|
||||||
|
<li className="tool">
|
||||||
|
<Tooltip tip="Notifications" placement="left">
|
||||||
|
<img src={alertIcon} alt="opt icon" />
|
||||||
|
</Tooltip>
|
||||||
|
</li>
|
||||||
|
<li className="tool">
|
||||||
|
<Tooltip tip="Pin" placement="left">
|
||||||
|
<img src={pinIcon} alt="opt icon" />
|
||||||
|
</Tooltip>
|
||||||
|
</li>
|
||||||
|
<li className="tool" onClick={toggleMembersVisible}>
|
||||||
|
<Tooltip tip="Channel Members" placement="left">
|
||||||
|
<img src={peopleIcon} alt="opt icon" />
|
||||||
|
</Tooltip>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<hr className="divider" />
|
||||||
|
<ul className="apps">
|
||||||
|
<li className="app">
|
||||||
|
<Tooltip tip="Webrowse" placement="left">
|
||||||
|
<img src={webrowseIcon} alt="app icon" />
|
||||||
|
</Tooltip>
|
||||||
|
</li>
|
||||||
|
<li className="app">
|
||||||
|
<Tooltip tip="BoardOS" placement="left">
|
||||||
|
<img src={boardosIcon} alt="app icon" />
|
||||||
|
</Tooltip>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</>
|
||||||
|
}
|
||||||
header={
|
header={
|
||||||
<StyledHeader>
|
<StyledHeader className="head">
|
||||||
<div className="txt">
|
<div className="txt">
|
||||||
<ChannelIcon personal={!is_public} />
|
<ChannelIcon personal={!is_public} />
|
||||||
<span className="title">{name}</span>
|
<span className="title">{name}</span>
|
||||||
<span className="desc">{description}</span>
|
<span className="desc">{description}</span>
|
||||||
</div>
|
</div>
|
||||||
<ul className="opts">
|
|
||||||
<li className="opt">
|
|
||||||
<Tooltip tip="Notifications" placement="bottom">
|
|
||||||
<img src={alertIcon} alt="opt icon" />
|
|
||||||
</Tooltip>
|
|
||||||
</li>
|
|
||||||
<li className="opt">
|
|
||||||
<Tooltip tip="Pin" placement="bottom">
|
|
||||||
<img src={pinIcon} alt="opt icon" />
|
|
||||||
</Tooltip>
|
|
||||||
</li>
|
|
||||||
<li className="opt" onClick={toggleMembersVisible}>
|
|
||||||
<Tooltip tip="Channel Members" placement="bottom">
|
|
||||||
<img src={peopleIcon} alt="opt icon" />
|
|
||||||
</Tooltip>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</StyledHeader>
|
</StyledHeader>
|
||||||
}
|
}
|
||||||
contacts={
|
contacts={
|
||||||
@@ -125,7 +159,13 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
|
|||||||
<p className="desc">
|
<p className="desc">
|
||||||
This is the start of the #{name} channel.{" "}
|
This is the start of the #{name} channel.{" "}
|
||||||
</p>
|
</p>
|
||||||
{/* <button className="edit">Edit Channel</button> */}
|
<NavLink
|
||||||
|
to={`/setting/channel/${cid}?f=${pathname}`}
|
||||||
|
className="edit"
|
||||||
|
>
|
||||||
|
<EditIcon className="icon" />
|
||||||
|
Edit Channel
|
||||||
|
</NavLink>
|
||||||
</div>
|
</div>
|
||||||
<div className="feed">
|
<div className="feed">
|
||||||
{[...msgIds]
|
{[...msgIds]
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
export const StyledHeader = styled.header`
|
export const StyledHeader = styled.header`
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -22,20 +21,6 @@ export const StyledHeader = styled.header`
|
|||||||
color: #616161;
|
color: #616161;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.opts {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 16px;
|
|
||||||
.opt {
|
|
||||||
cursor: pointer;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
`;
|
||||||
export const StyledNotification = styled.div`
|
export const StyledNotification = styled.div`
|
||||||
padding: 3px 8px;
|
padding: 3px 8px;
|
||||||
@@ -68,10 +53,10 @@ export const StyledContacts = styled.div`
|
|||||||
gap: 5px;
|
gap: 5px;
|
||||||
/* todo */
|
/* todo */
|
||||||
width: 226px;
|
width: 226px;
|
||||||
height: calc(100vh - 56px);
|
height: calc(100vh - 56px - 22px);
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
background: #f5f6f7;
|
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
|
box-shadow: inset 1px 0px 0px rgba(0, 0, 0, 0.1);
|
||||||
> .add {
|
> .add {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -101,18 +86,19 @@ export const StyledChannelChat = styled.article`
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
/* margin-bottom: 120px; */
|
/* margin-bottom: 120px; */
|
||||||
> .wrapper {
|
> .wrapper {
|
||||||
|
background-color: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
padding-bottom: 10px;
|
padding-bottom: 16px;
|
||||||
height: calc(100vh - 56px);
|
height: calc(100vh - 56px - 22px);
|
||||||
.chat {
|
.chat {
|
||||||
padding: 18px 16px;
|
padding: 18px 16px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
height: -webkit-fill-available;
|
height: -webkit-fill-available;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
> .info {
|
> .info {
|
||||||
padding-top: 114px;
|
padding-top: 62px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
@@ -129,15 +115,26 @@ export const StyledChannelChat = styled.article`
|
|||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
}
|
}
|
||||||
.edit {
|
.edit {
|
||||||
color: #3c8ce7;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
.icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
path {
|
||||||
|
fill: #3c8ce7;
|
||||||
|
}
|
||||||
|
}
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
background: none;
|
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
|
background: linear-gradient(135deg, #3c8ce7 0%, #00eaff 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
text-fill-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> .feed {
|
> .feed {
|
||||||
|
|||||||
@@ -1,10 +1,12 @@
|
|||||||
// import { useState, useEffect } from "react";
|
// import { useState, useEffect } from "react";
|
||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
import { useDebounce } from "rooks";
|
import { useDebounce } from "rooks";
|
||||||
|
import Tooltip from "../../../common/component/Tooltip";
|
||||||
import addIcon from "../../../assets/icons/add.person.svg?url";
|
import alertIcon from "../../../assets/icons/alert.svg?url";
|
||||||
import callIcon from "../../../assets/icons/call.svg?url";
|
import pinIcon from "../../../assets/icons/pin.svg?url";
|
||||||
import videoIcon from "../../../assets/icons/video.svg?url";
|
import searchIcon from "../../../assets/icons/search.svg?url";
|
||||||
|
import boardosIcon from "../../../assets/icons/app.boardos.svg?url";
|
||||||
|
import webrowseIcon from "../../../assets/icons/app.webrowse.svg?url";
|
||||||
import useChatScroll from "../../../common/hook/useChatScroll";
|
import useChatScroll from "../../../common/hook/useChatScroll";
|
||||||
import Send from "../../../common/component/Send";
|
import Send from "../../../common/component/Send";
|
||||||
import { useReadMessageMutation } from "../../../app/services/message";
|
import { useReadMessageMutation } from "../../../app/services/message";
|
||||||
@@ -38,20 +40,37 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
|
|||||||
to={uid}
|
to={uid}
|
||||||
context="user"
|
context="user"
|
||||||
dropFiles={dropFiles}
|
dropFiles={dropFiles}
|
||||||
header={
|
aside={
|
||||||
<StyledHeader>
|
<>
|
||||||
<Contact interactive={false} uid={currUser.uid} />
|
<ul className="tools">
|
||||||
<ul className="opts">
|
<li className="tool">
|
||||||
<li className="opt">
|
<img src={searchIcon} alt="opt icon" />
|
||||||
<img src={callIcon} alt="opt icon" />
|
|
||||||
</li>
|
</li>
|
||||||
<li className="opt">
|
<li className="tool">
|
||||||
<img src={videoIcon} alt="opt icon" />
|
<img src={alertIcon} alt="opt icon" />
|
||||||
</li>
|
</li>
|
||||||
<li className="opt">
|
<li className="tool">
|
||||||
<img src={addIcon} alt="opt icon" />
|
<img src={pinIcon} alt="opt icon" />
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<hr className="divider" />
|
||||||
|
<ul className="apps">
|
||||||
|
<li className="app">
|
||||||
|
<Tooltip tip="Webrowse" placement="left">
|
||||||
|
<img src={webrowseIcon} alt="app icon" />
|
||||||
|
</Tooltip>
|
||||||
|
</li>
|
||||||
|
<li className="app">
|
||||||
|
<Tooltip tip="BoardOS" placement="left">
|
||||||
|
<img src={boardosIcon} alt="app icon" />
|
||||||
|
</Tooltip>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
header={
|
||||||
|
<StyledHeader className="head">
|
||||||
|
<Contact interactive={false} uid={currUser.uid} />
|
||||||
</StyledHeader>
|
</StyledHeader>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
export const StyledHeader = styled.header`
|
export const StyledHeader = styled.header`
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
/* padding: 0 20px 0 10px; */
|
/* padding: 0 20px 0 10px; */
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -27,20 +26,6 @@ export const StyledHeader = styled.header`
|
|||||||
color: #616161;
|
color: #616161;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.opts {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 16px;
|
|
||||||
.opt {
|
|
||||||
cursor: pointer;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
`;
|
||||||
export const StyledDMChat = styled.article`
|
export const StyledDMChat = styled.article`
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -48,8 +33,8 @@ export const StyledDMChat = styled.article`
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
padding-bottom: 10px;
|
padding-bottom: 16px;
|
||||||
height: calc(100vh - 56px);
|
height: calc(100vh - 56px - 22px);
|
||||||
> .chat {
|
> .chat {
|
||||||
padding: 18px 16px;
|
padding: 18px 16px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@@ -9,14 +9,17 @@ const StyledWrapper = styled.article`
|
|||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
height: 100vh;
|
border-top-right-radius: 16px;
|
||||||
|
border-bottom-right-radius: 16px;
|
||||||
> .head {
|
> .head {
|
||||||
|
box-sizing: content-box;
|
||||||
height: 56px;
|
height: 56px;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
|
/* box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); */
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
> .main {
|
> .main {
|
||||||
height: calc(100vh - 56px);
|
height: calc(100vh - 56px - 22px);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
@@ -27,6 +30,36 @@ const StyledWrapper = styled.article`
|
|||||||
/* margin-top: 1px; */
|
/* margin-top: 1px; */
|
||||||
/* border-top: 1px solid transparent; */
|
/* border-top: 1px solid transparent; */
|
||||||
}
|
}
|
||||||
|
> .aside {
|
||||||
|
padding: 12px;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: -56px;
|
||||||
|
transform: translateX(100%);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.divider {
|
||||||
|
border: none;
|
||||||
|
background-color: #d4d4d4;
|
||||||
|
width: 16px;
|
||||||
|
height: 1px;
|
||||||
|
margin: 18px auto;
|
||||||
|
}
|
||||||
|
.tools,
|
||||||
|
.apps {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.tools {
|
||||||
|
gap: 24px;
|
||||||
|
.tool {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.apps {
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.drag_tip {
|
.drag_tip {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -75,6 +108,7 @@ const StyledWrapper = styled.article`
|
|||||||
export default function Layout({
|
export default function Layout({
|
||||||
children,
|
children,
|
||||||
header,
|
header,
|
||||||
|
aside = null,
|
||||||
contacts = null,
|
contacts = null,
|
||||||
dropFiles = [],
|
dropFiles = [],
|
||||||
context = "channel",
|
context = "channel",
|
||||||
@@ -137,10 +171,11 @@ export default function Layout({
|
|||||||
<ImagePreviewModal data={previewImage} closeModal={closePreviewModal} />
|
<ImagePreviewModal data={previewImage} closeModal={closePreviewModal} />
|
||||||
)}
|
)}
|
||||||
<StyledWrapper ref={drop}>
|
<StyledWrapper ref={drop}>
|
||||||
<header className="head">{header}</header>
|
{header}
|
||||||
<main className="main" ref={messagesContainer}>
|
<main className="main" ref={messagesContainer}>
|
||||||
{children}
|
{children}
|
||||||
{contacts && <div className="members">{contacts}</div>}
|
{contacts && <div className="members">{contacts}</div>}
|
||||||
|
{aside && <div className="aside">{aside}</div>}
|
||||||
</main>
|
</main>
|
||||||
<div
|
<div
|
||||||
className={`drag_tip ${
|
className={`drag_tip ${
|
||||||
|
|||||||
@@ -2,14 +2,17 @@ import styled from "styled-components";
|
|||||||
const StyledWrapper = styled.div`
|
const StyledWrapper = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
padding: 12px 48px 10px 0;
|
||||||
> .left {
|
> .left {
|
||||||
|
background-color: #fff;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-width: 260px;
|
min-width: 260px;
|
||||||
box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1);
|
box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.05);
|
||||||
height: 100vh;
|
height: calc(100vh - 22px);
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
border-radius: 16px 0 0 16px;
|
||||||
.list {
|
.list {
|
||||||
margin: 12px 8px;
|
margin: 12px 8px;
|
||||||
&.dms {
|
&.dms {
|
||||||
@@ -146,6 +149,7 @@ const StyledWrapper = styled.div`
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
> .right {
|
> .right {
|
||||||
|
border-radius: 0 16px 16px 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|||||||
@@ -2,7 +2,10 @@ import styled from "styled-components";
|
|||||||
const StyledWrapper = styled.div`
|
const StyledWrapper = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
padding: 12px 48px 10px 0;
|
||||||
> .left {
|
> .left {
|
||||||
|
border-radius: 16px 0 0 16px;
|
||||||
|
background-color: #fff;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -29,7 +32,9 @@ const StyledWrapper = styled.div`
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.right {
|
.right {
|
||||||
height: 100vh;
|
border-radius: 0 16px 16px 0;
|
||||||
|
background-color: #fff;
|
||||||
|
/* height: 100vh; */
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|||||||
@@ -11,9 +11,9 @@ const StyledWrapper = styled.div`
|
|||||||
&.left {
|
&.left {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
background: #e5e7eb;
|
background: transparent;
|
||||||
width: 64px;
|
width: 64px;
|
||||||
box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1);
|
/* box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1); */
|
||||||
transition: all 0.5s ease-in;
|
transition: all 0.5s ease-in;
|
||||||
> .divider {
|
> .divider {
|
||||||
width: -webkit-fill-available;
|
width: -webkit-fill-available;
|
||||||
|
|||||||
Reference in New Issue
Block a user