LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

redesign fixes

Browse source
This commit is contained in:
Sean Yesmunt 2019-12-06 15:57:07 -05:00
parent a8707405ad
commit 143f17feb7
7 changed files with 97 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
ui/component/claimListDiscover/view.jsx
View file

@ -175,25 +175,20 @@ function ClaimListDiscover(props: Props) {
);
const noTags = (
<div>
<p>
<p>
<I18nMessage
tokens={{
customize: <Button
button="link"
navigate={`/$/${PAGES.FOLLOWING}`}
label={__('customize')}
/>,
customize: <Button button="link" navigate={`/$/${PAGES.FOLLOWING}`} label={__('customize')} />,
}}
>
You're not following any tags. Add tags above or smash that %customize% button!
</I18nMessage>
</p>
</div>
</p>
);
const noFollowing = (personalSort === SEARCH_SORT_YOU && noTags) || (personalSort === SEARCH_SORT_CHANNELS && noChannels);
const emptyState = !loading && !hasContent ? noFollowing : noResults;
const noFollowing =
(personalSort === SEARCH_SORT_YOU && noTags) || (personalSort === SEARCH_SORT_CHANNELS && noChannels);
const emptyState = !loading && !hasContent ? noFollowing : noResults;
function getSearch() {
let search = `?`;

34
ui/modal/modalFirstReward/view.jsx
View file

@ -1,6 +1,8 @@
// @flow
import React from 'react';
import { Modal } from 'modal/modal';
import Card from 'component/common/card';
import Button from 'component/button';
type Props = {
closeModal: () => void,
@ -11,21 +13,23 @@ class ModalFirstReward extends React.PureComponent<Props> {
const { closeModal } = this.props;
return (
<Modal
type="alert"
isOpen
contentLabel={__('Welcome to LBRY')}
title={__('Your First Reward')}
onConfirmed={closeModal}
>
<p>{__('You just earned your first reward!')}</p>
<p>{__("This reward will show in your Wallet in the top right momentarily (if it hasn't already).")}</p>
<p>
{__(
'These credits are used to compensate creators, to publish your own content, and to have say in how the network works.'
)}
</p>
<p>{__('No need to understand it all just yet! Try watching or publishing something next.')}</p>
<Modal type="card" isOpen contentLabel={__('Your First Reward')} onConfirmed={closeModal}>
<Card
title={__('Your First Reward')}
subtitle={__('You just earned your first reward!')}
body={
<React.Fragment>
<p>{__("This reward will show in your Wallet in the top right momentarily (if it hasn't already).")}</p>
<p>
{__(
'These credits are used to compensate creators, to publish your own content, and to have say in how the network works.'
)}
</p>
<p>{__('No need to understand it all just yet! Try watching or publishing something next.')}</p>
</React.Fragment>
}
actions={<Button button="primary" label={__('You Got It Dude')} />}
/>
</Modal>
);
}

97
ui/modal/modalRemoveFile/view.jsx
View file

@ -1,9 +1,11 @@
// @flow
import React from 'react';
import { Modal } from 'modal/modal';
import { Form, FormField } from 'component/common/form';
import { FormField } from 'component/common/form';
import Button from 'component/button';
import usePersistedState from 'effects/use-persisted-state';
import Card from 'component/common/card';
import I18nMessage from 'component/i18nMessage';
type Props = {
uri: string,
@ -23,47 +25,64 @@ function ModalRemoveFile(props: Props) {
const [abandonChecked, setAbandonChecked] = usePersistedState('modal-remove-file:abandon', true);
return (
<Modal isOpen title="Remove File" contentLabel={__('Confirm File Remove')} type="custom" onAborted={closeModal}>
<section>
<p>
{__("Are you sure you'd like to remove")} <cite>{`"${title}"`}</cite> {__('from LBRY?')}
</p>
</section>
<Form onSubmit={() => deleteFile(uri, deleteChecked, claimIsMine ? abandonChecked : false)}>
{/* @if TARGET='app' */}
<FormField
name="file_delete"
label={__('Delete this file from my computer')}
type="checkbox"
checked={deleteChecked}
onChange={() => setDeleteChecked(!deleteChecked)}
/>
{/* @endif */}
{claimIsMine && (
<div>
<FormField
name="claim_abandon"
label={__('Abandon on blockchain (reclaim %amount% LBC)', { amount: claim.amount })}
type="checkbox"
checked={abandonChecked}
onChange={() => setAbandonChecked(!abandonChecked)}
/>
{abandonChecked === true && <p className="error-text">This action is permanent and cannot be undone.</p>}
<Modal isOpen contentLabel={__('Confirm File Remove')} type="card" onAborted={closeModal}>
<Card
title="Remove File"
subtitle={
<I18nMessage tokens={{ title: <cite>{`"${title}"`}</cite> }}>
Are you sure you'd like to remove %title% from LBRY?
</I18nMessage>
}
body={
<React.Fragment>
{/* @if TARGET='app' */}
{abandonChecked === false && deleteChecked && (
<p>This file will be removed from your Library and Downloads folder.</p>
)}
{!deleteChecked && <p>This file will be removed from your Library but will remain in your Downloads folder.</p>}
<FormField
name="file_delete"
label={__('Delete this file from my computer')}
type="checkbox"
checked={deleteChecked}
onChange={() => setDeleteChecked(!deleteChecked)}
/>
{/* @endif */}
{claimIsMine && (
<React.Fragment>
<FormField
name="claim_abandon"
label={__('Abandon on blockchain (reclaim %amount% LBC)', { amount: claim.amount })}
type="checkbox"
checked={abandonChecked}
onChange={() => setAbandonChecked(!abandonChecked)}
/>
{abandonChecked === true && (
<p className="help error-text">This action is permanent and cannot be undone.</p>
)}
{/* @if TARGET='app' */}
{abandonChecked === false && deleteChecked && (
<p className="help">This file will be removed from your Library and Downloads folder.</p>
)}
{!deleteChecked && (
<p className="help">
This file will be removed from your Library but will remain in your Downloads folder.
</p>
)}
{/* @endif */}
</React.Fragment>
)}
</React.Fragment>
}
actions={
<div className="card__actions">
<Button
button="primary"
label={__('OK')}
onClick={() => deleteFile(uri, deleteChecked, claimIsMine ? abandonChecked : false)}
/>
<Button button="link" label={__('Cancel')} onClick={closeModal} />
</div>
)}
<div className="card__actions">
<Button type="submit" button="primary" label={__('OK')} />
<Button button="link" label={__('Cancel')} onClick={closeModal} />
</div>
</Form>
}
/>
</Modal>
);
}

3
ui/scss/component/_form-field.scss
View file

@ -70,9 +70,8 @@ fieldset-group {
.form-field__prefix {
white-space: nowrap;
padding: 0.5rem;
padding-right: var(--spacing-xxs);
padding-right: var(--spacing-small);
height: var(--height-input);
padding-right: 1rem;
border: 1px solid;
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);

4
ui/scss/component/_markdown-preview.scss
View file

@ -132,3 +132,7 @@
margin-top: var(--spacing-small);
}
}
.editor-preview {
background-color: var(--color-input-bg);
}

8
ui/scss/component/menu-button.scss
View file

@ -18,11 +18,19 @@
outline: none;
background-color: var(--color-menu-background);
border-top: none;
&:focus {
box-shadow: none;
}
}
[data-reach-menu-item] {
display: block;
z-index: 2;
&:focus {
box-shadow: none;
}
}
[data-reach-menu-item] {

2
ui/scss/themes/light.scss
View file

@ -15,7 +15,7 @@
--color-text-selection-bg: var(--color-secondary-alt);
--color-text-selection: var(--color-secondary);
--color-text-error: var(--color-danger);
--color-text-empty: #bbbbbb;
--color-text-empty: #999999;
--color-text-help: #999999;
--color-text-subtitle: #767676;
--color-text-warning: #212529;