add new helps

src/components/Help.css

@@ -4,7 +4,7 @@
     margin-top: 50px;
 }
 
-.auto-analysis-help-image {
+.help-image {
     margin: 10px;
 }
 

src/components/Help.js

@@ -35,62 +35,79 @@ function Help({ url, show }) {
                     <Typography>
                         <div className='step-title'>Step 1:</div>
                         <div className='step-description'>Click on the start date tab and select the necessary date. Repeat the same process on the end date tab as well.</div>
-                        <img className="auto-analysis-help-image" src={require('../assets/auto_analysis_help-1.png')} alt='icon'></img>
+                        <img className="help-image" src={require('../assets/auto_analysis_help-1.png')} alt='icon'></img>
 
                         <div className='step-title'>Step 2:</div>
                         <div className='step-description'>Select an end date, it has to be at least one date post the start date.</div>
-                        <img className="auto-analysis-help-image" src={require('../assets/auto_analysis_help-2.png')} alt='icon'></img>
+                        <img className="help-image" src={require('../assets/auto_analysis_help-2.png')} alt='icon'></img>
 
                         <div className='step-title'>Step 3:</div>
                         <div className='step-description'>Click on the Download Excel button and wait for the document to download.</div>
-                        <img className="auto-analysis-help-image" src={require('../assets/auto_analysis_help-3.png')} alt='icon'></img>
+                        <img className="help-image" src={require('../assets/auto_analysis_help-3.png')} alt='icon'></img>
                     </Typography>
                 </AccordionDetails>
             </Accordion>
 
             
-            {/* <Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
+            <Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
                 <AccordionSummary
                     expandIcon={<ExpandMoreIcon />}
                     aria-controls="panel2bh-content"
                     id="panel2bh-header"
                 >
-                    <Typography sx={{ width: '33%', flexShrink: 0 }}>Users</Typography>
+                    <Typography sx={{ width: '33%', flexShrink: 0 }}>Raw Data</Typography>
                     <Typography sx={{ color: 'text.secondary' }}>
-                        You are currently not an owner
+                        Download raw data
                     </Typography>
                 </AccordionSummary>
                 <AccordionDetails>
                     <Typography>
-                        Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus,
+                    <div className='step-title'>Step 1:</div>
-                        varius pulvinar diam eros in elit. Pellentesque convallis laoreet
+                    <div className='step-description'>Click on the <strong>start date</strong> tab and select the necessary date. Repeat the same process on the <strong>end date</strong> tab as well.</div>
-                        laoreet.
+                    <img className="help-image" src={require('../assets/raw_data_help_1.png')} alt='icon'></img>
+                    <img className="help-image" src={require('../assets/raw_data_help_2.png')} alt='icon'></img>
+
+                    <div className='step-title'>Step 2:</div>
+                    <div className='step-description'>Click on the <strong>Download Excel</strong>  button and wait for the document to download.</div>
+                    <img className="help-image" src={require('../assets/raw_data_help_3.png')} alt='icon'></img>
                     </Typography>
                 </AccordionDetails>
-            </Accordion> */}
+            </Accordion>
 
 
-            {/* <Accordion expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>
+            <Accordion expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>
                 <AccordionSummary
                     expandIcon={<ExpandMoreIcon />}
                     aria-controls="panel3bh-content"
                     id="panel3bh-header"
                 >
                     <Typography sx={{ width: '33%', flexShrink: 0 }}>
-                        Advanced settings
+                    Registration
                     </Typography>
                     <Typography sx={{ color: 'text.secondary' }}>
-                        Filtering has been entirely disabled for whole web server
+                        Create and clears entries for taking readings in devices
                     </Typography>
                 </AccordionSummary>
                 <AccordionDetails>
                     <Typography>
-                        Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit
+
-                        amet egestas eros, vitae egestas augue. Duis vel est augue.
+                    <div className='step-title'>Step 1:</div>
+                    <div className='step-description'>Enter the sample or solution name in the <strong>name</strong> tab with appropriate format given below.</div>
+                    <img className="help-image" src={require('../assets/registration_help_1.png')} alt='icon'></img>
+
+
+                    <div className='step-title'>Step 2:</div>
+                    <div className='step-description'>Click on the create button to get an ID and you will receive a confirmation message.
+
+If you wish to clear the generated IDs click on the clear button and you will receive a confirmation message.</div>
+                    <img className="help-image" src={require('../assets/raw_data_help_2.png')} alt='icon'></img>
+                    <img className="help-image" src={require('../assets/raw_data_help_3.png')} alt='icon'></img>
                     </Typography>
                 </AccordionDetails>
             </Accordion>
-            <Accordion expanded={expanded === 'panel4'} onChange={handleChange('panel4')}>
+
+
+            {/* <Accordion expanded={expanded === 'panel4'} onChange={handleChange('panel4')}>
                 <AccordionSummary
                     expandIcon={<ExpandMoreIcon />}
                     aria-controls="panel4bh-content"