feat(ui-core): spacing on grid (#16683)

* feat: spacing on grid * feat: more spacing for tablet ui * fix: breakpoints for tablet * Update GridContainer.css.ts * feat: add logic to new wrapper --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
island-is · Nov 22, 2024 · 6f0354c · 6f0354c
1 parent 7208b48
commit 6f0354c
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 10 deletions.
diff --git a/apps/portals/my-pages/src/components/Layout/SidebarLayout.tsx b/apps/portals/my-pages/src/components/Layout/SidebarLayout.tsx
@@ -41,7 +41,7 @@ export const SidebarLayout: FC<SidebarLayoutProps> = ({
               offset={['0', '0', '0', '0', '1/9']}
               span={['9/9', '9/9', '9/9', '9/9', '8/9']}
             >
-              <Box paddingLeft={[0, 0, 6, 6, 0]}>{children}</Box>
+              <Box paddingLeft={[0, 0, 3, 6, 0]}>{children}</Box>
             </GridColumn>
           </GridRow>
         </GridContainer>

diff --git a/libs/island-ui/core/src/lib/Grid/GridContainer/GridContainer.css.ts b/libs/island-ui/core/src/lib/Grid/GridContainer/GridContainer.css.ts
@@ -6,8 +6,8 @@ export const root = style({
   boxSizing: 'border-box',
   margin: '0 auto',
   maxWidth: theme.breakpoints.xl,
-  paddingLeft: theme.grid.gutter.mobile * 2,
-  paddingRight: theme.grid.gutter.mobile * 2,
+  paddingLeft: theme.spacing[2],
+  paddingRight: theme.spacing[2],
   width: '100%',
   selectors: {
     // Opt out of horizontal padding on nested grids
@@ -18,9 +18,19 @@ export const root = style({
   },
 
   '@media': {
-    [`screen and (min-width: ${theme.breakpoints.md}px)`]: {
-      paddingLeft: theme.grid.gutter.desktop * 2,
-      paddingRight: theme.grid.gutter.desktop * 2,
+    [`screen and (min-width: ${theme.breakpoints.sm}px)`]: {
+      paddingLeft: theme.spacing[3],
+      paddingRight: theme.spacing[3],
+      selectors: {
+        ['& &']: {
+          paddingLeft: 0,
+          paddingRight: 0,
+        },
+      },
+    },
+    [`screen and (min-width: ${theme.breakpoints.lg}px)`]: {
+      paddingLeft: theme.spacing[6],
+      paddingRight: theme.spacing[6],
       selectors: {
         ['& &']: {
           paddingLeft: 0,

diff --git a/libs/portals/my-pages/core/src/components/IntroHeader/IntroHeader.tsx b/libs/portals/my-pages/core/src/components/IntroHeader/IntroHeader.tsx
@@ -38,12 +38,19 @@ export const IntroHeader = (props: IntroHeaderProps & Props) => {
   const { formatMessage } = useLocale()
   const { width } = useWindowSize()
   const isMobile = width < theme.breakpoints.md
+  const isTablet = width < theme.breakpoints.lg && !isMobile
 
   const { data: organization, loading } = useOrganization(
     props.serviceProviderSlug ?? ISLANDIS_SLUG,
   )
 
-  const columnSpan = isMobile ? '8/8' : props.narrow ? '4/8' : '5/8'
+  const columnSpan = isMobile
+    ? '8/8'
+    : isTablet
+    ? '6/8'
+    : props.narrow
+    ? '4/8'
+    : '5/8'
 
   return (
     <GridRow marginBottom={marginBottom ?? 4}>
@@ -71,7 +78,7 @@ export const IntroHeader = (props: IntroHeaderProps & Props) => {
         )}
       </GridColumn>
       {!isMobile && props.serviceProviderSlug && organization && (
-        <GridColumn span={'2/8'} offset={'1/8'}>
+        <GridColumn span={'2/8'} offset={isTablet ? '0' : '1/8'}>
           <InstitutionPanel
             loading={loading}
             linkHref={organization.link ?? ''}

diff --git a/libs/portals/my-pages/core/src/components/IntroWrapper/IntroWrapper.tsx b/libs/portals/my-pages/core/src/components/IntroWrapper/IntroWrapper.tsx
@@ -53,12 +53,20 @@ export const IntroWrapper = (props: IntroWrapperProps) => {
   const { formatMessage } = useLocale()
   const { width } = useWindowSize()
   const isMobile = width < theme.breakpoints.md
+  const isTablet = width < theme.breakpoints.lg && !isMobile
 
   const { data: organization, loading } = useOrganization(
     props.serviceProviderSlug ?? ISLANDIS_SLUG,
   )
 
-  const columnSpan = isMobile ? '8/8' : props.narrow ? '4/8' : '5/8'
+  const columnSpan = isMobile
+    ? '8/8'
+    : isTablet
+    ? '6/8'
+    : props.narrow
+    ? '4/8'
+    : '5/8'
+
   return (
     <Box>
       <GridRow marginBottom={marginBottom ?? 4}>
@@ -88,7 +96,7 @@ export const IntroWrapper = (props: IntroWrapperProps) => {
           )}
         </GridColumn>
         {!isMobile && props.serviceProviderSlug && organization?.link && (
-          <GridColumn span={'2/8'} offset={'1/8'}>
+          <GridColumn span={'2/8'} offset={isTablet ? '0' : '1/8'}>
             <InstitutionPanel
               loading={loading}
               linkHref={organization.link ?? ''}