yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-11-11 17:03:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(ui): Updated page title and styling to match new ui (#13079)

Browse Source 
Co-authored-by: John Joyce <john@acryl.io>
This commit is contained in:
Anna Everhart 2025-04-04 11:07:16 -07:00 committed by GitHub
parent df119cea1a
commit 4301b1f08a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 56 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
datahub-web-react/src/app/settingsV2/Preferences.tsx
View File

@ -1,54 +1,67 @@
import { Card, Divider, message, Switch, Typography } from 'antd';
import React from 'react';
import { message } from 'antd';
import { Switch, PageTitle, colors } from '@components';
import styled from 'styled-components';
import { useUpdateUserSettingMutation } from '../../graphql/me.generated';
import { UserSetting } from '../../types.generated';
import analytics, { EventType } from '../analytics';
import { useUserContext } from '../context/useUserContext';
import { ANTD_GRAY } from '../entity/shared/constants';
import { useIsThemeV2, useIsThemeV2EnabledForUser, useIsThemeV2Toggleable } from '../useIsThemeV2';
const Page = styled.div`
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
gap: 16px;
`;
const HeaderContainer = styled.div`
margin-bottom: 24px;
`;
const StyledCard = styled.div`
border: 1px solid ${colors.gray[100]};
border-radius: 12px;
box-shadow: 0px 1px 2px 0px rgba(33, 23, 95, 0.07);
padding: 16px;
display: flex;
justify-content: space-between;
`;
const SourceContainer = styled.div`
width: 80%;
padding-top: 20px;
padding-right: 40px;
padding-left: 40px;
width: 100%;
padding: 16px 20px 16px 20px;
`;
const TokensContainer = styled.div`
padding-top: 0px;
`;
const TokensHeaderContainer = styled.div`
&& {
padding-left: 0px;
}
`;
const TokensTitle = styled(Typography.Title)`
&& {
margin-bottom: 8px;
}
const TextContainer = styled.div`
display: flex;
flex-direction: column;
flex: 1;
`;
const UserSettingRow = styled.div`
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
width: 100%;
`;
const DescriptionText = styled(Typography.Text)`
color: ${ANTD_GRAY[7]};
font-size: 11px;
const SettingText = styled.div`
font-size: 16px;
color: ${colors.gray[600]};
font-weight: 700;
`;
const SettingText = styled(Typography.Text)`
const DescriptionText = styled.div`
color: ${colors.gray[1700]};
font-size: 14px;
font-weight: 400;
line-height: 1.5;
`;
export const Preferences = () => {
@ -67,25 +80,22 @@ export const Preferences = () => {
<Page>
<SourceContainer>
<TokensContainer>
<TokensHeaderContainer>
<TokensTitle level={2}>Appearance</TokensTitle>
<Typography.Paragraph type="secondary">Manage your appearance settings.</Typography.Paragraph>
</TokensHeaderContainer>
<HeaderContainer>
<PageTitle title="Appearance" subTitle="Manage your appearance settings." />
</HeaderContainer>
</TokensContainer>
<Divider />
{showSimplifiedHomepageSetting && (
<Card>
<StyledCard>
<UserSettingRow>
<span>
<TextContainer>
<SettingText>Show simplified homepage </SettingText>
<div>
<DescriptionText>
Limits entity browse cards on homepage to Domains, Charts, Datasets, Dashboards
and Glossary Terms
</DescriptionText>
</div>
</span>
<DescriptionText>
Limits entity browse cards on homepage to Domains, Charts, Datasets, Dashboards and
Glossary Terms
</DescriptionText>
</TextContainer>
<Switch
label=""
checked={showSimplifiedHomepage}
onChange={async () => {
await updateUserSettingMutation({
@ -106,23 +116,21 @@ export const Preferences = () => {
}}
/>
</UserSettingRow>
</Card>
</StyledCard>
)}
{isThemeV2Toggleable && (
<>
<Card style={{ marginTop: 20 }}>
<StyledCard>
<UserSettingRow>
<span>
<TextContainer>
<SettingText>Try New User Experience</SettingText>
<div>
<DescriptionText>
Enable an early preview of the new DataHub UX - a complete makeover for your
app with a sleek new design and advanced features. Flip the switch and
refresh your browser to try it out!
</DescriptionText>
</div>
</span>
<DescriptionText>
Enable an early preview of the new DataHub UX - a complete makeover for your app
with a sleek new design and advanced features.
</DescriptionText>
</TextContainer>
<Switch
label=""
checked={isThemeV2EnabledForUser}
onChange={async () => {
await updateUserSettingMutation({
@ -144,11 +152,11 @@ export const Preferences = () => {
}}
/>
</UserSettingRow>
</Card>
</StyledCard>
</>
)}
{!showSimplifiedHomepageSetting && !isThemeV2Toggleable && (
<div style={{ color: ANTD_GRAY[7] }}>No appearance settings found.</div>
<div style={{ color: colors.gray[1700] }}>No appearance settings found.</div>
)}
</SourceContainer>
</Page>