added agreements section and applied some basic formatting

projects/account/src/app/profile/agreements/agreements.component.html

@@ -0,0 +1,44 @@
+<mat-card class="form-card">
+    <mat-toolbar class="form-title">AGREEMENTS</mat-toolbar>
+    <mat-accordion>
+        <mat-expansion-panel>
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    Terms of Use
+                </mat-panel-title>
+                <mat-panel-description>
+                    Accepted July 10, 2018
+                </mat-panel-description>
+            </mat-expansion-panel-header>
+            Terms of Use goes here.
+        </mat-expansion-panel>
+
+        <mat-expansion-panel>
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    Privacy Policy
+                </mat-panel-title>
+                <mat-panel-description>
+                    Accepted July 10, 2018
+                </mat-panel-description>
+            </mat-expansion-panel-header>
+            Privacy Policy goes here.
+        </mat-expansion-panel>
+
+        <mat-expansion-panel>
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    Open Data Set
+                </mat-panel-title>
+                <mat-panel-description>
+                    Opted In July 10, 2018
+                </mat-panel-description>
+            </mat-expansion-panel-header>
+            Open Data Set agreement goes here.
+            <mat-action-row>
+                <button mat-button>OPT OUT</button>
+            </mat-action-row>
+        </mat-expansion-panel>
+
+    </mat-accordion>
+</mat-card>

projects/account/src/app/profile/agreements/agreements.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'account-agreements',
+  templateUrl: './agreements.component.html',
+  styleUrls: ['./agreements.component.scss']
+})
+export class AgreementsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

projects/account/src/app/profile/delete/delete.component.html

@@ -1,8 +1,8 @@
-<mat-card>
+<mat-card class="form-card">
     <mat-toolbar class="form-title">DELETE ACCOUNT</mat-toolbar>
     <div fxLayout="column">
         <span class="mat-h3">CAUTION</span>
         <span class="mat-body">{{deleteWarning}}</span>
-        <button mat-raised-button>DELETE ACCOUNT</button>
+        <button mat-raised-button color="warn">DELETE ACCOUNT</button>
     </div>
 </mat-card>

projects/account/src/app/profile/delete/delete.component.scss

@@ -1,5 +1,14 @@
 mat-card {
-    max-width: 400px;
+    button {
+        color: white;
+        margin-bottom: 10px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .mat-body {
+        margin-bottom: 20px;
+        text-align: center;
+    }
     .mat-h3 {
         text-align: center;
         font-weight: bold;

projects/account/src/app/profile/login/login.component.html

@@ -1,8 +1,8 @@
-<mat-card>
+<mat-card class="form-card">
     <mat-toolbar class="form-title">LOGIN</mat-toolbar>
     <form id="login-form">
-        <div fxLayout="row wrap" fxLayoutAlign="center">
+        <div fxLayout="row wrap" fxLayoutAlign="space-evenly">
-            <div id="antisocial" fxFlex fxLayout="column" fxLayoutAlign="center none">
+            <div id="antisocial" fxFlex fxLayout="column">
                 <mat-form-field appearance="outline">
                     <mat-label>Email Address</mat-label>
                     <input
@@ -27,7 +27,8 @@
                     <mat-hint>Required when no external account is linked</mat-hint>
                 </mat-form-field>
             </div>
-            <div fxFlex fxLayout="column" fxLayoutAlign="start center">
+            <!--<div fxFlex="10" fxHide.xs></div>-->
+            <div fxFlex fxLayout="column">
                 <mat-slide-toggle *ngFor="let platform of socialPlatforms" [labelPosition]="'before'">
                     <span fxLayout="row" fxLayoutAlign="start center">
                         <fa-icon *ngIf="platform.icon" [icon]="platform.icon"></fa-icon>

projects/account/src/app/profile/login/login.component.scss

@@ -3,14 +3,14 @@
 }
 
 mat-card {
-    max-width: 400px;
 
     mat-form-field {
-        width: 100%;
+        max-width: 400px;
     }
 
     mat-slide-toggle {
         height: 50px;
+        max-width: 400px;
 
         fa-icon {
             font-size: 30px;

projects/account/src/app/profile/personal/personal.component.html

@@ -1,8 +1,10 @@
-<mat-card>
+<mat-card class="form-card">
     <mat-toolbar class="form-title">PERSONAL</mat-toolbar>
     <form>
         <div fxLayout="row wrap">
-            <div id="user-name" fxFlex fxLayout="column" fxLayoutAlign="center">
+
+            <!-- first and last name fields go on left when screen is large enough -->
+            <div id="user-name" fxFlex fxLayout="column">
                 <mat-form-field appearance="outline">
                     <mat-label>First Name</mat-label>
                     <input
@@ -13,6 +15,7 @@
                         type="text"
                     >
                 </mat-form-field>
+
                 <mat-form-field appearance="outline">
                     <mat-label>Last Name</mat-label>
                     <input
@@ -24,6 +27,40 @@
                     >
                 </mat-form-field>
             </div>
+
+            <!-- location fields go on right when screen is large enough -->
+            <div id="user-location" fxFlex fxLayout="column">
+                <mat-form-field appearance=outline>
+                    <mat-label>Country</mat-label>
+                    <mat-select>
+                        <mat-option value="option1">Option 1</mat-option>
+                        <mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
+                        <mat-option value="option3">Option 3</mat-option>
+                    </mat-select>
+                    <mat-hint>Filter for postal code and time zone</mat-hint>
+                </mat-form-field>
+
+                <mat-form-field appearance=outline>
+                    <mat-label>Postal Code</mat-label>
+                    <mat-select placeholder="Select country">
+                        <mat-option value="option1">Option 1</mat-option>
+                        <mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
+                        <mat-option value="option3">Option 3</mat-option>
+                    </mat-select>
+                    <mat-hint>Default postal code for skills (e.g. weather)</mat-hint>
+                </mat-form-field>
+
+                <mat-form-field appearance=outline>
+                    <mat-label>Time Zone</mat-label>
+                    <mat-select>
+                        <mat-option value="option1">Option 1</mat-option>
+                        <mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
+                        <mat-option value="option3">Option 3</mat-option>
+                    </mat-select>
+                    <mat-hint>Default time zone for skills (e.g. alarm clock)</mat-hint>
+                </mat-form-field>
+            </div>
+
         </div>
     </form>
 </mat-card>

projects/account/src/app/profile/personal/personal.component.scss

@@ -29,10 +29,9 @@
 }
 
 mat-card {
-    max-width: 400px;
 
     mat-form-field {
-        width: 100%;
+        max-width: 400px;
     }
 
     fieldset {

projects/account/src/app/profile/profile.component.html

@@ -2,5 +2,6 @@
     <account-login></account-login>
     <account-subscription></account-subscription>
     <account-personal></account-personal>
+    <account-agreements></account-agreements>
     <account-delete></account-delete>
 </div>

projects/account/src/app/profile/profile.module.ts

@@ -12,6 +12,7 @@ import {
     MatExpansionModule,
     MatFormFieldModule,
     MatInputModule,
+    MatSelectModule,
     MatSlideToggleModule,
     MatToolbarModule
 } from '@angular/material';
@@ -21,6 +22,7 @@ import { LoginComponent } from './login/login.component';
 import { PersonalComponent } from './personal/personal.component';
 import { SubscriptionComponent } from './subscription/subscription.component';
 import { DeleteComponent } from './delete/delete.component';
+import { AgreementsComponent } from './agreements/agreements.component';
 
 @NgModule({
     declarations: [
@@ -28,7 +30,8 @@ import { DeleteComponent } from './delete/delete.component';
         LoginComponent,
         PersonalComponent,
         SubscriptionComponent,
-        DeleteComponent
+        DeleteComponent,
+        AgreementsComponent
     ],
     entryComponents: [
         LoginComponent
@@ -45,6 +48,7 @@ import { DeleteComponent } from './delete/delete.component';
         MatExpansionModule,
         MatFormFieldModule,
         MatInputModule,
+        MatSelectModule,
         MatSlideToggleModule,
         MatToolbarModule
     ]

projects/account/src/app/profile/subscription/subscription.component.html

@@ -1,11 +1,13 @@
-<mat-card>
+<mat-card class="form-card">
     <mat-toolbar class="form-title">SUPPORT MYCROFT</mat-toolbar>
     <form id="subscription-form">
-        <ng-container *ngFor="let subscription of subscriptionTypes">
+        <div id=subscription-types fxLayout="row wrap" fxLayoutAlign="space-evenly">
-        <mat-card class="subscription-card">
+            <ng-container *ngFor="let subscription of subscriptionTypes">
-            <mat-card-title class="mat-h2">{{subscription.name}}</mat-card-title>
+                <mat-card class="subscription-card">
-            <mat-card-subtitle>{{subscription.price}}</mat-card-subtitle>
+                    <mat-card-title class="mat-h2">{{subscription.name}}</mat-card-title>
-        </mat-card>
+                    <mat-card-subtitle>{{subscription.price}}</mat-card-subtitle>
-        </ng-container>
+                </mat-card>
+            </ng-container>
+        </div>
     </form>
 </mat-card>

projects/account/src/app/profile/subscription/subscription.component.scss

@@ -3,13 +3,17 @@
 }
 
 mat-card {
-    max-width: 400px;
+    #subscription-types {
+        .subscription-card {
+            margin-bottom: 10px;
+            margin-top: 10px;
+            max-width: 300px;
+            min-width: 220px;
+            text-align: center;
 
-    .subscription-card {
+            mat-card-title {
-        text-align: center;
+                font-size: 16px;
-
+            }
-        mat-card-title {
-            font-size: 16px;
         }
     }
 }

projects/globalnav/src/lib/globalnav.component.html

@@ -1,4 +1,4 @@
-<div class="app">
+<!--<div class="app-container">-->
     <mat-toolbar fxLayout="row" fxLayoutAlign="space-between" color="primary">
         <span fxLayout="row" fxLayoutAlign="start center" fxFlex>
             <button mat-icon-button class="menu-button" (click)="snav.toggle()">
@@ -65,4 +65,4 @@
             <ng-content select="[appBody]"></ng-content>
         </mat-sidenav-content>
     </mat-sidenav-container>
-</div>
+<!--</div>-->

projects/globalnav/src/lib/globalnav.component.scss

@@ -1,12 +1,12 @@
-.app-container {
+//.app-container {
-  display: flex;
+//  display: flex;
-  flex-direction: column;
+//  flex-direction: column;
-  position: absolute;
+//  position: absolute;
-  top: 0;
+//  top: 0;
-  bottom: 0;
+//  bottom: 0;
-  left: 0;
+//  left: 0;
-  right: 0;
+//  right: 0;
-}
+//}
 
 // Use inline css to display the logo at top of sidebar because Angular
 // libraries do not support static assets yet.
@@ -40,6 +40,7 @@ mat-toolbar {
 }
 
 mat-sidenav-container {
+    .mat-drawer-container{ overflow: visible; }
     mat-sidenav {
         border: none;
         margin-top: 50px;
@@ -53,7 +54,7 @@ mat-sidenav-container {
     }
     mat-sidenav-content {
         margin-top: 50px;
-        background-color: #f1f3f4;
+        //background-color: #f1f3f4;
 }
 }
 

projects/market/src/app/skills/skill-summary/skill-card/skill-card.component.ts

@@ -73,7 +73,7 @@ export class SkillCardComponent implements OnInit {
         this.installSnackbar.open(
             notificationMessage,
             '',
-            {panelClass: 'login-snackbar', duration: fiveSeconds}
+            {panelClass: 'profile-snackbar', duration: fiveSeconds}
         );
     }
 }

projects/sso/src/app/app-routing.module.ts

@@ -6,9 +6,9 @@ import { LogoutComponent } from './logout/logout.component';
 // import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 
 const routes: Routes = [
-    { path: 'login', component: LoginComponent },
+    { path: 'profile', component: LoginComponent },
     { path: 'logout', component: LogoutComponent },
-    { path: '', redirectTo: '/login', pathMatch: 'full' },
+    { path: '', redirectTo: '/profile', pathMatch: 'full' },
     // { path: '**', component: PageNotFoundComponent }
 ];
 

projects/sso/src/app/app.component.html

@@ -1,10 +1,10 @@
 <!--
-Don't display the login page if the URL contains the data returned from a
+Don't display the profile page if the URL contains the data returned from a
-call to the Tartarus social login endpoint.  When this happens, a view call
+call to the Tartarus social profile endpoint.  When this happens, a view call
 will be made to get the tokens and the user will be returned to the previous
 window.
 
-This condition is temporary it should be removed when the social login logic
+This condition is temporary it should be removed when the social profile logic
 is refactored and moved into Selene.
 -->
 <div *ngIf="!socialLoginDataFound">

src/theme.scss

@@ -176,7 +176,19 @@ $custom-theme: mycroft-light-theme(
 
     .form-title {
         background-color: mat-color($primary, 200);
-        color: mat-contrast($primary, 200)
+        border-radius: 6px;
+        color: mat-contrast($primary, 200);
+        margin-bottom: 20px;
+        max-width: 1000px;
+        min-width: 260px;
+    }
+
+    .form-card {
+        margin-bottom: 40px;
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 1000px;
+        min-width: 260px;
     }
 }