filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-22 21:45:56 +03:00
Code Issues Packages Projects Releases Wiki Activity

tweaked colors

Browse Source
This commit is contained in:
Martina 2021-07-07 15:12:33 -07:00
parent eaca8addf3
commit ad174810d4
3 changed files with 23 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
common/constants.js
View File

@ -96,7 +96,7 @@ export const semantic = {
bgBlurWhite: "rgba(system.white, 0.7)",
bgBlurWhiteOP: "rgba(system.white, 0.85)",
bgBlurWhiteTRN: "rgba(system.white, 0.3)",
bgBlurlight6: "rgba(system.grayLight6, 0.7)",
bgBlurLight6: "rgba(system.grayLight6, 0.7)",
bgBlurLight6OP: "rgba(system.grayLight6, 0.85)",
bgBlurLight6TRN: "rgba(system.grayLight6, 0.3)",

7
components/core/CarouselSidebar.js
View File

@ -585,7 +585,7 @@ class CarouselSidebar extends React.Component {
<LinkTag
url={file.url}
containerStyle={{
backgroundColor: Constants.system.bgBlurDark,
backgroundColor: Constants.system.grayDark4,
padding: "8px 16px",
borderRadius: 8,
marginBottom: 16,
@ -638,8 +638,7 @@ class CarouselSidebar extends React.Component {
type="dark"
tags={this.state.tags}
suggestions={this.state.suggestions}
style={{ margin: "0 0 8px" }}
inputStyles={{ padding: "16px" }}
inputStyles={STYLES_INPUT}
dropdownStyles={{ top: "50px" }}
onChange={this._handleChange}
/>
@ -667,7 +666,7 @@ class CarouselSidebar extends React.Component {
<LinkTag
url={file.url}
containerStyle={{
backgroundColor: Constants.system.bgBlurDark,
backgroundColor: Constants.system.grayDark4,
padding: "8px 16px",
borderRadius: 8,
marginBottom: 24,

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

@ -3,6 +3,7 @@ import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import { css } from "@emotion/react";
import { Input } from "~/components/system/components/Input";
const STYLES_TAG_CONTAINER = css`
width: 100%;
@ -61,8 +62,6 @@ const DROPDOWN_ITEM_STYLES = `
color: ${Constants.system.black};
}
}
`;
const STYLES_DROPDOWN_ITEM = css`
@ -205,24 +204,24 @@ const STYLES_DROPDOWN_ADD_ITEM_DARK = css`
}
`;
const INPUT_STYLES = `
box-sizing: border-box;
font-family: ${Constants.font.text};
-webkit-appearance: none;
border-radius: 4px;
display: flex;
padding: 8px 12px;
font-size: 14px;
align-items: center;
justify-content: flex-start;
outline: 0;
border: 0;
box-sizing: border-box;
transition: 200ms ease all;
`;
// const INPUT_STYLES = `
// box-sizing: border-box;
// font-family: ${Constants.font.text};
// -webkit-appearance: none;
// border-radius: 4px;
// display: flex;
// padding: 8px 12px;
// font-size: 14px;
// align-items: center;
// justify-content: flex-start;
// outline: 0;
// border: 0;
// box-sizing: border-box;
// transition: 200ms ease all;
// `;
const STYLES_INPUT = css`
${INPUT_STYLES};
${"" /* ${INPUT_STYLES}; */}
width: 100%;
text-overflow: ellipsis;
@ -490,10 +489,10 @@ export const Tag = ({
return (
<div css={STYLES_TAG_CONTAINER} style={{ ...style }}>
<div css={STYLES_INPUT_CONTAINER}>
<input
<Input
name="tags"
type="text"
css={type === "dark" ? STYLES_INPUT_DARK : STYLES_INPUT}
// css={type === "dark" ? STYLES_INPUT_DARK : STYLES_INPUT}
style={{ ...inputStyles }}
placeholder="Edit tags"
value={value}