UI changes

Author: AhsanKhan7

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

@@ -14,7 +14,7 @@ export const CustomStackBox: React.FC<{
 
   return (
     <Box
-      paddingHorizontal="sm2"
+      paddingHorizontal="sm2" 
       paddingVertical="sm2"
       className={styles.stackBox}
     >

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

@@ -65,4 +65,69 @@
 
   .slider.round:before {
     border-radius: 50%;
+  }
+
+
+  // switch blue
+  
+.switchContainer {
+  margin-top: 20px !important;
+}
+
+  .switchLabel {
+    font-family: 'Rubik';
+    color: rgba(66, 66, 64, 0.5);
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 17px;
+    letter-spacing: 0em;
+    text-align: right;
+    margin-right: 15px;
+  }
+
+  .sliderBlue {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+  
+  .sliderBlue:before {
+    position: absolute;
+    content: "";
+    height: 17px;
+    width: 17px;
+    left: 1px;
+    bottom: 2px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+  
+  input:checked + .sliderBlue {
+    background-color: #22BBDD;
+  }
+  
+  input:focus + .sliderBlue {
+    box-shadow: 0 0 1px #22BBDD;
+  }
+  
+  input:checked + .sliderBlue:before {
+    -webkit-transform: translateX(19px);
+    -ms-transform: translateX(19px);
+    transform: translateX(19px);
+  }
+  
+  /* Rounded sliders */
+  .sliderBlue.round {
+    border-radius: 34px;
+  }
+  
+  .sliderBlue.round:before {
+    border-radius: 50%;
   }

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

@@ -50,6 +50,31 @@ export function ToggleField(props: any) {
   );
 }
 
+export function ToggleFieldBlock(props: any) {
+  const { name, value, onHandleChange, label } = props;
+  return (
+    <Box style={{ height: '68px' }}>
+      <FlexBox.Row justifyContent="space-between" flexDirection='column'>
+        <Box>
+          <Paragraph size="body" style={{ color: '#000' }}>
+            {label}
+          </Paragraph>
+        </Box>
+        <FlexBox.Row className={styles.switchContainer}>
+         <div><span className={styles.switchLabel} >{value ? <>Yes</> : <>No</>}</span></div>
+          <label className={styles.switch}>
+            <input
+              type="checkbox"
+              onChange={(event) => onHandleChange(name, event.target.checked)}
+            />
+            <span className={`${styles.sliderBlue} ${styles.round}`}></span>
+          </label>
+        </FlexBox.Row>
+      </FlexBox.Row>
+    </Box>
+  );
+}
+
 // export function SubmitButton(props: any) {
 //   const { title, ...rest } = props;
 //   console.log(props, 'asdasdasdasd222221111');

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

@@ -2,8 +2,7 @@
 
 .stackBox {
   width: 171px;
-  height: 130px;
-  height: 100%;
+  min-height: 127px;
   padding: 10px;
   background-color: #fff;
   box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);

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

@@ -82,6 +82,7 @@ export const GetList: React.FC<Props> = ({
     return <FullWidthSpinner color="black" size="md" />;
   }
   const helperTextStyle = {
+    fontFamily: 'Rubik',
     fontSize: '16px',
     color: '#A8A8A8',
     marginLeft: '10px',

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

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import styles from './index.module.scss';
 import { Box, FlexBox, H2, FormTextField } from '../../../../components';
-import { ToggleField } from '../../../common/FormElement';
+import { ToggleFieldBlock } from '../../../common/FormElement';
 
 import {
   sessionSelectors,
@@ -185,7 +185,7 @@ export const ListForAll: React.FC<Props> = () => {
       </Box>
 
       <Box marginTop="lg">
-        <FlexBox.Row>
+        <FlexBox.Row alignItems='center'>
           <Box style={{ width: '30%' }}>
             <FormTextField
               required={'*'}
@@ -197,9 +197,10 @@ export const ListForAll: React.FC<Props> = () => {
               value={stackName}
             />
           </Box>
-          <Box marginLeft="xxxl" marginTop="md" style={{ width: '30%' }}>
-            <ToggleField
+          <Box marginLeft='xl' style={{ width: '30%' }}>
+            <ToggleFieldBlock
               label={'Share Stack with public'}
+              value={isShared}
               onHandleChange={(value: any) => setIshared(!isShared)}
             />
           </Box>
@@ -237,7 +238,7 @@ export const ListForAll: React.FC<Props> = () => {
       <FlexBox.Column>
         {stackComponentsTypes?.map((item) => {
           return (
-            <Box marginTop="lg" style={{ overflowX: 'auto' }}>
+            <Box marginTop="lg" style={{ overflow: 'auto' }}>
               <GetList
                 type={item}
                 flavourList={flavourList}