common updates

Author: tmunzer-AIDE

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mist-extension",
-  "version": "4.3.1",
+  "version": "5.0.0",
   "description": "Generated with @larscom/ng-mist-extension",
   "scripts": {
     "start": "npm run watch",

angular/src/app/pages/account/account.component.html

@@ -48,11 +48,11 @@ <h3 class="title-cloud">API Usage</h3>
                 <div class="box-cloud-token-buttons">
                     <button class="box-cloud-token-button tooltip" (click)="openManageTokens(session.domain, 'user')" [disabled]="!session.two_factor_passed">
                             <img class="icon"src="assets/list.svg">
-                            <span class="tooltiptext">Manage</span>
+                            <span *ngIf="session.two_factor_passed" class="tooltiptext">Manage</span>
                     </button>
                     <button class="box-cloud-token-button stroked tooltip" (click)="openCreateToken(session.domain, 'user')" [disabled]="!session.two_factor_passed">
                         <img class="icon" src="assets/add.svg">
-                        <span class="tooltiptext">Create</span>
+                        <span *ngIf="session.two_factor_passed" class="tooltiptext">Create</span>
                     </button>
                 </div>
             </div>
@@ -67,11 +67,11 @@ <h3 class="title-cloud">API Usage</h3>
                 <div class="box-cloud-token-buttons">
                     <button class="box-cloud-token-button tooltip" (click)="openManageTokens(session.domain, 'org')" [disabled]="!session.two_factor_passed">
                         <img class="icon"src="assets/list.svg">
-                        <span class="tooltiptext">Manage</span>
+                        <span *ngIf="session.two_factor_passed" class="tooltiptext">Manage</span>
                     </button>
                     <button class="box-cloud-token-button stroked tooltip" (click)="openCreateToken(session.domain, 'org')" [disabled]="!session.two_factor_passed">
                         <img class="icon" src="assets/add.svg">
-                        <span class="tooltiptext">Create</span>
+                        <span *ngIf="session.two_factor_passed" class="tooltiptext">Create</span>
                     </button>
                 </div>
             </div>

angular/src/app/pages/account/create_org/create_org.component.html

@@ -7,14 +7,15 @@
         <div class="org_select token_opt">
             <input type="text" [(ngModel)]="token_name" placeholder="Token Name (optional)"/>
             <div *ngIf="displayed_msps.length > 0" >
-            <select name=msp_id [(ngModel)]="msp_id" (change)="mspSelected()">
-                <option class="none" value="none">
-                    <div style="width: 100%; text-align: center;">-- MSP Account --</div>
-                </option>
-                <option *ngFor="let msp of displayed_msps" [value]="msp.msp_id">
-                    <div>{{msp.name}}</div>
-                </option>
-            </select>
+                <select name=msp_id [(ngModel)]="msp_id" (change)="mspSelected()">
+                    <option class="none" value="none">
+                        <div style="width: 100%; text-align: center;">-- MSP Account --</div>
+                    </option>
+                    <option *ngFor="let msp of displayed_msps" [value]="msp.msp_id">
+                        <div>{{msp.name}}</div>
+                    </option>
+                </select>
+            </div>
             <select name=org_id [(ngModel)]="org_id">
                 <option class="none" value="none">
                     <div style="width: 100%; text-align: center;">-- Please Select an Org --</div>
@@ -33,7 +34,6 @@
                 <option value="site" disabled>Site</option>
                 <option value="sitegroup" disabled>SiteGroup</option>
             </select>
-        </div>
 
             <select *ngIf="scope=='site'" name="site_id" [(ngModel)]="site_id">                
                 <option class="none" value="none">

angular/src/app/pages/account/manage/manage.component.scss

@@ -32,7 +32,7 @@ button.close:hover {
 }
 
 .token-container {
-    margin: 0.7em;
+    margin: 0.5em 0;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -41,13 +41,13 @@ button.close:hover {
     border: 1px solid #4f5560;
     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
     border-radius: 15px;
-    height: 7em;
+    height: 8em;
 }
 
 .token {
     display: flex;
     flex-direction: column;
-    padding: 1em;
+    padding: .5em;
 }
 
 .token-info {
@@ -94,11 +94,11 @@ div.token table tr td div.name {
     text-align: left;
 }
 .token table tr td {
-    width: 130px;
+    width: 140px;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-    max-width: 130px;
+    max-width: 140px;
 }
 
 .token table tr td:hover {

angular/src/app/pages/api/django/api.django.component.scss

@@ -75,11 +75,6 @@
     border: 1px solid #ff0000;
 }
 
-
-.parameters {
-    margin: 1em;
-}
-
 ////// INPUT
 .help.icon {
     filter: invert(100%) sepia(0) saturate(1352%) hue-rotate(0deg) brightness(10%) contrast(0);

angular/src/app/pages/api/django/django.component.html

@@ -43,7 +43,7 @@ <h2>API Documentation</h2>
         </button>
     </div>
 </div>
-<div class="parameters">
+<div class="content no-border no-grow">
     <h2>Query Parameters</h2>
     <div *ngIf="query_params.length > 0">
         <button class="xlarge" (click)="updateUrl()">

angular/src/app/pages/api/manage/manage.component.html

@@ -70,7 +70,7 @@ <h2>Page Info</h2>
         </div>
     </div>
 </div>
-<div *ngIf="quick_links.length > 0" class="content no-grow">
+<div *ngIf="quick_links.length > 0" class="content no-border no-grow">
     <h2>Quick API Access</h2>
     <div class="box-apitab">
         <button *ngFor="let quick_link of quick_links" (click)="openApiTab(quick_link.url)" class="xlarge">

angular/src/app/pages/tools/tools.component.html

@@ -13,10 +13,10 @@ <h2>API Token</h2>
 <app-tools-token-info
   class="popup transparent"
   [ngClass]="{ hidden: view != 'token-info' }"
-  (closeManageTokens)="closePopup('token-info')"
+  (closePopup)="closePopup('token-info')"
 ></app-tools-token-info>
 <app-tools-token-usage
   class="popup transparent"
   [ngClass]="{ hidden: view != 'token-usage' }"
-  (closeManageTokens)="closePopup('token-usage')"
+  (closePopup)="closePopup('token-usage')"
 ></app-tools-token-usage>

angular/src/app/scss/button.component.scss

@@ -33,7 +33,7 @@ button.Stroked:disabled:hover img {
 button:enabled {
     background-color: #161c26;
     color: #fff;
-    border: 2px solid #63b4ee;
+    border: 1px solid #63b4ee;
     border-radius: 15px;
     padding: 1.5em 1em;
     // background-color: #1964a3;
@@ -50,7 +50,7 @@ button:enabled:hover {
 button.stroked:enabled {
     background-color: unset;
     color: white;
-    border: 2px solid #18c956;
+    border: 1px solid #18c956;
 }
 
 button.stroked:enabled:hover {

angular/src/app/scss/popup.component.scss

@@ -1,15 +1,19 @@
 .content {
-    padding: 1em;
     display: flex;
     align-items: stretch;
     flex-direction: column;
     background-color: #202836;
     margin: 1em;
-    padding: 1em;
+    padding: 0 1em;
     border: 1px solid #bbb;
     border-radius: 15px;
-    max-height: 90vh;
+    max-height: 95vh;
 }
+
+.content.no-border {
+    border: none;
+}
+
 .content.full-height {
     min-height: 90vh;
 }
@@ -23,9 +27,9 @@
 
 .popup {
     position: absolute;
-    top: 50px;
+    top: 0;
     left: 0;
-    height: 455px;
+    height: 100vh;
     width: 100%;
     display: flex;
     flex-direction: column;
@@ -40,8 +44,8 @@
 
 
 .popup.transparent {
-    backdrop-filter: blur(2px);
-    background: rgb(0 0 0 / 0%);
+    backdrop-filter: blur(5px);
+    background: rgb(0 0 0 / 25%);
     display: flex;
     flex-direction: column;
     justify-content: center;