l-min-components 1.0.601 → 1.0.607

package/src/components/AdminRolesPermission/preview-panels/assignees-panel.jsx

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import { PreviewPanelContainer } from "./index.styled";
+import { CloseIcon } from "../assets/svg/close";
+import {  assigneeList } from "../create/data";
+import { CloseRedIcon } from "../assets/svg/close-red";
+import SearchBar from "../../searchBar";
+
+const AssigneesPanel = ({ close }) => {
+  return (
+    <PreviewPanelContainer>
+      <div className="asp_main_content">
+        <div className="asp_header">
+          <p className="asp_header_title"> Assignees </p>
+
+          <span className="close_icon" onClick={close}>
+            <CloseIcon fill={"#323232"} />
+          </span>
+        </div>
+
+        <div className="asp_body">
+          <SearchBar
+            placeholder="Search here"
+            outlineColor="transparent"
+            heightSize="44px"
+            widthSize="100%"
+            border="1px solid #ADB2B2"
+            // onSubmit={setSearch}
+          />
+
+          <div className="asp_inner">
+            {assigneeList?.map((item, idx) => (
+              <div className="asp_list_row" key={idx}>
+                <div className="asp_wrapper">
+                  <div className="asp_img">
+                    <img src={item?.image} alt="" />
+                  </div>
+
+                  <div>
+                    <p className="asp_title">{item?.name}</p>
+                    <p className="asp_stat">
+                      {item?.email}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="asp_assigned">
+                    <p className="ass_txt"> Assigned on:</p>
+                    <p className="ass_subtxt"> {item?.date} </p>
+                </div>
+                <span className="close_icon" onClick={close}>
+                  <CloseRedIcon />
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </PreviewPanelContainer>
+  );
+};
+
+export default AssigneesPanel;

package/src/components/AdminRolesPermission/preview-panels/index.styled.js

@@ -0,0 +1,320 @@
+import styled from "styled-components";
+
+export const PreviewPanelContainer = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  top: 0;
+  right: 0;
+  z-index: 4444;
+  background-color: rgba(0, 0, 0, 0.3);
+  transition: 0.5s;
+
+  .una_main_content {
+    position: absolute;
+    width: 642px;
+    background: #fff;
+    height: 100%;
+    top: 0;
+    right: 0;
+    transition: 0.5s;
+    overflow-y: scroll;
+    padding-bottom: 30px;
+    border-radius: 40px 0 0 40px;
+    padding: 14px 25px 30px 14px;
+  }
+
+  .una_header {
+    height: 83px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    border-radius: 25px;
+    background: rgba(0, 194, 194, 0.1);
+
+    .close_icon {
+      border-radius: 100%;
+      background: #fff;
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .una_hd_container {
+      display: flex;
+      gap: 20px;
+      align-items: center;
+      .una_hd_img {
+        width: 57px;
+        height: 57px;
+        border-radius: 100%;
+        background-color: #7c8080;
+        img {
+          width: 100%;
+          border-radius: 100%;
+        }
+      }
+
+      .una_hd_content {
+        .una_hd_title {
+          color: #099;
+          font-size: 20px;
+          font-weight: 800;
+        }
+
+        .una_hd_subtitle {
+          color: #637381;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+
+  .una_body {
+    padding: 16px 10px;
+    height: 95%;
+    /* overflow-y: scroll; */
+
+    .una_tag_group {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: auto;
+      flex-direction: column;
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+
+      .unassigned_txt {
+        margin-top: 17px;
+        color: #4a4d4d;
+        font-size: 37px;
+        font-weight: 500;
+        line-height: normal;
+      }
+    }
+  }
+
+  .adp_main_content {
+    position: absolute;
+    width: 642px;
+    background: #fff;
+    height: 100%;
+    top: 0;
+    right: 0;
+    transition: 0.5s;
+    overflow-y: scroll;
+    padding-bottom: 30px;
+    border-radius: 40px 0 0 40px;
+    padding: 34px;
+
+    .adp_header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .adp_header_title {
+        color: #4a4d4d;
+        font-size: 20px;
+        font-weight: 600;
+        letter-spacing: 0.4px;
+      }
+    }
+
+    .adp_subtitle {
+      color: #adb2b2;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: normal;
+      letter-spacing: 0.32px;
+      margin-bottom: 8px;
+    }
+  }
+
+  .adp_body {
+    .adp_list_row {
+      display: flex;
+      padding: 14px 0;
+      align-items: center;
+      border-bottom: 1px solid #dfe5e5;
+      gap: 20px;
+      justify-content: space-between;
+
+      .adp_wrapper {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        .adp_img {
+          width: 38px;
+          height: 38px;
+          background: #c6cccc;
+          border-radius: 100%;
+          img {
+            width: 100%;
+            border-radius: 100%;
+          }
+        }
+
+        .adp_title {
+          color: #03091d;
+          font-size: 16px;
+          font-weight: 600;
+          margin-bottom: 2px;
+        }
+
+        .adp_stat {
+          color: #8a8cd9;
+          font-size: 14px;
+          font-weight: 400;
+          display: flex;
+          align-items: center;
+          gap: 4px;
+
+          span {
+            display: block;
+            width: 6px;
+            height: 6px;
+            border-radius: 100%;
+            background-color: #95a4fc;
+          }
+        }
+      }
+    }
+  }
+
+  .asp_main_content {
+    position: absolute;
+    width: 642px;
+    background: #fff;
+    height: 100%;
+    top: 0;
+    right: 0;
+    transition: 0.5s;
+    overflow-y: scroll;
+    padding-bottom: 30px;
+
+    .asp_header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 28px 20px;
+      border-bottom: 1px solid #c6cccc;
+
+      .adp_header_title {
+        color: #313333;
+        font-size: 20px;
+        font-weight: 600;
+      }
+    }
+
+    .asp_body {
+      padding: 15px 25px 40px 20px;
+
+      .asp_inner {
+        padding: 15px 0;
+
+        .asp_list_row {
+          display: flex;
+          padding: 14px 0;
+          align-items: center;
+          gap: 20px;
+          justify-content: space-between;
+          border-radius: 10px;
+          background: #f5f7f7;
+          margin-bottom: 10px;
+          padding: 10px 15px;
+
+          .asp_wrapper {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+            width: 40%;
+            .asp_img {
+              width: 38px;
+              height: 38px;
+              background: #c6cccc;
+              border-radius: 100%;
+              img {
+                width: 100%;
+                border-radius: 100%;
+              }
+            }
+
+            .asp_title {
+              color: #03091d;
+              font-size: 16px;
+              font-weight: 600;
+              margin-bottom: 2px;
+            }
+
+            .asp_stat {
+              color: #7c8080;
+              font-size: 12px;
+              font-weight: 400;
+              line-height: normal;
+            }
+          }
+
+          .asp_assigned {
+            width: 40%;
+            position: relative;
+            padding-left: 20px;
+
+            &::before {
+              content: "";
+              height: 40px;
+              width: 2px;
+              border-radius: 10px;
+              position: absolute;
+              top: -2%;
+              left: -12px;
+              display: block;
+              background: #c6cccc;
+              transform: translate(-50%);
+            }
+
+            .ass_txt {
+              color: #7c8080;
+              font-size: 12px;
+              font-weight: 400;
+              line-height: normal;
+              margin-bottom: 2px;
+            }
+
+            .ass_subtxt {
+              color: #7c8080;
+              font-size: 12px;
+              font-weight: 400;
+              line-height: normal;
+            }
+          }
+          .close_icon {
+            width: 10%;
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: end;
+
+            &::before {
+              content: "";
+              height: 40px;
+              width: 2px;
+              border-radius: 10px;
+              position: absolute;
+              top: -30%;
+              left: -12px;
+              display: block;
+              background: #c6cccc;
+              transform: translate(-50%);
+            }
+          }
+        }
+      }
+    }
+  }
+`;

package/src/components/AdminRolesPermission/preview-panels/unassigned.jsx

@@ -0,0 +1,37 @@
+import React, { useState } from "react";
+import { PreviewPanelContainer } from "./index.styled";
+import { CloseIcon } from "../assets/svg/close";
+import { ListIcon } from "../assets/svg/list";
+
+const PreviewUnassignedPanel = ({ close }) => {
+
+  return (
+    <PreviewPanelContainer>
+      <div className="una_main_content">
+        <div className="una_header">
+          <div className="una_hd_container">
+            <div className="una_hd_img"></div>
+            <div className="una_hd_content">
+              <p className="una_hd_title"> Thomas Anree </p>
+              <p className="una_hd_subtitle">Minnie.Schmitt40@yahoo.com </p>
+            </div>
+          </div>
+
+          <span className="close_icon" onClick={close}>
+            <CloseIcon fill={"#323232"} />
+          </span>
+        </div>
+
+        <div className="una_body">
+          <div className="una_tag_group">
+          <ListIcon />
+          <p className="unassigned_txt">Unassigned</p>
+          </div>
+
+        </div>
+      </div>
+    </PreviewPanelContainer>
+  );
+};
+
+export default PreviewUnassignedPanel;

package/src/components/AdminSecuritySettings/2fa/index.styled.js

@@ -1,7 +1,6 @@
 import styled from "styled-components";
 
 export const AdminTwoFaSecurityContainer = styled.div`
-  background-color: #f5f7f7;
 
   .current_txt {
     color: #636666;

package/src/components/AdminSecuritySettings/index.styled.js

@@ -1,6 +1,7 @@
 import styled from "styled-components";
 
 export const AdminSecurityContainer = styled.div`
+  padding: 18px 30px;
   .ass_header {
     display: flex;
     align-items: center;

package/src/components/AdminSecuritySettings/modals/otp-password-modal.jsx

@@ -41,7 +41,6 @@ const OTPSecurityModal = (props) => {
     },
   };
 
-  const [selectTwofaModal, setSelectTwofaModal] = useState(true);
   const [otpModal, setOtpModal] = useState(false);
   const [securityQuestionModal, setSecurityQuestionModal] = useState(false);
   const [otp, setOtp] = useState(["", "", "", "", "", ""]);

package/src/components/AdminSecuritySettings/password/change-password.jsx

@@ -11,6 +11,7 @@ const AdminSecurityChangePassword = ({
   modalOne,
   setModalOne,
   onRequestClose,
+  nextOpen,
 }) => {
   const navigate = useNavigate();
   const [otpModal, setOtpModal] = useState(false);