datastake-daf 0.6.575 → 0.6.577

package/src/@daf/layouts/AuthLayout/components/Navbar/index.scss

@@ -1,169 +0,0 @@
-
-
-
-.auth-navbar {
-  width: 100%;
-  height: 64px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: #ffffff;
-  border-bottom: 1px solid #eaecf0;
-  padding: 0 80px;
-  position: sticky;
-  top: 0;
-  z-index: 10;
-
-  @media (max-width: 1200px) {
-    padding: 0 32px;
-  }
-
-  .navbar-left {
-    display: flex;
-    align-items: center;
-
-    .navbar-logo {
-      height: 32px;
-      object-fit: contain;
-    }
-  }
-
-  .navbar-right {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-
-    .language-select {
-      min-width: 110px;
-
-      .ant-select-selector {
-        background: #fff !important;
-        border: 1px solid #d0d5dd !important;
-        border-radius: 8px !important;
-        padding: 8px 12px !important;
-        height: 40px !important;
-        display: flex;
-        align-items: center;
-        transition: all 0.2s ease;
-
-        &:hover {
-          border-color: #98a2b3 !important;
-        }
-      }
-
-      .ant-select-selection-item {
-        display: flex;
-        align-items: center;
-        padding-right: 0 !important;
-      }
-
-      .language-option {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-
-        .flag-icon {
-          width: 20px;
-          height: 14px;
-          object-fit: cover;
-          border-radius: 2px;
-        }
-
-        span {
-          font-size: 14px;
-          font-weight: 500;
-          color: #344054;
-        }
-      }
-
-      .ant-select-arrow {
-        color: #667085;
-        right: 12px;
-        
-        svg {
-          width: 20px;
-          height: 20px;
-        }
-      }
-    }
-
-    .back-btn {
-      border: 1px solid #d0d5dd;
-      background: #fff;
-      border-radius: 8px;
-      padding: 10px 16px;
-      height: 40px;
-      font-size: 14px;
-      font-weight: 600;
-      color: #344054;
-      cursor: pointer;
-      transition: all 0.2s ease;
-      white-space: nowrap;
-
-      &:hover {
-        background: #f9fafb;
-        border-color: #98a2b3;
-      }
-
-      &:active {
-        background: #f2f4f7;
-      }
-    }
-  }
-
-  @media (max-width: 768px) {
-    padding: 0 16px;
-    .navbar-logo { height: 28px; }
-    .navbar-right { gap: 8px; }
-  }
-}
-
-.language-select-popup {
-  .ant-select-dropdown {
-    padding: 4px;
-    background: #ffffff;
-    border-radius: 8px;
-    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
-                0px 4px 6px -2px rgba(16, 24, 40, 0.03);
-    border: none !important;
-  }
-
-  .ant-select-item {
-    border-radius: 6px;
-    padding: 8px 12px;
-    min-height: 40px;
-    transition: all 0.2s ease;
-
-    &:hover {
-      background-color: #f9fafb;
-    }
-
-    &.ant-select-item-option-selected {
-      background-color: #155eef;
-      color: #ffffff;
-      padding: 4px !important;
-
-      .language-option span {
-        color: #ffffff;
-      }
-    }
-
-    .language-option {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-
-      .flag-icon {
-        width: 20px;
-        height: 14px;
-        border-radius: 2px;
-      }
-
-      span {
-        font-size: 14px;
-        font-weight: 500;
-        color: #344054;
-      }
-    }
-  }
-}

package/src/@daf/layouts/AuthLayout/components/Navbar/style.js

@@ -1,149 +0,0 @@
-import styled from "styled-components";
-import { MOBILE_WIDTH, TABLET_WIDTH } from "datastake-daf/src/constants/Style";
-
-const style = styled.div`
-  font-family: Outfit;
-
-  .btns {
-    display: flex;
-    gap: 12px;
-  }
-
-  .d-container {
-    width: 80vw;
-    margin-left: auto;
-    margin-right: auto;
-
-    @media (max-width: 1440px) {
-      width: 85vw;
-    }
-
-    @media (${TABLET_WIDTH}) {
-      width: calc(100vw - 4.6rem);
-    }
-  }
-
-  .flex-c {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .jus-c {
-    justify-content: center;
-  }
-
-  .d-navbar {
-    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
-    position: fixed;
-    background-color: white;
-    z-index: 1000;
-    width: 100%;
-    height: 80px;
-
-    @media (${TABLET_WIDTH}) {
-      height: 72px;
-    }
-
-    @media (${MOBILE_WIDTH}) {
-      height: 5.12rem;
-    }
-
-    .main-cont {
-      display: flex;
-      padding: 20px 0px;
-
-      @media (${MOBILE_WIDTH}) {
-        padding: 1.6rem 0;
-      }
-
-      .left {
-        flex: 1;
-
-        img {
-          cursor: pointer;
-          width: 128px;
-
-          @media (${MOBILE_WIDTH}) {
-            width: 10.24rem;
-          }
-        }
-      }
-
-      .right {
-        display: flex;
-        gap: 3rem;
-
-        .ant-btn {
-          font-size: 14px;
-          padding: 6px 0;
-          text-align: center;
-          width: 70px;
-
-          @media (${MOBILE_WIDTH}) {
-            padding: 3px 0;
-          }
-        }
-
-        @media (max-width: 1070px) {
-          gap: 2rem;
-        }
-      }
-    }
-  }
-
-  &.bordered {
-    .d-navbar {
-      position: relative;
-      box-shadow: unset;
-      border-bottom: 1px solid var(--base-gray-40);
-    }
-  }
-
-  .tazama-extra {
-    &.mobile {
-      display: none;
-    }
-
-    @media (${MOBILE_WIDTH}) {
-      &.mobile {
-        display: flex;
-      }
-
-      &.desktop {
-        display: none;
-      }
-    }
-
-    .ant-btn {
-      width: 90px !important;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-
-      &.w-100 {
-        width: 100% !important;
-      }
-
-      span {
-        margin: 0 auto;
-      }
-    }
-
-    .nav-extra {
-      position: fixed;
-      top: 0;
-      left: 0;
-      height: 100dvh;
-      width: 100%;
-      background: white;
-      margin-left: -100%;
-      transition: 0.4s margin-left;
-
-      &.toggled {
-        margin-left: 0;
-      }
-    }
-  }
-`;
-
-export default style;

package/src/@daf/layouts/AuthLayout/index.jsx

@@ -1,85 +0,0 @@
-import React from "react";
-import AuthNavbar from "./components/Navbar/index.jsx";
-import { formatClassname } from "../../../helpers/ClassesHelper.js";
-import Style from './style';
-
-const AuthLayout = ({
-  children,
-  StyleComponent,
-  t = (key) => key,
-  title = "Welcome Back",
-  subTitle = "Please introduce yourself",
-  logo,
-  appName = "default",
-  containerClassName = "",
-  leftClassName = "",
-  rightClassName = "",
-  rightImgClassName = "",
-  rightImageUrl,
-  additionalContent,
-  showTopHeader = true,
-  showLanguageSelector = true,
-  updateLanguage,
-  showBack = false,
-  onBack,
-  backLabel = "Back",
-}) => {
-  const Wrapper = StyleComponent || "div";
-  const wrapperClassName = formatClassname([
-    "auth-layout",
-    appName,
-    containerClassName,
-  ]);
-
-  return (
-
-  
-    <>
-      {showTopHeader && (
-        <AuthNavbar
-          logo={logo}
-          appName={appName}
-          showLanguageSelector={showLanguageSelector}
-          updateLanguage={updateLanguage}
-          showBack={showBack}
-          onBack={onBack}
-          backLabel={backLabel}
-        />
-      )}
-<Style>
-      <div className="main-cont">
-        <div className={formatClassname(["d-cont left", leftClassName])}>
-          <div className="main">
-            {logo && (
-              <div className="left-logo">
-                <img src={logo} alt={`${appName} logo`} />
-              </div>
-            )}
-            <div className="left-header">
-              {title && <h2>{t(title)}</h2>}
-              {subTitle && (
-                <p>{typeof subTitle === "string" ? t(subTitle) : subTitle}</p>
-              )}
-            </div>
-            {children}
-            {additionalContent}
-          </div>
-        </div>
-
-        <div
-          className={formatClassname(["d-cont right", rightClassName])}
-          style={
-            rightImageUrl
-              ? { backgroundImage: `url(${rightImageUrl})`, backgroundSize: "cover" }
-              : {}
-          }
-        >
-          <div className={formatClassname(["right-img", rightImgClassName])} />
-        </div>
-      </div>
-      </Style>
-    </>
-  );
-};
-
-export default AuthLayout;

package/src/@daf/layouts/AuthLayout/index.scss

@@ -1,77 +0,0 @@
-.auth-layout {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  background-color: #fff;
-  font-family: "Outfit", sans-serif;
-
-  .main-cont {
-    flex: 1;
-    display: flex;
-    height: calc(100vh - 64px); // Subtract header height
-    transition: all 0.2s ease;
-
-    @media (max-width: 768px) {
-      flex-direction: column;
-      height: auto;
-    }
-  }
-
-  .d-cont.left {
-    width: 50%;
-    padding: 6rem 2rem;
-    display: flex;
-    justify-content: center;
-    overflow-y: auto;
-    background: #fff;
-
-    .main {
-      width: 350px;
-      margin: auto;
-
-      .left-logo img {
-        height: 40px;
-        margin-bottom: 48px;
-      }
-
-      .left-header h2 {
-        font-size: 36px;
-        font-weight: 600;
-        color: #101828;
-        margin-bottom: 12px;
-      }
-
-      .left-header p {
-        font-size: 16px;
-        color: #667085;
-      }
-    }
-  }
-
-  .d-cont.right {
-    width: 50%;
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-
-    @media (max-width: 768px) {
-      display: none;
-    }
-  }
-
-  &.sbg {
-    --primary-color: #992f24;
-    .ant-btn-primary {
-      background: var(--primary-color);
-      border-color: var(--primary-color);
-    }
-  }
-
-  &.nashiriki {
-    --primary-color: #004b91;
-    .ant-btn-primary {
-      background: var(--primary-color);
-      border-color: var(--primary-color);
-    }
-  }
-}