filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-28 19:42:01 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: tag style

Browse Source
This commit is contained in:
Akuoko Daniel Jnr 2021-03-12 00:23:43 +00:00
parent 3ed71f4b6f
commit 1c418f632b
No known key found for this signature in database
GPG Key ID: 1C95803CACD3E9DC
3 changed files with 26 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
common/constants.js
View File

@ -37,6 +37,7 @@ export const system = {
yellow: "#FAB413",
red: "#C71313",
black: "#0F0E12",
newBlack: "#000000",
bgGrayLight: "#F8F8F8",
bgGray: "#F2F2F2",
bgBlue: "#C0D8EE",

17
components/core/ScenePageHeader.js
View File

@ -95,18 +95,21 @@ const STYLES_LIST = css`
const STYLES_TAG = css`
list-style-type: none;
border-radius: 4px;
background: ${Constants.system.white};
color: ${Constants.system.black};
background: ${Constants.system.bgGray};
color: ${Constants.system.newBlack};
display: flex;
align-items: center;
font-family: ${Constants.font.medium};
padding: 10px;
box-shadow: 0 0 0 1px ${Constants.system.gray30} inset;
font-family: ${Constants.font.text};
padding: 2px 8px;
margin: 8px 8px 0 0;
span {
line-height: 1;
font-size: 0.875rem;
line-height: 1.5;
font-size: 14px;
}
&:hover {
background: ${Constants.system.gray30};
}
`;

52
components/system/components/Tag.js
View File

@ -33,39 +33,27 @@ const STYLES_LIST = css`
display: inline-flex;
flex-wrap: wrap;
margin: 0;
width: 100%;
border-radius: 4px;
li {
&:last-child {
list-style-type: none;
padding: 2px;
flex: 1;
}
}
`;
const STYLES_TAG = css`
list-style-type: none;
border-radius: 4px;
background: ${Constants.system.white};
color: ${Constants.system.black};
background: ${Constants.system.bgGray};
color: ${Constants.system.newBlack};
display: flex;
align-items: center;
font-family: ${Constants.font.medium};
padding: 10px;
box-shadow: 0 0 0 1px ${Constants.system.gray30} inset;
margin: 0 8px 8px 0;
font-family: ${Constants.font.text};
padding: 2px 8px;
margin: 8px 8px 0 0;
span {
line-height: 0;
font-size: 0.875rem;
line-height: 1.5;
font-size: 14px;
}
&:hover {
span {
opacity: 1;
}
background: ${Constants.system.gray30};
}
`;
@ -139,30 +127,20 @@ export const Tag = (props) => {
return (
<div css={STYLES_INPUT_CONTAINER} style={{ ...props.style }}>
<input
ref={inputEl}
type="text"
css={STYLES_INPUT}
onKeyDown={handleInputKeyDown}
placeholder={props.placeholder}
/>
<ul css={STYLES_LIST}>
{props.value &&
props.value.map((tag, i) => (
<li key={tag} css={STYLES_TAG}>
<span>{tag}</span>
<span
css={STYLES_REMOVE_BUTTON}
onClick={() => {
removeTag(i);
}}
>
<SVG.Dismiss height="12px" />
</span>
</li>
))}
<li>
<input
ref={inputEl}
type="text"
css={STYLES_INPUT}
onKeyDown={handleInputKeyDown}
placeholder={props.placeholder}
/>
</li>
</ul>
</div>
);