pixel-react 1.4.8 → 1.5.0

package/package.json

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

package/src/assets/Themes/BaseTheme.scss

@@ -116,6 +116,7 @@ $base-theme: (
   menu-option-icon-clicked: #71347b,
   delete-text-color: #c50303,
   confirm-tick-icon-color: #5ca700,
+  warning-modal-border-color:#E79B0866,
   brand-color-border:
     linear-gradient(
       94.23deg,

package/src/assets/Themes/DarkTheme.scss

@@ -187,6 +187,7 @@ $dark-theme: (
   label-edit-cancel-icon: #e42525,
   delete-icon-color: #e42525,
   confirm-tick-icon-color:#5CA700,
+  warning-modal-border-color:#E79B0866,
   brand-color-border:
     linear-gradient(
       94.23deg,

package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss

@@ -18,7 +18,12 @@
       border-radius: 20px;
       .ff-all-project-container {
         border-radius: 20px;
-        background-color: var(--brand-color);
+        box-shadow: 0px 4px 4px 0px #00000040 inset;
+        background: linear-gradient(
+          90deg,
+          var(--brand-color) 0%,
+          var(--button-background-gradient-color) 100%
+        );
       }
     }
     &:not(.ff-all-project-dropdown--selected):hover {

package/src/components/AppHeader/AppHeader.scss

@@ -51,7 +51,12 @@
           background-color: var(--primary-icon-color);
           border-radius: 20px;
           .ff-app-header-nav-bar-item-label {
-            background-color: var(--brand-color);
+            box-shadow: 0px 4px 4px 0px #00000040 inset;
+            background: linear-gradient(
+              90deg,
+              var(--brand-color) 0%,
+              var(--button-background-gradient-color) 100%
+            );
             border-radius: 20px;
             padding: 4px 8px;
           }

package/src/components/AppHeader/AppHeader.stories.tsx

@@ -44,12 +44,10 @@ const headerMenuItems = [
       {
         label: 'Elements',
         path: 'Elements',
-        quickMenuItems: [],
       },
       {
         label: 'Program Elements',
         path: 'Program Elements',
-        quickMenuItems: [],
       },
       {
         label: 'Step Groups',
@@ -74,7 +72,6 @@ const headerMenuItems = [
   {
     label: 'Test Data',
     path: 'Test Data',
-    subMenuItems: [],
   },
   {
     label: 'Test Dev',
@@ -109,7 +106,6 @@ const headerMenuItems = [
       {
         label: 'Executions',
         path: 'Executions',
-        quickMenuItems: [],
       },
     ],
   },

package/src/components/Modal/Modal.stories.tsx

@@ -58,7 +58,7 @@ export const Controlled: Story = {
             footerContent={<Button variant="primary" label="continue" />}
             customWidth="660px"
             customHeight="auto"
-            border="1px solid #E79B0866"
+            border="1px solid var(--warning-modal-border-color)"
           />
         )}
       </>

package/src/components/Modal/Modal.tsx

@@ -61,7 +61,7 @@ const Modal: React.FC<ModalProps> = ({
         style={{
           boxShadow: boxShadow,
           border: border,
-          borderRadius: '12px',
+          borderRadius: '8px',
           background: background,
         }}
         className="ff-modal-container"

package/src/components/Modal/modal.scss

@@ -12,7 +12,7 @@
 }
 
 .ff-modal-container {
-  border-radius: 12px;
+  border-radius: 8px;
   overflow: hidden;
 }
 
@@ -20,7 +20,7 @@
   background: var(--ff-mini-modal-border);
   position: relative;
   max-width: 100%;
-  padding: 8px;
+  padding: 16px;
 
   .ff-modal-header {
     height: 32px;
@@ -29,12 +29,12 @@
 }
 
 .modal-bottom-border {
-  border-bottom-left-radius: 12px;
-  border-bottom-right-radius: 12px;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
 }
 .modal-top-border {
-  border-top-left-radius: 12px;
-  border-top-right-radius: 12px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
 }
 
 .ff-modal-footer {
@@ -47,5 +47,5 @@
   justify-content: end;
   align-items: center;
   gap: 8px;
-  padding: 4px 8px;
+  padding: 4px 16px;
 }

package/src/components/Typography/Typography.scss

@@ -8,7 +8,7 @@
   font-weight: 400;
   src:
     local('Poppins-Regular'),
-    url(../../fonts/Poppins/Poppins-Regular.woff2) format('woff2');
+    url(../../assets/fonts/Poppins-Regular.woff2) format('woff2');
 }
 
 @font-face {
@@ -16,7 +16,7 @@
   font-weight: 500;
   src:
     local('Poppins-Medium'),
-    url(../../fonts/Poppins/Poppins-Medium.woff2) format('woff2');
+    url(../../assets/fonts/Poppins-Medium.woff2) format('woff2');
 }
 
 @font-face {
@@ -24,7 +24,7 @@
   font-weight: 600;
   src:
     local('Poppins-SemiBold'),
-    url(../../fonts/Poppins/Poppins-SemiBold.woff2) format('woff2');
+    url(../../assets/fonts/Poppins-SemiBold.woff2) format('woff2');
 }
 
 @font-face {
@@ -32,7 +32,7 @@
   font-weight: 700;
   src:
     local('Poppins-Bold'),
-    url(../../fonts/Poppins/Poppins-Bold.woff2) format('woff2');
+    url(../../assets/fonts/Poppins-Bold.woff2) format('woff2');
 }
 
 .ff-text {