Papercuts: st.image, st.header and st.sidebar (#4755)

* Center images when in full screen mode * Adjustments on header and sidebar icon paddings * Remove snapshot to trigger CI * Update sidebar snapshot * Fix regression: Images should only be centered in full screen mode * Change color for arrow * Remove snapshot to trigger build * Remove test to trigger snapshot Co-authored-by: Juan Garcia <jugarcia@c7rqqmwxhr.home>
streamlit · May 23, 2022 · b17b74c · b17b74c
1 parent 3775deb
commit b17b74c
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 6 deletions.
diff --git a/...end/cypress/snapshots/linux/2x/st_sidebar.spec.js/date-popover-sidebar.snap.png b/...end/cypress/snapshots/linux/2x/st_sidebar.spec.js/date-popover-sidebar.snap.png
diff --git a/frontend/src/components/core/Header/styled-components.ts b/frontend/src/components/core/Header/styled-components.ts
@@ -52,8 +52,8 @@ export const StyledHeaderDecoration = styled.div(({ theme }) => ({
 
 export const StyledHeaderToolbar = styled.div(({ theme }) => ({
   position: "absolute",
-  top: theme.spacing.none,
-  right: theme.spacing.lg,
+  top: theme.spacing.threeXS,
+  right: theme.spacing.twoXS,
   height: theme.sizes.headerHeight,
   display: "flex",
   flexDirection: "row",

diff --git a/frontend/src/components/core/Sidebar/styled-components.ts b/frontend/src/components/core/Sidebar/styled-components.ts
@@ -256,10 +256,9 @@ export const StyledSidebarUserContent = styled.div<
 
 export const StyledSidebarCloseButton = styled.div(({ theme }) => ({
   position: "absolute",
-  top: theme.spacing.sm,
-  right: theme.spacing.sm,
+  top: theme.spacing.xs,
+  right: theme.spacing.twoXS,
   zIndex: 1,
-  color: theme.colors.fadedText40,
 
   "&:hover button": {
     backgroundColor: transparentize(theme.colors.fadedText60, 0.5),
@@ -275,7 +274,7 @@ export const StyledSidebarCollapsedControl = styled.div<
 >(({ chevronDownshift, isCollapsed, theme }) => ({
   position: "fixed",
   top: chevronDownshift ? `${chevronDownshift}px` : theme.spacing.sm,
-  left: isCollapsed ? theme.spacing.sm : `-${theme.spacing.sm}`,
+  left: isCollapsed ? theme.spacing.twoXS : `-${theme.spacing.twoXS}`,
   zIndex: theme.zIndices.header,
 
   transition: "left 300ms",

diff --git a/frontend/src/components/shared/FullScreenWrapper/styled-components.ts b/frontend/src/components/shared/FullScreenWrapper/styled-components.ts
@@ -97,6 +97,10 @@ export const StyledFullScreenFrame = styled.div<StyledFullScreenFrameProps>(
           display: "flex", // To avoid extra spaces that lead to scrollbars.
           alignItems: "center",
           justifyContent: "center",
+
+          div: {
+            margin: "auto",
+          },
         }
       : {}),
   })