Network manager UI and logic

packages/fetch-extension/src/components-v2/buttons/toggle-switch-button/index.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import style from "./style.module.scss";
+
+export const ToggleSwitchButton = ({
+  checked,
+  onChange,
+}: {
+  checked: boolean;
+  onChange: () => void;
+}) => {
+  return (
+    <div>
+      <label className={style["switch"]}>
+        <input type="checkbox" checked={checked} onChange={onChange} />
+        <span className={style["slider"]} />
+      </label>
+    </div>
+  );
+};

packages/fetch-extension/src/components-v2/buttons/toggle-switch-button/style.module.scss

@@ -0,0 +1,50 @@
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 51px;
+  height: 31px;
+  margin: 0px;
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+
+    &:checked + .slider {
+      background-color: #5f38fb;
+      border: 1px solid transparent;
+    }
+
+    &:checked + .slider::before {
+      -webkit-transform: translateX(18px);
+      -ms-transform: translateX(18px);
+      transform: translateX(18px);
+      background-color: white;
+    }
+  }
+
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+    border-radius: 34px;
+    border: 1px solid #5f38fb;
+
+    &::before {
+      position: absolute;
+      width: 27px;
+      content: "";
+      height: 27px;
+      left: 3px;
+      top: 1px;
+      background-color: white;
+      -webkit-transition: 0.4s;
+      transition: 0.4s;
+      border-radius: 50%;
+    }
+  }
+}

packages/fetch-extension/src/components-v2/notification-option/index.tsx

@@ -6,14 +6,23 @@ interface Props {
   name: string;
   isChecked: boolean;
   handleOnChange: () => void;
+  cardStyles?: any;
+  inActiveBackground?: any;
 }
 
 export const NotificationOption: FunctionComponent<Props> = (props) => {
-  const { name, isChecked, handleOnChange } = props;
+  const { name, isChecked, handleOnChange, cardStyles, inActiveBackground } =
+    props;
 
   return (
     <Card
       heading={name}
+      style={{
+        ...cardStyles,
+      }}
+      inActiveBackground={
+        inActiveBackground ? inActiveBackground : "transparent"
+      }
       rightContent={
         <label className={style["switch"]}>
           <input

packages/fetch-extension/src/components-v2/search-bar/index.tsx

@@ -11,6 +11,8 @@ interface Props {
   onSearchTermChange: (term: string) => void;
   itemsStyleProp?: any;
   filterFunction: any;
+  midElement?: React.ReactNode;
+  disabled?: boolean;
 }
 
 export const SearchBar: React.FC<Props> = ({
@@ -20,6 +22,8 @@ export const SearchBar: React.FC<Props> = ({
   onSearchTermChange,
   itemsStyleProp,
   filterFunction,
+  midElement,
+  disabled,
 }) => {
   const [suggestedValues, setSuggestedValues] = useState<
     any[] | _DeepReadonlyArray<AddressBookData>
@@ -51,18 +55,42 @@ export const SearchBar: React.FC<Props> = ({
             id="searchInput"
             placeholder="Search"
             value={searchTerm}
+            disabled={disabled}
             onChange={(e) => onSearchTermChange(e.target.value)}
           />
         }
         rightContent={require("@assets/svg/wireframe/search.svg")}
       />
+      {midElement && (
+        <div
+          style={{
+            marginBottom: "24px",
+          }}
+        >
+          {midElement}
+        </div>
+      )}
 
-      {suggestedValues.length > 0 && (
+      {suggestedValues.length > 0 ? (
         <div style={itemsStyleProp}>
           {suggestedValues.map((value, index) => (
             <div key={index}>{renderResult(value, index)}</div>
           ))}
         </div>
+      ) : (
+        searchTerm.length > 0 && (
+          <div
+            style={{
+              textAlign: "center",
+              color: "white",
+              fontSize: "14px",
+              fontWeight: 400,
+              opacity: 1,
+            }}
+          >
+            No results found!
+          </div>
+        )
       )}
     </div>
   );

packages/fetch-extension/src/components-v2/search-bar/style.module.scss

@@ -8,3 +8,7 @@
     color: white;
   }
 }
+
+.searchInput:disabled {
+  cursor: not-allowed;
+}