keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

big refactor of scss to include session- prefix everywhere

Browse Source
pull/691/head
Audric Ackermann 6 years ago
parent 6ac42a824e
commit 4f889b3c69
6 changed files with 293 additions and 273 deletions
Show Stats Download Patch File Download Diff File

4
js/views/session_registration_view.js
Unescape Escape View File

@ -30,7 +30,7 @@
const currentPageIndex = REGISTER_INDEX; */
Whisper.SessionRegistrationView = Whisper.View.extend({
className: 'session-standalone-fullscreen',
className: 'session-fullscreen',
initialize() {
this.accountManager = getAccountManager();
// Clean status in case the app closed unexpectedly
@ -94,7 +94,7 @@
},
render() {
this.session_registration_view = new Whisper.ReactWrapperView({
className: 'session-full-screen-flow session-standalone-fullscreen',
className: 'session-full-screen-flow session-fullscreen',
Component: window.Signal.Components.SessionRegistrationView,
props: {},
});

53
stylesheets/_session.scss
Unescape Escape View File

@ -388,3 +388,56 @@ $session_message-container-border-radius: 5px;
right: 0px;
}
}
.session {
&-button {
width: 100%;
height: 45px;
line-height: 45px;
padding: 0 18px 0 18px;
font-size: 15px;
font-family: $session-font-family;
font-weight: 700;
cursor: pointer;
display: flex;
justify-content: center;
border-radius: 500px;
transition-duration: $session-transition-duration;
@mixin transparent-background($textAndBorderColor) {
background-color: Transparent;
background-repeat: no-repeat;
overflow: hidden;
outline: none;
color: $textAndBorderColor;
border: 2px solid $textAndBorderColor;
}
&.full-green {
background-color: $session-color-green;
color: $session-color-white;
border: 2px solid $session-color-green;
&:hover {
@include transparent-background($session-color-green);
}
}
&.green {
@include transparent-background($session-color-green);
&:hover {
background-color: $session-color-green;
color: $session-color-white;
}
}
&.white {
@include transparent-background($session-color-white);
&:hover {
@include transparent-background($session-color-green);
}
}
}
}

289
stylesheets/_session_signin.scss
Unescape Escape View File

@ -1,34 +1,31 @@
.session-standalone-fullscreen {
.session {
&-fullscreen {
overflow-y: auto;
height: 100%;
background: linear-gradient(90deg, #121212 100%, #171717 0%);
}
.session-standalone {
padding: 0;
position: relative;
}
.session-content {
}
&-content {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.session-content-accent {
&-accent {
flex-grow: 1;
padding-left: 20px;
}
.session-accent-text {
&-text {
color: $session-color-white;
font-family: $session-font-family;
&.title {
.title {
font-size: 100px;
font-weight: 700;
line-height: 120px;
}
&.subtitle {
.subtitle {
font-size: 18px;
font-weight: 700;
@ -45,107 +42,94 @@
}
}
}
}
}
}
.session-content-registration {
&-registration {
height: 60%;
padding-right: 128px;
}
}
.entry-fields {
margin: 0px;
padding-bottom: 30px;
}
.session-button {
width: 100%;
height: 45px;
line-height: 45px;
padding: 0 18px 0 18px;
font-size: 15px;
font-family: $session-font-family;
font-weight: 700;
cursor: pointer;
display: flex;
justify-content: center;
border-radius: 500px;
transition-duration: $session-transition-duration;
@mixin transparent-background($textAndBorderColor) {
background-color: Transparent;
background-repeat: no-repeat;
overflow: hidden;
outline: none;
color: $textAndBorderColor;
border: 2px solid $textAndBorderColor;
}
&.full-green {
background-color: $session-color-green;
color: $session-color-white;
border: 2px solid $session-color-green;
&:hover {
@include transparent-background($session-color-green);
}
&-registration {
&-container{
display: flex;
flex-direction: column;
width: 289px;
}
&.green {
@include transparent-background($session-color-green);
&:hover {
background-color: $session-color-green;
color: $session-color-white;
}
&__content {
width: 100%;
overflow-y: auto;
padding-top: 20px;
}
&.white {
@include transparent-background($session-color-white);
&:hover {
@include transparent-background($session-color-green);
}
&__sections {
display: flex;
flex-grow: 1;
flex-direction: column;
}
}
.session-icon-button {
fill: $session-color-white;
opacity: 0.4;
&__tab-container {
display: flex;
flex-grow: 0;
flex-shrink: 0;
cursor: pointer;
display: inline-block;
transition: opacity $session-transition-duration;
width: 289px;
height: 30px;
left: 0;
right: 0;
@mixin adjust-icon-size($size) {
line-height: $size;
height: $size;
width: $size;
margin-left: auto;
margin-right: auto;
color: $session-color-white;
}
margin: $size / 3;
&__tab {
@include fontWasaBold();
width: 100%;
padding-bottom: 10px;
background-color: transparent;
text-align: center;
color: $session-color-white;
border-bottom: 2px solid $session-color-dark-grey;
transition: border-color $session-transition-duration linear;
line-height: 17px;
font-size: 15px;
img {
height: $size;
width: $size;
&--active {
border-bottom: 4px solid $session-color-green;
}
}
&.small {
@include adjust-icon-size($session-icon-size-sm);
@mixin registration-label-mixin {
color: $session-color-white;
text-align: center;
font-size: 17px;
font-weight: 700;
line-height: 17px;
padding: 12px;
}
&.medium {
@include adjust-icon-size($session-icon-size-md);
&__or {
@include registration-label-mixin;
}
&.large {
@include adjust-icon-size($session-icon-size-lg);
&__unique-session-id {
@include registration-label-mixin;
padding-top: 3em;
}
&:hover {
opacity: 1;
&__entry-fields {
margin: 0px;
padding-bottom: 30px;
}
}
}
.input-with-label-container {
&-input-with-label-container {
height: 46.5px;
width: 280px;
color: $session-color-white;
@ -195,78 +179,9 @@
transform: translateY(-50%);
right: 0px;
}
}
.registration-container {
display: flex;
flex-direction: column;
width: 289px;
}
.registration-container__tab-container {
display: flex;
flex-grow: 0;
flex-shrink: 0;
cursor: pointer;
width: 289px;
height: 30px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
color: $session-color-white;
}
.registration-container__tab {
@include fontWasaBold();
width: 100%;
padding-bottom: 10px;
background-color: transparent;
text-align: center;
color: $session-color-white;
border-bottom: 2px solid $session-color-dark-grey;
transition: border-color $session-transition-duration linear;
line-height: 17px;
font-size: 15px;
}
.registration-container__tab--active {
border-bottom: 4px solid $session-color-green;
}
.registration-container__content {
width: 100%;
overflow-y: auto;
padding-top: 20px;
}
.registration-container__sections {
display: flex;
flex-grow: 1;
flex-direction: column;
}
@mixin registration-label-mixin {
color: $session-color-white;
text-align: center;
font-size: 17px;
font-weight: 700;
line-height: 17px;
padding: 12px;
}
.or-signin-buttons {
@include registration-label-mixin;
}
.registration-view-label {
@include registration-label-mixin;
padding-top: 3em;
}
}
.terms-conditions-agreement {
&-terms-conditions-agreement {
padding-top: 10px;
color: $session-color-light-grey;
text-align: center;
@ -285,19 +200,19 @@
color: $session-color-white;
}
}
}
}
.signup-header,
.signin-device-pairing-header {
&-signup-header,
&-signin-device-pairing-header {
padding-top: 10px;
padding-bottom: 10px;
color: $session-color-light-grey;
text-align: center;
font-size: 12px;
line-height: 20px;
}
}
.signin-enter-session-id {
&-signin-enter-session-id {
height: auto;
width: 289px;
border-radius: 8px;
@ -312,8 +227,60 @@
overflow-wrap: break-word;
padding: 20px 5px 20px 5px;
display: inline-block;
}
}
.session-icon-button {
fill: $session-color-white;
opacity: 0.4;
cursor: pointer;
display: inline-block;
transition: opacity $session-transition-duration;
@mixin adjust-icon-size($size) {
line-height: $size;
height: $size;
width: $size;
margin: $size / 3;
img {
height: $size;
width: $size;
}
}
&.small {
@include adjust-icon-size($session-icon-size-sm);
}
&.medium {
@include adjust-icon-size($session-icon-size-md);
}
&.large {
@include adjust-icon-size($session-icon-size-lg);
}
&:hover {
opacity: 1;
}
}
[contenteditable='true']:empty::before {
content: attr(placeholder);
color: $session-color-light-grey;

6
ts/components/session/AccentText.tsx
Unescape Escape View File

@ -18,12 +18,12 @@ export class AccentText extends React.PureComponent<Props> {
const { showSubtitle } = this.props;
return (
<div className="session-accent-text">
<div className="session-accent-text title">
<div className="session-content-accent-text">
<div className="session-content-accent-text title">
Begin<br />your<br />Session.
</div>
{showSubtitle ? (
<div className="session-accent-text subtitle">
<div className="session-content-accent-text subtitle">
Ensuring <span className={classNames('redacted')}>peace of</span>{' '}
mind, one <span className={classNames('redacted')}>session</span> at
a time.

28
ts/components/session/RegistrationTabs.tsx
Unescape Escape View File

@ -54,8 +54,8 @@ const Tab = ({
return (
<div
className={classNames(
'registration-container__tab',
isSelected ? 'registration-container__tab--active' : null
'session-registration__tab',
isSelected ? 'session-registration__tab--active' : null
)}
onClick={handleClick}
role="tab"
@ -93,8 +93,8 @@ export class RegistrationTabs extends React.Component<Props, State> {
const { selectedTab } = this.state;
return (
<div className="registration-container">
<div className="registration-container__tab-container">
<div className="session-registration-container">
<div className="session-registration__tab-container">
<Tab
label="Create Account"
type="create"
@ -146,7 +146,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
const {signUpMode} = this.state;
if (signUpMode === SignUpMode.Default) {
return (
<div className="registration-container__content">
<div className="session-registration__content">
{this.renderSignUpHeader()}
{this.renderSignUpButton()}
</div>
@ -154,9 +154,9 @@ export class RegistrationTabs extends React.Component<Props, State> {
}
else {
return (
<div className="registration-container__content">
<div className="session-registration__content">
{this.renderSignUpHeader()}
<div className="registration-view-label">
<div className="session-registration__unique-session-id">
Your Unique Session ID
</div>
{this.renderEnterSessionID(false)}
@ -187,7 +187,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
private renderSignUpHeader() {
return (
<div className="signup-header">
<div className="session-signup-header">
All users are randomly generated a set of numbers that act as their
unique Session ID. Share your Session ID in order to chat with your
friends!
@ -223,7 +223,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
private renderSignIn() {
return (
<div className="registration-container__content">
<div className="session-registration__content">
{this.renderRegistrationContent()}
{this.renderSignInButtons()}
@ -237,7 +237,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
if (signInMode === SignInMode.UsingSeed) {
return (
<div className={classNames('entry-fields')}>
<div className={classNames('session-registration__entry-fields')}>
<SessionInput
label="Mnemonic Seed"
type="password"
@ -282,7 +282,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
} else if (signInMode === SignInMode.LinkingDevice) {
return (
<div className="">
<div className="signin-device-pairing-header">
<div className="session-signin-device-pairing-header">
Open the Loki Messenger App on your primary device and select
"Device Pairing" from the main menu. Then, enter your Session ID
below to sign in.
@ -298,7 +298,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
private renderEnterSessionID(contentEditable: boolean) {
return (
<div
className="signin-enter-session-id"
className="session-signin-enter-session-id"
contentEditable={contentEditable}
placeholder="Enter your Session ID here"
/>
@ -335,7 +335,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
buttonType={greenButtonType}
text={greenText}
/>
<div className="or-signin-buttons">or</div>
<div className="session-registration__or">or</div>
<SessionButton
onClick={() => {
this.setState({
@ -351,7 +351,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
private renderTermsConditionAgreement() {
return (
<div className="terms-conditions-agreement">
<div className="session-terms-conditions-agreement">
By using this service, you agree to our <a>Terms and Conditions</a> and{' '}
<a>Privacy Statement</a>
</div>

6
ts/components/session/SessionInput.tsx
Unescape Escape View File

@ -37,13 +37,13 @@ export class SessionInput extends React.PureComponent<Props, State> {
const correctType = forceShow ? 'text' : type;
return (
<div className="input-with-label-container">
<div className="session-input-with-label-container">
<label
htmlFor="floatField"
className={classNames(
inputValue !== ''
? 'input-with-label-container filled'
: 'input-with-label-container'
? 'session-input-with-label-container filled'
: 'session-input-with-label-container'
)}
>
{label}

Write Preview
Loading…
Cancel
Save