Skip to content

Commit 12a0cff

Browse files
shirshankashirshanka
authored
Merge branch 'datahub-project:master' into master
2 parents 1e04935 + b8fad7e commit 12a0cff

File tree

5 files changed

+199
-58
lines changed

5 files changed

+199
-58
lines changed

‎datahub-web-react/src/app/entityV2/shared/constants.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@ export const REDESIGN_COLORS = {
4444
SECONDARY_LIGHT_GREY: '#9DA7C0',
4545
ACTION_ICON_GREY: '#676b75',
4646
AVATAR_STYLE_WHITE_BACKGROUND: '#ffffff66',
47-
GROUP_AVATAR_STYLE_GRADIENT: 'linear-gradient(0deg, #CB427B 0%, #CB427B 100%), #65B5C0',
48-
PROFILE_AVATAR_STYLE_GRADIENT: 'linear-gradient(93deg, #23c5b1 5.11%, #30d572 112.87%), #65b5c0',
47+
GROUP_AVATAR_STYLE_GRADIENT: 'linear-gradient(0deg, #705EE4 0%, #533FD1 100%), #4C39BE',
48+
PROFILE_AVATAR_STYLE_GRADIENT: 'linear-gradient(93deg, #705EE4 5.11%, #533FD1 112.87%), #4C39BE',
4949
SIDE_BAR_BORDER_RIGHT: '#e8e8e8',
5050
DARK_PURPLE: '#6C6B88',
5151
LINK_GREY: '#586287',

‎datahub-web-react/src/app/entityV2/shared/tabs/Lineage/LineageTab.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import LineageGraph from '@app/lineageV2/LineageGraph';
2+
import { colors } from '@components';
23
import React, { useContext } from 'react';
34
import styled from 'styled-components';
45
import { LineageDirection } from '../../../../../types.generated';
@@ -20,17 +21,17 @@ const LineageTabWrapper = styled.div`
2021
`;
2122

2223
const LineageSwitchWrapper = styled.div`
23-
border: 1px solid #5d09c9;
24+
border: 1px solid ${colors.violet[600]};
2425
border-radius: 4.5px;
2526
display: flex;
2627
margin: 13px 11px;
2728
width: ${LINEAGE_SWITCH_WIDTH * 2}px;
2829
`;
2930

3031
const LineageViewSwitch = styled.div<{ selected: boolean }>`
31-
background: ${({ selected }) => (selected ? '#5d09c9' : '#fff')};
32+
background: ${({ selected }) => (selected ? colors.violet[600] : '#fff')};
3233
border-radius: 3px;
33-
color: ${({ selected }) => (selected ? '#fff' : '#5d09c9')};
34+
color: ${({ selected }) => (selected ? '#fff' : colors.violet[600])};
3435
cursor: pointer;
3536
display: flex;
3637
font-size: 10px;

‎docs-website/docusaurus.config.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -82,13 +82,13 @@ module.exports = {
8282
// },
8383
// }),
8484
announcementBar: {
85-
id: "announcement-3",
86-
content:
87-
'<div style="display: flex; justify-content: center; align-items: center;width: 100%;"><!--img src="/img/acryl-logo-white-mark.svg" / --><!--div style="font-size: .8rem; font-weight: 600; background-color: white; color: #111; padding: 0px 8px; border-radius: 4px; margin-right:12px;">NEW</div--><p>Learn about DataHub 1.0</p><a href="https://youtu.be/B3IA6cLaKEk" target="_blank" class="button">Watch Now<span> →</span></a></div>',
88-
backgroundColor: "#111",
89-
textColor: "#ffffff",
90-
isCloseable: false,
91-
},
85+
id: "announcement-3",
86+
content:
87+
'<div class="shimmer-banner"><p>DataHub now supports the Model Context Protocol (MCP)</p><a href="https://pages.acryl.io/datahub-mcp-server?utm_source=docs-website&utm_medium=announcement_banner&utm_campaign=mcp_announcement" target="_blank" class="button">Read the announcement<span> →</span></a></div>',
88+
backgroundColor: "transparent",
89+
textColor: "#ffffff",
90+
isCloseable: false,
91+
},
9292
colorMode: {
9393
// Only support light mode.
9494
defaultMode: 'light',

‎docs-website/src/css/custom.css

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/* Shimmering announcement banner */
2+
.shimmer-banner {
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
width: 100%;
7+
background: linear-gradient(
8+
45deg,
9+
#6b46c1 0%,
10+
#9f7aea 25%,
11+
#b794f4 50%,
12+
#9f7aea 75%,
13+
#6b46c1 100%
14+
);
15+
background-size: 200% 200%;
16+
animation: shimmer 3s ease-in-out infinite;
17+
position: fixed;
18+
top: 0;
19+
left: 0;
20+
right: 0;
21+
z-index: 100;
22+
}
23+
24+
/* Add padding to the body to prevent content from hiding under the banner */
25+
body {
26+
padding-top: 40px; /* Adjust this value based on your banner height */
27+
}
28+
29+
.shimmer-banner p {
30+
margin: 0;
31+
padding: 8px 16px;
32+
font-weight: 500;
33+
}
34+
35+
.shimmer-banner .button {
36+
background: rgba(255, 255, 255, 0.2);
37+
border: 1px solid rgba(255, 255, 255, 0.4);
38+
border-radius: 4px;
39+
padding: 4px 12px;
40+
margin-left: 12px;
41+
color: white;
42+
text-decoration: none;
43+
transition: all 0.2s ease;
44+
}
45+
46+
.shimmer-banner .button:hover {
47+
background: rgba(255, 255, 255, 0.3);
48+
border-color: rgba(255, 255, 255, 0.6);
49+
}
50+
51+
@keyframes shimmer {
52+
0% {
53+
background-position: 0% 50%;
54+
}
55+
50% {
56+
background-position: 100% 50%;
57+
}
58+
100% {
59+
background-position: 0% 50%;
60+
}
61+
}

‎docs-website/src/styles/global.scss

+125-46
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,11 @@
2727

2828
/* Navbar */
2929
--ifm-navbar-background-color: var(--ifm-background-color);
30-
--ifm-navbar-height: 70px;
30+
--ifm-navbar-height: 60px;
3131
--ifm-navbar-item-padding-horizontal: 1rem;
3232

3333
/* Announcement Bar */
34-
--docusaurus-announcement-bar-height: 48px !important;
34+
--docusaurus-announcement-bar-height: 45px !important;
3535

3636
/* Rule */
3737
--ifm-hr-border-width: 1px 0 0 0;
@@ -104,71 +104,98 @@ main>h1 {
104104
/* Announcement Bar */
105105

106106
div[class^="announcementBar"] {
107-
z-index: calc(var(--ifm-z-index-fixed) - 1);
107+
z-index: 9999 !important;
108+
position: fixed !important;
109+
top: 0;
110+
left: 0;
111+
right: 0;
112+
height: var(--docusaurus-announcement-bar-height);
113+
font-size: 0.9rem;
108114

109115
div {
116+
height: 100%;
110117
display: flex;
111118
align-items: center;
112-
padding: 0 .5rem;
113-
justify-content: space-between;
119+
justify-content: center;
120+
padding: 0;
114121
font-size: 1rem;
115122

116-
>div {
123+
.shimmer-banner {
124+
width: 100%;
125+
height: 100%;
117126
display: flex;
127+
justify-content: center;
118128
align-items: center;
119-
> div {
120-
@media (max-width: 580px) {
121-
display: none;
122-
}
123-
}
124-
a>span {
125-
@media (max-width: 580px) {
126-
display: none;
127-
}
128-
}
129+
background: linear-gradient(
130+
45deg,
131+
#4C39BE 0%, /* Primary violet-600 */
132+
#5B4AC7 25%, /* Slightly lighter */
133+
#6A5BD0 50%, /* Mid-point */
134+
#5B4AC7 75%, /* Slightly lighter */
135+
#4C39BE 100% /* Primary violet-600 */
136+
);
137+
background-size: 200% 200%;
138+
animation: shimmer 3s ease-in-out infinite;
139+
font-size: 1rem;
129140

130-
>p {
131-
text-align: left;
132-
line-height: 1.1rem;
141+
p {
133142
margin: 0;
143+
padding: 0;
144+
color: white;
145+
font-weight: 500;
146+
}
134147

135-
@media (max-width: 580px) {
136-
font-size: .9rem;
148+
.button {
149+
background: rgba(241, 243, 253, 0.2); /* violet-0 with transparency */
150+
border: 1px solid rgba(241, 243, 253, 0.4); /* violet-0 with transparency */
151+
border-radius: 50px;
152+
padding: 4px 12px;
153+
margin-left: 12px;
154+
color: white;
155+
font-size: 0.8rem;
156+
text-decoration: none;
157+
transition: all 0.2s ease;
158+
159+
&:hover {
160+
background: rgba(241, 243, 253, 0.3);
161+
border-color: rgba(241, 243, 253, 0.6);
137162
}
138-
// >span {
139-
// @media (max-width: 780px) {
140-
// display: none;
141-
// }
142-
// }
143-
144-
// @media (max-width: 480px) {
145-
// display: none;
146-
// }
147163
}
148164
}
165+
}
166+
}
149167

150-
img {
151-
width: 24px;
152-
height: auto;
153-
margin-right: 1rem;
154-
}
155-
156-
a {
157-
color: #EFB300;
158-
text-decoration: none;
159-
font-size: 1rem;
160-
padding-right: 0;
161-
padding-left: 12px;
162-
min-width: 108px;
163-
}
168+
@keyframes shimmer {
169+
0% {
170+
background-position: 0% 50%;
171+
}
172+
50% {
173+
background-position: 100% 50%;
174+
}
175+
100% {
176+
background-position: 0% 50%;
164177
}
165178
}
166179

167-
/** Navbar */
180+
/* Add padding to body to prevent content from hiding under fixed elements */
181+
body {
182+
padding-top: calc(var(--docusaurus-announcement-bar-height) + var(--ifm-navbar-height));
183+
}
168184

185+
/** Navbar */
169186
.navbar {
187+
position: fixed !important;
188+
top: var(--docusaurus-announcement-bar-height);
189+
left: 0;
190+
right: 0;
191+
margin: 0;
192+
height: var(--ifm-navbar-height);
193+
z-index: 9998;
194+
background-color: var(--ifm-navbar-background-color);
195+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
196+
170197
.navbar__logo {
171-
height: 3rem;
198+
height: 2.5rem;
172199
}
173200

174201
.navbar__link {
@@ -524,6 +551,54 @@ div[class^="announcementBar"] {
524551
}
525552
}
526553

554+
/* Media queries for responsive design */
555+
@media (max-width: 768px) {
556+
div[class^="announcementBar"] {
557+
div {
558+
font-size: 0.8rem;
559+
560+
.shimmer-banner {
561+
font-size: 0.6rem;
562+
flex-direction: column; /* Stack items vertically on very small screens */
563+
564+
p {
565+
font-size: 0.8rem;
566+
}
567+
568+
.button {
569+
font-size: 0.6rem;
570+
margin-top: 1px;
571+
}
572+
}
573+
}
574+
}
575+
}
576+
577+
/* Extra small screens */
578+
@media (max-width: 480px) {
579+
div[class^="announcementBar"] {
580+
div {
581+
font-size: 0.6rem;
582+
583+
.shimmer-banner {
584+
font-size: 0.6rem;
585+
justify-content: left;
586+
flex-direction: column; /* Stack items vertically on very small screens */
587+
588+
589+
p {
590+
font-size: 0.6rem;
591+
justify-content: left;
592+
}
593+
594+
.button {
595+
font-size: 0.6rem;
596+
padding: 3px 10px;
597+
}
598+
}
599+
}
600+
}
601+
}
527602

528603

529604
@keyframes expand-on-scroll {
@@ -534,3 +609,7 @@ div[class^="announcementBar"] {
534609
transform: scaleY(1);
535610
}
536611
}
612+
613+
.announcementBar .button {
614+
border-radius: 50px;
615+
}

0 commit comments

Comments
 (0)