diff --git a/less/documentDB.less b/less/documentDB.less index 457df880d..3950aad9c 100644 --- a/less/documentDB.less +++ b/less/documentDB.less @@ -2643,7 +2643,7 @@ a:link { .tabPanesContainer { flex-grow: 1; - overflow-y: scroll; + overflow: hidden; background-color: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); } @@ -2651,6 +2651,7 @@ a:link { .tabs-container { height: 100%; width: 100%; + overflow-y: auto; } .paddingspan4 { diff --git a/less/documentDBFabric.less b/less/documentDBFabric.less index ef14a5bd7..7e3c15429 100644 --- a/less/documentDBFabric.less +++ b/less/documentDBFabric.less @@ -7,6 +7,7 @@ html { body { font-family: @FabricFont; background-color: #f5f5f5; + --colorCompoundBrandBackground: @FabricAccentMedium; } a { diff --git a/src/Explorer/SplashScreen/SplashScreen.tsx b/src/Explorer/SplashScreen/SplashScreen.tsx index dd507bf48..f87bd3ee8 100644 --- a/src/Explorer/SplashScreen/SplashScreen.tsx +++ b/src/Explorer/SplashScreen/SplashScreen.tsx @@ -61,7 +61,8 @@ const useStyles = makeStyles({ display: "flex", flexDirection: "column", alignItems: "center", - minHeight: "100vh", + height: "100%", + overflowY: "auto", backgroundColor: "var(--colorNeutralBackground1)", color: "var(--colorNeutralForeground1)", }, @@ -73,20 +74,19 @@ const useStyles = makeStyles({ }, title: { fontSize: "48px", - fontWeight: "500", + fontWeight: "400", margin: "16px auto", color: "var(--colorNeutralForeground1)", }, subtitle: { fontSize: "18px", - marginBottom: "40px", color: "var(--colorNeutralForeground2)", }, cardContainer: { display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "16px", - width: "66%", + width: "60%", margin: "0 auto", backgroundColor: "var(--colorNeutralBackground1)", color: "var(--colorNeutralForeground1)", @@ -100,7 +100,7 @@ const useStyles = makeStyles({ color: "var(--colorNeutralForeground1)", border: "1px solid var(--colorNeutralStroke1)", borderRadius: "4px", - boxShadow: "var(--shadow4)", + boxShadow: "rgba(0, 0, 0, 0.25) 0px 4px 4px", cursor: "pointer", minHeight: "150px", "&:hover": { @@ -128,11 +128,10 @@ const useStyles = makeStyles({ textAlign: "left", }, moreStuffContainer: { - display: "grid", - gridTemplateColumns: "repeat(3, 1fr)", + display: "flex", + justifyContent: "space-between", gap: "32px", - width: "66%", - margin: "40px auto", + width: "90%", }, moreStuffColumn: { display: "flex", @@ -227,7 +226,7 @@ export const SplashScreen: React.FC = ({ explorer }) => { return ( @@ -903,9 +902,9 @@ export const SplashScreen: React.FC = ({ explorer }) => { return (
-

+

Welcome to Azure Cosmos DB -

+
Globally distributed, multi-model database service for any scale
{getSplashScreenButtons()} {useCarousel.getState().showCoachMark && ( diff --git a/src/Explorer/SplashScreen/SplashScreenButton.tsx b/src/Explorer/SplashScreen/SplashScreenButton.tsx index 125a195e7..29c1dcb9a 100644 --- a/src/Explorer/SplashScreen/SplashScreenButton.tsx +++ b/src/Explorer/SplashScreen/SplashScreenButton.tsx @@ -15,7 +15,7 @@ const useStyles = makeStyles({ button: { border: "1px solid var(--colorNeutralStroke1)", boxSizing: "border-box", - boxShadow: "var(--shadow4)", + boxShadow: "rgba(0, 0, 0, 0.25) 0px 4px 4px", borderRadius: "4px", padding: "32px 16px", backgroundColor: "var(--colorNeutralBackground1)",