datastake-daf 0.6.599 → 0.6.601

package/dist/layouts/index.js

@@ -7597,6 +7597,9 @@ const Style$1 = dt.div`
 
   .select-navbar {
     padding: 0 .75rem;
+    display: flex;
+    align-items: center;
+    gap: 0;
 
     div {
       width: 4.625rem;
@@ -7608,6 +7611,17 @@ const Style$1 = dt.div`
       cursor: pointer;
     }
 
+    .chevron-icon {
+      color: #193E61;
+      transition: transform 0.3s ease;
+      cursor: pointer;
+      flex-shrink: 0;
+
+      &.rotated {
+        transform: rotate(180deg);
+      }
+    }
+
     .country-cont {
       justify-content: center;
       gap: 0.6rem;
@@ -7810,13 +7824,27 @@ const Select = ({
     };
   }, [toggled]);
   return /*#__PURE__*/jsxRuntime.jsxs(Style$1, {
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: formatClassname(['select-navbar', bordered && 'bordered']),
       onClick: () => setToggled(p => !p),
       ref: ref,
-      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
         children: valueLabel
-      })
+      }), /*#__PURE__*/jsxRuntime.jsx("svg", {
+        className: formatClassname(['chevron-icon', toggled && 'rotated']),
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/jsxRuntime.jsx("path", {
+          d: "M4 6L8 10L12 6",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        })
+      })]
     }), visible && /*#__PURE__*/jsxRuntime.jsx(Options, {
       value: value,
       secondRef: ref,
@@ -8120,7 +8148,7 @@ const Style = dt.div`
 
       &.right {
         animation: .7s slideLeft forwards;
-        background-image: url('/assets/hatua-images/login-image.png');
+        background-image: url(${props => props.rightImageUrl}) !important;
         background-size: cover;
         background-repeat: no-repeat;
         display: flex;
@@ -8151,7 +8179,7 @@ const Style = dt.div`
 
         &.verified-user {
           .right-img {
-            background-image: url('/assets/images/verified-user.svg');
+            background-image: url(${props => props.rightImageUrl}) !important;
           }
         }
 
@@ -8293,11 +8321,20 @@ const Style = dt.div`
     }
   }
 
-  &.sbg-layout {
+  .left-logo {
+    img {
+      height: 30px;
+      margin-bottom: 32px;
+    }
+  }
+
+  ${({
+  appName
+}) => appName === 'sbg' && `
     .right-img {
       background-position: center !important;
       background-size: cover !important;
-      background-image: url('/assets/sbg-images/sbg-bg.png') !important;
+      background-image: url(${props => props.rightImageUrl}) !important;
       max-height: 100% !important;
       margin-left: 0 !important;
     }
@@ -8308,7 +8345,7 @@ const Style = dt.div`
         border-color: var(--color-primary-70);
       }
     }
-  }
+  `}
 `;
 
 const AuthLayout = ({
@@ -8345,6 +8382,8 @@ const AuthLayout = ({
       backLabel: backLabel,
       defaultValue: defaultValue
     }), /*#__PURE__*/jsxRuntime.jsx(Style, {
+      rightImageUrl: rightImageUrl,
+      appName: appName,
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "main-cont",
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.599",
+	"version": "0.6.601",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

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

@@ -126,6 +126,22 @@ export const Select = ({
         ref={ref}
       >
         <div>{valueLabel}</div>
+        <svg 
+          className={formatClassname(['chevron-icon', toggled && 'rotated'])}
+          width="16" 
+          height="16" 
+          viewBox="0 0 16 16" 
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path 
+            d="M4 6L8 10L12 6" 
+            stroke="currentColor" 
+            strokeWidth="2" 
+            strokeLinecap="round" 
+            strokeLinejoin="round"
+          />
+        </svg>
       </div>
       {visible && (
         <Options

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

@@ -27,6 +27,9 @@ const Style = styled.div`
 
   .select-navbar {
     padding: 0 .75rem;
+    display: flex;
+    align-items: center;
+    gap: 0;
 
     div {
       width: 4.625rem;
@@ -38,6 +41,17 @@ const Style = styled.div`
       cursor: pointer;
     }
 
+    .chevron-icon {
+      color: #193E61;
+      transition: transform 0.3s ease;
+      cursor: pointer;
+      flex-shrink: 0;
+
+      &.rotated {
+        transform: rotate(180deg);
+      }
+    }
+
     .country-cont {
       justify-content: center;
       gap: 0.6rem;

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

@@ -48,7 +48,7 @@ const AuthLayout = ({
           defaultValue={defaultValue}
         />
       )}
-    <Style>
+    <Style rightImageUrl={rightImageUrl} appName={appName}>
       <div className="main-cont">
         <div className={formatClassname(["d-cont left", leftClassName])}>
           <div className="main">

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

@@ -224,7 +224,7 @@ const Style = styled.div`
 
       &.right {
         animation: .7s slideLeft forwards;
-        background-image: url('/assets/hatua-images/login-image.png');
+        background-image: url(${props => props.rightImageUrl}) !important;
         background-size: cover;
         background-repeat: no-repeat;
         display: flex;
@@ -255,7 +255,7 @@ const Style = styled.div`
 
         &.verified-user {
           .right-img {
-            background-image: url('/assets/images/verified-user.svg');
+            background-image: url(${props => props.rightImageUrl}) !important;
           }
         }
 
@@ -397,11 +397,18 @@ const Style = styled.div`
     }
   }
 
-  &.sbg-layout {
+  .left-logo {
+    img {
+      height: 30px;
+      margin-bottom: 32px;
+    }
+  }
+
+  ${({ appName }) => appName === 'sbg' && `
     .right-img {
       background-position: center !important;
       background-size: cover !important;
-      background-image: url('/assets/sbg-images/sbg-bg.png') !important;
+      background-image: url(${props => props.rightImageUrl}) !important;
       max-height: 100% !important;
       margin-left: 0 !important;
     }
@@ -412,7 +419,7 @@ const Style = styled.div`
         border-color: var(--color-primary-70);
       }
     }
-  }
+  `}
 `;
 
 export default Style;