Added custom scrollbar

Author: nisabmohd

client/src/Pages/Edit.jsx

@@ -139,7 +139,7 @@ export const Edit = () => {
                         </div>
 
                     </div>
-                    
+
                 </div>
             </div>
             <div className="container" style={{ marginBottom: '29px', marginTop: '-15px' }}>
@@ -148,16 +148,16 @@ export const Edit = () => {
                 {
                     preview ? <div className="container50" style={{ width: '70%', margin: 'auto' }}>
                         <h1>{title}</h1>
-                        <div className="tags" style={{marginTop:'-8px',marginLeft:'-6px'}}>
+                        <div className="tags" style={{ marginTop: '-8px', marginLeft: '-6px' }}>
 
                             {
-                               tags && tags.split(',').map(item =>
+                                tags && tags.split(',').map(item =>
                                     <Chip name={item} dark={context.dark} />
                                 )
 
                             }
                         </div>
-                        <div style={{ height: '99.8vh', overflow: 'scroll' }}>
+                        <div style={{ height: '99.8vh', overflow: 'auto' }}>
                             <Markdown options={{
                                 forceBlock: true,
                                 overrides: {
@@ -173,9 +173,9 @@ export const Edit = () => {
                             </Markdown>
                         </div>
                     </div> : <div className="container50" style={{ width: '70%', margin: 'auto' }}>
-                        <textarea value={title} onChange={e => setTitle(e.target.value)} style={{ backgroundColor: !context.dark ? 'rgb(248, 248, 248)' : '#202020', color: 'inherit', padding: '15px', border: 'none', borderRadius: '5px', outline: 'none', resize: 'none', width: '100%', height: '78px', fontSize: '14px',marginBottom:'-1.2px' }} placeholder='Title of the blog *'></textarea>
-                        <textarea value={tags} onChange={e => {setTags(e.target.value);}} className='boxins' style={{ backgroundColor: !context.dark ? 'rgb(248, 248, 248)' : '#202020', color: 'inherit', padding: '15px', border: 'none', borderRadius: '5px', outline: 'none', resize: 'none', width: '100%', height: '55px', fontSize: '14px',marginBottom:'-1.2px'  }} placeholder='Enter tags (eg : javscript,typescript)'></textarea>
-                        <textarea value={summary} onChange={e => setSummary(e.target.value)} className='boxins' style={{ backgroundColor: !context.dark ? 'rgb(248, 248, 248)' : '#202020', color: 'inherit', padding: '15px', border: 'none', borderRadius: '5px', outline: 'none', resize: 'none', width: '100%', height: '135px', fontSize: '14px',marginBottom:'-1.2px'  }} placeholder='Summary of the post *'></textarea>
+                        <textarea value={title} onChange={e => setTitle(e.target.value)} style={{ backgroundColor: !context.dark ? 'rgb(248, 248, 248)' : '#202020', color: 'inherit', padding: '15px', border: 'none', borderRadius: '5px', outline: 'none', resize: 'none', width: '100%', height: '78px', fontSize: '14px', marginBottom: '-1.2px' }} placeholder='Title of the blog *'></textarea>
+                        <textarea value={tags} onChange={e => { setTags(e.target.value); }} className='boxins' style={{ backgroundColor: !context.dark ? 'rgb(248, 248, 248)' : '#202020', color: 'inherit', padding: '15px', border: 'none', borderRadius: '5px', outline: 'none', resize: 'none', width: '100%', height: '55px', fontSize: '14px', marginBottom: '-1.2px' }} placeholder='Enter tags (eg : javscript,typescript)'></textarea>
+                        <textarea value={summary} onChange={e => setSummary(e.target.value)} className='boxins' style={{ backgroundColor: !context.dark ? 'rgb(248, 248, 248)' : '#202020', color: 'inherit', padding: '15px', border: 'none', borderRadius: '5px', outline: 'none', resize: 'none', width: '100%', height: '135px', fontSize: '14px', marginBottom: '-1.2px' }} placeholder='Summary of the post *'></textarea>
                         <textarea style={{ width: '100%', backgroundColor: !context.dark ? 'rgb(248, 248, 248)' : '#202020', color: 'inherit', padding: '15px', border: 'none', borderRadius: '5px', outline: 'none', minHeight: '84vh', resize: 'none' }} value={value} onChange={e => setValue(e.target.value)} spellCheck="false"></textarea>
                     </div>
                 }

client/src/index.css

@@ -46,18 +46,25 @@ body {
     border-radius: 5px;
 }
 
+*::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgb(18, 15, 19);
+    border-radius: 10px;
+    scroll-behavior: smooth;
+}
+
 *::-webkit-scrollbar {
-    display: none;
+    height: 9px;
+    width: 6.75px;
+    background-color: transparent;
 }
 
-/* Hide scrollbar for IE, Edge and Firefox */
-* {
-    -ms-overflow-style: none;
-    /* IE and Edge */
-    scrollbar-width: none;
-    /* Firefox */
+*::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 6px rgba(140, 140, 140, 0.3);
+    background-color: rgb(86, 86, 86);
 }
 
+
 @media screen and (max-width:1150px) {
     .container {
         width: 70%;