mirror of
https://github.com/open-metadata/OpenMetadata.git
synced 2026-01-06 04:26:57 +00:00
Added Github and slack join buttons to welcome modal, refactored appbar URLs to constants (#691)
* Added Github and slack join buttons to welcome modal, refactored appbar URLs to constants * Addressing changes
This commit is contained in:
darth-coder00
GitHub
parent
145b3283c2
commit
9657b53257
@ -0,0 +1 @@
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="slack" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="#6B7280"><path d="M94.12 315.1c0 25.9-21.16 47.06-47.06 47.06S0 341 0 315.1c0-25.9 21.16-47.06 47.06-47.06h47.06v47.06zm23.72 0c0-25.9 21.16-47.06 47.06-47.06s47.06 21.16 47.06 47.06v117.84c0 25.9-21.16 47.06-47.06 47.06s-47.06-21.16-47.06-47.06V315.1zm47.06-188.98c-25.9 0-47.06-21.16-47.06-47.06S139 32 164.9 32s47.06 21.16 47.06 47.06v47.06H164.9zm0 23.72c25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06H47.06C21.16 243.96 0 222.8 0 196.9s21.16-47.06 47.06-47.06H164.9zm188.98 47.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06h-47.06V196.9zm-23.72 0c0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06V79.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06V196.9zM283.1 385.88c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06v-47.06h47.06zm0-23.72c-25.9 0-47.06-21.16-47.06-47.06 0-25.9 21.16-47.06 47.06-47.06h117.84c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06H283.1z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -1 +1 @@
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="slack" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="#6B7280"><path d="M94.12 315.1c0 25.9-21.16 47.06-47.06 47.06S0 341 0 315.1c0-25.9 21.16-47.06 47.06-47.06h47.06v47.06zm23.72 0c0-25.9 21.16-47.06 47.06-47.06s47.06 21.16 47.06 47.06v117.84c0 25.9-21.16 47.06-47.06 47.06s-47.06-21.16-47.06-47.06V315.1zm47.06-188.98c-25.9 0-47.06-21.16-47.06-47.06S139 32 164.9 32s47.06 21.16 47.06 47.06v47.06H164.9zm0 23.72c25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06H47.06C21.16 243.96 0 222.8 0 196.9s21.16-47.06 47.06-47.06H164.9zm188.98 47.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06h-47.06V196.9zm-23.72 0c0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06V79.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06V196.9zM283.1 385.88c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06v-47.06h47.06zm0-23.72c-25.9 0-47.06-21.16-47.06-47.06 0-25.9 21.16-47.06 47.06-47.06h117.84c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06H283.1z"></path></svg>
|
||||
<svg shape-rendering="geometricPrecision" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" class="c-slacklogo--white" width="25" height="25"><title>Slack</title><g fill="none"><path d="m21.902.148c-3.299 0-5.973 2.68-5.973 5.985a5.979 5.979 0 0 0 5.973 5.985h5.974v-5.985a5.98 5.98 0 0 0 -5.974-5.985m0 15.96h-15.929c-3.299 0-5.973 2.68-5.973 5.986 0 3.305 2.674 5.985 5.973 5.985h15.93c3.298 0 5.973-2.68 5.973-5.985 0-3.306-2.675-5.986-5.974-5.986" fill="#36C5F0"></path><path d="m59.734 22.094c0-3.306-2.675-5.986-5.974-5.986s-5.973 2.68-5.973 5.986v5.985h5.973a5.98 5.98 0 0 0 5.974-5.985m-15.929 0v-15.961a5.98 5.98 0 0 0 -5.974-5.985c-3.299 0-5.973 2.68-5.973 5.985v15.96c0 3.307 2.674 5.987 5.973 5.987a5.98 5.98 0 0 0 5.974-5.985" fill="#2EB67D"></path><path d="m37.831 60a5.98 5.98 0 0 0 5.974-5.985 5.98 5.98 0 0 0 -5.974-5.985h-5.973v5.985c0 3.305 2.674 5.985 5.973 5.985m0-15.96h15.93c3.298 0 5.973-2.68 5.973-5.986a5.98 5.98 0 0 0 -5.974-5.985h-15.929c-3.299 0-5.973 2.68-5.973 5.985a5.979 5.979 0 0 0 5.973 5.985" fill="#ECB22E"></path><path d="m0 38.054a5.979 5.979 0 0 0 5.973 5.985 5.98 5.98 0 0 0 5.974-5.985v-5.985h-5.974c-3.299 0-5.973 2.68-5.973 5.985m15.929 0v15.96c0 3.306 2.674 5.986 5.973 5.986a5.98 5.98 0 0 0 5.974-5.985v-15.961a5.979 5.979 0 0 0 -5.974-5.985c-3.299 0-5.973 2.68-5.973 5.985" fill="#E01E5A"></path></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.3 KiB |
@ -1,6 +1,7 @@
|
||||
import classNames from 'classnames';
|
||||
import React, { FunctionComponent, useState } from 'react';
|
||||
import BGConfetti from '../../../assets/img/confetti-bg.jpeg';
|
||||
import { urlGithubRepo, urlJoinSlack } from '../../../constants/url.const';
|
||||
import SVGIcons, { Icons } from '../../../utils/SvgUtils';
|
||||
import { Button } from '../../buttons/Button/Button';
|
||||
|
||||
@ -59,7 +60,7 @@ export const FirstTimeUserModal: FunctionComponent<Props> = ({
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tw-modal-body tw-relative tw-h-40 tw-justify-start tw-items-center">
|
||||
<div className="tw-modal-body tw-relative tw-h-32 tw-justify-start tw-items-center">
|
||||
{description.map((d, i) => (
|
||||
<p
|
||||
className={classNames(
|
||||
@ -73,6 +74,21 @@ export const FirstTimeUserModal: FunctionComponent<Props> = ({
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
<div className="tw-w-full tw-text-center">
|
||||
<a href={urlGithubRepo} rel="noopener noreferrer" target="_blank">
|
||||
<button className="tw-welcome-button tw-text-grey-body tw-mr-4">
|
||||
<SVGIcons alt="Github Logo" icon={Icons.GITHUB_ICON} width="16" />
|
||||
<span className="tw-ml-3">Start us on Github</span>
|
||||
</button>
|
||||
</a>
|
||||
<a href={urlJoinSlack} rel="noopener noreferrer" target="_blank">
|
||||
<button className="tw-welcome-button tw-text-grey-body">
|
||||
<SVGIcons alt="Github Logo" icon={Icons.SLACK} width="16" />
|
||||
<span className="tw-ml-3">Join us on Slack</span>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="tw-modal-footer tw-border-0 tw-justify-between">
|
||||
<Button
|
||||
className={classNames(
|
||||
|
||||
@ -35,6 +35,7 @@ import {
|
||||
navLinkSettings,
|
||||
ROUTES,
|
||||
} from '../../constants/constants';
|
||||
import { urlGitbookDocs, urlJoinSlack } from '../../constants/url.const';
|
||||
import { useAuth } from '../../hooks/authHooks';
|
||||
import { userSignOut } from '../../utils/AuthUtils';
|
||||
import {
|
||||
@ -81,41 +82,41 @@ const Appbar: React.FC = (): JSX.Element => {
|
||||
const supportLinks = [
|
||||
{
|
||||
name: `Docs`,
|
||||
to: 'https://docs.open-metadata.org/',
|
||||
to: urlGitbookDocs,
|
||||
isOpenNewTab: true,
|
||||
disabled: false,
|
||||
icon: (
|
||||
<SVGIcons
|
||||
alt="Doc icon"
|
||||
className="tw-align-middle tw--mt-0.5 tw-mr-0.5"
|
||||
icon="doc"
|
||||
icon={Icons.DOC}
|
||||
width="12"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: `API`,
|
||||
to: '/docs',
|
||||
to: ROUTES.SWAGGER,
|
||||
disabled: false,
|
||||
icon: (
|
||||
<SVGIcons
|
||||
alt="API icon"
|
||||
className="tw-align-middle tw--mt-0.5 tw-mr-0.5"
|
||||
icon="api"
|
||||
icon={Icons.API}
|
||||
width="12"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: `Slack`,
|
||||
to: 'https://slack.open-metadata.org',
|
||||
to: urlJoinSlack,
|
||||
disabled: false,
|
||||
isOpenNewTab: true,
|
||||
icon: (
|
||||
<SVGIcons
|
||||
alt="slack icon"
|
||||
className="tw-align-middle tw-mr-0.5"
|
||||
icon="slack"
|
||||
className="tw-align-middle tw-mr-0.5"
|
||||
icon={Icons.SLACK_GREY}
|
||||
width="12"
|
||||
/>
|
||||
),
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
export const urlJoinSlack = 'https://slack.open-metadata.org';
|
||||
export const urlGitbookDocs = 'https://docs.open-metadata.org/';
|
||||
export const urlGithubRepo = 'https://github.com/open-metadata/OpenMetadata';
|
||||
@ -167,10 +167,15 @@
|
||||
}
|
||||
|
||||
.tw-signin-button {
|
||||
@apply tw-rounded-md tw-bg-white tw-w-60 tw-h-9 tw-px-4 tw-mt-2 tw-border tw-font-medium;
|
||||
@apply tw-rounded-md tw-bg-white tw-h-9 tw-w-60 tw-mt-2 tw-px-4 tw-border tw-font-medium;
|
||||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.tw-signin-button:hover {
|
||||
.tw-welcome-button {
|
||||
@apply tw-rounded-md tw-bg-white tw-h-7 tw-w-48 tw-px-4 tw-border tw-font-normal tw-text-xs;
|
||||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.tw-signin-button:hover,
|
||||
.tw-welcome-button:hover {
|
||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
|
||||
@ -57,6 +57,7 @@ import IconPipeline from '../assets/svg/pipeline.svg';
|
||||
import IconProfiler from '../assets/svg/profiler.svg';
|
||||
import IconHelpCircle from '../assets/svg/question-circle.svg';
|
||||
import IconSetting from '../assets/svg/service.svg';
|
||||
import IconSlackGrey from '../assets/svg/slack-grey.svg';
|
||||
import IconSlack from '../assets/svg/slack.svg';
|
||||
import IconTableGrey from '../assets/svg/table-grey.svg';
|
||||
import IconTable from '../assets/svg/table.svg';
|
||||
@ -136,6 +137,7 @@ export const Icons = {
|
||||
DASHBOARD_GREY: 'dashboard-grey',
|
||||
CONFIG: 'icon-config',
|
||||
SLACK: 'slack',
|
||||
SLACK_GREY: 'slack-grey',
|
||||
EXTERNAL_LINK: 'external-link',
|
||||
PROFILER: 'icon-profiler',
|
||||
PIPELINE: 'pipeline',
|
||||
@ -401,6 +403,10 @@ const SVGIcons: FunctionComponent<Props> = ({
|
||||
case Icons.SLACK:
|
||||
IconComponent = IconSlack;
|
||||
|
||||
break;
|
||||
case Icons.SLACK_GREY:
|
||||
IconComponent = IconSlackGrey;
|
||||
|
||||
break;
|
||||
case Icons.EXTERNAL_LINK:
|
||||
IconComponent = IconExternalLink;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user