mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
move pill divider in react and fix the bg
This commit is contained in:
parent
7eab7fbcf4
commit
f2f4b4be70
|
@ -642,14 +642,20 @@ $session-compose-margin: 20px;
|
|||
.panel-text-divider {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid $session-color-dark-grey;
|
||||
line-height: 0.1em;
|
||||
display: flex;
|
||||
margin: 50px 0 50px;
|
||||
|
||||
.panel-text-divider-line {
|
||||
border-bottom: 1px solid $session-color-dark-grey;
|
||||
line-height: 0.1em;
|
||||
flex-grow: 1;
|
||||
height: 1px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
span {
|
||||
padding: 5px 10px;
|
||||
border-radius: 50px;
|
||||
background-color: $session-background;
|
||||
color: $session-color-light-grey;
|
||||
border: 1px solid $session-color-dark-grey;
|
||||
font-family: 'SF Pro Text';
|
||||
|
|
|
@ -16,6 +16,7 @@ import {
|
|||
SessionIconType,
|
||||
} from './session/icon';
|
||||
import { SessionModal } from './session/SessionModal';
|
||||
import { PillDivider } from './session/PillDivider';
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
|
@ -107,9 +108,7 @@ export class EditProfileDialog extends React.Component<Props, State> {
|
|||
{viewEdit && this.renderEditView()}
|
||||
|
||||
<div className="session-id-section">
|
||||
<div className="panel-text-divider">
|
||||
<span>{window.i18n('yourSessionID')}</span>
|
||||
</div>
|
||||
<PillDivider text={window.i18n('yourSessionID')} />
|
||||
<p
|
||||
className={classNames(
|
||||
'text-selectable',
|
||||
|
|
16
ts/components/session/PillDivider.tsx
Normal file
16
ts/components/session/PillDivider.tsx
Normal file
|
@ -0,0 +1,16 @@
|
|||
import React from 'react';
|
||||
|
||||
interface ReceivedProps {
|
||||
text: string;
|
||||
}
|
||||
type Props = ReceivedProps;
|
||||
|
||||
export const PillDivider: React.SFC<Props> = props => {
|
||||
return (
|
||||
<div className="panel-text-divider">
|
||||
<div className="panel-text-divider-line" />
|
||||
<span>{props.text}</span>
|
||||
<div className="panel-text-divider-line" />
|
||||
</div>
|
||||
);
|
||||
};
|
|
@ -12,6 +12,7 @@ import {
|
|||
} from './SessionButton';
|
||||
import { SessionSpinner } from './SessionSpinner';
|
||||
import { SessionGroupType } from './LeftPaneChannelSection';
|
||||
import { PillDivider } from './PillDivider';
|
||||
|
||||
interface Props {
|
||||
overlayMode: 'message' | 'contact' | SessionGroupType;
|
||||
|
@ -223,9 +224,7 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
|
|||
)}
|
||||
|
||||
{isAddContactView && (
|
||||
<div className="panel-text-divider">
|
||||
<span>{window.i18n('yourPublicKey')}</span>
|
||||
</div>
|
||||
<PillDivider text={window.i18n('yourPublicKey')} />
|
||||
)}
|
||||
|
||||
{isAddContactView && (
|
||||
|
|
Loading…
Reference in a new issue