pixel-react 1.5.5 → 1.5.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.5.5",
+  "version": "1.5.6",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/src/assets/icons/dashboard_icon.svg

@@ -0,0 +1,31 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5453 15.652C10.2568 15.3525 9.8837 15.1313 9.4568 15.029L7.91394 14.6593V13.7174H6.02987V14.6623L4.49101 15.0299C3.48478 15.2703 2.7749 16.1697 2.7749 17.2042V19.725H6.18598L10.5453 15.652Z" fill="#78D2FA"/>
+<path d="M7.95401 13.7174V14.6847L6.97624 17.0268L5.99951 14.6881V13.7174H7.95401Z" fill="#FFB487"/>
+<path d="M9.0732 10.4723V11.7769C9.0732 12.9367 8.13296 13.8769 6.97312 13.8769C5.81328 13.8769 4.87305 12.9367 4.87305 11.7769V10.4723H9.0732Z" fill="#FFCDAC"/>
+<path d="M9.0732 10.885V10.3794C9.0732 9.21962 8.13296 8.27942 6.97312 8.27942C5.81328 8.27942 4.87305 9.21962 4.87305 10.3794V10.885H6.32066C7.22718 10.885 8.11672 10.6388 8.89432 10.1729" fill="#878791"/>
+<path d="M13.4541 15.652C13.7426 15.3525 14.1157 15.1313 14.5426 15.029L16.0854 14.6593V13.7174H17.9695V14.6623L19.5084 15.0299C20.5146 15.2703 21.2245 16.1697 21.2245 17.2042V19.725H17.8134L13.4541 15.652Z" fill="#A5DC69"/>
+<path d="M10.6856 15.6151L8.53663 16.1301C7.13608 16.4657 6.14844 17.7179 6.14844 19.1581V21.225H17.8436V19.1599C17.8436 17.7189 16.8548 16.4662 15.4532 16.1313L13.3099 15.6193L10.6856 15.6151Z" fill="#FF5A5A"/>
+<path d="M17.9999 13.7174V14.6881L17.0232 17.0268L16.0454 14.6847V13.7174H17.9999Z" fill="#FFB487"/>
+<path d="M12.0002 18.6277L13.3993 15.4511C13.2955 15.2767 13.2363 15.0738 13.2363 14.8589V14.5536H10.7626V14.859C10.7626 15.0735 10.7036 15.2761 10.6001 15.4503L12.0002 18.6277Z" fill="#FFB487"/>
+<path d="M14.9247 9.58215V11.6004C14.9247 13.2158 13.6151 14.5254 11.9997 14.5254C10.3843 14.5254 9.07471 13.2158 9.07471 11.6004V9.58215H14.9247Z" fill="#FFCDAC"/>
+<path d="M11.9997 6.72888C10.3843 6.72888 9.07471 8.03846 9.07471 9.65388V10.358H10.5048C11.4555 10.358 12.3574 9.93708 12.968 9.20842L14.9247 10.358V9.65388C14.9248 8.03846 13.6152 6.72888 11.9997 6.72888Z" fill="#F5B955"/>
+<path d="M14.9263 10.4723V11.7769C14.9263 12.9367 15.8665 13.8769 17.0263 13.8769C18.1862 13.8769 19.1264 12.9367 19.1264 11.7769V10.4723H14.9263Z" fill="#FFCDAC"/>
+<path d="M14.9263 10.885V10.3794C14.9263 9.21962 15.8665 8.27942 17.0263 8.27942C18.1862 8.27942 19.1264 9.21962 19.1264 10.3794V10.885H17.6788C16.7723 10.885 15.8827 10.6388 15.1051 10.1729" fill="#878791"/>
+<path d="M11.9906 20.85C11.8917 20.85 11.7947 20.8901 11.7249 20.9599C11.655 21.0296 11.6147 21.1264 11.6147 21.225C11.6147 21.3236 11.6549 21.4204 11.7249 21.4901C11.7947 21.5599 11.8917 21.6 11.9906 21.6C12.0895 21.6 12.1864 21.5599 12.2563 21.4901C12.3262 21.4204 12.3665 21.3236 12.3665 21.225C12.3665 21.1264 12.3263 21.0296 12.2563 20.9599C12.1864 20.8901 12.0895 20.85 11.9906 20.85Z" fill="black"/>
+<path d="M19.5959 14.6652L18.345 14.3663V13.8701C19.0393 13.4313 19.5018 12.6573 19.5018 11.7769V10.3794C19.5018 9.01469 18.3915 7.90443 17.0267 7.90443C16.2905 7.90443 15.6287 8.22791 15.175 8.73974C14.7775 7.36338 13.5064 6.35388 12.0038 6.35388H12.0038C10.4987 6.35388 9.22588 7.36657 8.83067 8.74631C8.37677 8.23068 7.71256 7.90443 6.97322 7.90443C5.60844 7.90443 4.49814 9.01473 4.49814 10.3794V11.7769C4.49814 12.6573 4.96059 13.4313 5.65494 13.8701V14.3663L4.40402 14.6652C3.224 14.947 2.3999 15.9911 2.3999 17.2042V19.725C2.3999 19.9321 2.56783 20.1 2.7749 20.1H5.77351V21.225C5.77351 21.4321 5.94144 21.6 6.14851 21.6H10.2624C10.4695 21.6 10.6374 21.4321 10.6374 21.225C10.6374 21.0179 10.4695 20.85 10.2624 20.85H8.5883V19.1995C8.5883 18.9924 8.42038 18.8245 8.2133 18.8245C8.00623 18.8245 7.8383 18.9924 7.8383 19.1995V20.85H6.52348V19.1581C6.52348 17.8863 7.38725 16.7911 8.62404 16.4947L10.4684 16.0528L11.6551 18.7526C11.715 18.8888 11.8496 18.9767 11.9984 18.9767H11.9984C12.1471 18.9767 12.2818 18.8888 12.3417 18.7527L13.5272 16.0567L15.3662 16.4961C16.6041 16.7917 17.4686 17.8872 17.4686 19.1598V19.5783C17.4495 19.6234 17.4388 19.6729 17.4388 19.725C17.4388 19.777 17.4495 19.8266 17.4686 19.8716V20.85H16.1615V19.1995C16.1615 18.9924 15.9936 18.8245 15.7865 18.8245C15.5794 18.8245 15.4115 18.9924 15.4115 19.1995V20.85H13.5749C13.3679 20.85 13.1999 21.0179 13.1999 21.225C13.1999 21.4321 13.3679 21.6 13.5749 21.6H17.8436C18.0507 21.6 18.2186 21.4321 18.2186 21.225V20.1H21.2249C21.432 20.1 21.5999 19.9321 21.5999 19.725V17.2042C21.5999 15.9911 20.7758 14.947 19.5959 14.6652ZM17.5958 14.6826L17.0233 16.0535L16.4584 14.7006C16.4599 14.687 16.461 14.6733 16.461 14.6596C16.461 14.6561 16.461 14.6526 16.4609 14.6491V14.1859C16.6427 14.2287 16.832 14.2519 17.0267 14.2519C17.2222 14.2519 17.4124 14.2284 17.5949 14.1853V14.6623C17.5949 14.6691 17.5954 14.6758 17.5958 14.6826ZM10.3106 14.9838C10.0752 14.8378 9.81692 14.7297 9.54422 14.6643L8.28894 14.3635V13.8717C8.60113 13.675 8.86629 13.4105 9.06395 13.099C9.34666 13.6513 9.78058 14.1138 10.3106 14.432V14.9838ZM9.45365 11.6004V10.7331H10.5088C11.466 10.7331 12.3731 10.3548 13.0433 9.68527L14.5516 10.5714V11.6884C14.505 13.0539 13.3804 14.1505 12.0038 14.1505C10.5976 14.1504 9.45365 13.0065 9.45365 11.6004ZM13.6849 14.439C14.2183 14.122 14.6552 13.6591 14.9401 13.1056C15.1373 13.4142 15.4009 13.6763 15.7109 13.8717V14.3635L14.4556 14.6643C14.1812 14.7301 13.9215 14.8392 13.6849 14.9865L13.6849 14.439ZM17.0267 13.5019C16.0755 13.5019 15.3016 12.7281 15.3016 11.7769V11.7157C15.3029 11.6775 15.3038 10.7074 15.3038 10.7074C16.0411 11.07 16.8538 11.26 17.6792 11.26H18.7518V11.777C18.7517 12.7281 17.9779 13.5019 17.0267 13.5019ZM17.0267 8.65443C17.9779 8.65443 18.7517 9.42828 18.7517 10.3794V10.4723V10.51H17.6791C16.8689 10.51 16.0727 10.2972 15.3711 9.89399C15.5813 9.17842 16.2439 8.65443 17.0267 8.65443ZM9.45365 9.65392C9.45365 8.24782 10.5976 7.10392 12.0038 7.10392C13.4099 7.10392 14.5538 8.24786 14.5538 9.65392V9.70282L13.162 8.88513C13.0041 8.79232 12.8023 8.82723 12.6847 8.96759C12.1439 9.61289 11.3509 9.98302 10.5089 9.98302H9.45365V9.65392ZM5.24806 10.3794C5.24806 9.42824 6.02195 8.65443 6.97314 8.65443C7.75588 8.65443 8.4185 9.17842 8.62869 9.89403C7.92703 10.2972 7.1309 10.51 6.32064 10.51H5.24806V10.4723V10.3794ZM5.24806 11.26H6.32068C7.14688 11.26 7.96044 11.0696 8.69822 10.7064V11.7769C8.69822 12.7281 7.92433 13.5019 6.97314 13.5019C6.02195 13.5019 5.24806 12.7281 5.24806 11.7769V11.26ZM6.97314 14.2519C7.16784 14.2519 7.35707 14.2286 7.53894 14.1859V14.6386C7.53853 14.6456 7.53834 14.6527 7.53834 14.6597C7.53834 14.6715 7.53947 14.6833 7.54059 14.695L6.97322 16.0535L6.4037 14.6893C6.40434 14.6803 6.40487 14.6714 6.40487 14.6623V14.1854C6.58745 14.2284 6.77758 14.2519 6.97314 14.2519ZM5.77351 19.1581V19.35H4.6499V17.6839C4.6499 17.4768 4.48198 17.3089 4.2749 17.3089C4.06783 17.3089 3.8999 17.4768 3.8999 17.6839V19.35H3.1499V17.2042C3.1499 16.3396 3.73723 15.5955 4.57817 15.3946L5.76684 15.1107L6.54264 16.969C6.05743 17.5717 5.77351 18.3358 5.77351 19.1581ZM8.44929 15.7654C8.22785 15.8185 8.01624 15.8923 7.81531 15.9834L8.18056 15.1088L9.36943 15.3937C9.46164 15.4158 9.55149 15.445 9.63845 15.4804L8.44929 15.7654ZM11.9985 17.67L11.0606 15.5363V14.7629C11.3596 14.8522 11.6761 14.9004 12.0037 14.9004C12.327 14.9004 12.6395 14.8535 12.9349 14.7664V15.5405L11.9985 17.67ZM14.3545 15.4833C14.4436 15.4465 14.5357 15.4164 14.6304 15.3937L15.8164 15.1095L16.1831 15.988C15.9796 15.8953 15.7651 15.8203 15.5404 15.7666L14.3545 15.4833ZM20.8499 19.35H20.0999V17.6839C20.0999 17.4768 19.932 17.3089 19.7249 17.3089C19.5178 17.3089 19.3499 17.4768 19.3499 17.6839V19.35H18.2186V19.1599C18.2186 18.3387 17.9357 17.5757 17.4518 16.9734L18.2301 15.11L19.4216 15.3946C20.2626 15.5955 20.8499 16.3396 20.8499 17.2042V19.35Z" fill="black"/>
+<path d="M10.7426 11.0719C10.6437 11.0719 10.5467 11.112 10.4768 11.1818C10.4069 11.2515 10.3667 11.3483 10.3667 11.4469C10.3667 11.5455 10.4069 11.6423 10.4768 11.712C10.5468 11.7818 10.6437 11.8219 10.7426 11.8219C10.8418 11.8219 10.9384 11.7818 11.0083 11.712C11.0786 11.6423 11.1184 11.5455 11.1184 11.4469C11.1184 11.3483 11.0786 11.2515 11.0083 11.1818C10.9384 11.112 10.8414 11.0719 10.7426 11.0719Z" fill="black"/>
+<path d="M13.2504 11.8219C13.3492 11.8219 13.4462 11.7818 13.5161 11.712C13.5864 11.6423 13.6262 11.5455 13.6262 11.4469C13.6262 11.3483 13.5864 11.2515 13.5161 11.1818C13.4462 11.112 13.3492 11.0719 13.2504 11.0719C13.1515 11.0719 13.0546 11.112 12.9846 11.1818C12.9147 11.2515 12.8745 11.3483 12.8745 11.4469C12.8745 11.5455 12.9147 11.6423 12.9846 11.712C13.0546 11.7818 13.1515 11.8219 13.2504 11.8219Z" fill="black"/>
+<path d="M12.7217 12.4441C12.5752 12.2976 12.3378 12.2976 12.1913 12.4441C12.0804 12.5549 11.9 12.5549 11.7891 12.4441C11.6426 12.2976 11.4053 12.2976 11.2588 12.4441C11.1123 12.5905 11.1123 12.8279 11.2588 12.9744C11.4604 13.1761 11.7253 13.2769 11.9902 13.2769C12.2551 13.2769 12.52 13.1761 12.7216 12.9744C12.8681 12.8279 12.8681 12.5905 12.7217 12.4441Z" fill="black"/>
+<path d="M17.6479 5.17505H17.9052C18.1122 5.17505 18.2802 5.00716 18.2802 4.80005C18.2802 4.59294 18.1122 4.42505 17.9052 4.42505H17.6479C17.4409 4.42505 17.2729 4.59294 17.2729 4.80005C17.2729 5.00716 17.4409 5.17505 17.6479 5.17505Z" fill="black"/>
+<path d="M19.4673 5.17505H19.7245C19.9316 5.17505 20.0995 5.00716 20.0995 4.80005C20.0995 4.59294 19.9316 4.42505 19.7245 4.42505H19.4673C19.2602 4.42505 19.0923 4.59294 19.0923 4.80005C19.0923 5.00716 19.2602 5.17505 19.4673 5.17505Z" fill="black"/>
+<path d="M18.6874 6.21339C18.8949 6.21339 19.0633 6.0455 19.0633 5.83839V5.58118C19.0633 5.37406 18.8949 5.20618 18.6874 5.20618C18.4798 5.20618 18.3115 5.37406 18.3115 5.58118V5.83839C18.3115 6.0455 18.4798 6.21339 18.6874 6.21339Z" fill="black"/>
+<path d="M18.6874 4.39381C18.8949 4.39381 19.0633 4.22592 19.0633 4.01881V3.7616C19.0633 3.55448 18.8949 3.3866 18.6874 3.3866C18.4798 3.3866 18.3115 3.55448 18.3115 3.7616V4.01881C18.3115 4.22592 18.4798 4.39381 18.6874 4.39381Z" fill="black"/>
+<path d="M4.25391 5.17505H4.51108C4.71816 5.17505 4.88608 5.00716 4.88608 4.80005C4.88608 4.59294 4.71816 4.42505 4.51108 4.42505H4.25391C4.04683 4.42505 3.87891 4.59294 3.87891 4.80005C3.87891 5.00716 4.04683 5.17505 4.25391 5.17505Z" fill="black"/>
+<path d="M6.07324 5.17505H6.33042C6.53749 5.17505 6.70542 5.00716 6.70542 4.80005C6.70542 4.59294 6.53749 4.42505 6.33042 4.42505H6.07324C5.86617 4.42505 5.69824 4.59294 5.69824 4.80005C5.69824 5.00716 5.86613 5.17505 6.07324 5.17505Z" fill="black"/>
+<path d="M5.29286 6.21339C5.50041 6.21339 5.66873 6.0455 5.66873 5.83839V5.58118C5.66873 5.37406 5.50041 5.20618 5.29286 5.20618C5.08531 5.20618 4.91699 5.37406 4.91699 5.58118V5.83839C4.91699 6.0455 5.08527 6.21339 5.29286 6.21339Z" fill="black"/>
+<path d="M5.29286 4.39381C5.50041 4.39381 5.66873 4.22592 5.66873 4.01881V3.7616C5.66873 3.55448 5.50041 3.3866 5.29286 3.3866C5.08531 3.3866 4.91699 3.55448 4.91699 3.7616V4.01881C4.91699 4.22592 5.08527 4.39381 5.29286 4.39381Z" fill="black"/>
+<path d="M12.0004 5.56487C12.2079 5.56487 12.3762 5.39698 12.3762 5.18987V4.20325C12.3762 3.99613 12.2079 3.82825 12.0004 3.82825C11.7928 3.82825 11.6245 3.99613 11.6245 4.20325V5.18987C11.6245 5.39698 11.7928 5.56487 12.0004 5.56487Z" fill="black"/>
+<path d="M12.0004 3.15002C12.0992 3.15002 12.1962 3.1099 12.2661 3.04015C12.336 2.9704 12.3762 2.87365 12.3762 2.77502C12.3762 2.6764 12.336 2.57965 12.2661 2.5099C12.1962 2.44015 12.0992 2.40002 12.0004 2.40002C11.9015 2.40002 11.8046 2.44015 11.7346 2.5099C11.6647 2.57965 11.6245 2.6764 11.6245 2.77502C11.6245 2.87365 11.6647 2.9704 11.7346 3.04015C11.8046 3.1099 11.9015 3.15002 12.0004 3.15002Z" fill="black"/>
+<path d="M10.1552 4.43482C10.2285 4.50805 10.3244 4.54465 10.4204 4.54465C10.5163 4.54465 10.6123 4.50805 10.6855 4.43482C10.832 4.28838 10.832 4.05093 10.6855 3.90445L10.1368 3.35568C9.9903 3.20924 9.75292 3.20924 9.60641 3.35568C9.45997 3.50212 9.45997 3.73957 9.60641 3.88604L10.1552 4.43482Z" fill="black"/>
+<path d="M13.5606 4.54236C13.6566 4.54236 13.7525 4.50576 13.8257 4.43252L14.3929 3.86541C14.5393 3.71897 14.5393 3.48152 14.3929 3.33505C14.2464 3.18861 14.009 3.18861 13.8625 3.33505L13.2954 3.90216C13.1489 4.0486 13.1489 4.28605 13.2954 4.43252C13.3687 4.50576 13.4646 4.54236 13.5606 4.54236Z" fill="black"/>
+</svg>

package/src/assets/styles/_colors.scss

@@ -93,6 +93,7 @@ $expandable-menu-option-bg: #610b861a;
 $file-dropzone-default-color: #71347b1a;
 $file-dropzone-selected-color: #71347b33;
 $file-details-container-shadow: #1e161f29;
+$excel-toolbar-divider: #57575733;
 $file-details-bg: #ffffff;
 
 $variable-dropdown-bg: #ffffff;

package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss

@@ -70,7 +70,7 @@
     background-color: var(--secondary-icon-color);
     color: var(--primary-icon-color);
     .ff-projects-search {
-      width: 99%;
+      width: 100%;
       margin-bottom: 1px;
       input {
         height: 30px;

package/src/components/DatePicker/DatePicker.scss

@@ -9,7 +9,7 @@
     --rdp-day-height: 24px;
     --rdp-day-width: 36px;
     @include fonts.fontPoppins(12px);
-    --rdp-font-family: 'Poppins';
+    --rdp-font-family: 'Poppins', sans-serif;
   }
 
   .ff-cursor-pointer {
@@ -48,7 +48,8 @@
       .ff-calendar-icon,
       .ff-clock-icon {
         position: absolute;
-        transform: translate(50%, 50%);
+        top: 50%;
+        transform: translate(25%, -50%);
         display: flex;
         align-items: center;
         pointer-events: none;
@@ -118,7 +119,7 @@
       border: 1px solid var(--border-color);
       background-color: var(--toggle-button-bg-color);
       box-shadow: 0 -2px 2px 0 var(--ff-mini-modal-box-shadow);
-      padding: 4px;
+      padding: 0px;
       border-radius: 30%;
       cursor: pointer;
 

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import CustomDatePicker from './DatePicker';
 import { useState } from 'react';
@@ -36,7 +37,7 @@ const meta: Meta<typeof CustomDatePicker> = {
     },
     onChange: {
       description: 'Function to handle date selection',
-      action: 'changed', 
+      action: 'changed',
     },
     placeholder: {
       description: 'Placeholder text for the input field',
@@ -60,14 +61,15 @@ const meta: Meta<typeof CustomDatePicker> = {
     },
     calendarWidth: {
       description: 'Custom width for the calendar in pixel',
-      control: "number"
+      control: 'number',
     },
     error: {
       description: 'Displays the input field in an error state',
       control: 'boolean',
     },
     helperText: {
-      description: 'Helper text to show below the input, often used for error messages',
+      description:
+        'Helper text to show below the input, often used for error messages',
       control: 'text',
     },
   },
@@ -82,14 +84,8 @@ export const Default: Story = {
   render: (args) => {
     const [date, setDate] = useState<Date | undefined>();
 
-    return(
-      <CustomDatePicker
-        {...args}
-        value={date}
-        onChange={setDate}
-      />
-    )
-  }
+    return <CustomDatePicker {...args} value={date} onChange={setDate} />;
+  },
 };
 
 // Start Date Filter story
@@ -102,7 +98,7 @@ export const StartDateFilter: Story = {
         {...args}
         value={startDate}
         onChange={setStartDate}
-        calendarWidth = {240}
+        calendarWidth={240}
         maxDate={new Date()} // Disable future dates for start date picker
       />
     );
@@ -143,7 +139,7 @@ export const EndDateInput: Story = {
 export const ScheduleDateInput: Story = {
   args: {
     error: false,
-    helperText: "Error"
+    helperText: 'Error',
   },
 
   render: (args) => {
@@ -157,5 +153,22 @@ export const ScheduleDateInput: Story = {
         minDate={new Date()} // Set minimum date to today
       />
     );
-  }
+  },
+};
+
+export const Dateonly: Story = {
+  render: (args) => {
+    const [selectedDate, setSelectDate] = useState<Date | undefined>();
+
+    console.log(selectedDate);
+    return (
+      <CustomDatePicker
+        {...args}
+        value={selectedDate}
+        onChange={setSelectDate}
+        calendarWidth={240}
+        dateOnly
+      />
+    );
+  },
 };

package/src/components/DatePicker/DatePicker.tsx

@@ -26,6 +26,7 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
   timeFormat = 'hh:mm a',
   error,
   helperText = '',
+  dateOnly = false,
 }) => {
   const [timeValue, setTimeValue] = useState<string>('');
   const [selectedDate, setSelectedDate] = useState<Date | undefined>();
@@ -121,17 +122,23 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
   };
 
   const handleDaySelect = (date: Date | undefined) => {
-    if (!timeValue || !date) {
-      // if need to set time to current time in case no time selected
-      const now = new Date();
-      date?.setHours(now.getHours(), now.getMinutes(), now.getSeconds());
-
+    if (dateOnly) {
       setSelectedDate(date);
+      onChange(date);
+      resetAndCloseDatePicker();
     } else {
-      const [hoursStr, minutesStr] = timeValue.split(':');
-      date.setHours(parseInt(hoursStr ? hoursStr : '0', 10) || 0);
-      date.setMinutes(parseInt(minutesStr ? minutesStr : '0', 10) || 0);
-      setSelectedDate(date);
+      if (!timeValue || !date) {
+        // if need to set time to current time in case no time selected
+        const now = new Date();
+        date?.setHours(now.getHours(), now.getMinutes(), now.getSeconds());
+
+        setSelectedDate(date);
+      } else {
+        const [hoursStr, minutesStr] = timeValue.split(':');
+        date.setHours(parseInt(hoursStr ? hoursStr : '0', 10) || 0);
+        date.setMinutes(parseInt(minutesStr ? minutesStr : '0', 10) || 0);
+        setSelectedDate(date);
+      }
     }
   };
 
@@ -273,7 +280,7 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
         onClick={onClick}
         disabled={disabled}
       >
-        <Icon name="left_arrow_icon" height={12} width={12} />
+        <Icon name="left_arrow_icon" height={20} width={20} />
       </button>
     );
   };
@@ -287,7 +294,7 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
         onClick={onClick}
         disabled={disabled}
       >
-        <Icon name="right_arrow_icon" height={12} width={12} />
+        <Icon name="right_arrow_icon" height={20} width={20} />
       </button>
     );
   };
@@ -340,22 +347,24 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
           )}
         </div>
 
-        <div className="ff-input-with-icon ff-time-input-field">
-          <Icon
-            name={'clock_icon'}
-            hoverEffect={false}
-            className="ff-clock-icon"
-          />
-          <input
-            type="text"
-            placeholder="Select time"
-            className="ff-time-input"
-            value={value ? formatInTimeZone(value, timezone, timeFormat) : ''}
-            disabled={disabled}
-            onClick={handleDateInputClick}
-            readOnly
-          />
-        </div>
+        {!dateOnly && (
+          <div className="ff-input-with-icon ff-time-input-field">
+            <Icon
+              name={'clock_icon'}
+              hoverEffect={false}
+              className="ff-clock-icon"
+            />
+            <input
+              type="text"
+              placeholder="Select time"
+              className="ff-time-input"
+              value={value ? formatInTimeZone(value, timezone, timeFormat) : ''}
+              disabled={disabled}
+              onClick={handleDateInputClick}
+              readOnly
+            />
+          </div>
+        )}
       </div>
 
       {isPickerOpen && (
@@ -406,29 +415,33 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
                   : {}),
               }}
             />
-            <TimePicker
-              value={timeValue}
-              onChange={handleTimeChange}
-              minTime={minTime}
-              maxTime={maxTime}
-              onErrorChange={setTimeError}
-            />
-          </div>
-          <div className="ff-date-picker-controls">
-            <Button
-              className="ff-date-picker-button"
-              variant="secondary"
-              onClick={handleCancel}
-              label="Cancel"
-            />
-            <Button
-              className="ff-date-picker-button"
-              variant="primary"
-              onClick={handleSave}
-              label="Save"
-              disabled={timeError}
-            />
+            {!dateOnly && (
+              <TimePicker
+                value={timeValue}
+                onChange={handleTimeChange}
+                minTime={minTime}
+                maxTime={maxTime}
+                onErrorChange={setTimeError}
+              />
+            )}
           </div>
+          {!dateOnly && (
+            <div className="ff-date-picker-controls">
+              <Button
+                className="ff-date-picker-button"
+                variant="secondary"
+                onClick={handleCancel}
+                label="Cancel"
+              />
+              <Button
+                className="ff-date-picker-button"
+                variant="primary"
+                onClick={handleSave}
+                label="Save"
+                disabled={timeError}
+              />
+            </div>
+          )}
         </div>
       )}
     </div>

package/src/components/DatePicker/types.ts

@@ -58,6 +58,11 @@ export interface DatePickerProps {
    * Helper text to display below the input field, used for error messages or instructions.
    */
   helperText?: string | undefined;
+
+  /**
+   * Select only date .
+   */
+  dateOnly?: boolean;
 }
 
 export type DateValue = Date | undefined;

package/src/components/Excel/ColorBarSelector/ColorBarSelector.scss

@@ -1,8 +1,12 @@
-.color-bar {
+.ff-excel-color-selector {
+  position: absolute;
   background-color: var(--error_light);
-  width: 100%;
-  height: 4px;
-  .colorPicker {
+  width: 14px;
+  height: 3px;
+  bottom: 3px;
+  z-index: 200;
+  cursor: pointer;
+  .ff-excel-color-selector-picker {
     width: 100%;
     height: 0;
     padding: 0;

package/src/components/Excel/ColorBarSelector/ColorBarSelector.tsx

@@ -20,7 +20,7 @@ const ColorBarSelector: React.FC<ColorBarSelectorProps> = ({
 
   return (
     <div
-      className="color-bar"
+      className="ff-excel-color-selector"
       style={{
         backgroundColor: `${color}`,
       }}
@@ -29,7 +29,7 @@ const ColorBarSelector: React.FC<ColorBarSelectorProps> = ({
       <input
         type="color"
         disabled={disabled}
-        className="colorPicker"
+        className="ff-excel-color-selector-picker"
         ref={colorInputRef}
         onChange={(e) => {
           setColor(e.target.value);

package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.scss

@@ -1,39 +1,27 @@
-@use '../../../assets/styles/fonts';
+.ff-excel-menu {
+  position: absolute;
+  border: 1px solid var(--option-card-border-color);
+  background: var(--option-card-bg-color);
+  border-radius: 4px;
+  margin: 2px;
+  min-height: 32px;
+  min-width: 111px;
+  white-space: nowrap;
+  z-index: 100;
 
-
-.ff-option-card {
-    position: absolute;
-    border: 1px solid var(--option-card-border-color);
-    background: var(--option-card-bg-color);
-    border-radius: 4px;
-    margin: 2px;
-    min-height: 32px;
-    min-width: 111px;
-    white-space: nowrap;
-    z-index: 100;
-
-    .ff-options {
-      @extend .fontSm;
-      cursor: pointer;
-      border-radius: 4px;
-      display: flex;
-      align-items: center;
-      padding: 8px;
-      line-height: 16px;
-      gap: 8px;
-      &:hover {
-        background-color: var(--hover-color);
-      }
-      label {
-        cursor: pointer;
-      }
+  .ff-excel-menu-options {
+    color: var(--text-color);
+    cursor: pointer;
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    padding: 4px;
+    gap: 8px;
+    &:hover {
+      background-color: var(--hover-color);
     }
-
-    .ff-disable-option {
-      opacity: 0.5;
-      cursor: no-drop;
-      label {
-        cursor: no-drop;
-      }
+    label {
+      cursor: pointer;
     }
   }
+}

package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.tsx

@@ -1,30 +1,21 @@
 import Icon from '../../Icon';
 import './ExcelContextMenu.scss';
 import Typography from '../../Typography';
-import * as Matrix from '../ExcelFile/ExcelFileComponents/matrix';
-import {
-  CellBase,
-  ContextMenuState,
-} from '../ExcelFile/ExcelFileComponents/types';
+import { ContextMenuState } from '../ExcelFile/ExcelFileComponents/types';
 
 type ExcelContextMenuProps = {
-  data: Matrix.Matrix<CellBase>;
   contextMenu: ContextMenuState;
-  addRowTop: (data: Matrix.Matrix<CellBase>) => void;
-  addColumnLeft: (data: Matrix.Matrix<CellBase>) => void;
-  deleteRow: (data: Matrix.Matrix<CellBase>) => void;
-  deleteColumn: (data: Matrix.Matrix<CellBase>) => void;
 };
 
 const ExcelContextMenu: React.FC<ExcelContextMenuProps> = ({ contextMenu }) => {
   return (
     <div
-      className="ff-option-card"
+      className="ff-excel-menu"
       style={{ left: contextMenu.position.x, top: contextMenu.position.y }}
     >
       {contextMenu.options.map((option) => (
         <div
-          className={'ff-options'}
+          className={'ff-excel-menu-options'}
           onClick={() => {
             option.action();
           }}

package/src/components/Excel/ExcelFile/ExcelFile.scss

@@ -1,31 +1,41 @@
-.excel-page {
+.ff-excel-page {
   width: 100%;
   display: flex;
+  margin-top: 40px;
   flex-direction: column;
   align-items: center;
 
-  .excel-book {
+  .ff-excel-book {
     position: relative;
     width: 100%;
-    .excel-sheet {
-      overflow: auto;
-      scrollbar-width: thin;
-    }
 
-    .sheet-bar {
-      margin-top: 5px;
-      padding: 0p 20px;
+    // .ff-excel-sheet { TODO
+    //   overflow: auto;
+    //   scrollbar-width: none;
+    //   &::-webkit-scrollbar {
+    //     height: 0px;
+    //   }
+    // }
+
+    .ff-excel-sheet-bar {
+      margin-left: 83px;
+      display: flex;
+      height: 36px;
       align-items: center;
-      .add-sheet-icon {
-        display: flex;
-        align-items: start;
-        justify-content: center;
+      color: var(--brand2-color);
+      margin-top: -2px;
+      box-shadow: 0px 0px 4px -1px var(--toggle-strip-shadow);
+
+      .ff-excel-add-sheet-icon {
+        padding: 4px 6px;
       }
-      .excel-tab-container {
+      .ff-excel-tab-container {
+        height: 36px;
+        width: 860px;
         display: flex;
         overflow-x: auto;
         align-items: center;
-        scrollbar-width: thin;
+        scrollbar-width: none;
         scrollbar-color: var(--hover-color) transparent;
         &::-webkit-scrollbar-track {
           background-color: transparent;
@@ -33,12 +43,15 @@
         &::-webkit-scrollbar-thumb {
           border-radius: 5px;
         }
-        .excel-tab-list {
-          padding: 10px 20px;
+        &::-webkit-scrollbar {
+          height: 0px;
+        }
+        .ff-excel-tab-list {
+          margin-top: 2px;
+          padding: 10px 9px;
           min-width: max-content;
           cursor: pointer;
           display: flex;
-          font-weight: bold;
           background-color: var(--hover-color);
           &.active {
             background-color: var(--excel-sheet-button-color);
@@ -53,10 +66,3 @@
     }
   }
 }
-.menu-list {
-  display: flex;
-  align-items: center;
-  .menu-title {
-    padding-left: 5px;
-  }
-}