mirror of
https://github.com/filecoin-project/slate.git
synced 2024-11-22 21:45:56 +03:00
more wrong color fixes
This commit is contained in:
Martina
parent
dacf7e506f
commit
13d4b03309
@ -6,7 +6,7 @@ import * as UserBehaviors from "~/common/user-behaviors";
|
||||
import { PopoverNavigation } from "~/components/system";
|
||||
import { css } from "@emotion/react";
|
||||
import { Link } from "~/components/core/Link";
|
||||
import ProfilePhoto from "~/components/core/ProfilePhoto";
|
||||
import ProfilePhoto from "~/components/core/ProfilePhoto";
|
||||
|
||||
import { Boundary } from "~/components/system/components/fragments/Boundary";
|
||||
import { useIntercom } from "react-use-intercom";
|
||||
@ -103,29 +103,29 @@ const STYLES_ITEM_BOX = css`
|
||||
}
|
||||
`;
|
||||
|
||||
const OpenIntercom = ({ user, onTogglePopup }) => {
|
||||
const { show, update } = useIntercom();
|
||||
// const OpenIntercom = ({ user, onTogglePopup }) => {
|
||||
// const { show, update } = useIntercom();
|
||||
|
||||
return (
|
||||
<span
|
||||
style={{ cursor: "pointer", display: "block" }}
|
||||
onClick={() => {
|
||||
onTogglePopup();
|
||||
update({
|
||||
name: user.data.name,
|
||||
email: user.email,
|
||||
customAttributes: {
|
||||
slate_userid: user.id,
|
||||
username: user.username,
|
||||
},
|
||||
});
|
||||
show();
|
||||
}}
|
||||
>
|
||||
Help
|
||||
</span>
|
||||
);
|
||||
};
|
||||
// return (
|
||||
// <span
|
||||
// style={{ cursor: "pointer", display: "block" }}
|
||||
// onClick={() => {
|
||||
// onTogglePopup();
|
||||
// update({
|
||||
// name: user.data.name,
|
||||
// email: user.email,
|
||||
// customAttributes: {
|
||||
// slate_userid: user.id,
|
||||
// username: user.username,
|
||||
// },
|
||||
// });
|
||||
// show();
|
||||
// }}
|
||||
// >
|
||||
// Help
|
||||
// </span>
|
||||
// );
|
||||
// };
|
||||
|
||||
export class ApplicationUserControlsPopup extends React.Component {
|
||||
_handleAction = (props) => {
|
||||
@ -144,11 +144,8 @@ export class ApplicationUserControlsPopup extends React.Component {
|
||||
if (this.props.popup === "profile") {
|
||||
const topSection = (
|
||||
<div css={Styles.HORIZONTAL_CONTAINER} style={{ marginBottom: 14 }}>
|
||||
<div style={{ marginRight: '16px', cursor: 'default' }} >
|
||||
<ProfilePhoto
|
||||
user={this.props.viewer}
|
||||
size={46}
|
||||
/>
|
||||
<div style={{ marginRight: "16px", cursor: "default" }}>
|
||||
<ProfilePhoto user={this.props.viewer} size={46} />
|
||||
</div>
|
||||
|
||||
<div
|
||||
@ -223,15 +220,15 @@ export class ApplicationUserControlsPopup extends React.Component {
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
text: (
|
||||
<OpenIntercom
|
||||
style={{ display: "block" }}
|
||||
user={this.props.viewer}
|
||||
onTogglePopup={this.props.onTogglePopup}
|
||||
/>
|
||||
),
|
||||
},
|
||||
// {
|
||||
// text: (
|
||||
// <OpenIntercom
|
||||
// style={{ display: "block" }}
|
||||
// user={this.props.viewer}
|
||||
// onTogglePopup={this.props.onTogglePopup}
|
||||
// />
|
||||
// ),
|
||||
// },
|
||||
{
|
||||
text: "Sign out",
|
||||
onClick: (e) => {
|
||||
@ -295,20 +292,16 @@ export class ApplicationUserControlsPopup extends React.Component {
|
||||
}
|
||||
|
||||
export class ApplicationUserControls extends React.Component {
|
||||
|
||||
render() {
|
||||
let tooltip = <ApplicationUserControlsPopup {...this.props} />;
|
||||
return (
|
||||
<div css={STYLES_HEADER}>
|
||||
<div
|
||||
css={STYLES_PROFILE_MOBILE}
|
||||
onClick={() => this.props.onTogglePopup("profile")}
|
||||
style={{ position: "relative", cursor: 'pointer' }}
|
||||
<div
|
||||
css={STYLES_PROFILE_MOBILE}
|
||||
onClick={() => this.props.onTogglePopup("profile")}
|
||||
style={{ position: "relative", cursor: "pointer" }}
|
||||
>
|
||||
<ProfilePhoto
|
||||
user={this.props.viewer}
|
||||
size={24}
|
||||
/>
|
||||
<ProfilePhoto user={this.props.viewer} size={24} />
|
||||
{this.props.popup === "profile" ? tooltip : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -17,7 +17,7 @@ import { Boundary } from "~/components/system/components/fragments/Boundary";
|
||||
import { PopoverNavigation } from "~/components/system/components/PopoverNavigation";
|
||||
import { FileTypeIcon } from "~/components/core/FileTypeIcon";
|
||||
import { useIntercom } from "react-use-intercom";
|
||||
import ProfilePhoto from "~/components/core/ProfilePhoto";
|
||||
import ProfilePhoto from "~/components/core/ProfilePhoto";
|
||||
|
||||
const STYLES_MOBILE_HIDDEN = css`
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
@ -43,7 +43,7 @@ const STYLES_ICON_SQUARE = css`
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid ${Constants.semantic.bgLight};
|
||||
border: 1px solid ${Constants.semantic.borderGrayLight};
|
||||
background-color: ${Constants.system.white};
|
||||
color: #bfbfbf;
|
||||
display: flex;
|
||||
@ -85,10 +85,7 @@ const UserEntry = ({ user }) => {
|
||||
<div css={STYLES_ENTRY}>
|
||||
<div css={STYLES_ENTRY_CONTAINER}>
|
||||
<div css={STYLES_PROFILE_PREVIEW}>
|
||||
<ProfilePhoto
|
||||
user={user}
|
||||
size={48}
|
||||
/>
|
||||
<ProfilePhoto user={user} size={48} />
|
||||
</div>
|
||||
<div css={STYLES_TEXT_ROWS}>
|
||||
{user.data.name ? (
|
||||
@ -120,10 +117,7 @@ const UserPreview = ({ user }) => {
|
||||
return (
|
||||
<div>
|
||||
<div css={STYLES_PROFILE_IMAGE}>
|
||||
<ProfilePhoto
|
||||
user={user}
|
||||
size={182}
|
||||
/>
|
||||
<ProfilePhoto user={user} size={182} />
|
||||
</div>
|
||||
|
||||
{user.data.name ? <div css={STYLES_PREVIEW_TEXT}>{user.data.name}</div> : null}
|
||||
@ -214,7 +208,7 @@ const STYLES_EMPTY_SLATE_PREVIEW = css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid ${Constants.semantic.bgLight};
|
||||
border: 1px solid ${Constants.semantic.borderGrayLight};
|
||||
`;
|
||||
|
||||
const SlatePreview = ({ slate, user }) => {
|
||||
@ -289,29 +283,6 @@ const FilePreview = ({ file, slate, user, viewerId }) => {
|
||||
);
|
||||
};
|
||||
|
||||
const OpenIntercom = ({ user }) => {
|
||||
const { show, update } = useIntercom();
|
||||
|
||||
return (
|
||||
<span
|
||||
style={{ marginRight: 24, cursor: "pointer" }}
|
||||
onClick={() => {
|
||||
update({
|
||||
name: user.data.name,
|
||||
email: user.email,
|
||||
customAttributes: {
|
||||
slate_userid: user.id,
|
||||
username: user.username,
|
||||
},
|
||||
});
|
||||
show();
|
||||
}}
|
||||
>
|
||||
Contact Us
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const STYLES_DROPDOWN_CONTAINER = css`
|
||||
box-sizing: border-box;
|
||||
z-index: ${Constants.zindex.modal};
|
||||
@ -353,7 +324,7 @@ const STYLES_INPUT = css`
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
background: ${Constants.semantic.bgGrayLight};
|
||||
background: ${Constants.semantic.bgLight};
|
||||
color: ${Constants.semantic.textGray};
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
@ -406,7 +377,7 @@ const STYLES_RETURN = css`
|
||||
const STYLES_FILTER_BUTTON = css`
|
||||
padding: 11px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid ${Constants.semantic.bgLight};
|
||||
border: 1px solid ${Constants.semantic.borderGrayLight};
|
||||
color: ${Constants.semantic.textGray};
|
||||
margin-right: 8px;
|
||||
display: flex;
|
||||
@ -433,19 +404,9 @@ const STYLES_PREVIEW_PANEL = css`
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_BOTTOM_BUTTONS = css`
|
||||
color: ${Constants.semantic.textGrayLight};
|
||||
font-family: ${Constants.font.medium};
|
||||
font-size: ${Constants.typescale.lvlN1};
|
||||
letter-spacing: -0.1px;
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 24px;
|
||||
`;
|
||||
|
||||
const STYLES_INLINE_TAG_CONTAINER = css`
|
||||
height: 56px;
|
||||
background: ${Constants.semantic.bgGrayLight};
|
||||
background: ${Constants.semantic.bgLight};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
@ -1018,7 +979,7 @@ export class SearchModal extends React.Component {
|
||||
style={{
|
||||
right: 0,
|
||||
top: 44,
|
||||
borderColor: Constants.semantic.bgLight,
|
||||
borderColor: Constants.semantic.borderGrayLight,
|
||||
color: Constants.semantic.textGray,
|
||||
width: 124,
|
||||
}}
|
||||
@ -1266,23 +1227,6 @@ export class SearchModal extends React.Component {
|
||||
</React.Fragment>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div css={STYLES_BOTTOM_BUTTONS}>
|
||||
<OpenIntercom user={this.props.viewer} />
|
||||
|
||||
<span
|
||||
style={{ marginRight: 24, cursor: "pointer" }}
|
||||
onClick={() => {
|
||||
window.open("https://help.slate.host/", "_blank");
|
||||
}}
|
||||
>
|
||||
FAQ
|
||||
</span>
|
||||
|
||||
{/* <span style={{ cursor: "pointer" }} onClick={() => this._handleRedirect("FMU")}>
|
||||
I'm Feeling Lucky
|
||||
</span> */}
|
||||
</div>
|
||||
</div>
|
||||
</Boundary>
|
||||
</div>
|
||||
|
||||
@ -93,7 +93,7 @@ const STYLES_LOADER = css`
|
||||
`;
|
||||
|
||||
const STYLES_EDIT_CONTAINER = css`
|
||||
border: 1px solid ${Constants.system.gray};
|
||||
border: 1px solid ${Constants.system.grayLight4};
|
||||
padding: 24px;
|
||||
overflow: hidden;
|
||||
`;
|
||||
@ -148,8 +148,8 @@ const STYLES_TOOLTIP_TEXT = css`
|
||||
|
||||
const STYLES_TOGGLE_BOX = css`
|
||||
${STYLES_BUTTONS_ROW}
|
||||
border: 1px solid ${Constants.system.gray};
|
||||
border-radius: 4px;
|
||||
border: 1px solid ${Constants.system.grayLight4};
|
||||
border-radius: 8px;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
`;
|
||||
|
||||
@ -234,7 +234,7 @@ const STYLES_BUTTON_DISABLED = css`
|
||||
cursor: not-allowed;
|
||||
background-color: ${Constants.system.white};
|
||||
color: ${Constants.semantic.textGrayLight};
|
||||
box-shadow: 0 0 0 1px ${Constants.semantic.bgLight} inset;
|
||||
box-shadow: 0 0 0 1px ${Constants.semantic.bgGrayLight} inset;
|
||||
|
||||
:focus {
|
||||
outline: 0;
|
||||
|
||||
@ -55,7 +55,7 @@ export class PopoverNavigation extends React.Component {
|
||||
e.preventDefault();
|
||||
}}
|
||||
>
|
||||
{this.props.topSection}
|
||||
{this.props.topSection ? this.props.topSection : null}
|
||||
{this.props.navigation.map((section, i) => (
|
||||
<div css={STYLES_POPOVER_SECTION}>
|
||||
{section.map((each, j) => (
|
||||
|
||||
@ -33,7 +33,7 @@ const STYLES_API_KEY = css`
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
cursor: copy;
|
||||
background-color: ${Constants.system.white};
|
||||
background-color: ${Constants.semantic.bgLight};
|
||||
outline: none;
|
||||
border: none;
|
||||
width: 380px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user