stack and toggle update

Author: AhsanKhan7

src/ui/layouts/NonEditableConfig/index.tsx

@@ -108,21 +108,11 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
       return (
         <Box marginVertical={'md'} style={{ width: '100%' }}>
           <ToggleField 
-            name={titleCase(elementName)} 
             value={elementSchema} 
             onHandleChange={() => {}} 
             label={titleCase(elementName)} 
             disabled={true}  
           />
-          {/* <Box>
-            <FlexBox.Row justifyContent="space-between">
-              <Paragraph>{titleCase(elementName)}</Paragraph>
-              <label className={styles.switch}>
-                <input type="checkbox" checked={elementSchema} />
-                <span className={`${styles.slider} ${styles.round}`}></span>
-              </label>
-            </FlexBox.Row>
-          </Box> */}
         </Box>
       );
     }

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

@@ -51,7 +51,7 @@ export function TextField(props: any) {
 // }
 
 export function ToggleField(props: any) {
-  const { name, value, onHandleChange, label, disabled } = props;
+  const { value, onHandleChange, label, disabled } = props;
   return (
     <Box style={{ height: '68px' }}>
       <FlexBox.Row justifyContent="space-between" flexDirection="column">
@@ -65,8 +65,8 @@ export function ToggleField(props: any) {
           <label className={styles.switch}>
             <input
               type="checkbox"
-              defaultChecked={value}
-              onChange={(event) => onHandleChange(name, event.target.checked)}
+              checked={value}
+              onChange={onHandleChange}
               disabled={disabled}
             />
             <span className={`${styles.sliderBlue} ${styles.round}`}></span>

src/ui/layouts/stackComponents/StackDetail/Configuration/index.tsx

@@ -22,6 +22,7 @@ import {
   stackComponentsActions,
 } from '../../../../../redux/actions';
 import { toasterTypes } from '../../../../../constants';
+import { ToggleField } from '../../../common/FormElement';
 
 export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
   const { stackComponent, flavor } = useService({
@@ -449,21 +450,12 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
       return (
         <Box marginVertical={'md'} style={{ width: '100%' }}>
           <Box>
-            {console.log(elementSchema, elementName, 'asdasdasda2222sdasd')}
-            <FlexBox.Row justifyContent="space-between">
-              <Paragraph>{titleCase(elementName)}</Paragraph>
-              <label className={styles.switch}>
-                <input
-                  disabled
-                  type="checkbox"
-                  defaultChecked={elementSchema}
-                  onChange={() =>
-                    onChangeToggle(!elementSchema, 'other', elementName)
-                  }
-                />
-                <span className={`${styles.slider} ${styles.round}`}></span>
-              </label>
-            </FlexBox.Row>
+            <ToggleField 
+              value={elementSchema} 
+              onHandleChange={() => onChangeToggle(!elementSchema, 'other', elementName)} 
+              label={titleCase(elementName)}
+              disabled={true} 
+            />
           </Box>
         </Box>
       );
@@ -518,22 +510,12 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
           </Box>
         </Container>
         <Container>
-          <FlexBox.Row justifyContent="space-between" style={{ width: '70%' }}>
-            <Paragraph>Share Component with public</Paragraph>
-            <label className={styles.switch}>
-              {console.log(stackComponent, 'asdasdasda2222122sdasd')}
-              <input
-                type="checkbox"
-                disabled
-                defaultChecked={stackComponent.isShared}
-                // checked={stackComponent.isShared}
-                onChange={() =>
-                  onChangeToggle(!stackComponent.isShared, 'share')
-                }
-              />
-              <span className={`${styles.slider} ${styles.round}`}></span>
-            </label>
-          </FlexBox.Row>
+          <ToggleField 
+              value={stackComponent.isShared} 
+              onHandleChange={() => onChangeToggle(!stackComponent.isShared, 'share')} 
+              label='Share Component with public' 
+              disabled={true} 
+            />
         </Container>
       </FlexBox.Row>
       <FlexBox.Row style={{ width: '40%' }}>

src/ui/layouts/stacks/CreateStack/ListForAll/index.module.scss

@@ -31,4 +31,19 @@
     accent-color: #431D93; 
     position: absolute; 
     top: 5px
+}
+
+.stackFooter {
+    width: 100%;
+    height: 70px;
+    position: sticky;
+    bottom: 0;
+    background-color: #fff; 
+    background: #fff; 
+    display: flex;
+    justify-content: flex-end;
+}
+.stackFooterButton {
+    margin-top: 15px !important;
+    right: 2rem;
 }

src/ui/layouts/stacks/CreateStack/ListForAll/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import styles from './index.module.scss';
-import { Box, FlexBox, H2, FormTextField } from '../../../../components';
+import { Box, FlexBox, H2, FormTextField, PrimaryButton } from '../../../../components';
 import { ToggleField } from '../../../common/FormElement';
 
 import {
@@ -258,6 +258,10 @@ export const ListForAll: React.FC<Props> = () => {
         })}
       </FlexBox.Column>
 
+      <Box className={styles.stackFooter}>
+        <PrimaryButton className={styles.stackFooterButton}>Register</PrimaryButton>
+      </Box>
+
       {showPopup && (
         <SidePopup
           isCreate={true}