removed home screen and safe-form (#92)

src/components/primitive/toggle-switch/toggle-switch.component.props.ts

@@ -0,0 +1,17 @@
+export interface ToggleSwitchComponentProps {
+  /**
+   *  Mandatory props to identify the switch.
+   */
+  toggleID: string;
+
+  /**
+   * used to toggle the switch.
+   */
+
+  checked: boolean;
+
+  /**
+   * onChange Handler.
+   */
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}

src/components/primitive/toggle-switch/toggle-switch.component.styles.ts

@@ -0,0 +1,68 @@
+import styled from 'styled-components';
+
+// Todo - Fix the border latter
+export const ToggleSwitchContainer = styled.div`
+  .label {
+    display: block;
+    overflow: hidden;
+    cursor: pointer;
+    border-radius: 2rem;
+  }
+  .inner {
+    display: block;
+    width: 200%;
+    margin-left: -100%;
+    transition: margin 0.3s ease-in 0s;
+  }
+  .inner:before,
+  .inner:after {
+    float: left;
+    width: 3.4rem;
+    height: 1.4rem;
+    padding: 0;
+    line-height: 3.6rem;
+    background: ${({ theme: { colors } }) => colors.toggleSwitchBackground};
+    opacity: 0.24;
+    font-weight: bold;
+    box-sizing: border-box;
+  }
+  .inner:before {
+    content: '';
+    color: #fff;
+  }
+  .inner:after {
+    content: '';
+    background: ${({ theme: { colors } }) => colors.toggleSwitchBackground};
+    opacity: 0.24;
+    border-left: 50%;
+  }
+  .switch {
+    display: block;
+    width: 2rem;
+    height: 2rem;
+    margin: 0;
+    background: ${({ theme: { colors } }) => colors.toggleSwitchBackground};
+    position: absolute;
+    top: -0.3rem;
+    bottom: 0;
+    right: 1.5rem;
+    border-radius: 50%;
+    transition: all 0.3s ease-in 0s;
+  }
+`;
+
+export const Switch = styled.div`
+  position: relative;
+  width: 3.7rem;
+  top: 0.8rem;
+`;
+
+export const StyledInput = styled.input`
+  display: none;
+  &:checked + .label .inner {
+    margin-left: 0;
+  }
+  &:checked + .label .switch {
+    right: 0;
+  }
+`;

src/components/primitive/toggle-switch/toggle-switch.component.tsx

@@ -0,0 +1,18 @@
+import { ToggleSwitchComponentProps } from './toggle-switch.component.props';
+import { ToggleSwitchContainer, StyledInput, Switch } from './toggle-switch.component.styles';
+
+export const ToggleSwitch: React.FC<ToggleSwitchComponentProps> = (props) => {
+  const { toggleID, checked, onChange } = props;
+
+  return (
+    <ToggleSwitchContainer>
+      <Switch>
+        <StyledInput type='checkbox' id={toggleID} checked={checked} onChange={onChange} />
+        <label className='label' htmlFor={toggleID}>
+          <span className='inner' />
+          <span className='switch' />
+        </label>
+      </Switch>
+    </ToggleSwitchContainer>
+  );
+};

src/themes/colors.ts

@@ -26,6 +26,7 @@ export const colors = {
   navLinkActive: palette.blueTransparent,
   applicationBackground: palette.whiteLiac,
   spinnerBorder: palette.greyLighter,
+  toggleSwitchBackground: palette.blueLighter,
 };
 
 export type Colors = typeof colors;

src/themes/palette.ts

@@ -8,6 +8,7 @@ export const palette = {
   aquaBlueLighter: '#b6effb', //border
   blue: '#5452F6', //button backgrounds
   blueLight: 'rgba(84, 82, 246, 0.1)', //alert, icon backgrounds
+  blueLighter: '#6366f1', // Toggle Switch
   blueTransparent: 'rgba(84, 82, 246, 0.1)', // NavLink active color
   green: '#2ba745',
   greenLight: '#49B393', //green text color