neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust button rounding (#3051)

Browse Source 
* Adjust button rounding

* ReferendumInfo icon
This commit is contained in:
Jaco Greeff 2020-06-25 15:34:35 +02:00 committed by GitHub
parent 4a3ed5fa89
commit b78cc3fa2f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 39 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/page-democracy/src/Overview/ReferendumVotes.tsx
View File

@ -59,9 +59,8 @@ function ReferendumVotes ({ change, className = '', count, index, isWinning, tot
<>
<Icon
className='double-icon'
data-for={trigger}
data-tip
icon={isWinning ? 'arrow alternate circle down' : 'arrow alternate circle up'}
icon={isWinning ? 'arrow-circle-down' : 'arrow-circle-up'}
tooltip={trigger}
/>
<FormatBalance value={change} />
<Tooltip
@ -89,6 +88,12 @@ function ReferendumVotes ({ change, className = '', count, index, isWinning, tot
}
export default React.memo(styled(ReferendumVotes)`
.ui--Expander .ui--Expander-summary .double-icon {
margin-bottom: -0.125rem;
margin-right: 0.375rem;
margin-top: 0.125rem;
}
.ui--Expander-summary {
.ui--Icon+.ui--Icon {
margin-left: -0.375rem;

6
packages/page-storage/src/Query.tsx
View File

@ -248,4 +248,10 @@ export default React.memo(styled(Query)`
text-overflow: ellipsis;
}
}
.storage--actionrow-buttons {
.container {
margin-top: -0.25rem; /* offset parent spacing for buttons */
}
}
`);

3
packages/react-components/src/AddressInfo.tsx
View File

@ -270,9 +270,8 @@ function renderBalances (props: Props, allAccounts: string[], t: <T = string> (k
className='result'
label={
<Icon
data-for={`${address}-locks-trigger`}
data-tip
icon='info-circle'
tooltip={`${address}-locks-trigger`}
/>
}
value={isAllLocked ? 'all' : balancesAll.lockedBalance}

2
packages/react-components/src/Badge.tsx
View File

@ -27,7 +27,7 @@ function Badge ({ className = '', color = 'normal', hover, info, isInline, isSma
<div
className={`ui--Badge ${isInline ? 'isInline' : ''} ${isTooltip ? 'isTooltip' : ''} ${isSmall ? 'isSmall' : ''} ${onClick ? 'isClickable' : ''} ${color}Color ${className}`}
data-for={trigger}
data-tip={true}
data-tip={isTooltip && !!hover}
data-tip-disable={!isTooltip}
onClick={onClick}
>

21
packages/react-components/src/Button/Button.tsx
View File

@ -4,25 +4,19 @@
import { ButtonProps } from './types';
import React, { useState } from 'react';
import React from 'react';
import SUIButton from 'semantic-ui-react/dist/commonjs/elements/Button/Button';
import styled from 'styled-components';
import Icon from '../Icon';
import Tooltip from '../Tooltip';
let idCounter = 0;
function Button ({ children, className = '', floated, icon, isAnimated, isBasic = false, isCircular = false, isDisabled = false, isFluid = false, isIcon, isLoading = false, isNegative = false, isPositive = false, isPrimary = false, label, labelPosition, onClick, onMouseEnter, onMouseLeave, size, tabIndex, tooltip }: ButtonProps): React.ReactElement<ButtonProps> {
const [triggerId] = useState(`button-${++idCounter}`);
function Button ({ children, className = '', floated, icon, isAnimated, isBasic = false, isCircular = false, isDisabled = false, isFluid = false, isIcon, isLoading = false, isNegative = false, isPositive = false, isPrimary = false, label, labelPosition, onClick, onMouseEnter, onMouseLeave, size, tabIndex }: ButtonProps): React.ReactElement<ButtonProps> {
const props = {
animate: 'fade',
animated: isAnimated,
basic: isBasic,
circular: isCircular,
circular: true,
className: `${className} ${isCircular ? 'isCircular' : ''} ${isIcon ? 'isIcon' : ''} ${(isCircular || isIcon || !(children || label)) ? 'icon' : ''}`,
'data-for': triggerId,
'data-tip': !!tooltip,
disabled: isDisabled,
floated,
fluid: isFluid,
@ -48,18 +42,13 @@ function Button ({ children, className = '', floated, icon, isAnimated, isBasic
{label}
{children}
</SUIButton>
{tooltip && (
<Tooltip
place='top'
text={tooltip}
trigger={triggerId}
/>
)}
</>
);
}
export default React.memo(styled(Button)`
border-radius: 10rem !important;
&:not(.icon) {
> .ui--Icon {
margin-right: 0.25rem;

3
packages/react-components/src/DemocracyLocks.tsx
View File

@ -40,9 +40,8 @@ function DemocracyLocks ({ className = '', value }: Props): React.ReactElement<P
return (
<div className={className}>
<Icon
data-for={trigger}
data-tip
icon='clock'
tooltip={trigger}
/>
<FormatBalance value={max} />
<Tooltip

5
packages/react-components/src/Icon.tsx
View File

@ -17,15 +17,18 @@ interface Props {
onMouseOut?: () => void;
onMouseOver?: () => void;
size?: '1x' | '2x';
tooltip?: string;
}
// one-time init of FA libraries
library.add(fas);
function Icon ({ className = '', color = 'normal', icon, isSpinning, onClick, onMouseOut, onMouseOver, size = '1x' }: Props): React.ReactElement<Props> {
function Icon ({ className = '', color = 'normal', icon, isSpinning, onClick, onMouseOut, onMouseOver, size = '1x', tooltip }: Props): React.ReactElement<Props> {
return (
<FontAwesomeIcon
className={`ui--Icon ${color}Color ${onClick ? 'isClickable' : ''} ${className}`}
data-for={tooltip}
data-tip={!!tooltip}
icon={icon}
onClick={onClick}
onMouseOut={onMouseOut}

3
packages/react-components/src/LabelHelp.tsx
View File

@ -25,11 +25,10 @@ function LabelHelp ({ className = '', help }: Props): React.ReactElement<Props>
return (
<div className={classes('ui--LabelHelp', className)}>
<Icon
data-for={trigger}
data-tip
icon='question-circle'
onMouseOut={toggleTooltip}
onMouseOver={toggleTooltip}
tooltip={trigger}
/>
{isTooltipOpen && (
<Tooltip

3
packages/react-components/src/StakingUnbonding.tsx
View File

@ -49,9 +49,8 @@ function StakingUnbonding ({ className = '', value }: Props): React.ReactElement
return (
<div className={className}>
<Icon
data-for={trigger}
data-tip
icon='clock'
tooltip={trigger}
/>
<FormatBalance value={total} />
<Tooltip

4
packages/react-components/src/styles/components.ts
View File

@ -33,10 +33,6 @@ export default css`
}
}
.ui--Button-Group .button {
border-radius: .28571429rem !important;
}
header .ui--Button-Group {
text-align: center;
}

2
packages/react-components/src/styles/semantic.ts
View File

@ -168,7 +168,7 @@ export default css`
}
.ui.button+.ui.button {
margin-left: 0.5rem;
margin-left: 0.25rem;
}
/* modals aligned to top, not center */

1
packages/react-hooks/src/useAccountInfo.ts
View File

@ -111,6 +111,7 @@ export default function useAccountInfo (value: string | null, isContract = false
isDevelopment: accountOrAddress?.meta.isTesting || false,
isEditable: !!(!identity?.display && (isInContacts || accountOrAddress?.meta.isMultisig || (accountOrAddress && !(accountOrAddress.meta.isInjected || accountOrAddress.meta.isHardware)))) || false,
isExternal: !!accountOrAddress?.meta.isExternal || false,
isHardware: !!accountOrAddress?.meta.isHardware || false,
isInContacts,
isMultisig: !!accountOrAddress?.meta.isMultisig || false,
isOwned,

9
packages/react-query/src/FormatBalance.tsx
View File

@ -91,4 +91,13 @@ export default React.memo(styled(FormatBalance)`
vertical-align: baseline;
}
}
.ui--Icon {
margin-top: 0.25rem;
margin-bottom: -0.25rem;
}
.ui--Icon+.ui--FormatBalance-value {
margin-left: 0.375rem;
}
`);