fixes in loader

kadena-community · Nov 27, 2024 · 9dbbcdd · 9dbbcdd
1 parent 82761e5
commit 9dbbcdd
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 12 deletions.
diff --git a/packages/libs/kode-ui/src/patterns/SectionCard/SectionCard.stories.tsx b/packages/libs/kode-ui/src/patterns/SectionCard/SectionCard.stories.tsx
@@ -155,7 +155,6 @@ export const withIcon: Story = {
     description: <>Our section is awesome</>,
     actions: <Actions />,
     children: 'This is the content for our section',
-    intent: 'info',
   },
   render: ({ stack, title, description, children, actions, intent }) => {
     return (
@@ -234,7 +233,6 @@ export const reverseBackground: Story = {
     description: <>Our section is awesome</>,
     actions: <Actions />,
     children: 'This is the content for our section',
-    intent: 'info',
   },
   render: ({ stack, title, description, children, actions, intent }) => {
     return (
@@ -270,7 +268,6 @@ export const noBackground: Story = {
     description: <>Our section is awesome</>,
     actions: <Actions />,
     children: 'This is the content for our section',
-    intent: 'info',
   },
   render: ({ stack, title, description, children, actions, intent }) => {
     return (

diff --git a/packages/libs/kode-ui/src/patterns/SectionCard/style.css.ts b/packages/libs/kode-ui/src/patterns/SectionCard/style.css.ts
@@ -5,10 +5,10 @@ export const headerClass = recipe({
     atoms({
       paddingInlineStart: 'n8',
       paddingBlockEnd: 'n8',
-
       paddingInlineEnd: 'lg',
       gap: 'md',
       alignItems: 'flex-start',
+      overflowX: 'hidden',
     }),
     {
       display: 'grid !important',
@@ -34,7 +34,18 @@ export const headerClass = recipe({
       horizontal: [
         responsiveStyle({
           xs: {
+            gridTemplateColumns: `1fr`,
+            gridTemplateRows: `max-content max-content max-content 1fr`,
+            gridTemplateAreas: `
+                  "header"
+                  "description"
+                  "actions"
+                  "fill"
+              `,
+          },
+          sm: {
             gridTemplateColumns: `2fr 1fr`,
+            gridTemplateRows: `max-content max-content`,
             gridTemplateAreas: `
                   "header actions"
                   "description actions"
@@ -52,13 +63,27 @@ export const headerClass = recipe({
           },
         }),
       ],
-      vertical: {
-        ridTemplateColumns: `2fr 1fr`,
-        gridTemplateAreas: `
+      vertical: [
+        responsiveStyle({
+          xs: {
+            gridTemplateColumns: `1fr`,
+            gridTemplateRows: `max-content max-content max-content 1fr`,
+            gridTemplateAreas: `
+                  "header"
+                  "description"
+                  "actions"
+                  "fill"
+              `,
+          },
+          sm: {
+            gridTemplateColumns: `2fr 1fr`,
+            gridTemplateAreas: `
                   "header actions"
                   "description actions"
               `,
-      },
+          },
+        }),
+      ],
     },
   },
 });
@@ -118,16 +143,26 @@ export const actionsClass = recipe({
       horizontal: [
         responsiveStyle({
           xs: {
+            justifyContent: 'flex-start',
+          },
+          sm: {
             justifyContent: 'flex-end',
           },
           md: {
             justifyContent: 'flex-start',
           },
         }),
       ],
-      vertical: {
-        justifyContent: 'flex-end',
-      },
+      vertical: [
+        responsiveStyle({
+          xs: {
+            justifyContent: 'flex-start',
+          },
+          sm: {
+            justifyContent: 'flex-end',
+          },
+        }),
+      ],
     },
   },
 });
@@ -178,6 +213,7 @@ export const iconWrapperClass = recipe({
       borderRadius: 'round',
       backgroundColor: 'layer.solid',
       border: 'normal',
+      borderColor: 'base.default',
     }),
     {
       boxSizing: 'border-box',
@@ -190,7 +226,8 @@ export const iconWrapperClass = recipe({
   variants: {
     isLoading: {
       true: {
-        border: 'none!important',
+        border: `${token('border.normal')} !important`,
+        borderColor: `${token('color.border.base.default')} !important`,
       },
       false: {},
     },