feat: sharing subscriptions UI (#1567)

* feat(web): add ui for subscription sharing

* fix(web): add missing triggers

* fix(snjs): setting authorization token on http service

* fix(web): add alert upon invite failure

* fix(web): display invitations list

* fix(web): canceling subscription invitations

* fix(web): fonts

* fix(web): linter issues

* fix: click event handler

* fix: styles

* feat: update styles

* feat: don't show bottom separator if all invites used

* fix(web): references to alert service

* fix(web): remove usebeforeunload

Co-authored-by: Aman Harwara <amanharwara@protonmail.com>
This commit is contained in:
Karol Sójko
2022-09-15 12:00:29 +02:00
committed by GitHub
parent 05068ef63a
commit 2d0ee10226
13 changed files with 462 additions and 21 deletions

View File

@@ -1,29 +1,25 @@
import { classNames } from '@/Utils/ConcatenateClassNames'
import { FunctionComponent, ReactNode } from 'react'
type ChildrenProp = {
children: ReactNode
}
export const Title: FunctionComponent<ChildrenProp> = ({ children }) => (
<>
<h2 className="m-0 mb-1 text-lg font-bold text-info md:text-base">{children}</h2>
</>
)
type Props = {
className?: string
} & ChildrenProp
children: ReactNode
}
export const Subtitle: FunctionComponent<Props> = ({ children, className = '' }) => (
<h4 className={`m-0 mb-1 text-sm font-medium ${className}`}>{children}</h4>
export const Title: FunctionComponent<Props> = ({ children, className }) => (
<h2 className={classNames('m-0 mb-1 text-lg font-bold text-info md:text-base', className)}>{children}</h2>
)
export const SubtitleLight: FunctionComponent<Props> = ({ children, className = '' }) => (
<h4 className={`m-0 mb-1 text-sm font-normal ${className}`}>{children}</h4>
export const Subtitle: FunctionComponent<Props> = ({ children, className }) => (
<h4 className={classNames('m-0 mb-1 text-sm font-medium', className)}>{children}</h4>
)
export const Text: FunctionComponent<Props> = ({ children, className = '' }) => (
<p className={`${className} text-sm md:text-xs`}>{children}</p>
export const SubtitleLight: FunctionComponent<Props> = ({ children, className }) => (
<h4 className={classNames('m-0 mb-1 text-sm font-normal', className)}>{children}</h4>
)
export const Text: FunctionComponent<Props> = ({ children, className }) => (
<p className={classNames('text-sm md:text-xs', className)}>{children}</p>
)
const buttonClasses =