Log in to {{ globalVars.hostname }}
@@ -8,21 +11,51 @@
-
+
-
{{ item.key }}…
+
+ {{ item.key }}…
+
-
+
{{ item.value.username }}
-
-
-
-
+
+
+
+
+
+ Clear Login Data
+
@@ -36,21 +69,48 @@
= 2">✅
❌
My basic information
-
{{ globalVars.hostname }} can access my public key and any other public information
+
+ {{ globalVars.hostname }} can access my public key and any
+ other public information
+
= 3">✅
❌
Post, message, like, and follow on my behalf
- {{ globalVars.hostname }} will require approval to post, message, like, and follow
- = 3">{{ globalVars.hostname }} may post, message, like, and follow without requiring approval
+
+ {{ globalVars.hostname }} will require approval to post,
+ message, like, and follow
+
+ = 3"
+ >
+ {{ globalVars.hostname }} may post, message, like, and follow
+ without requiring approval
+
✅
❌
Buy, sell, and send coins on my behalf
- {{ globalVars.hostname }} will require approval to buy, sell, or send coins
- {{ globalVars.hostname }} may buy, sell, and send coins without requiring approval
+
+ {{ globalVars.hostname }} will require approval to buy, sell,
+ or send coins
+
+
+ {{ globalVars.hostname }} may buy, sell, and send coins without
+ requiring approval
+
diff --git a/src/app/log-in/log-in.component.scss b/src/app/log-in/log-in.component.scss
index e69de29b..65be59bb 100644
--- a/src/app/log-in/log-in.component.scss
+++ b/src/app/log-in/log-in.component.scss
@@ -0,0 +1,23 @@
+.log-in-clear-data {
+ text-decoration: underline;
+}
+
+.log-in-google,
+.log-in-seed,
+.sign-up-seed {
+ height: 72px;
+ width: 290px;
+ background-size: 290px 72px;
+}
+
+.log-in-google {
+ background-image: url(/assets/log_in_google.png);
+}
+
+.log-in-seed {
+ background-image: url(/assets/log_in_seed.png);
+}
+
+.sign-up-seed {
+ background-image: url(/assets/sign_up_seed.png);
+}
diff --git a/src/app/log-in/log-in.component.ts b/src/app/log-in/log-in.component.ts
index 16904cfc..8f53213c 100644
--- a/src/app/log-in/log-in.component.ts
+++ b/src/app/log-in/log-in.component.ts
@@ -1,35 +1,28 @@
-import {Component, OnInit} from '@angular/core';
-import {AccountService} from '../account.service';
-import {IdentityService} from '../identity.service';
-import {GlobalVarsService} from '../global-vars.service';
-import {BackendAPIService} from '../backend-api.service';
-import {Network} from '../../types/identity';
-import {CryptoService} from '../crypto.service';
-import {EntropyService} from '../entropy.service';
-import {GoogleDriveService} from '../google-drive.service';
-import {RouteNames} from '../app-routing.module';
+import { Component, OnInit } from '@angular/core';
+import { AccountService } from '../account.service';
+import { IdentityService } from '../identity.service';
+import { GlobalVarsService } from '../global-vars.service';
+import { BackendAPIService } from '../backend-api.service';
+import { Network } from '../../types/identity';
+import { GoogleDriveService } from '../google-drive.service';
+import { RouteNames } from '../app-routing.module';
@Component({
selector: 'app-log-in',
templateUrl: './log-in.component.html',
- styleUrls: ['./log-in.component.scss']
+ styleUrls: ['./log-in.component.scss'],
})
export class LogInComponent implements OnInit {
- loading = false;
- showAccessLevels = true;
-
- allUsers: {[key: string]: any} = {};
+ allUsers: { [key: string]: any } = {};
hasUsers = false;
+ showAccessLevels = true;
constructor(
private accountService: AccountService,
private identityService: IdentityService,
- private cryptoService: CryptoService,
- private entropyService: EntropyService,
- private googleDrive: GoogleDriveService,
public globalVars: GlobalVarsService,
- private backendApi: BackendAPIService,
- ) { }
+ private backendApi: BackendAPIService
+ ) {}
ngOnInit(): void {
// Load profile pictures and usernames
@@ -47,7 +40,7 @@ export class LogInComponent implements OnInit {
this.hasUsers = publicKeys.length > 0;
if (publicKeys.length > 0) {
- this.backendApi.GetUsersStateless(publicKeys).subscribe(res2 => {
+ this.backendApi.GetUsersStateless(publicKeys).subscribe((res2) => {
for (const user of res2.UserList) {
this.allUsers[user.PublicKeyBase58Check] = {
username: user.ProfileEntryResponse?.Username,
@@ -59,7 +52,9 @@ export class LogInComponent implements OnInit {
}
launchGoogle(): void {
- const redirectUri = new URL(`${window.location.origin}/${RouteNames.AUTH_GOOGLE}`);
+ const redirectUri = new URL(
+ `${window.location.origin}/${RouteNames.AUTH_GOOGLE}`
+ );
if (this.globalVars.network === Network.testnet) {
redirectUri.searchParams.append('testnet', 'true');
}
@@ -69,20 +64,16 @@ export class LogInComponent implements OnInit {
oauthUri.searchParams.append('client_id', GoogleDriveService.CLIENT_ID);
oauthUri.searchParams.append('scope', GoogleDriveService.DRIVE_SCOPE);
oauthUri.searchParams.append('response_type', 'token');
- // TODO: Investigate using this parameter to defend against CSRF attacks
- // pass on webview state to Google OAuth state
- // https://stackoverflow.com/questions/7722062/google-oauth-2-0-redirect-uri-with-several-parameters
- const stateString = btoa(JSON.stringify({
- webview: this.globalVars.webview,
- testnet: this.globalVars.network === Network.testnet
- }));
- oauthUri.searchParams.append('state', stateString);
window.location.href = oauthUri.toString();
}
selectAccount(publicKey: string): void {
- this.accountService.setAccessLevel(publicKey, this.globalVars.hostname, this.globalVars.accessLevelRequest);
+ this.accountService.setAccessLevel(
+ publicKey,
+ this.globalVars.hostname,
+ this.globalVars.accessLevelRequest
+ );
this.identityService.login({
users: this.accountService.getEncryptedUsers(),
publicKeyAdded: publicKey,
diff --git a/src/styles.scss b/src/styles.scss
index ad248c1f..469ccfd4 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,24 +1,25 @@
-$primary: #0059F7;
-$danger: #E63946;
+$primary: #0059f7;
+$danger: #e63946;
$secondary: #ecf0f1;
-$success: #32ED4B;
+$success: #32ed4b;
$info: #689eff;
$feed-border-radius: 12px;
-$border-grey: #E5E5E5;
-$staking-grey: #F0F0F0;
-$light-grey-for-divider: #F8F8F8;
-$light-grey-for-divider-2: #FAFAFA;
-$buy-button-blue: #0058F7;
+$border-grey: #e5e5e5;
+$staking-grey: #f0f0f0;
+$light-grey-for-divider: #f8f8f8;
+$light-grey-for-divider-2: #fafafa;
+$buy-button-blue: #0058f7;
// Font colors.
$light-font-color: #777777;
$normal-font-color: #222222;
$red-font-color: #fe3537;
-$green-font-color: #19B028;
+$green-font-color: #19b028;
-html, body {
- font-family: 'Roboto Mono';
+html,
+body {
+ font-family: "Roboto Mono";
height: 100%;
width: 100%;
}
@@ -28,10 +29,15 @@ h1 {
color: #333333;
}
-h2,h3,h4,h5,h6,p {
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
margin: 0;
color: #333333;
- font-family: 'Roboto Mono';
+ font-family: "Roboto Mono";
font-weight: normal;
}
@@ -49,194 +55,514 @@ h2,h3,h4,h5,h6,p {
@font-face {
font-family: "color-emoji";
- src: local("Apple Color Emoji"),
- local("Segoe UI Emoji"),
- local("Segoe UI Symbol"),
- local("Noto Color Emoji");
+ src: local("Apple Color Emoji"), local("Segoe UI Emoji"),
+ local("Segoe UI Symbol"), local("Noto Color Emoji");
}
.font-emoji {
- font-family: 'color-emoji';
+ font-family: "color-emoji";
}
// Custom font classes.
-.fc-default { color: $normal-font-color; }
-.fc-muted { color: $light-font-color; }
-.fc-blue { color: $buy-button-blue; }
-.fc-red { color: $red-font-color; }
-.fc-green { color: $green-font-color; }
-
-.fs-1 { font-size: 2.5rem }
-.fs-2 { font-size: 2rem }
-.fs-3 { font-size: 1.75rem }
-
-.fs-30px { font-size: 30px; }
-.fs-25px { font-size: 25px; }
-.fs-24px { font-size: 24px; }
-.fs-20px { font-size: 20px; }
-.fs-18px { font-size: 18px; }
-.fs-16px { font-size: 16px; }
-.fs-15px { font-size: 15px; }
-.fs-15px-important { font-size: 15px !important; }
-.fs-14px { font-size: 14px; }
-.fs-13px { font-size: 13px; }
-.fs-12px { font-size: 12px !important; }
+.fc-default {
+ color: $normal-font-color;
+}
+.fc-muted {
+ color: $light-font-color;
+}
+.fc-blue {
+ color: $buy-button-blue;
+}
+.fc-red {
+ color: $red-font-color;
+}
+.fc-green {
+ color: $green-font-color;
+}
+
+.fs-1 {
+ font-size: 2.5rem;
+}
+.fs-2 {
+ font-size: 2rem;
+}
+.fs-3 {
+ font-size: 1.75rem;
+}
+
+.fs-30px {
+ font-size: 30px;
+}
+.fs-25px {
+ font-size: 25px;
+}
+.fs-24px {
+ font-size: 24px;
+}
+.fs-20px {
+ font-size: 20px;
+}
+.fs-18px {
+ font-size: 18px;
+}
+.fs-16px {
+ font-size: 16px;
+}
+.fs-15px {
+ font-size: 15px;
+}
+.fs-15px-important {
+ font-size: 15px !important;
+}
+.fs-14px {
+ font-size: 14px;
+}
+.fs-13px {
+ font-size: 13px;
+}
+.fs-12px {
+ font-size: 12px !important;
+}
// line heights
-.lh-24px { line-height: 24px; }
-.lh-18px { line-height: 18px; }
-.lh-16px { line-height: 16px; }
-.lh-15px { line-height: 15px; }
-.lh-14px { line-height: 14px; }
-.lh-13px { line-height: 13px; }
-.lh-12px { line-height: 12px; }
-.roboto-regular { font-family: 'Roboto' }
-.roboto-mono { font-family: 'Roboto Mono' }
+.lh-24px {
+ line-height: 24px;
+}
+.lh-18px {
+ line-height: 18px;
+}
+.lh-16px {
+ line-height: 16px;
+}
+.lh-15px {
+ line-height: 15px;
+}
+.lh-14px {
+ line-height: 14px;
+}
+.lh-13px {
+ line-height: 13px;
+}
+.lh-12px {
+ line-height: 12px;
+}
+.roboto-regular {
+ font-family: "Roboto";
+}
+.roboto-mono {
+ font-family: "Roboto Mono";
+}
// Custom border classes.
-.border-color-grey { border-color: $border-grey; }
-.border-color-blue { border-color: $buy-button-blue; }
-.tab-underline-active { border-bottom: solid $buy-button-blue 3px; }
-.tab-underline-inactive { border-bottom: solid rgba(0,0,0,0) 3px; }
+.border-color-grey {
+ border-color: $border-grey;
+}
+.border-color-blue {
+ border-color: $buy-button-blue;
+}
+.tab-underline-active {
+ border-bottom: solid $buy-button-blue 3px;
+}
+.tab-underline-inactive {
+ border-bottom: solid rgba(0, 0, 0, 0) 3px;
+}
-.background-color-grey { background-color: #F5F5F5; } // mocks call this G4
-.background-color-light-grey { background-color: $light-grey-for-divider; }
-.background-color-light-pink { background-color: lightpink; }
+.background-color-grey {
+ background-color: #f5f5f5;
+} // mocks call this G4
+.background-color-light-grey {
+ background-color: $light-grey-for-divider;
+}
+.background-color-light-pink {
+ background-color: lightpink;
+}
// Custom padding classes.
-.p-35px { padding: 35px; }
-.pt-35px { padding-top: 35px; }
-.pr-35px { padding-right: 35px; }
-.pb-35px { padding-bottom: 35px; }
-.pl-35px { padding-left: 35px; }
-.py-35px { padding-top: 35px; padding-bottom: 35px;}
-.px-35px { padding-left: 35px; padding-right: 35px;}
-
-.p-30px { padding: 30px; }
-.pt-30px { padding-top: 30px; }
-.pr-30px { padding-right: 30px; }
-.pb-30px { padding-bottom: 30px; }
-.pl-30px { padding-left: 30px; }
-.py-30px { padding-top: 30px; padding-bottom: 30px;}
-.px-30px { padding-left: 30px; padding-right: 30px;}
-
-.p-30px { padding: 30px; }
-.pt-30px { padding-top: 30px; }
-.pr-30px { padding-right: 30px; }
-.pb-30px { padding-bottom: 30px; }
-.pl-30px { padding-left: 30px; }
-.py-30px { padding-top: 30px; padding-bottom: 30px;}
-.px-30px { padding-left: 30px; padding-right: 30px;}
-
-.p-25px { padding: 25px; }
-.pt-25px { padding-top: 25px; }
-.pr-25px { padding-right: 25px; }
-.pb-25px { padding-bottom: 25px; }
-.pl-25px { padding-left: 25px; }
-.py-25px { padding-top: 25px; padding-bottom: 25px;}
-.px-25px { padding-left: 25px; padding-right: 25px;}
-
-.p-20px { padding: 20px; }
-.pt-20px { padding-top: 20px; }
-.pr-20px { padding-right: 20px; }
-.pb-20px { padding-bottom: 20px; }
-.pl-20px { padding-left: 20px; }
-.py-20px { padding-top: 20px; padding-bottom: 20px;}
-.px-20px { padding-left: 20px; padding-right: 20px;}
-
-.p-15px { padding: 15px; }
-.pt-15px { padding-top: 15px; }
-.pr-15px { padding-right: 15px; }
-.pb-15px { padding-bottom: 15px; }
-.pl-15px { padding-left: 15px; }
-.py-15px { padding-top: 15px; padding-bottom: 15px;}
-.px-15px { padding-left: 15px; padding-right: 15px;}
-
-.p-10px { padding: 10px; }
-.pt-10px { padding-top: 10px; }
-.pr-10px { padding-right: 10px; }
-.pb-10px { padding-bottom: 10px; }
-.pl-10px { padding-left: 10px; }
-.py-10px { padding-top: 10px; padding-bottom: 10px;}
-.px-10px { padding-left: 10px; padding-right: 10px;}
-
-.p-5px { padding: 5px; }
-.pt-5px { padding-top: 5px; }
-.pr-5px { padding-right: 5px; }
-.pb-5px { padding-bottom: 5px; }
-.pl-5px { padding-left: 5px; }
-.py-5px { padding-top: 5px; padding-bottom: 5px;}
-.px-5px { padding-left: 5px; padding-right: 5px;}
-
-.p-2px { padding: 2px; }
-.pt-2px { padding-top: 2px; }
-.pr-2px { padding-right: 2px; }
-.pb-2px { padding-bottom: 2px; }
-.pl-2px { padding-left: 5px; }
-.py-2px { padding-top: 2px; padding-bottom: 2px;}
-.px-2px { padding-left: 2px; padding-right: 2px;}
+.p-35px {
+ padding: 35px;
+}
+.pt-35px {
+ padding-top: 35px;
+}
+.pr-35px {
+ padding-right: 35px;
+}
+.pb-35px {
+ padding-bottom: 35px;
+}
+.pl-35px {
+ padding-left: 35px;
+}
+.py-35px {
+ padding-top: 35px;
+ padding-bottom: 35px;
+}
+.px-35px {
+ padding-left: 35px;
+ padding-right: 35px;
+}
+
+.p-30px {
+ padding: 30px;
+}
+.pt-30px {
+ padding-top: 30px;
+}
+.pr-30px {
+ padding-right: 30px;
+}
+.pb-30px {
+ padding-bottom: 30px;
+}
+.pl-30px {
+ padding-left: 30px;
+}
+.py-30px {
+ padding-top: 30px;
+ padding-bottom: 30px;
+}
+.px-30px {
+ padding-left: 30px;
+ padding-right: 30px;
+}
+
+.p-30px {
+ padding: 30px;
+}
+.pt-30px {
+ padding-top: 30px;
+}
+.pr-30px {
+ padding-right: 30px;
+}
+.pb-30px {
+ padding-bottom: 30px;
+}
+.pl-30px {
+ padding-left: 30px;
+}
+.py-30px {
+ padding-top: 30px;
+ padding-bottom: 30px;
+}
+.px-30px {
+ padding-left: 30px;
+ padding-right: 30px;
+}
+
+.p-25px {
+ padding: 25px;
+}
+.pt-25px {
+ padding-top: 25px;
+}
+.pr-25px {
+ padding-right: 25px;
+}
+.pb-25px {
+ padding-bottom: 25px;
+}
+.pl-25px {
+ padding-left: 25px;
+}
+.py-25px {
+ padding-top: 25px;
+ padding-bottom: 25px;
+}
+.px-25px {
+ padding-left: 25px;
+ padding-right: 25px;
+}
+
+.p-20px {
+ padding: 20px;
+}
+.pt-20px {
+ padding-top: 20px;
+}
+.pr-20px {
+ padding-right: 20px;
+}
+.pb-20px {
+ padding-bottom: 20px;
+}
+.pl-20px {
+ padding-left: 20px;
+}
+.py-20px {
+ padding-top: 20px;
+ padding-bottom: 20px;
+}
+.px-20px {
+ padding-left: 20px;
+ padding-right: 20px;
+}
+
+.p-15px {
+ padding: 15px;
+}
+.pt-15px {
+ padding-top: 15px;
+}
+.pr-15px {
+ padding-right: 15px;
+}
+.pb-15px {
+ padding-bottom: 15px;
+}
+.pl-15px {
+ padding-left: 15px;
+}
+.py-15px {
+ padding-top: 15px;
+ padding-bottom: 15px;
+}
+.px-15px {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.p-10px {
+ padding: 10px;
+}
+.pt-10px {
+ padding-top: 10px;
+}
+.pr-10px {
+ padding-right: 10px;
+}
+.pb-10px {
+ padding-bottom: 10px;
+}
+.pl-10px {
+ padding-left: 10px;
+}
+.py-10px {
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+.px-10px {
+ padding-left: 10px;
+ padding-right: 10px;
+}
+
+.p-5px {
+ padding: 5px;
+}
+.pt-5px {
+ padding-top: 5px;
+}
+.pr-5px {
+ padding-right: 5px;
+}
+.pb-5px {
+ padding-bottom: 5px;
+}
+.pl-5px {
+ padding-left: 5px;
+}
+.py-5px {
+ padding-top: 5px;
+ padding-bottom: 5px;
+}
+.px-5px {
+ padding-left: 5px;
+ padding-right: 5px;
+}
+
+.p-2px {
+ padding: 2px;
+}
+.pt-2px {
+ padding-top: 2px;
+}
+.pr-2px {
+ padding-right: 2px;
+}
+.pb-2px {
+ padding-bottom: 2px;
+}
+.pl-2px {
+ padding-left: 5px;
+}
+.py-2px {
+ padding-top: 2px;
+ padding-bottom: 2px;
+}
+.px-2px {
+ padding-left: 2px;
+ padding-right: 2px;
+}
// Zero padding classes are useful for things like bootstrap columns that have padding added.
-.p-0px { padding: 0px; }
-.pt-0px { padding-top: 0px; }
-.pr-0px { padding-right: 0px; }
-.pb-0px { padding-bottom: 0px; }
-.pl-0px { padding-left: 0px; }
-.py-0px { padding-top: 0px; padding-bottom: 0px;}
-.px-0px { padding-left: 0px; padding-right: 0px;}
+.p-0px {
+ padding: 0px;
+}
+.pt-0px {
+ padding-top: 0px;
+}
+.pr-0px {
+ padding-right: 0px;
+}
+.pb-0px {
+ padding-bottom: 0px;
+}
+.pl-0px {
+ padding-left: 0px;
+}
+.py-0px {
+ padding-top: 0px;
+ padding-bottom: 0px;
+}
+.px-0px {
+ padding-left: 0px;
+ padding-right: 0px;
+}
// Custom margin classes.
-.mt-2px { margin-top: 2px; }
-.mt-7px { margin-top: 7px; }
-
-.m-5px { margin: 5px; }
-.mt-5px { margin-top: 5px; }
-.mr-5px { margin-right: 5px; }
-.mb-5px { margin-bottom: 5px; }
-.ml-5px { margin-left: 5px; }
-
-.m-10px { margin: 10px; }
-.mt-10px { margin-top: 10px; }
-.mr-10px { margin-right: 10px; }
-.mb-10px { margin-bottom: 10px; }
-.ml-10px { margin-left: 10px; }
-
-.m-15px { margin: 15px; }
-.mt-15px { margin-top: 15px; }
-.mr-15px { margin-right: 15px; }
-.mb-15px { margin-bottom: 15px; }
-.ml-15px { margin-left: 15px; }
-
-.m-20px { margin: 20px; }
-.mt-20px { margin-top: 20px; }
-.mr-20px { margin-right: 20px; }
-.mb-20px { margin-bottom: 20px; }
-.ml-20px { margin-left: 20px; }
-.mx-20px { margin-left: 20px; margin-right: 20px; }
-.my-20px { margin-top: 20px; margin-bottom: 20px; }
-
-.m-25px { margin: 25px; }
-.mt-25px { margin-top: 25px; }
-.mr-25px { margin-right: 25px; }
-.mb-25px { margin-bottom: 25px; }
-.ml-25px { margin-left: 25px; }
-.mx-25px { margin-left: 25px; margin-right: 25px; }
-.my-25px { margin-top: 25px; margin-bottom: 25px; }
-
-.m-30px { margin: 30px; }
-.mt-30px { margin-top: 30px; }
-.mr-30px { margin-right: 30px; }
-.mb-30px { margin-bottom: 30px; }
-.ml-30px { margin-left: 30px; }
-.mx-30px { margin-left: 30px; margin-right: 30px; }
-.my-30px { margin-top: 30px; margin-bottom: 30px; }
-
-.br-3px { border-radius: 3px; }
-.br-12px { border-radius: $feed-border-radius; }
-
-.vh-100 { height: 100vh !important; }
-
-.position-fixed { position: fixed; }
-.background-color-white { background-color: white; }
+.mt-2px {
+ margin-top: 2px;
+}
+.mt-7px {
+ margin-top: 7px;
+}
+
+.m-5px {
+ margin: 5px;
+}
+.mt-5px {
+ margin-top: 5px;
+}
+.mr-5px {
+ margin-right: 5px;
+}
+.mb-5px {
+ margin-bottom: 5px;
+}
+.ml-5px {
+ margin-left: 5px;
+}
+
+.m-10px {
+ margin: 10px;
+}
+.mt-10px {
+ margin-top: 10px;
+}
+.mr-10px {
+ margin-right: 10px;
+}
+.mb-10px {
+ margin-bottom: 10px;
+}
+.ml-10px {
+ margin-left: 10px;
+}
+
+.m-15px {
+ margin: 15px;
+}
+.mt-15px {
+ margin-top: 15px;
+}
+.mr-15px {
+ margin-right: 15px;
+}
+.mb-15px {
+ margin-bottom: 15px;
+}
+.ml-15px {
+ margin-left: 15px;
+}
+
+.m-20px {
+ margin: 20px;
+}
+.mt-20px {
+ margin-top: 20px;
+}
+.mr-20px {
+ margin-right: 20px;
+}
+.mb-20px {
+ margin-bottom: 20px;
+}
+.ml-20px {
+ margin-left: 20px;
+}
+.mx-20px {
+ margin-left: 20px;
+ margin-right: 20px;
+}
+.my-20px {
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+
+.m-25px {
+ margin: 25px;
+}
+.mt-25px {
+ margin-top: 25px;
+}
+.mr-25px {
+ margin-right: 25px;
+}
+.mb-25px {
+ margin-bottom: 25px;
+}
+.ml-25px {
+ margin-left: 25px;
+}
+.mx-25px {
+ margin-left: 25px;
+ margin-right: 25px;
+}
+.my-25px {
+ margin-top: 25px;
+ margin-bottom: 25px;
+}
+
+.m-30px {
+ margin: 30px;
+}
+.mt-30px {
+ margin-top: 30px;
+}
+.mr-30px {
+ margin-right: 30px;
+}
+.mb-30px {
+ margin-bottom: 30px;
+}
+.ml-30px {
+ margin-left: 30px;
+}
+.mx-30px {
+ margin-left: 30px;
+ margin-right: 30px;
+}
+.my-30px {
+ margin-top: 30px;
+ margin-bottom: 30px;
+}
+
+.br-3px {
+ border-radius: 3px;
+}
+.br-12px {
+ border-radius: $feed-border-radius;
+}
+
+.vh-100 {
+ height: 100vh !important;
+}
+
+.position-fixed {
+ position: fixed;
+}
+.background-color-white {
+ background-color: white;
+}
.home-container {
max-width: 720px;
@@ -251,7 +577,7 @@ h2,h3,h4,h5,h6,p {
background-color: $primary;
padding: 20px;
text-align: center;
- color: #FFF;
+ color: #fff;
}
.full-screen {
@@ -272,37 +598,11 @@ h2,h3,h4,h5,h6,p {
.sign-up-btn {
height: 36px;
}
-
-.log-in-google,
-.log-in-seed,
-.sign-up-google,
-.sign-up-seed {
- height: 72px;
- width: 290px;
- background-size: 290px 72px;
-}
-
-.log-in-google {
- background-image: url(/assets/log_in_google.png);
-}
-
-.log-in-seed {
- background-image: url(/assets/log_in_seed.png);
-}
-
-.sign-up-google {
- background-image: url(/assets/sign_up_google.png);
-}
-
-.sign-up-seed {
- background-image: url(/assets/sign_up_seed.png);
-}
-
.google-wrapper {
display: flex;
justify-content: center;
align-items: center;
- height: 200px
+ height: 200px;
}
.google-ball {
@@ -315,26 +615,26 @@ h2,h3,h4,h5,h6,p {
}
.google-ball.blue {
- background-color: #4285F5;
+ background-color: #4285f5;
}
.google-ball.red {
- background-color: #EA4436;
- animation-delay: .25s;
+ background-color: #ea4436;
+ animation-delay: 0.25s;
}
.google-ball.yellow {
- background-color: #FBBD06;
- animation-delay: .5s;
+ background-color: #fbbd06;
+ animation-delay: 0.5s;
}
.google-ball.green {
- background-color: #34A952;
- animation-delay: .75s;
+ background-color: #34a952;
+ animation-delay: 0.75s;
}
@keyframes bounce {
- 50% {
- transform: translateY(25px);
- }
+ 50% {
+ transform: translateY(25px);
+ }
}