Merge pull request #30 from CommandOSSLabs/improvement/extend-blob

Improvement/extend blob

Author: UyLeQuoc

packages/file-manager/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @cmdoss/file-manager
 
+## 2.5.0
+
+### Minor Changes
+
+- d8e5864: add storage cost section in extend blob modal
+
+### Patch Changes
+
+- Updated dependencies [d8e5864]
+  - @cmdoss/walrus-site-builder@2.5.0
+
 ## 2.4.0
 
 ### Minor Changes

packages/file-manager/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmdoss/file-manager",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "license": "MIT",
   "type": "module",
   "exports": "./dist/index.js",

packages/walrus-site-builder-react/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @cmdoss/walrus-site-builder-react
 
+## 2.5.0
+
+### Minor Changes
+
+- d8e5864: add storage cost section in extend blob modal
+
+### Patch Changes
+
+- Updated dependencies [d8e5864]
+  - @cmdoss/walrus-site-builder@2.5.0
+  - @cmdoss/file-manager@2.5.0
+
 ## 2.4.0
 
 ### Minor Changes

packages/walrus-site-builder-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmdoss/walrus-site-builder-react",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "license": "MIT",
   "type": "module",
   "exports": {

packages/walrus-site-builder-react/src/components/extend-time-dialog/ExtendTimeDialog.css.ts

@@ -61,14 +61,14 @@ export const spinner = style({
 
 export const header = style({
   position: 'relative',
-  marginBottom: themeVars.spacing.md
+  marginBottom: themeVars.spacing.sm
 })
 
 export const title = style({
-  fontSize: '1.125rem',
+  fontSize: '1rem',
   fontWeight: 600,
   color: themeVars.colors.foreground,
-  marginBottom: themeVars.spacing.xs
+  marginBottom: '0.25rem'
 })
 
 export const description = style({
@@ -95,21 +95,21 @@ export const closeButton = style({
 export const body = style({
   display: 'flex',
   flexDirection: 'column',
-  gap: themeVars.spacing.md,
+  gap: themeVars.spacing.sm,
   flex: 1,
   overflow: 'auto'
 })
 
 export const formSection = style({
   display: 'flex',
   flexDirection: 'column',
-  gap: themeVars.spacing.md
+  gap: themeVars.spacing.sm
 })
 
 export const fieldGroup = style({
   display: 'flex',
   flexDirection: 'column',
-  gap: themeVars.spacing.xs
+  gap: '0.375rem'
 })
 
 export const dateInputWrapper = style({
@@ -145,7 +145,8 @@ export const errorText = style({
 export const summaryGrid = style({
   display: 'grid',
   gridTemplateColumns: 'repeat(2, 1fr)',
-  gap: themeVars.spacing.md,
+  gap: themeVars.spacing.sm,
+  marginTop: '0.5rem',
   '@media': {
     '(max-width: 768px)': {
       gridTemplateColumns: '1fr'
@@ -160,25 +161,31 @@ export const summaryCard = style({
   padding: themeVars.spacing.md,
   display: 'flex',
   flexDirection: 'column',
-  gap: themeVars.spacing.xs
+  gap: '0.375rem',
+  transition: 'all 0.2s ease',
+  ':hover': {
+    borderColor: themeVars.colors.border,
+    backgroundColor: `${themeVars.colors.muted}60`
+  }
 })
 
 export const summaryHeader = style({
   display: 'flex',
   alignItems: 'center',
-  gap: themeVars.spacing.xs,
+  gap: '0.375rem',
   fontSize: '0.75rem',
-  color: themeVars.colors.mutedForeground
+  color: themeVars.colors.mutedForeground,
+  marginBottom: '0.25rem'
 })
 
 export const summaryContent = style({
   display: 'flex',
   flexDirection: 'column',
-  gap: themeVars.spacing.xs
+  gap: '0.25rem'
 })
 
 export const summaryValue = style({
-  fontSize: '0.875rem',
+  fontSize: '0.8125rem',
   fontWeight: 600,
   color: themeVars.colors.foreground
 })
@@ -215,8 +222,131 @@ export const summaryRow = style({
 
 export const footer = style({
   display: 'flex',
-  gap: themeVars.spacing.md,
+  gap: themeVars.spacing.sm,
   justifyContent: 'flex-end',
-  marginTop: themeVars.spacing.md,
-  paddingTop: themeVars.spacing.md
+  marginTop: themeVars.spacing.sm,
+  paddingTop: themeVars.spacing.sm,
+  borderTop: `1px solid ${themeVars.colors.border}`
+})
+
+export const costSection = style({
+  borderRadius: themeVars.radius.md,
+  border: `1px solid ${themeVars.colors.border}`,
+  backgroundColor: `${themeVars.colors.muted}40`,
+  padding: themeVars.spacing.md,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.5rem',
+  marginTop: '0.5rem',
+  transition: 'all 0.2s ease',
+  ':hover': {
+    borderColor: themeVars.colors.border,
+    backgroundColor: `${themeVars.colors.muted}60`
+  }
+})
+
+export const costHeader = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.375rem',
+  fontSize: '0.875rem',
+  fontWeight: 600,
+  color: themeVars.colors.foreground,
+  marginBottom: '0.25rem'
+})
+
+export const costContent = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.375rem'
+})
+
+export const costRow = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  fontSize: '0.8125rem'
+})
+
+export const costLabel = style({
+  color: themeVars.colors.mutedForeground
+})
+
+export const costValue = style({
+  fontWeight: 500,
+  color: themeVars.colors.foreground
+})
+
+export const costLoading = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.375rem',
+  fontSize: '0.875rem',
+  color: themeVars.colors.mutedForeground,
+  padding: '0.5rem',
+  justifyContent: 'center'
+})
+
+export const costError = style({
+  fontSize: '0.875rem',
+  color: themeVars.colors.destructive,
+  padding: '0.5rem',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.375rem',
+  justifyContent: 'center',
+  borderRadius: themeVars.radius.sm,
+  backgroundColor: `${themeVars.colors.destructive}10`
+})
+
+export const costWarning = style({
+  fontSize: '0.75rem',
+  color: themeVars.colors.mutedForeground,
+  padding: '0.5rem',
+  display: 'flex',
+  alignItems: 'flex-start',
+  gap: '0.375rem',
+  borderRadius: themeVars.radius.sm,
+  backgroundColor: 'rgba(245, 158, 11, 0.1)',
+  border: '1px solid rgba(245, 158, 11, 0.2)',
+  marginTop: '0.25rem'
+})
+
+export const costDivider = style({
+  height: '1px',
+  backgroundColor: themeVars.colors.border,
+  margin: '0.5rem 0'
+})
+
+export const costTotalRow = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  paddingTop: '0.5rem',
+  marginTop: '0.25rem',
+  borderTop: `1px solid ${themeVars.colors.border}`
+})
+
+export const costTotalLabel = style({
+  fontSize: '0.875rem',
+  fontWeight: 600,
+  color: themeVars.colors.foreground
+})
+
+export const costTotalValue = style({
+  fontSize: '0.9375rem',
+  fontWeight: 700,
+  color: themeVars.colors.foreground
+})
+
+export const estimatedBadge = style({
+  fontSize: '0.625rem',
+  fontWeight: 600,
+  padding: '0.125rem 0.375rem',
+  borderRadius: themeVars.radius.sm,
+  backgroundColor: 'rgba(245, 158, 11, 0.2)',
+  color: '#f59e0b',
+  textTransform: 'uppercase',
+  letterSpacing: '0.025em',
+  marginLeft: 'auto'
 })