SharePrompt classNames renamed

This commit is contained in:
svetlagasheva 2019-09-26 15:10:23 +03:00
parent 9e87d14e90
commit e1d6f4a3a1
2 changed files with 16 additions and 16 deletions

View file

@ -18,22 +18,22 @@ const SharePrompt = (props) => {
}
return (
<div className={classnames(props.className, styles['share-prompt'])}>
<Button className={styles['x-container']}>
<div className={classnames(props.className, styles['share-prompt-container'])}>
<Button className={styles['close-button-container']}>
<Icon className={styles['icon']} icon={'ic_x'} onClick={props.onClose} />
</Button>
<div className={styles['info-container']}>
<div className={styles['share-label']}>Share</div>
<div className={styles['buttons']}>
<Button className={classnames(styles['button'], styles['facebook-button'])} href={`https://www.facebook.com/sharer/sharer.php?u=${props.url}`} target={'_blank'}>
<div className={styles['share-prompt-content']}>
<div className={styles['share-prompt-label']}>Share</div>
<div className={styles['buttons-container']}>
<Button className={classnames(styles['button-container'], styles['facebook-button'])} href={`https://www.facebook.com/sharer/sharer.php?u=${props.url}`} target={'_blank'}>
<Icon className={styles['icon']} icon={'ic_facebook'} />FACEBOOK
</Button>
<Button className={classnames(styles['button'], styles['twitter-button'])} href={`https://www.facebook.com/sharer/sharer.php?u=${props.url}`} target={'_blank'}>
<Button className={classnames(styles['button-container'], styles['twitter-button'])} href={`https://www.facebook.com/sharer/sharer.php?u=${props.url}`} target={'_blank'}>
<Icon className={styles['icon']} icon={'ic_twitter'} />TWITTER
</Button>
</div>
<div className={styles['url-container']}>
<TextInput ref={inputRef} className={styles['url']} type={'text'} tabIndex={'-1'} defaultValue={props.url} readOnly />
<TextInput ref={inputRef} className={styles['url-content']} type={'text'} tabIndex={'-1'} defaultValue={props.url} readOnly />
<Button className={styles['copy-button']} onClick={copyToClipboard}>
<Icon className={styles['icon']} icon={'ic_link'} />
<div className={styles['label']}>Copy</div>

View file

@ -1,16 +1,16 @@
.share-prompt {
.share-prompt-container {
--share-modal-width: 350px;
--spacing: 20px;
font-size: 14px;
}
.share-prompt {
.share-prompt-container {
padding: calc(var(--spacing) * 0.5);
width: var(--share-modal-width);
color: var(--color-surfacelighter);
background-color: var(--color-surfacelighter);
.x-container {
.close-button-container {
display: flex;
flex-direction: row;
justify-content: flex-end;
@ -40,20 +40,20 @@
}
}
.info-container {
.share-prompt-content {
padding: 0 var(--spacing) calc(var(--spacing) * 1.2) var(--spacing);
.share-label {
.share-prompt-label {
font-size: 1.1em;
color: var(--color-backgrounddarker);
}
.buttons {
.buttons-container {
padding: var(--spacing) 0;
display: flex;
flex-direction: row;
.button {
.button-container {
flex: 1;
height: 3.2em;
display: flex;
@ -94,7 +94,7 @@
flex-direction: row;
border: calc(var(--focusable-border-size) * 0.5) solid var(--color-surface);
.url {
.url-content {
flex: 4;
padding: calc(var(--spacing) * 0.5);
font-size: 0.9em;