fix styles

app/src/app/modules/trust/trust.component.html

@@ -57,7 +57,7 @@
  <!-- SCORE -->
  <div class="scoreWrapper">
  <div class="score">
- {{ user.score | number: "0.1-3" | percent }}
+ {{ user.score | number: '0.1-3' | percent }}
  </div>
  <!-- METRICS -->
  <div class="metricsWrapper">
@@ -77,33 +77,36 @@
  <!-- SCORE -->
  <div class="scoreWrapper">
  <div class="score">
- {{ user.score | number: "0.1-3" | percent }}
+ {{ user.score | number: '0.1-3' | percent }}
  </div>
  <div class="scoreSubtitle">Trustworthy</div>
  </div>
- </div>
 
- <!-- DETAILS -->
- <div class="detailsWrapper">
- <div class="detailsHeader">
- <div class="detailsHeader__left" (click)="showDetails = !showDetails">
- <i *ngIf="showDetails" class="material-icons"
- >keyboard_arrow_down</i
- >
- <i *ngIf="!showDetails" class="material-icons"
- >keyboard_arrow_right</i
+ <!-- DETAILS -->
+ <div class="detailsWrapper">
+ <div class="detailsHeader">
+ <div
+ class="detailsHeader__left"
+ (click)="showDetails = !showDetails"
  >
- <span>Details</span>
+ <i *ngIf="showDetails" class="material-icons"
+ >keyboard_arrow_down</i
+ >
+ <i *ngIf="!showDetails" class="material-icons"
+ >keyboard_arrow_right</i
+ >
+ <span>Details</span>
+ </div>
+ <div class="detailsHeader__right" (click)="switchView('tree')">
+ See visualization
+ </div>
  </div>
- <div class="detailsHeader__right" (click)="switchView('tree')">
- See visualization
+ <div class="detailsContent" *ngIf="showDetails">
+ <div class="detailsTier">1st degree friends</div>
+ <div class="detailsTier">2nd degree friends</div>
+ <div class="detailsTier">3rd degree friends</div>
  </div>
  </div>
- <div class="detailsContent" *ngIf="showDetails">
- <div class="detailsTier">1st degree friends</div>
- <div class="detailsTier">2nd degree friends</div>
- <div class="detailsTier">3rd degree friends</div>
- </div>
  </div>
  </div>
  </div>

app/src/app/modules/trust/trust.component.scss

@@ -87,7 +87,7 @@ h1 {
  }
  .avatar {
  padding: 16px;
- box-shadow: inset 0 0 16px 16px rgba(#000, 0.2);
+
  img {
  border-radius: 50%;
  width: 300px;
@@ -97,6 +97,7 @@ h1 {
  vertical-align: middle;
  object-fit: cover;
  margin: auto;
+ box-shadow: 0 0 10px 5px rgba(#000, 0.07);
  }
  }
 }
@@ -146,12 +147,25 @@ h1 {
  justify-content: space-between;
  align-items: center;
  transition: color 0.4s $bezier;
+ .detailsHeader__left {
+ display: flex;
+ align-items: center;
+ }
+ .detailsHeader__right {
+ color: rgba($coolGrey, 0.7);
+ text-decoration: underline;
+ // &:hover {
+ // text-decoration: underline;
+ // }
+ }
  > * {
+ cursor: pointer;
  &:hover {
- transform: scale(1.2, 1.2);
+ // transform: scale(1.2, 1.2);
  color: #999;
  }
  }
+
  .avatar {
  padding: 16px;
  img {
@@ -190,17 +204,6 @@ h1 {
  }
  }
  }
- .detailsHeader__left {
- display: flex;
- align-items: center;
- }
- .detailsHeader__right {
- color: rgba($coolGrey, 0.7);
- text-decoration: underline;
- // &:hover {
- // text-decoration: underline;
- // }
- }
  }
  .detailsContent {
  padding: 16px;

app/src/app/modules/trust/trust.service.ts

-import { Injectable, Inject } from "@angular/core";
-import { Observable } from "rxjs";
-import { WEB3 } from "../web3/web3.module";
-import * as TrustContract from "../web3/contracts/trust.contract";
-import { HttpClient } from "@angular/common/http";
-import { uPortVerificationService } from "../uport/verification.service";
-import { first } from "rxjs/operators";
+import { Injectable, Inject } from '@angular/core';
+import { Observable } from 'rxjs';
+import { WEB3 } from '../web3/web3.module';
+import * as TrustContract from '../web3/contracts/trust.contract';
+import { HttpClient } from '@angular/common/http';
+import { uPortVerificationService } from '../uport/verification.service';
+import { first } from 'rxjs/operators';
 
-const T3_SERVER_URI = "https://t3-backend.ngrok.io";
+const T3_SERVER_URI = 'https://t3-backend.ngrok.io';
 
 @Injectable()
 export class T3TrustService {
@@ -20,9 +20,9 @@ export class T3TrustService {
  .pipe(first())
  .toPromise();
  this.http
- .post(T3_SERVER_URI + "/vote", {
+ .post(T3_SERVER_URI + '/vote', {
  profile,
- to: obj.did.split(":")[2],
+ to: obj.did.split(':')[2],
  score: obj.score
  })
  .subscribe(data => {});
@@ -84,7 +84,7 @@ export class T3TrustService {
  // add all
  // go through each actor in network[] and get their network
 
- console.log("finalTrustTree");
+ console.log('finalTrustTree');
  console.log(finalTrustTree);
  return finalTrustTree;
  }
@@ -101,7 +101,7 @@ export class T3TrustService {
  newFakeResponse[0].blockchainResponse.DistrustedDids
  );
 
- console.log("allDids");
+ console.log('allDids');
  console.log(allDids);
 
  return newFakeResponse;
@@ -110,51 +110,51 @@ export class T3TrustService {
  getBlockchainResponse(actorDid: string) {
  const fakeDatabase = [
  {
- actorDid: "1",
+ actorDid: '1',
  blockchainResponse: {
- trustedDids: ["2"],
- neutralDids: ["3"],
- distrustedDids: ["4"]
+ trustedDids: ['2'],
+ neutralDids: ['3'],
+ distrustedDids: ['4']
  }
  },
  {
- actorDid: "2",
+ actorDid: '2',
  blockchainResponse: {
- trustedDids: ["1", "3", "5"],
- neutralDids: ["4"],
+ trustedDids: ['1', '3', '5'],
+ neutralDids: ['4'],
  distrustedDids: []
  }
  },
  {
- actorDid: "3",
+ actorDid: '3',
  blockchainResponse: {
- trustedDids: ["1"],
- neutralDids: ["4", "5"],
- distrustedDids: ["2"]
+ trustedDids: ['1'],
+ neutralDids: ['4', '5'],
+ distrustedDids: ['2']
  }
  },
  {
- actorDid: "4",
+ actorDid: '4',
  blockchainResponse: {
- trustedDids: ["3"],
- neutralDids: ["1"],
- distrustedDids: ["2", "5"]
+ trustedDids: ['3'],
+ neutralDids: ['1'],
+ distrustedDids: ['2', '5']
  }
  },
  {
- actorDid: "5",
+ actorDid: '5',
  blockchainResponse: {
- trustedDids: ["3", "6"],
- neutralDids: ["2"],
- distrustedDids: ["4"]
+ trustedDids: ['3', '6'],
+ neutralDids: ['2'],
+ distrustedDids: ['4']
  }
  },
  {
- actorDid: "6",
+ actorDid: '6',
  blockchainResponse: {
  trustedDids: [],
- neutralDids: ["3"],
- distrustedDids: ["7", "8"]
+ neutralDids: ['3'],
+ distrustedDids: ['7', '8']
  }
  }
  ];