add function updateProfiles to sharingManager

client-side/src/stories/Button/GenericButton.scss

@@ -9,7 +9,6 @@
         border: 2px ;
         border-style: solid ;
         border-color: rgb(103, 252, 210) ;
-
         &.primary{
             background-color: black ;
             color: white ;
@@ -18,9 +17,6 @@
         &.secondary{
             background-color:  white;
             color: black ;
-        } 
-    }
-
-
-
+      }  
+    } 
 } 

client-side/src/stories/GenericInput/genericInput.jsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { TextField, InputAdornment ,Button} from '@mui/material';
+
 import { INVALID_INPUT_MESSAGE } from './constants';
-import { TextField, InputAdornment } from '@mui/material';
 import '../GenericInput/genericInput.scss';
 
 const GenericInput = ({ 
@@ -14,6 +15,7 @@ const GenericInput = ({
   width = '20%', 
   icon: Icon=null, 
   disabled= false,
+  accept,
   validation  = () => {}, 
   ...rest 
 }) => {
@@ -43,40 +45,61 @@ const GenericInput = ({
       setHelperText(''); 
     }
   };
-
+   
   const inputStyle = {
     width,
   };
+
+
+  return(
+    <>
+      {type==='file' ?(<div className="file-upload" style={inputStyle}>
+        <Button
+          component="label"
+          size={size}
+          disabled={disabled}
+          className='generic-input-file'
+        >
+          {label}
+
+          <input type='file' onChange={onChange}  id='hidenInput' disabled={disabled} accept={accept}/>
+        </Button>
+        {error && <div className="helper-text error">{helperText}</div>}
+      </div>) :(
+        <div className="generic-input">
+
+          <TextField
+            label={label}
+            type={type}
+            name={name}
+            value={inputValue}
+            onChange={handleChange}
+            size={size}
+            error={error}
+            disabled={disabled}
+            helperText={helperText}
+            InputProps={{
+              startAdornment: Icon && (
+                <InputAdornment position="start">
+                  <Icon />
+                </InputAdornment>
+              ),
+              ...rest.InputProps,
+            }}
+            style={inputStyle}
+            {...rest}
+          />
+        </div>)
+      }
+    </>
 
-  return (
-    <div className="generic-input">
-      <TextField
-        label={label}
-        type={type}
-        name={name}
-        value={inputValue}
-        onChange={handleChange}
-        size={size}
-        error={error}
-        disabled={disabled}
-        helperText={helperText}
-        InputProps={{
-          startAdornment: Icon && (
-            <InputAdornment position="start">
-              <Icon />
-            </InputAdornment>
-          ),
-          ...rest.InputProps,
-        }}
-        style={inputStyle}
-        {...rest}
-      />
-    </div>
   );
-};
+    
 
+};
 GenericInput.propTypes = {
   label: PropTypes.string.isRequired,
+
   type: PropTypes.oneOf(['text', 'number', 'email', 'password']),
   name: PropTypes.string,
   value: PropTypes.string,
@@ -85,6 +108,8 @@ GenericInput.propTypes = {
   width: PropTypes.string,
   icon: PropTypes.elementType,
   validation: PropTypes.func,
+  disabled:PropTypes.string,
+  accept:PropTypes.string
 };
 
 export default GenericInput;

client-side/src/stories/GenericInput/genericInput.scss

@@ -1,6 +1,7 @@
+/* genericInput.scss */
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
 @import './style.scss';
-
+@import '../variables.scss';
 .generic-input {
   .MuiOutlinedInput-root {
     border-radius: 8px;
@@ -35,7 +36,7 @@
 
     input {
       color: $color-black;
-      font-family: 'Montserrat', sans-serif;
+      font-family: $fontfamily;
       font-weight: 400;
       font-size: 14px;
       transition: color 0.3s ease;
@@ -48,7 +49,7 @@
 
   .MuiFormLabel-root {
     color: $color-black;
-    font-family: 'Montserrat', sans-serif;
+    font-family: $fontfamily;
     font-weight: 400;
     font-size: 16px;
     transition: color 0.3s ease;
@@ -60,7 +61,7 @@
 
   .MuiFormHelperText-root {
     color: $color-black;
-    font-family: 'Montserrat', sans-serif;
+    font-family: $fontfamily;
     font-weight: 400;
     font-size: 12px;
     transition: color 0.3s ease;
@@ -69,4 +70,46 @@
       color: $color-error;
     }
   }
+
+
+}
+.file-upload{
+  display: inline-block;
+  .generic-input-file{
+    border-radius: 8px;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+    border-color: $color-border;
+    border-width: 1px;
+    background-color:$color-border ;
+    color: $color-black;
+    font-family: $fontfamily;
+    &:hover {
+      box-shadow: 0 0 5px rgba($color-border, 0.5);
+      background-color:$color-border-hover ;
+      transition: color 0.3s ease;
+
+    }
+    &.Mui-disabled,
+    &[aria-disabled='true'] {
+      opacity: 0.7; 
+      cursor: not-allowed;
+      pointer-events: auto;
+
+    }
+
+    #hidenInput{
+      clip-path: inset(50%);
+      clip: rect(0 0 0 0);
+      height: 1;
+      overflow: hidden;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 1;
+    }
+
+
+  }
+
+
 }

client-side/src/stories/Select/Select.jsx

@@ -49,4 +49,5 @@ Select.propTypes = {
   widthOfSelect: PropTypes.string
 };
 
+
 export default Select;