gnunet-svn
[Top][All Lists]
Advanced

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[GNUnet-SVN] [gnunet-webui] 05/05: Implemented GNS and fixed UI issues


From: gnunet
Subject: [GNUnet-SVN] [gnunet-webui] 05/05: Implemented GNS and fixed UI issues
Date: Sat, 09 Jun 2018 12:17:31 +0200

This is an automated email from the git hooks/post-receive script.

phil pushed a commit to branch master
in repository gnunet-webui.

commit dedf1f9f6e2f74cc1b36cbfc566d05c3a50d163b
Author: Phil <address@hidden>
AuthorDate: Sat Jun 9 12:16:34 2018 +0200

    Implemented GNS and fixed UI issues
---
 src/app/api.service.ts                             | 21 ++++++--
 src/app/app-routing.module.ts                      |  8 ++-
 src/app/app.component.html                         | 24 +++++++--
 src/app/app.module.ts                              | 10 ++--
 .../create-identity/create-identity.component.html | 10 ++--
 .../create-identity/create-identity.component.ts   |  6 ++-
 src/app/error-message/error-message.component.html | 25 ++++++++-
 src/app/gns-page/gns-page.component.html           | 47 +++++++++++++++++
 .../gns-page.component.spec.ts}                    | 12 ++---
 src/app/gns-page/gns-page.component.ts             | 57 ++++++++++++++++++++
 src/app/heroes/heroes.component.html               |  4 --
 src/app/heroes/heroes.component.ts                 | 20 -------
 src/app/identity-page/identity-page.component.html | 61 ++++++++++++++--------
 src/app/identity-page/identity-page.component.ts   | 31 ++++++++---
 src/app/messages.service.ts                        | 39 ++++++++++++++
 .../namestore-page/namestore-page.component.html   |  3 ++
 .../namestore-page.component.spec.ts}              | 12 ++---
 src/app/namestore-page/namestore-page.component.ts | 14 +++++
 .../peerstore-page/peerstore-page.component.html   |  3 ++
 .../peerstore-page.component.spec.ts}              | 12 ++---
 src/app/peerstore-page/peerstore-page.component.ts | 14 +++++
 src/index.html                                     |  2 +-
 src/scss/base/_body.scss                           |  4 +-
 src/scss/components/_alert.scss                    | 31 +++++++++++
 src/scss/components/_badge.scss                    | 11 ++++
 src/scss/components/_button.scss                   | 30 +++++++++--
 src/scss/components/_error.scss                    |  9 ----
 src/scss/components/_footer.scss                   |  6 +++
 src/scss/components/_header.scss                   |  7 +++
 src/scss/components/_input.scss                    | 27 ++++------
 src/scss/components/_link.scss                     |  2 +-
 .../components/_progressbar.scss}                  |  0
 src/scss/components/_spinner.scss                  | 15 ++++++
 src/scss/components/_table.scss                    |  6 +--
 src/scss/main.scss                                 | 18 +++++--
 src/scss/objects/_type.scss                        |  7 +++
 src/scss/settings/_colors.scss                     | 40 ++++++++++++--
 src/scss/settings/_type.scss                       | 56 ++++++++++++++++++++
 src/styles.scss                                    | 49 +----------------
 39 files changed, 574 insertions(+), 179 deletions(-)

diff --git a/src/app/api.service.ts b/src/app/api.service.ts
index 9756bd4..579939d 100644
--- a/src/app/api.service.ts
+++ b/src/app/api.service.ts
@@ -12,11 +12,14 @@ import { MessagesService } from './messages.service';
 export class ApiService {
   apis: RestAPI[] = [
     {name: 'Identity API', desc: 'This is the identity API', link: 'identity'},
-    {name: 'Rest API 2', desc: 'Lorem ipsum dolor sit amet consectetur 
adipiscing elit sed, diam dictum inceptos nostra mus enim id scelerisque, nam 
congue ligula penatibus dui arcu cubilia. Placerat dapibus felis euismod ligula 
pellentesque facilisi magna eu curae ridiculus arcu venenatis, ad justo auctor 
mollis faucibus viverra odio netus lectus risus vitae. Quisque morbi dapibus 
mollis ut cursus leo nascetur vitae aliquet venenatis per sociosqu, vivamus 
pulvinar risus nunc libero feug [...]
-    {name: 'Rest API 3', desc: 'Lorem ipsum dolor sit amet consectetur 
adipiscing elit sed, diam dictum inceptos nostra mus enim id scelerisque, nam 
congue ligula penatibus dui arcu cubilia. Placerat dapibus felis euismod ligula 
pellentesque facilisi magna eu curae ridiculus arcu venenatis, ad justo auctor 
mollis faucibus viverra odio netus lectus risus vitae. Quisque morbi dapibus 
mollis ut cursus leo nascetur vitae aliquet venenatis per sociosqu, vivamus 
pulvinar risus nunc libero feug [...]
+    {name: 'GNS API', desc: 'This is the gns API', link: 'gns'},
+    {name: 'Namestore API', desc: 'This is the namestore API', link: 
'namestore'},
+    {name: 'Peerstore API', desc: 'This is the peerstore API', link: 
'peerstore'},
   ];
 
-  private identityURL = 'http://localhost:7776/identity';  // URL to GNUnet 
identity web api
+  private restURL = 'http://localhost:7776/'
+  private identityURL = this.restURL+'identity';
+  private gnsURL = this.restURL+'gns';
 
   constructor(private http: HttpClient,
               private messages:MessagesService) { }
@@ -62,6 +65,18 @@ export class ApiService {
       catchError(this.handleError('changeIdentity', []))
     );
   }
+
+  searchNameSystem (url: string): Observable<any>{
+    this.messages.dismissError();
+    return this.http.get(this.gnsURL+'/'+url)
+    .pipe(
+      tap(json => this.handleJSON(json)),
+      catchError(this.handleError('searchNameSystem', []))
+    );
+  }
+
+
+
   /**
   * Handle Http operation that failed.
   * Let the app continue.
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 5d38c0f..82a9d64 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -4,12 +4,18 @@ import { RouterModule, Routes } from '@angular/router';
 import { RestApisComponent } from './rest-apis/rest-apis.component';
 import { MainPageComponent } from './main-page/main-page.component';
 import { IdentityPageComponent } from 
'./identity-page/identity-page.component';
+import { GnsPageComponent } from './gns-page/gns-page.component';
+import { PeerstorePageComponent } from 
'./peerstore-page/peerstore-page.component';
+import { NamestorePageComponent } from 
'./namestore-page/namestore-page.component';
 
 
 const routes: Routes = [
   { path: '', component: MainPageComponent },
   { path: 'apis', component: RestApisComponent },
-  { path: 'identity', component: IdentityPageComponent }
+  { path: 'identity', component: IdentityPageComponent },
+  { path: 'gns', component: GnsPageComponent },
+  { path: 'peerstore', component: PeerstorePageComponent },
+  { path: 'namestore', component: NamestorePageComponent }
 ];
 
 @NgModule({
diff --git a/src/app/app.component.html b/src/app/app.component.html
index c13abbe..7f098f2 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,5 +1,5 @@
 <!--The content below is only a placeholder and can be replaced.-->
-<header class="u-bgcolor-purple u-color-white u-p-x3">
+<header class="c-header u-p-x2">
  <div class="o-container o-container--size-small">
    <div class="o-media o-media--middle">
      <div class="o-media__fixed">
@@ -14,6 +14,15 @@
            <li class="o-list__item">
              <a routerLink="identity" class="c-link">Identity</a>
            </li>
+           <li class="o-list__item">
+             <a routerLink="gns" class="c-link">GNS</a>
+           </li>
+           <li class="o-list__item">
+             <a routerLink="namestore" class="c-link">Namestore</a>
+           </li>
+           <li class="o-list__item">
+             <a routerLink="peerstore" class="c-link">Peerstore</a>
+           </li>
          </ul>
        </nav>
      </div>
@@ -21,16 +30,23 @@
  </div>
 </header>
 
-<main class="u-pv-x3 o-container">
+<main class="u-mv-x2 o-container">
   <error-message></error-message>
   <router-outlet></router-outlet>
 </main>
 
-<footer class="u-bgcolor-purple u-color-white u-p-x3">
+<footer class="c-footer u-p-x2">
  <div class="o-container o-container--size-small">
    <div class="o-media o-media--middle">
      <div class="o-media__fixed">
-       <a class="c-link">Impressum</a>
+       <ul class="o-list o-list--inline o-list--gutter-x4">
+         <li class="o-list__item">
+           <a routerLink="/" class="c-link">Impressum</a>
+         </li>
+         <li class="o-list__item">
+           <a routerLink="/" class="c-link">Documentation</a>
+         </li>
+       </ul>
      </div>
      <div class="o-media__fluid u-text-right">
        Copyright things
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index c1b600d..80b303f 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -4,7 +4,6 @@ import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
-import { HeroesComponent } from './heroes/heroes.component';
 import { RestApisComponent } from './rest-apis/rest-apis.component';
 import { AppRoutingModule } from './app-routing.module';
 import { MainPageComponent } from './main-page/main-page.component';
@@ -12,17 +11,22 @@ import { IdentityPageComponent } from 
'./identity-page/identity-page.component';
 import { CreateIdentityComponent } from 
'./create-identity/create-identity.component';
 import { MyFilterPipe } from './filter.pipe';
 import { ErrorMessageComponent } from 
'./error-message/error-message.component';
+import { GnsPageComponent } from './gns-page/gns-page.component';
+import { NamestorePageComponent } from 
'./namestore-page/namestore-page.component';
+import { PeerstorePageComponent } from 
'./peerstore-page/peerstore-page.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    HeroesComponent,
     RestApisComponent,
     MainPageComponent,
     IdentityPageComponent,
     CreateIdentityComponent,
     MyFilterPipe,
-    ErrorMessageComponent
+    ErrorMessageComponent,
+    GnsPageComponent,
+    NamestorePageComponent,
+    PeerstorePageComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/create-identity/create-identity.component.html 
b/src/app/create-identity/create-identity.component.html
index 328e447..d2e27fe 100644
--- a/src/app/create-identity/create-identity.component.html
+++ b/src/app/create-identity/create-identity.component.html
@@ -1,8 +1,8 @@
-<div class="c-card c-card--no-padding u-p-x3">
+<div class="c-card u-p-x3">
   <div class="o-type-20 u-pb-x1" >Create new identity</div>
-  <div class="u-ph-x2">
-    <input [(ngModel)]="this.input_text" type="text" class="c-input" 
placeholder="Identity Name"/>
-    <span class="u-ph-x3"><a class="c-button" 
(click)="onClick()">Create</a></span>
-    <span *ngIf="!is_free">Loading... Please wait.</span>
+  <div class="o-list o-list--inline">
+    <input [(ngModel)]="this.input_text" type="text" class="o-list__item 
c-input" placeholder="Identity Name"/>
+    <a class="o-list__item c-button" (click)="onClick()"><i class="fa 
fa-plus"></i></a>
+    <div *ngIf="!is_free" class="o-list__item c-spinner"></div>
   </div>
 </div>
diff --git a/src/app/create-identity/create-identity.component.ts 
b/src/app/create-identity/create-identity.component.ts
index 2ba7fce..1f20d65 100644
--- a/src/app/create-identity/create-identity.component.ts
+++ b/src/app/create-identity/create-identity.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 
 import { ApiService } from '../api.service';
 import { IdentityPageComponent } from 
'../identity-page/identity-page.component';
+import { MessagesService } from '../messages.service';
 
 @Component({
   selector: 'create-identity-component',
@@ -14,6 +15,7 @@ export class CreateIdentityComponent implements OnInit {
   private is_free:boolean = true;
 
   constructor(private apiService: ApiService,
+              private message: MessagesService,
               private identity: IdentityPageComponent) { }
 
   ngOnInit() {
@@ -23,12 +25,14 @@ export class CreateIdentityComponent implements OnInit {
     if (this.input_text != "" && this.is_free){
       this.is_free = false;
       this.json.name = this.input_text;
+      this.input_text = '';
       this.apiService.createIdentity(this.json).subscribe(test => {
+        this.message.pushSuccess('Created new identity');
         this.identity.getAPIs();
         this.is_free = true;
       });
     } else {
-      alert("No input");
+      this.message.pushError('Missing input. Define name of new object');
     }
   }
 
diff --git a/src/app/error-message/error-message.component.html 
b/src/app/error-message/error-message.component.html
index fc7cc10..a481548 100644
--- a/src/app/error-message/error-message.component.html
+++ b/src/app/error-message/error-message.component.html
@@ -1,7 +1,28 @@
 
-<div *ngIf="messages.getError()" class="c-error u-mb-x2">
+<div *ngIf="messages.getError()" class="c-alert c-alert--error u-mb-x2">
   <div class="o-media">
     <span class="o-media__fixed u-text-left">Error: 
{{messages.getError()}}</span>
-    <a class="o-media__fluid u-text-right c-link" 
(click)="dismissError()">X</a>
+    <a class="o-media__fluid u-text-right c-link" 
(click)="messages.dismissError()">X</a>
+  </div>
+</div>
+
+<div *ngIf="messages.getWarning()" class="c-alert c-alert--warning u-mb-x2">
+  <div class="o-media">
+    <span class="o-media__fixed u-text-left">Warning: 
{{messages.getWarning()}}</span>
+    <a class="o-media__fluid u-text-right c-link" 
(click)="messages.dismissWarning()">X</a>
+  </div>
+</div>
+
+<div *ngIf="messages.getSuccess()" class="c-alert c-alert--success u-mb-x2">
+  <div class="o-media">
+    <span class="o-media__fixed u-text-left">Success: 
{{messages.getSuccess()}}</span>
+    <a class="o-media__fluid u-text-right c-link" 
(click)="messages.dismissSuccess()">X</a>
+  </div>
+</div>
+
+<div *ngIf="messages.getInformation()" class="c-alert c-alert--information 
u-mb-x2">
+  <div class="o-media">
+    <span class="o-media__fixed u-text-left">Information: 
{{messages.getInformation()}}</span>
+    <a class="o-media__fluid u-text-right c-link" 
(click)="messages.dismissInformation()">X</a>
   </div>
 </div>
diff --git a/src/app/gns-page/gns-page.component.html 
b/src/app/gns-page/gns-page.component.html
new file mode 100644
index 0000000..47e5102
--- /dev/null
+++ b/src/app/gns-page/gns-page.component.html
@@ -0,0 +1,47 @@
+<div class="o-grid">
+  <div class="o-grid__col u-1/3">
+    <div class="c-card u-p-x3 u-mr-x2">
+      <div class="o-type-20 u-pb-x1" >Search for namesystem</div>
+      <div class="">
+        Name:<br>
+        <input class="c-input u-2/2" placeholder="Name" [(ngModel)]="gns_name" 
/><br><br>
+        Record Type (optional):<br>
+        <select class="c-input c-input--select u-2/2" 
[(ngModel)]="gns_recordtype" name="record_type">
+          <option [value]="0">ANY</option>
+          <option [value]="65536">PKEY</option>
+          <option [value]="65537">NICK</option>
+          <option [value]="65538">LEHO</option>
+          <option [value]="65539">VPN</option>
+          <option [value]="65540">GNS2DNS</option>
+          <option [value]="65541">BOX</option>
+          <option [value]="65542">PLACE</option>
+          <option [value]="65543">PHONE</option>
+          <option [value]="65544">ID_ATTR</option>
+          <option [value]="65545">ID_TOKEN</option>
+          <option [value]="65546">ID_TOKEN_METADATA</option>
+          <option [value]="65547">CREDENTIAL</option>
+          <option [value]="65548">POLICY</option>
+          <option [value]="65549">ATTRIBUTE</option>
+          <option [value]="65550">ABE_KEY</option>
+          <option [value]="65551">ABE_MASTER</option>
+        </select><br><br>
+        Search in:<br>
+        <div class="">
+          <input type="radio" name="options" [(ngModel)]="gns_options" 
[value]="0"> local namestore, then DHT<br>
+          <input type="radio" name="options" [(ngModel)]="gns_options" 
[value]="1"> local namestore only<br>
+          <input type="radio" name="options" [(ngModel)]="gns_options" 
[value]="2"> local namestore only for rightmost label, for others in DHT
+        </div><br>
+        Zone key (optional):<br>
+        <input *ngIf="display_zonekey" class="c-input u-2/2" placeholder="Zone 
Key" [(ngModel)]="gns_zonekey" (input)="toggleEgo()"/><br><br>
+        <div *ngIf="display_ego">Ego identifier (optional):<br>
+        <input class="c-input u-2/2" placeholder="Ego" [(ngModel)]="gns_ego" 
(input)="toggleZonekey()" /><br></div>
+        <div class="u-text-right"><a class="c-button u-mt-x2" 
(click)="onSearch()">Search</a></div>
+      </div>
+    </div>
+  </div>
+  <div class="o-grid__col u-2/3">
+    <div class="c-card u-p-x3">
+      {{gns_response}}
+    </div>
+  </div>
+</div>
diff --git a/src/app/heroes/heroes.component.spec.ts 
b/src/app/gns-page/gns-page.component.spec.ts
similarity index 56%
copy from src/app/heroes/heroes.component.spec.ts
copy to src/app/gns-page/gns-page.component.spec.ts
index 66518e4..c76f655 100644
--- a/src/app/heroes/heroes.component.spec.ts
+++ b/src/app/gns-page/gns-page.component.spec.ts
@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { HeroesComponent } from './heroes.component';
+import { GnsPageComponent } from './gns-page.component';
 
-describe('HeroesComponent', () => {
-  let component: HeroesComponent;
-  let fixture: ComponentFixture<HeroesComponent>;
+describe('GnsPageComponent', () => {
+  let component: GnsPageComponent;
+  let fixture: ComponentFixture<GnsPageComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ HeroesComponent ]
+      declarations: [ GnsPageComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(HeroesComponent);
+    fixture = TestBed.createComponent(GnsPageComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/src/app/gns-page/gns-page.component.ts 
b/src/app/gns-page/gns-page.component.ts
new file mode 100644
index 0000000..ea25fc5
--- /dev/null
+++ b/src/app/gns-page/gns-page.component.ts
@@ -0,0 +1,57 @@
+import { Component, OnInit } from '@angular/core';
+import { ApiService } from '../api.service';
+
address@hidden({
+  selector: 'gns-page',
+  templateUrl: './gns-page.component.html'
+})
+export class GnsPageComponent implements OnInit {
+
+  private gns_name:string;
+  private gns_recordtype:number = 0;
+  private gns_options:number = 0;
+  private gns_zonekey:string = '';
+  private display_ego: boolean = true;
+  private display_zonekey: boolean = true;
+  private gns_ego:string = '';
+  private gns_response:any =[];
+
+  private url: string;
+
+  constructor(private apiService:ApiService) { }
+
+  ngOnInit() {
+  }
+
+  onSearch(){
+    this.url = '?name='+this.gns_name;
+    if(this.gns_recordtype != null && this.gns_recordtype != ''){
+      this.url += '&record_type='+this.gns_recordtype;
+    }
+    if(this.gns_options != null && this.gns_options != ''){
+      this.url += '&options='+this.gns_options;
+    }
+    if(this.gns_zonekey != null && this.gns_zonekey != ''){
+      this.url += '&pkey='+this.gns_zonekey;
+    }
+    if(this.gns_ego != null && this.gns_ego != ''){
+      this.url += '&ego='+this.gns_ego;
+    }
+    console.log(this.url);
+    this.apiService.searchNameSystem(this.url).subscribe(data => {
+      this.gns_response = data;
+    });
+  }
+
+  toggleEgo(){
+    if(this.gns_zonekey == ''){ this.display_ego = true; }
+    else { this.display_ego = false; }
+  }
+
+  toggleZonekey(){
+    if(this.gns_ego == ''){ this.display_zonekey = true; }
+    else { this.display_zonekey = false; }
+  }
+
+
+}
diff --git a/src/app/heroes/heroes.component.html 
b/src/app/heroes/heroes.component.html
deleted file mode 100644
index 0bc287b..0000000
--- a/src/app/heroes/heroes.component.html
+++ /dev/null
@@ -1,4 +0,0 @@
-{{hero.name | uppercase}} Details <br>id: {{hero.id}}<br>name: {{hero.name}}
-<br>
-<br>
-<input [(ngModel)]="hero.name" placeholder="name">
diff --git a/src/app/heroes/heroes.component.ts 
b/src/app/heroes/heroes.component.ts
deleted file mode 100644
index 0f72ae9..0000000
--- a/src/app/heroes/heroes.component.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Hero } from '../hero';
-
address@hidden({
-  selector: 'app-heroes',
-  templateUrl: './heroes.component.html',
-  styleUrls: ['./heroes.component.scss']
-})
-export class HeroesComponent implements OnInit {
-  hero: Hero ={
-    id: 1,
-    name: 'Windstorm'
-  };
-  
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}
diff --git a/src/app/identity-page/identity-page.component.html 
b/src/app/identity-page/identity-page.component.html
index edcac69..4eeb8da 100644
--- a/src/app/identity-page/identity-page.component.html
+++ b/src/app/identity-page/identity-page.component.html
@@ -1,36 +1,33 @@
-
-<div class="o-grid u-pb-x3">
+<div *ngIf="is_displayed">
+<div class="o-grid">
   <div class="o-grid__col u-1/2">
     <create-identity-component></create-identity-component>
   </div>
   <div class="o-grid__col u-1/2">
     <div class="c-card c-card--no-padding u-p-x3">
       <div class="o-type-20 u-pb-x1" >Search</div>
-      <div class="u-ph-x2">
-        <input #myInput class="c-input" placeholder="Search" 
[(ngModel)]="name" (input)="filterItem(myInput.value)"/>
+      <div class="">
+        <input #myInput class="c-input u-2/2" placeholder="Search" 
[(ngModel)]="name" (input)="filterItem(myInput.value)"/>
       </div>
     </div>
   </div>
 </div>
 
-<div class="c-card" *ngIf="this.rename">
-  <div class="o-type-20 u-pb-x1" >Search</div>
-  <div class="u-color-grey">ID: <span>{{changeIdentity.id}}</span></div>
-  <div>
-    <span class="u-m-x2">Name: <input class="c-input" placeholder="Change 
Name" [(ngModel)]="changeIdentity.name"/></span>
-    <a class="c-button u-m-x2" (click)="onRename(changeIdentity)">Rename 
now</a>
-    <a class="c-button c-button--outline u-m-x2" 
(click)="onRenameCancel()">Cancel</a>
-  </div>
-</div>
-
-<div class="o-grid c-card u-mt-x3">
-  <table class="o-grid__col u-2/2 c-table">
+<div class="c-card u-mt-x2">
+  <table class=" u-2/2 c-table">
     <tr>
-      <th>Type</th>
+      <th class="u-text-center">Type</th>
       <th>Name</th>
       <th>ID</th>
-      <th>Rename</th>
-      <th>Delete</th>
+      <th class="u-text-center">Rename</th>
+      <th class="u-text-center">Delete</th>
+    </tr>
+    <tr *ngIf="request">
+      <td class="u-text-center"><div class="c-spinner"></div></td>
+      <td class="u-text-center"><div class="c-spinner"></div></td>
+      <td class="u-text-center"><div class="c-spinner"></div></td>
+      <td class="u-text-center"><div class="c-spinner"></div></td>
+      <td class="u-text-center"><div class="c-spinner"></div></td>
     </tr>
     <tr *ngFor="let identity of filteredItems">
       <td class="u-text-center"><span class="fa fa-user o-type-20" 
*ngIf="identity.type == 'ego'"></span></td>
@@ -38,8 +35,30 @@
         <span class="">{{identity.name}}</span>
       </td>
       <td>{{identity.id}}</td>
-      <td><a class="c-button" (click)="onClickRename(identity)">Rename</a></td>
-      <td><a class="c-button" 
(click)="onClickDelete(identity.id)">Delete</a></td>
+      <td class="u-text-center"><a class="c-button c-button--rename" 
(click)="onClickRename(identity)"><i class="fa fa-pencil"></i></a></td>
+      <td class="u-text-center"><a class="c-button c-button--danger" 
(click)="onClickDelete(identity)"><i class="fa fa-trash"></i></a></td>
     </tr>
   </table>
 </div>
+</div>
+
+
+<div class="c-card u-p-x3 u-mt-x2" *ngIf="this.rename">
+  <div class="o-type-20 u-pb-x1" >Rename</div>
+  <div class="u-color-grey">ID: <span>{{changeIdentity.id}}</span></div>
+  <div>
+    <span class="u-mr-x2"><span class="u-mr-x3">Name: </span><input 
class="c-input" placeholder="Change Name" 
[(ngModel)]="changeIdentity.name"/></span>
+    <a class="c-button" (click)="onRename(changeIdentity)">Rename</a>
+    <a class="c-button c-button--outline u-m-x2" (click)="onReset()">Cancel</a>
+  </div>
+</div>
+
+<div class="c-card u-p-x3 u-mt-x2" *ngIf="this.delete">
+  <div class="o-type-20 u-pb-x1" >Rename</div>
+  <div >ID: <span>{{changeIdentity.id}}</span></div>
+  <div >Name: <span>{{changeIdentity.name}}</span></div>
+  <div>
+    <a class="c-button" (click)="onDelete(changeIdentity.id)">Delete</a>
+    <a class="c-button c-button--outline u-m-x2" (click)="onReset()">Cancel</a>
+  </div>
+</div>
diff --git a/src/app/identity-page/identity-page.component.ts 
b/src/app/identity-page/identity-page.component.ts
index 296fe4c..0d6e784 100644
--- a/src/app/identity-page/identity-page.component.ts
+++ b/src/app/identity-page/identity-page.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Pipe } from "@angular/core";
 import { ApiService } from '../api.service';
 import { IdentityAPI } from '../identity-api';
+import { MessagesService } from '../messages.service';
 
 @Component({
   selector: 'app-identity-page',
@@ -12,14 +13,19 @@ export class IdentityPageComponent implements OnInit {
   identities: IdentityAPI[];
   filteredItems: IdentityAPI[];
   rename: boolean = false;
+  delete: boolean = false;
   changeIdentity: IdentityAPI;
   json: any;
+  is_displayed: boolean = true;
+  request: boolean = false;
 
-  constructor(private apiService: ApiService) { }
+  constructor(private apiService: ApiService,private message: MessagesService) 
{ }
 
   getAPIs(): void {
+    this.request = true;
     this.apiService.getIdentities().subscribe(data => {
       this.identities = data;
+      this.request = false;
       this.assignCopy();
     });
   }
@@ -33,7 +39,7 @@ export class IdentityPageComponent implements OnInit {
   }
 
   filterItem(value : string){
-    this.onRenameCancel();
+    this.onReset();
     if(!value) this.assignCopy(); //when nothing has typed
     this.filteredItems = Object.assign([], this.identities).filter(
     item => {
@@ -44,27 +50,40 @@ export class IdentityPageComponent implements OnInit {
   }
 
   onClickRename(identity: IdentityAPI){
+    this.is_displayed = false;
     this.rename = true;
     this.changeIdentity = Object.assign({},identity);
   }
 
   onRename(identity: IdentityAPI){
-    this.rename = false;
+    this.request = true;
+    this.onReset();
     this.filteredItems = [];
     this.json = {'newname':identity.name};
     this.apiService.changeIdentity(identity.id,this.json).subscribe(data => {
+      this.message.pushSuccess('Rename was successful.');
       this.getAPIs();
     });
   }
 
-  onRenameCancel(){
+  onReset(){
     this.rename = false;
+    this.delete = false;
+    this.is_displayed = true;
+  }
+
+  onClickDelete(identity: IdentityAPI){
+    this.is_displayed = false;
+    this.delete = true;
+    this.changeIdentity = Object.assign({},identity);
   }
 
-  onClickDelete(id: string){
-    this.onRenameCancel();
+  onDelete(id:string){
+    this.request = true;
+    this.onReset();
     this.filteredItems = [];
     this.apiService.deleteIdentity(id).subscribe(data => {
+      this.message.pushSuccess('Delete was successful.');
       this.getAPIs();
     });
   }
diff --git a/src/app/messages.service.ts b/src/app/messages.service.ts
index 6d18405..0d323bb 100644
--- a/src/app/messages.service.ts
+++ b/src/app/messages.service.ts
@@ -6,6 +6,9 @@ import { Injectable } from '@angular/core';
 export class MessagesService {
 
   private error:string;
+  private warning:string;
+  private info:string;
+  private success:string;
 
   constructor() { }
 
@@ -20,4 +23,40 @@ export class MessagesService {
   dismissError(){
     this.error='';
   }
+
+  getWarning() :string{
+    return this.warning;
+  }
+
+  pushWarning(errorText:string){
+    this.warning = errorText;
+  }
+
+  dismissWarning(){
+    this.warning='';
+  }
+
+  getSuccess() :string{
+    return this.success;
+  }
+
+  pushSuccess(errorText:string){
+    this.success = errorText;
+  }
+
+  dismissSuccess(){
+    this.success='';
+  }
+
+  getInformation() :string{
+    return this.info;
+  }
+
+  pushInformation(errorText:string){
+    this.info = errorText;
+  }
+
+  dismissInformation(){
+    this.info='';
+  }
 }
diff --git a/src/app/namestore-page/namestore-page.component.html 
b/src/app/namestore-page/namestore-page.component.html
new file mode 100644
index 0000000..f235c16
--- /dev/null
+++ b/src/app/namestore-page/namestore-page.component.html
@@ -0,0 +1,3 @@
+<p>
+  namestore-page works!
+</p>
diff --git a/src/app/heroes/heroes.component.spec.ts 
b/src/app/namestore-page/namestore-page.component.spec.ts
similarity index 52%
copy from src/app/heroes/heroes.component.spec.ts
copy to src/app/namestore-page/namestore-page.component.spec.ts
index 66518e4..540a7cc 100644
--- a/src/app/heroes/heroes.component.spec.ts
+++ b/src/app/namestore-page/namestore-page.component.spec.ts
@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { HeroesComponent } from './heroes.component';
+import { NamestorePageComponent } from './namestore-page.component';
 
-describe('HeroesComponent', () => {
-  let component: HeroesComponent;
-  let fixture: ComponentFixture<HeroesComponent>;
+describe('NamestorePageComponent', () => {
+  let component: NamestorePageComponent;
+  let fixture: ComponentFixture<NamestorePageComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ HeroesComponent ]
+      declarations: [ NamestorePageComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(HeroesComponent);
+    fixture = TestBed.createComponent(NamestorePageComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/src/app/namestore-page/namestore-page.component.ts 
b/src/app/namestore-page/namestore-page.component.ts
new file mode 100644
index 0000000..ec5cbba
--- /dev/null
+++ b/src/app/namestore-page/namestore-page.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
address@hidden({
+  selector: 'app-namestore-page',
+  templateUrl: './namestore-page.component.html'
+})
+export class NamestorePageComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/peerstore-page/peerstore-page.component.html 
b/src/app/peerstore-page/peerstore-page.component.html
new file mode 100644
index 0000000..8bdd960
--- /dev/null
+++ b/src/app/peerstore-page/peerstore-page.component.html
@@ -0,0 +1,3 @@
+<p>
+  peerstore-page works!
+</p>
diff --git a/src/app/heroes/heroes.component.spec.ts 
b/src/app/peerstore-page/peerstore-page.component.spec.ts
similarity index 52%
rename from src/app/heroes/heroes.component.spec.ts
rename to src/app/peerstore-page/peerstore-page.component.spec.ts
index 66518e4..f96c645 100644
--- a/src/app/heroes/heroes.component.spec.ts
+++ b/src/app/peerstore-page/peerstore-page.component.spec.ts
@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { HeroesComponent } from './heroes.component';
+import { PeerstorePageComponent } from './peerstore-page.component';
 
-describe('HeroesComponent', () => {
-  let component: HeroesComponent;
-  let fixture: ComponentFixture<HeroesComponent>;
+describe('PeerstorePageComponent', () => {
+  let component: PeerstorePageComponent;
+  let fixture: ComponentFixture<PeerstorePageComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ HeroesComponent ]
+      declarations: [ PeerstorePageComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(HeroesComponent);
+    fixture = TestBed.createComponent(PeerstorePageComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/src/app/peerstore-page/peerstore-page.component.ts 
b/src/app/peerstore-page/peerstore-page.component.ts
new file mode 100644
index 0000000..6abc3dc
--- /dev/null
+++ b/src/app/peerstore-page/peerstore-page.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
address@hidden({
+  selector: 'app-peerstore-page',
+  templateUrl: './peerstore-page.component.html'
+})
+export class PeerstorePageComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/index.html b/src/index.html
index 63da4dd..3c1fbca 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,7 +5,7 @@
   <title>GnunetWebui</title>
   <base href="/">
   <link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";>
-  <link 
href="https://fonts.googleapis.com/css?family=Archivo:400,400i,500,500i,600,600i,700,700i";
 rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto"; rel="stylesheet">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
diff --git a/src/scss/base/_body.scss b/src/scss/base/_body.scss
index 0310cde..74c1df2 100644
--- a/src/scss/base/_body.scss
+++ b/src/scss/base/_body.scss
@@ -1,4 +1,6 @@
 body {
   background-color: $color-grey-light;
-  font-family: Archivo, sans-serif;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 200;
+  height: 100%;
 }
diff --git a/src/scss/components/_alert.scss b/src/scss/components/_alert.scss
new file mode 100644
index 0000000..b2b222e
--- /dev/null
+++ b/src/scss/components/_alert.scss
@@ -0,0 +1,31 @@
+
+.c-alert {
+  padding: $baseline-x2;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: .25rem;
+}
+
+.c-alert--error{
+  color: $error-color;
+  background-color: $error-bgcolor;
+  border-color: $error-border-color;
+}
+
+.c-alert--warning{
+  color: $warning-color;
+  background-color: $warning-bgcolor;
+  border-color: $warning-border-color;
+}
+
+.c-alert--success{
+  color: $success-color;
+  background-color: $success-bgcolor;
+  border-color: $success-border-color;
+}
+
+.c-alert--information{
+  color: $info-color;
+  background-color: $info-bgcolor;
+  border-color: $info-border-color;
+}
diff --git a/src/scss/components/_badge.scss b/src/scss/components/_badge.scss
new file mode 100644
index 0000000..615425f
--- /dev/null
+++ b/src/scss/components/_badge.scss
@@ -0,0 +1,11 @@
+.c-badge {
+    display: inline-block;
+    padding: .25em .4em;
+    font-size: 75%;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: .25rem;
+}
diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss
index a16d5e4..9f7b70b 100644
--- a/src/scss/components/_button.scss
+++ b/src/scss/components/_button.scss
@@ -1,13 +1,13 @@
 $button-padding : $baseline-x2 $baseline-x4;
-$button-bgcolor : $color-blue;
-$button-bgcolor-hover : darken($color-blue, 10%);
+$button-bgcolor : $color-secondary;
+$button-bgcolor-hover : darken($color-secondary, 10%);
 $button-color : $color-white;
 $button-radius : 3px;
 
 $button-outline-padding : ( $baseline-x2 - 2 )( $baseline-x3 - 2 );
 $button-outline-bgcolor: transparent;
-$button-outline-color: $color-blue;
-$button-outline-color-hover: darken( $color-blue, 10% );
+$button-outline-color: $color-secondary;
+$button-outline-color-hover: darken( $color-secondary, 10% );
 
 .c-button {
   padding: $button-padding;
@@ -33,6 +33,28 @@ $button-outline-color-hover: darken( $color-blue, 10% );
   background-color: $button-outline-bgcolor;
 }
 
+.c-button--danger {
+  padding: $button-outline-padding;
+  color: $error-color;
+  border: 1px solid $error-border-color;
+  background-color: $error-bgcolor;
+}
+
+.c-button--danger:hover {
+  background-color: darken($error-bgcolor, 10%);
+}
+
+.c-button--rename {
+  padding: $button-outline-padding;
+  color: $info-color;
+  border: 1px solid $info-border-color;
+  background-color: $info-bgcolor;
+}
+
+.c-button--rename:hover {
+  background-color: darken($info-bgcolor, 10%);
+}
+
 .c-button--disabled {
   padding: $button-outline-padding;
   color: $color-grey;
diff --git a/src/scss/components/_error.scss b/src/scss/components/_error.scss
deleted file mode 100644
index eaf6e51..0000000
--- a/src/scss/components/_error.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-$error-bgcolor: #f79191;
-$error-color: #9e0c0c;
-
-.c-error {
-  padding: $baseline-x3;
-  color: $error-color;
-  background-color: $error-bgcolor;
-  border-radius: 2px;
-}
diff --git a/src/scss/components/_footer.scss b/src/scss/components/_footer.scss
new file mode 100644
index 0000000..8bd8664
--- /dev/null
+++ b/src/scss/components/_footer.scss
@@ -0,0 +1,6 @@
+.c-footer{
+  bottom: 0px;
+  width: 100%;
+  background-color: $color-primary;
+  color: $color-contrary;
+}
diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss
new file mode 100644
index 0000000..0bf8635
--- /dev/null
+++ b/src/scss/components/_header.scss
@@ -0,0 +1,7 @@
+.c-header{
+  top:0px;
+  position: sticky;
+  width: 100%;
+  background-color: $color-primary;
+  color: $color-contrary;
+}
diff --git a/src/scss/components/_input.scss b/src/scss/components/_input.scss
index e2d7338..347e98c 100644
--- a/src/scss/components/_input.scss
+++ b/src/scss/components/_input.scss
@@ -1,14 +1,8 @@
-$input-padding : $baseline-x2 $baseline-x2;
-$button-bgcolor : $color-blue;
-$button-bgcolor-hover : darken($color-blue, 10%);
-$button-color : $color-white;
-$input-bgcolor : darken($color-white, 5%);
-$button-radius : 3px;
-
-$button-outline-padding : ( $baseline-x2 - 2 )( $baseline-x3 - 2 );
-$button-outline-bgcolor: transparent;
-$button-outline-color: $color-blue;
-$button-outline-color-hover: darken( $color-blue, 10% );
+$input-padding : $baseline-x2 $baseline-x4 $baseline-x2 $baseline;
+$input-bgcolor-hover : darken($color-blue, 10%);
+$input-bgcolor : $color-white;
+$input-radius : 3px;
+$input-border-color: darken($color-grey-light, 5%);
 
 .c-input {
   padding: $input-padding;
@@ -17,13 +11,14 @@ $button-outline-color-hover: darken( $color-blue, 10% );
   white-space: nowrap;
   vertical-align: middle;
   text-decoration: none;
-  background-color: $color-grey-light;
+  background-color: $input-bgcolor;
   color: $color-black;
-  border-style: none;
-  border-color: grey;
-  border-radius: $button-radius;
+  border-style: solid;
+  border-width: 1px;
+  border-color: $color-grey;
+  border-radius: $input-radius;
 }
 
 .c-input:focus {
-  box-shadow: 0 0 2px 2px $button-bgcolor-hover;
+  box-shadow: 0 0 2px 2px $input-bgcolor-hover;
 }
diff --git a/src/scss/components/_link.scss b/src/scss/components/_link.scss
index a51e9ed..73f6e00 100644
--- a/src/scss/components/_link.scss
+++ b/src/scss/components/_link.scss
@@ -1,8 +1,8 @@
 .c-link {
   text-decoration: none;
-  color: $color-white;
   font-weight: bold;
   cursor: pointer;
+  color: inherit;
 }
 
 .c-link:hover {
diff --git a/src/app/heroes/heroes.component.scss 
b/src/scss/components/_progressbar.scss
similarity index 100%
rename from src/app/heroes/heroes.component.scss
rename to src/scss/components/_progressbar.scss
diff --git a/src/scss/components/_spinner.scss 
b/src/scss/components/_spinner.scss
new file mode 100644
index 0000000..b05af1c
--- /dev/null
+++ b/src/scss/components/_spinner.scss
@@ -0,0 +1,15 @@
+.c-spinner {
+    border: 5px solid $color-grey-light; /* Light grey */
+    border-top: 5px solid $color-secondary;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+    top: 1000px;
+    display: inline-block;
+}
+
address@hidden spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
diff --git a/src/scss/components/_table.scss b/src/scss/components/_table.scss
index ce5e3fb..40d1b43 100644
--- a/src/scss/components/_table.scss
+++ b/src/scss/components/_table.scss
@@ -9,12 +9,12 @@
 
 .c-table tr:nth-child(even){background-color: $color-grey-light;}
 
-.c-table tr:hover {background-color: #ddd;}
+.c-table tr:hover {background-color: $color-white;}
 
 .c-table th {
     padding-top: 12px;
     padding-bottom: 12px;
     text-align: left;
-    background-color: $color-purple;
-    color: white;
+    background-color: $color-primary;
+    color: $color-contrary;
 }
diff --git a/src/scss/main.scss b/src/scss/main.scss
index aaf5e9e..4b462e9 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -1,3 +1,4 @@
+/* You can add global styles to this file, and also import other style files */
 @import 'settings/baseline';
 @import 'settings/core';
 @import 'settings/colors';
@@ -8,20 +9,31 @@
 //@import 'tools/breakpoint';
 //@import 'tools/ms';
 //@import 'tools/rtl';
-//@import 'tools/type';
address@hidden 'tools/type';
 
 @import 'base/initialize';
address@hidden 'base/body';
address@hidden 'base/types';
 
 @import 'objects/container';
 @import 'objects/grid';
 @import 'objects/list';
-//@import 'objects/media';
address@hidden 'objects/media';
 @import 'objects/type';
 
 @import 'components/button';
 @import 'components/card';
address@hidden 'components/link';
address@hidden 'components/input';
address@hidden 'components/table';
address@hidden 'components/alert';
address@hidden 'components/footer';
address@hidden 'components/header';
address@hidden 'components/badge';
address@hidden 'components/spinner';
+
 //@import 'utilities/align-items';
-//@import 'utilities/align';
address@hidden 'utilities/align';
 @import 'utilities/bgcolor';
 //@import 'utilities/clearfix';
 @import 'utilities/color';
diff --git a/src/scss/objects/_type.scss b/src/scss/objects/_type.scss
index 43a2b9f..7184ab0 100644
--- a/src/scss/objects/_type.scss
+++ b/src/scss/objects/_type.scss
@@ -15,8 +15,15 @@ $iota-objs-type-namespace: 'type-';
 
 $iota-objs-type-sizes: (
   16: $type-16,
+  18: $type-18,
   20: $type-20,
+  22: $type-22,
+  24: $type-24,
+  26: $type-26,
   28: $type-28,
+  30: $type-30,
+  32: $type-32,
+  34: $type-34,
   35: $type-35,
   80: $type-80
 );
diff --git a/src/scss/settings/_colors.scss b/src/scss/settings/_colors.scss
index 3be07a9..59a1f88 100644
--- a/src/scss/settings/_colors.scss
+++ b/src/scss/settings/_colors.scss
@@ -1,16 +1,46 @@
-$color-black: #0D2A4A;
+$color-black: #212121;
 $color-purple: #7070D5;
 $color-red: #FC4A33;
 $color-grey: #A3ADBF;
 $color-grey-light: #F5F5F7;
 $color-white: #FFFFFF;
 $color-blue: #38B2FF;
+$color-amber: #ffb549;
+$color-deep-blue: #03A9F4;
+$color-cyan: #0288D1;
+$color-cyan-light: #03A9F4;
+
+$error-bgcolor: #f8d7da;
+$error-color: #721c24;
+$error-border-color: #f5c6cb;
+
+$warning-color: #856404;
+$warning-bgcolor: #fff3cd;
+$warning-border-color: #ffeeba;
+
+$success-color: #155724;
+$success-bgcolor: #d4edda;
+$success-border-color: #c3e6cb;
+
+$info-color: #0c5460;
+$info-bgcolor: #d1ecf1;
+$info-border-color: #bee5eb;
+
+$color-primary: $color-purple;
+$color-contrary: $color-white;
+$color-secondary: $color-deep-blue;
+$color-secondary-light: $color-grey-light;
 
 $colors: (
+  'primary' : $color-primary,
+  'contrary' : $color-contrary,
+  'secondary' : $color-secondary,
+  'secondary-light' : $color-secondary-light,
   'black' : $color-black,
-  'purple': $color-purple,
-  'red': $color-red,
+//  'purple': $color-purple,
+//  'red': $color-red,
   'grey': $color-grey,
-  'grey-light' : $color-grey-light,
-  'white' : $color-white
+//  'grey-light' : $color-grey-light,
+//  'white' : $color-white,
+//  'blue': $color-blue
 );
diff --git a/src/scss/settings/_type.scss b/src/scss/settings/_type.scss
index f8f7d46..c7ad0af 100644
--- a/src/scss/settings/_type.scss
+++ b/src/scss/settings/_type.scss
@@ -3,6 +3,62 @@ $type-16: (
   sm: ( 16px, $baseline-x3 )
 );
 
+$type-18: (
+  null: ( 16px, $baseline-x3 ),
+  sm: ( 18px, $baseline-x3 )
+);
+
+$type-20: (
+  null: ( 18px, $baseline-x3 ),
+  sm: ( 20px, $baseline-x4 )
+);
+
+$type-22: (
+  null: ( 18px, $baseline-x3 ),
+  sm: ( 22px, $baseline-x4 )
+);
+
+$type-24: (
+  null: ( 19px, $baseline-x3 ),
+  sm: ( 24px, $baseline-x4 )
+);
+
+$type-26: (
+  null: ( 20px, $baseline-x4 ),
+  sm: ( 26px, $baseline-x5 )
+);
+
+$type-28: (
+  null: ( 20px, $baseline-x4 ),
+  sm: ( 28px, $baseline-x5 )
+);
+
+$type-30: (
+  null: ( 21px, $baseline-x4 ),
+  sm: ( 30px, $baseline-x5 )
+);
+
+$type-32: (
+  null: ( 22px, $baseline-x4 ),
+  sm: ( 32px, $baseline-x5 )
+);
+
+$type-34: (
+  null: ( 23px, $baseline-x4 ),
+  sm: ( 34px, $baseline-x5 )
+);
+
+$type-35: (
+  null: ( 25px, $baseline-x5 ),
+  sm: ( 35px, $baseline-x5 )
+);
+
+$type-80: (
+  null: ( 70px, $baseline-x13 ),
+  sm: ( 80px, $baseline-x13 )
+);
+
+
 $type-20: (
   null: ( 18px, $baseline-x3 ),
   sm: ( 20px, $baseline-x4 )
diff --git a/src/styles.scss b/src/styles.scss
index 7026523..673983b 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,49 +1,2 @@
 /* You can add global styles to this file, and also import other style files */
address@hidden 'scss/settings/baseline';
address@hidden 'scss/settings/core';
address@hidden 'scss/settings/colors';
address@hidden 'scss/settings/type';
address@hidden 'scss/settings/spacing';
-
address@hidden 'scss/tools/core';
-//@import 'scss/tools/breakpoint';
-//@import 'scss/tools/ms';
-//@import 'scss/tools/rtl';
address@hidden 'scss/tools/type';
-
address@hidden 'scss/base/initialize';
address@hidden 'scss/base/body';
address@hidden 'scss/base/types';
-
address@hidden 'scss/objects/container';
address@hidden 'scss/objects/grid';
address@hidden 'scss/objects/list';
address@hidden 'scss/objects/media';
address@hidden 'scss/objects/type';
-
address@hidden 'scss/components/button';
address@hidden 'scss/components/card';
address@hidden 'scss/components/link';
address@hidden 'scss/components/input';
address@hidden 'scss/components/table';
address@hidden 'scss/components/error';
-
-//@import 'scss/utilities/align-items';
-//@import 'scss/utilities/align';
address@hidden 'scss/utilities/bgcolor';
-//@import 'scss/utilities/clearfix';
address@hidden 'scss/utilities/color';
address@hidden 'scss/utilities/display';
-//@import 'scss/utilities/flex-direction';
-//@import 'scss/utilities/float';
-//@import 'scss/utilities/justify-content';
address@hidden 'scss/utilities/margin';
-//@import 'scss/utilities/opacity';
address@hidden 'scss/utilities/padding';
-//@import 'scss/utilities/position';
-//@import 'scss/utilities/pull';
-//@import 'scss/utilities/push';
address@hidden 'scss/utilities/size';
address@hidden 'scss/utilities/text';
-//@import 'scss/utilities/transform';
-//@import 'scss/utilities/weight';
address@hidden 'scss/main';

-- 
To stop receiving notification emails like this one, please contact
address@hidden



reply via email to

[Prev in Thread] Current Thread [Next in Thread]