Fix bug in BoxOverride and tweak alignments

- Fix bug in BoxOverride where `sx` prop was not applied if no variant - Fix button issues - Fix alignment issues
splitgraph · Aug 3, 2021 · 9b3e8e2 · 9b3e8e2
1 parent 2d23188
commit 9b3e8e2
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 36 deletions.
diff --git a/tdesign/src/Box/BoxOverride.tsx b/tdesign/src/Box/BoxOverride.tsx
@@ -20,12 +20,12 @@ const paddedContentAreaStyle = {
   paddingLeft: (theme) => [
     "2rem",
     "2rem",
-    `calc(67.5px + ${theme.constants.leftMargin})`,
+    theme.constants.leftMarginLogoAligned,
   ],
   paddingRight: (theme) => [
     "2rem",
     "2rem",
-    `calc(67.5px + ${theme.constants.rightMargin})`,
+    theme.constants.rightMarginNavAligned,
   ],
 };
 const errorNoticeStyle = {
@@ -95,7 +95,7 @@ const BoxOverride = (props: BoxOverrideProps) => {
   } else if (variant === "notice") {
     return <Box sx={{ ...sx, ...noticeStyle }} {...rest} />;
   }
-  return <Box {...rest} />;
+  return <Box sx={sx} {...rest} />;
 };
 
 export default BoxOverride;
diff --git a/tdesign/src/ConnectDDNButton/ConnectDDNButton.tsx b/tdesign/src/ConnectDDNButton/ConnectDDNButton.tsx
@@ -1,4 +1,4 @@
-import { Box, Button } from "@material-ui/core";
+import { Button } from "@material-ui/core";
 
 export interface IConnectDDNButtonProps {
   connectParams?: string;
@@ -12,34 +12,13 @@ const ConnectDDNButton = ({
   children,
 }: IConnectDDNButtonProps) => {
   return (
-    <Box
-      sx={{
-        display: "inline",
-        a: {
-          display: "block",
-          textDecoration: "none",
-          color: "white",
-          ":hover": {
-            color: "sglightblue.main",
-            cursor: "pointer",
-          },
-          mx: "1rem",
-        },
-      }}
+    <Button
+      variant="contained"
+      href={connectParams ? `${connectURL}?${connectParams}` : `${connectURL}`}
+      sx={{ backgroundColor: "legacySecondary.main" }}
     >
-      <a
-        href={
-          connectParams ? `${connectURL}?${connectParams}` : `${connectURL}`
-        }
-      >
-        <Button
-          variant="contained"
-          sx={{ backgroundColor: "legacySecondary.main" }}
-        >
-          {children || <>Connect to DDN</>}
-        </Button>
-      </a>
-    </Box>
+      {children || <>Connect to DDN</>}
+    </Button>
   );
 };
 

diff --git a/tdesign/src/Layout/Header/Header.tsx b/tdesign/src/Layout/Header/Header.tsx
@@ -24,8 +24,7 @@ const Header = ({ children }: HeaderProps) => {
             "min-content repeat(1, minmax(25vw, 1fr)) min-content",
           gridAutoFlow: "column",
           // willChange: "transform",
-          background:
-            "linear-gradient(0deg, rgba(42, 129, 246, 0.02), rgba(42, 129, 246, 0.02)), #FFFFFF",
+          background: (theme) => theme.palette.navbar.light.main,
           ".header--left, .header--center, .header--right": {
             minHeight: "56px",
           },

diff --git a/tdesign/src/themes/muiTheme.ts b/tdesign/src/themes/muiTheme.ts
@@ -27,6 +27,8 @@ export const muiTheme = createMuiTheme({
     leftMargin: `max(0px, calc((100vw - ${breakpointValues.desktop}px) / 2))`,
     rightMargin: `max(0px, calc((100vw - ${breakpointValues.desktop}px) / 2))`,
     leftMarginLogoAligned: `max(0px, calc((100vw - ${breakpointValues.desktop}px) / 2 + 22.5px + 40px))`,
+    rightMarginNavAligned: `max(0px, calc((100vw - ${breakpointValues.desktop}px) / 2))`,
+    brandGradient: `linear-gradient(90deg, rgb(249 69 105 / 100%) 0%, rgb(255 128 153 / 50%) 100%)`,
   },
   palette: {
     contrastThreshold: 3,
@@ -64,11 +66,23 @@ export const muiTheme = createMuiTheme({
           background: "radial-gradient(rgb(85 85 85 / 32%) 1px, transparent 0)",
           backgroundSize: "40px 40px",
         },
+
+        // todo: This should be able to be a texturize callback
+        grid: {
+          // backgroundColor: "#1e4000",
+          // opacity: "0.1",
+          background: `linear-gradient(rgb(0 0 0 / 4%) 1px, transparent 1px),
+          linear-gradient(to right, rgb(0 0 0 / 4%) 1px, transparent 1px)`,
+          backgroundSize: "24px 24px",
+        },
       },
     },
     // texturize:
     navbar: {
-      light: { main: "#FBFCFF" },
+      light: {
+        /*main: "#FBFCFF",*/
+        main: `linear-gradient(0deg, rgba(42, 129, 246, 0.02), rgba(42, 129, 246, 0.02)),#FFFFFF`,
+      },
       dark: { main: "#201316" },
     },
     footer: {
@@ -246,6 +260,10 @@ export const muiTheme = createMuiTheme({
       styleOverrides: {
         root: {
           color: "link.main",
+          textDecoration: "none",
+          "&:hover": {
+            textDecoration: "underline",
+          },
           "&:visited": {
             color: "link.main",
           },
@@ -255,7 +273,7 @@ export const muiTheme = createMuiTheme({
         },
       },
       defaultProps: {
-        color: "link,main",
+        color: "link.main",
       },
     },
     MuiButtonBase: {
@@ -337,7 +355,8 @@ declare module "@material-ui/core/styles/createPalette" {
   }
 
   interface TexturePalette {
-    dots: React.CSSProperties;
+    dots?: React.CSSProperties;
+    grid?: React.CSSProperties;
   }
 
   interface GrayPalette {
@@ -408,6 +427,7 @@ declare module "@material-ui/core/styles/createPalette" {
 
   interface TexturePaletteOptions {
     dots?: React.CSSProperties;
+    grid?: React.CSSProperties;
   }
 
   interface GrayPaletteOptions {