mirror of
https://github.com/elyby/accounts-frontend.git
synced 2025-05-31 14:11:58 +05:30
Implemented source code popup markup
This commit is contained in:
ErickSkrauch
@@ -0,0 +1,7 @@
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import SourceCodePopup from './SourceCodePopup';
|
||||
|
||||
storiesOf('Components/Popups', module).add('SourceCodePopup', () => <SourceCodePopup onClose={action('onClose')} />);
|
||||
105
packages/app/components/sourceCode/SourceCodePopup.tsx
Normal file
105
packages/app/components/sourceCode/SourceCodePopup.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
import React, { ComponentProps, ComponentType } from 'react';
|
||||
import { FormattedMessage as Message } from 'react-intl';
|
||||
import clsx from 'clsx';
|
||||
|
||||
import Popup from 'app/components/ui/popup';
|
||||
|
||||
import styles from './sourceCodePopup.scss';
|
||||
|
||||
interface Props {
|
||||
onClose?: ComponentProps<typeof Popup>['onClose'];
|
||||
}
|
||||
|
||||
const SourceCodePopup: ComponentType<Props> = ({ onClose }) => (
|
||||
<Popup
|
||||
title={<Message key="title" defaultMessage="Source code" />}
|
||||
wrapperClassName={styles.boundings}
|
||||
data-testid="source-code-popup"
|
||||
onClose={onClose}
|
||||
>
|
||||
<div className={styles.body}>
|
||||
<div className={styles.item}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<div className={styles.dbIcon} />
|
||||
</div>
|
||||
<div className={styles.contentWrapper}>
|
||||
<a href="https://github.com/elyby/accounts" target="_blank" className={styles.itemLink}>
|
||||
<div className={styles.projectTitle}>Backend</div>
|
||||
<div className={styles.projectRepository}>
|
||||
<span className={styles.githubIcon} />
|
||||
elyby/accounts
|
||||
</div>
|
||||
</a>
|
||||
<div className={styles.projectDescription}>
|
||||
<Message
|
||||
key="backendDescription"
|
||||
defaultMessage="The service core and the linking point for all Ely.by's projects. Includes implementation of OAuth 2.0 protocol, authorization for Minecraft game servers and Mojang‑compatible API."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.item}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<div className={clsx(styles.brushIcon, styles.blue)} />
|
||||
</div>
|
||||
<div className={styles.contentWrapper}>
|
||||
<a href="https://github.com/elyby/accounts-frontend" target="_blank" className={styles.itemLink}>
|
||||
<div className={clsx(styles.projectTitle, styles.blue)}>Frontend</div>
|
||||
<div className={styles.projectRepository}>
|
||||
<span className={styles.githubIcon} />
|
||||
elyby/accounts-frontend
|
||||
</div>
|
||||
</a>
|
||||
<div className={styles.projectDescription}>
|
||||
<Message
|
||||
key="frontendDescription"
|
||||
defaultMessage="The interface that you're using right now. The mobile‑friendly UI has been translated into multiple languages and has the feature to access multiple accounts simultaneously."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.item}>
|
||||
<div className={styles.iconWrapper}>
|
||||
<div className={clsx(styles.envelopeIcon, styles.violet)} />
|
||||
</div>
|
||||
<div className={styles.contentWrapper}>
|
||||
<a href="https://github.com/elyby/emails-renderer" target="_blank" className={styles.itemLink}>
|
||||
<div className={clsx(styles.projectTitle, styles.violet)}>Mail rendering service</div>
|
||||
<div className={styles.projectRepository}>
|
||||
<span className={styles.githubIcon} />
|
||||
elyby/emails-renderer
|
||||
</div>
|
||||
</a>
|
||||
<div className={styles.projectDescription}>
|
||||
<Message
|
||||
key="mailRenderingServiceDescription"
|
||||
defaultMessage="A support service that generates beautiful emails in your language. It allows us to use our favorite fonts even where they cannot be used =)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.footer}>
|
||||
<div className={styles.heartIcon} />
|
||||
<div className={styles.footerTitle}>Open Source</div>
|
||||
<div className={styles.footerContent}>
|
||||
<Message
|
||||
key="weLoveOpenSource"
|
||||
defaultMessage="Ely.by is an open source project. You can find this and many of our other projects on our organization's page at <githubLink>GitHub</githubLink>. Contributors are welcome!"
|
||||
values={{
|
||||
githubLink: (text: string) => (
|
||||
<a href="https://github.com/elyby/accounts" target="_blank">
|
||||
{text}
|
||||
</a>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Popup>
|
||||
);
|
||||
|
||||
export default SourceCodePopup;
|
||||
1
packages/app/components/sourceCode/index.ts
Normal file
1
packages/app/components/sourceCode/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from './SourceCodePopup';
|
||||
113
packages/app/components/sourceCode/sourceCodePopup.scss
Normal file
113
packages/app/components/sourceCode/sourceCodePopup.scss
Normal file
@@ -0,0 +1,113 @@
|
||||
@import '~app/components/ui/popup/popup.scss';
|
||||
@import '~app/components/ui/colors.scss';
|
||||
@import '~app/components/ui/fonts.scss';
|
||||
|
||||
.boundings {
|
||||
@include popupBounding(420px);
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: $popupPadding;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
margin-bottom: 15px;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
.violet {
|
||||
color: $violet;
|
||||
}
|
||||
|
||||
.iconWrapper {
|
||||
margin: 4px 12px 0 0;
|
||||
}
|
||||
|
||||
.dbIcon {
|
||||
composes: database from '~app/components/ui/icons.scss';
|
||||
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.brushIcon {
|
||||
composes: brush from '~app/components/ui/icons.scss';
|
||||
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.envelopeIcon {
|
||||
composes: envelope-open from '~app/components/ui/icons.scss';
|
||||
|
||||
font-size: 33px;
|
||||
}
|
||||
|
||||
.contentWrapper {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.itemLink {
|
||||
display: inline-block;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.projectTitle {
|
||||
font-family: $font-family-title;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.projectRepository {
|
||||
font-family: $font-family-title;
|
||||
font-size: 14px;
|
||||
color: #9a9a9a;
|
||||
margin: 0 0 5px 1px; // Add 1px from the left to make icon look visually aligned with texts
|
||||
}
|
||||
|
||||
.githubIcon {
|
||||
composes: github from '~app/components/ui/icons.scss';
|
||||
|
||||
font-size: 12px;
|
||||
margin-right: 2px;
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
}
|
||||
|
||||
.projectDescription {
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.footer {
|
||||
composes: body;
|
||||
|
||||
background: #f5f5f5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.heartIcon {
|
||||
composes: heart from '~app/components/ui/icons.scss';
|
||||
|
||||
color: $red;
|
||||
font-size: 22px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.footerTitle {
|
||||
font-family: $font-family-title;
|
||||
font-size: 22px;
|
||||
color: #444;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.footerContent {
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
Reference in New Issue
Block a user