l-min-components 1.0.715 → 1.0.722

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.715",
+  "version": "1.0.722",
   "type": "module",
   "files": [
     "src/assets",

package/src/components/AppMainLayout/index.jsx

@@ -27,6 +27,7 @@ import EnterpriseRightBar from "../fileRightBar/enterpriseRightBar";
 import PersonalRightBar from "../fileRightBar/personalRightBar";
 import useHeader from "../header/getHeaderDetails";
 import GracePeriod from "../deactivated";
+import MobileLayout from "../mobileLayout";
 
 const AppMainLayout = () => {
   const [isOpen, setIsOpen] = useState(true);
@@ -51,6 +52,14 @@ const AppMainLayout = () => {
   const [newNotifications, setNewNotifications] = useState([]);
   const [deactivated, setDeactivated] = useState(true); // testing, until we get account setup
   const [gracePeriod, setGracePeriod] = useState(true); // test
+  const [deviceWidth, setDeviceWidth] = useState(window.innerWidth);
+
+  // for mobile view
+  useEffect(() => {
+    const handleResize = () => setDeviceWidth(window.innerWidth);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
 
   const {
     setDefaultAccount,
@@ -175,6 +184,10 @@ const AppMainLayout = () => {
         handleGetNotificationMarkRead,
       }}
     >
+      {/* display mobile layout on device width*/}
+      {deviceWidth < 1024 ? (
+        <MobileLayout />
+      ) : (
       <Layout
         coming={coming}
         hasLayoutBackgroundImage={hasLayoutBackgroundImage}
@@ -272,6 +285,7 @@ const AppMainLayout = () => {
           )}
         </MainLayout>
       </Layout>
+      )}
     </OutletContext.Provider>
   );
 };

package/src/components/index.js

@@ -49,3 +49,5 @@ export { default as AdminSecurity } from './AdminSecuritySettings';
 export { default as GraphMap } from './GraphMap';
 export { default as AdminRolesPermissions } from './AdminRolesPermission';
 export { default as AdminCreateRolesPermissions } from './AdminRolesPermission/create';
+export { default as MobileLayout } from './mobileLayout';
+

package/src/components/mobileLayout/assets/svg/backArrow.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+const BackArrow = ({ width, height, fill }) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9.57 5.92969L3.5 11.9997L9.57 18.0697"
+      stroke="#313333"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M20.5019 12H3.67188"
+      stroke="#313333"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
+export default BackArrow;

package/src/components/mobileLayout/index.jsx

@@ -0,0 +1,43 @@
+import React, { useState, useEffect, useRef } from "react";
+import { MobileLayoutContainer } from "./index.styled";
+import BackArrow from "./assets/svg/backArrow";
+import img from "./assets/images/bg_img.png";
+import play from "./assets/images/play_store.png";
+import apple from "./assets/images/apple_store.png";
+
+const MobileLayout = () => {
+
+  return (
+    <MobileLayoutContainer>
+      <div className="mlc_header">
+        <span>
+          <BackArrow /> Back
+        </span>
+      </div>
+      <div className="mlc_img">
+        <img src={img} alt="bg" />
+      </div>
+
+      <div className="mlc_note_container">
+        <p className="mlc_note_title">
+          Sorry, you can’t access <br /> your account on a mobile&nbsp;browser.
+        </p>
+        <p className="mlc_note_subtitle">
+          We know it's inconvenient. For better user accessibility, login with a
+          desktop device or via our mobile&nbsp;app.
+        </p>
+
+        <div className="mlc_link_section">
+          <a href="#">
+            <img src={play} alt="play store" />
+          </a>
+          <a href="#">
+            <img src={apple} alt="apple store" />
+          </a>
+        </div>
+      </div>
+    </MobileLayoutContainer>
+  );
+};
+
+export default MobileLayout;

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

@@ -0,0 +1,80 @@
+import styled from "styled-components";
+
+export const MobileLayoutContainer = styled.div`
+  padding: 20px;
+  background: #fff;
+  height: 100vh;
+  .mlc_header {
+    display: flex;
+    margin-bottom: 16px;
+    span {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      cursor: pointer;
+      color: #313333;
+      font-family: "Nunito";
+      font-size: 16px;
+      font-weight: 600;
+      line-height: normal;
+    }
+  }
+
+  .mlc_img {
+    max-width: 208px;
+    width: 100%;
+    display: flex;
+    margin: 0 auto 30px;
+    img {
+      width: 100%;
+    }
+  }
+
+  .mlc_note_container {
+    max-width: 350px;
+    width: 100%;
+    padding: 30px 18px;
+    border-radius: 15px;
+    background: #f5f7f7;
+    margin: 0 auto;
+
+    .mlc_note_title {
+      margin-bottom: 16px;
+      color: #313333;
+      text-align: center;
+      font-family: "Nunito";
+      font-size: 25px;
+      font-weight: 500;
+    }
+
+    .mlc_note_subtitle {
+      margin-bottom: 0;
+      color: #636666;
+      text-align: center;
+      font-family: "Nunito";
+      font-size: 18px;
+      font-weight: 400;
+    }
+  }
+
+  .mlc_link_section {
+    display: flex;
+    flex-direction: column;
+    margin: 30px 0 auto;
+    align-items: center;
+
+    a {
+      max-width: 291px;
+      width: 100%;
+      height: 50px;
+
+      &:last-child {
+        margin-top: 12px;
+      }
+
+      img {
+        width: 100%;
+      }
+    }
+  }
+`;