organization modals update

Author: AhsanKhan7

src/redux/reducers/rolesReducer.ts

@@ -23,7 +23,7 @@ const newState = (roles: Roles[]): State => ({
 const rolesReducer = (state: State = initialState, action: Action): State => {
   switch (action.type) {
     case rolesActionTypes.getRoles.success: {
-      const roles: Roles[] = camelCaseArray(action.payload as RolesPayload);
+      const roles: Roles[] = camelCaseArray(action.payload?.items as RolesPayload);
 
       return { ...newState(roles) };
     }

src/services/locales/zu.json

@@ -217,11 +217,11 @@
               "text": "Change the username, role and password of",
               "form": {
                 "username": {
-                  "label": "username",
+                  "label": "Username",
                   "placeholder": "username"
                 },
                 "password": {
-                  "label": "password",
+                  "label": "Password",
                   "placeholder": "password"
                 }
               },

src/ui/components/forms/index.tsx

@@ -10,7 +10,7 @@ import {
   Box,
   LinkBox,
   icons,
-  DropdownInput,
+  DropdownInput
 } from '..';
 import { handleUpdateNumericInput } from '../../../utils/input';
 import { iconColors } from '../../../constants/icons';
@@ -118,8 +118,9 @@ export const CopyField = (
     labelColor: any;
     placeholder: any;
     value: string;
+    showTokField: any;
   } & any,
-): JSX.Element => {
+): any => {
   const [copied, setCopied] = useState(false);
   const handleClick = () => {
     navigator.clipboard.writeText(props.value);
@@ -130,26 +131,38 @@ export const CopyField = (
   };
 
   return (
-    <FlexBox.Column fullWidth style={{ height: '100px' }}>
+    <FlexBox.Column fullWidth>
       <FlexBox alignItems="center" fullWidth style={{ position: 'relative' }}>
         <InputWithLabel
           name={props.name}
           label={props.label}
           labelColor={props.labelColor}
           InputComponent={
-            <TextInput
-              {...props}
-              value={`${props.value.slice(0, 60)}...`}
-              placeholder={props.placeholder}
-            />
-          }
+            props.showTokField ?
+              <TextInput
+                {...props}
+                style={{ background: 'rgba(168, 168, 168, 0.2)', border: '1px solid #C9CBD0' }}
+                value={`${props.value.slice(0, 30)}...`}
+                placeholder={props.placeholder}
+              />
+              :
+              <TextInput
+                {...props}
+                style={{ background: 'rgba(168, 168, 168, 0.2)', border: '1px solid #C9CBD0' }}
+                value='Token'
+                placeholder={props.placeholder}
+              />
+            }
         />
-        <LinkBox
-          style={{ position: 'absolute', right: '10px', top: '30px' }}
-          onClick={handleClick}
-        >
-          <icons.copy color={iconColors.grey} />
-        </LinkBox>
+
+        {props.showTokField && (
+          <LinkBox
+            style={{ position: 'absolute', right: '10px', top: '40px' }}
+            onClick={handleClick}
+          >
+            <icons.copy color={iconColors.grey} />
+          </LinkBox>
+        )}
       </FlexBox>
       {copied && (
         <div style={{ marginTop: '20px', textAlign: 'right' }}>
@@ -169,6 +182,70 @@ export const CopyField = (
   );
 };
 
+
+export const GenerateTokenField = (
+  props: {
+    label: string;
+    labelColor: any;
+    placeholder: any;
+    value: string;
+    handleClick: any;
+    loading: boolean;
+    hideButton: boolean;
+  } & any,
+): any => {
+  return (
+    <FlexBox.Column fullWidth>
+        <FlexBox alignItems="center" fullWidth style={{ position: 'relative' }}>
+          <InputWithLabel
+            optional={props.required}
+            name={props.name}
+            label={props.label}
+            labelColor={props.labelColor}
+            InputComponent={
+              <TextInput
+                {...props}
+                style={props.style}
+                placeholder={props.placeholder}
+                hasError={props.error?.hasError}
+                value={props.value}
+                onChangeText={props.onChange}
+              />
+            }
+          />
+        {!props.hideButton && (
+          <Box 
+            style={{ 
+              position: 'absolute', 
+              right: '0', 
+              top: '38px', 
+              display: 'flex', 
+              justifyContent: 'center', 
+              textAlign: 'center',
+            }} >
+            <Box style={{ width: '120px', borderLeft: '1px solid #C9CBD0' }}>
+              <div style={{ 
+                fontFamily: 'Rubik',
+                fontSize: '16px',
+                color: '#443E99',
+                marginTop: '3px',
+                cursor: 'pointer'
+               }} 
+               onClick={props.handleClick}
+              >
+                {props.loading ? <>Submitting...</> : <>Generate</>}
+              </div>
+            </Box>
+          </Box>
+        )}
+      </FlexBox>
+    </FlexBox.Column>
+  );
+};
+
+          
+
+
 export const EditField = (
   props: {
     label: string;

src/ui/layouts/common/PopupSmall/index.module.scss

@@ -2,8 +2,10 @@
 
 .dimmer {
   position: fixed;
-  background: #424240;
-  opacity: 0.5;
+  // background: #424240;
+  // opacity: 0.5;
+  background: rgba(217, 217, 217, 0.2);
+  backdrop-filter: blur(4px);
   height: 100vh;
   width: 100vw;
   top: 0;

src/ui/layouts/common/PopupSmall/index.tsx

@@ -7,8 +7,10 @@ import styles from './index.module.scss';
 
 const Dimmer: React.FC = () => <Box className={styles.dimmer}></Box>;
 
-export const PopupSmall: React.FC<{ onClose: () => void }> = ({
+export const PopupSmall: React.FC<{ width?: string, showCloseIcon?: any, onClose: () => void }> = ({
   children,
+  width,
+  showCloseIcon,
   onClose, 
 }) => (
   <>
@@ -18,14 +20,16 @@ export const PopupSmall: React.FC<{ onClose: () => void }> = ({
       justifyContent="center"
       className={styles.popupContainer}
     >
-      <Box className={styles.popup}>
+      <Box className={styles.popup} style={{ width }}>
         <OutsideClickHandler onOutsideClick={onClose}>
-          <Box className={styles.popupClose}>
-            <LinkBox onClick={onClose}>
-              <icons.closeWithBorder />
-            </LinkBox>
-          </Box>
-          <Box paddingVertical="xl" paddingHorizontal="xxxl">
+          {showCloseIcon && (
+            <Box className={styles.popupClose}>
+              <LinkBox onClick={onClose}>
+                <icons.closeWithBorder />
+              </LinkBox>
+            </Box>
+          )}
+          <Box paddingVertical="lg" paddingHorizontal="lg">
             {children}
           </Box>
         </OutsideClickHandler>