css tweaks

package.json

@@ -4,7 +4,7 @@
     "node": ">=0.10.0"
   },
   "devDependencies": {
-    "appirio-styles": "https://github.com/appirio-tech/styles.git#master",
+    "appirio-styles": "0.x.x",
     "appirio-gulp-tasks": "3.x.x",
     "gulp": "^3.8.11"
   }

src/styles/submit-work.scss

@@ -9,11 +9,7 @@ submit-work-complete {
   text-align      : center;
   background-color: $white;
 
-  h1 {
-    font-weight: 500;
-  }
-
-  h5 {
+  h1, h5 {
     font-weight: 500;
   }
 
@@ -141,12 +137,18 @@ submit-work-complete {
         background-color: $grey;
       }
 
-      button {
-        width: 220px;
+      button.big {
+        width: 280px;
         height: 100px;
+        font-size: 18px;
 
         .icon-container {
           margin-right: 10px;
+
+          .icon.checkmark-white {
+            width: 20px;
+            height: 20px;
+          }
         }
       }
 
@@ -211,10 +213,15 @@ submit-work-complete {
       }
     }
 
-    uploaded-files {
-      margin-top: 40px;
-      max-height: 398px;
-      overflow  : auto;
+    ap-uploader {
+      margin-top: 30px;
+
+      uploaded-files {
+        overflow        : auto;
+        max-height      : 398px;
+        padding         : 15px;
+        background-color: $grey-lightest;
+      }
     }
 
     .close {
@@ -229,7 +236,7 @@ submit-work-complete {
 
 submit-work-visuals,
 submit-work-development {
-  footer {
+  modal > footer {
     button {
       margin: 30px;
       width: 120px;

src/styles/type.scss

@@ -10,7 +10,7 @@ submit-work-type {
   }
 
   input[type="text"] {
-    max-width: 450px;
+    max-width: 380px;
   }
 
   p.error {

src/styles/visuals.scss

@@ -45,17 +45,20 @@ submit-work-visuals {
       font-weight: 300px;
     }
 
+    hr {
+      margin: 10px 0 30px 0;
+    }
+
     > ul {
       > li {
         &:first-child, &:last-child {
-          margin: 30px;
+          margin: 0 30px;
         }
       }
     }
 
     img {
       width: 300px;
-      margin-top: 40px;
     }
   }
 
@@ -101,7 +104,7 @@ submit-work-visuals {
         margin: 30px;
 
         li {
-          margin: 30px;
+          margin: 0 30px;
 
           button {
             margin-top: 15px;

src/views/parts/choose-styles.jade

@@ -23,22 +23,31 @@ modal.full.choose-styles(show="vm.showChooseStylesModal" background-click-close=
     p Our community will offer choices within these broad font styles. Feel free to skip this step if you don't have a preference.
 
     ul.or-choices.flex.middle.center
-      li(ng-repeat-start="font in vm.fonts")
-        img(class="{{ font.name.toLowerCase().split(' ').join('-') }}" ng-src="/images/{{ font.name.toLowerCase().split(' ').join('-') }}-header.svg")
+      li
+        img(class="/images/serif-header.svg")
 
-        p {{font.description}}
+        p Classic design, good legibility for large and small text.
 
         hr
 
-        img(src="/images/sans.png" ng-if="font.name != 'Serif' ")
+        img(src="/images/serif.png"
 
-        img(src="/images/serif.png" ng-if="font.name == 'Serif' ")
-
-        button.action(selectable=true type="button" ng-model="vm.font" value="font.id")
+        button.action(selectable=true type="button" ng-model="vm.font" value="SERIF")
 
       li.or(ng-repeat-end ng-if="font.name == 'Serif' ")
         .house OR
 
+      li
+        img(class="/images/sans-header.svg")
+
+        p Classic design, good legibility for large and small text.
+
+        hr
+
+        img(src="/images/sans.png"
+
+        button.action(selectable=true type="button" ng-model="vm.font" value="SANS_SERIF")
+
   main.dark-bg.colors.flex.column.center.flex-grow(ng-show="vm.activeStyleModal == 'colors' ")
     h2 Pick <strong>the colors</strong> that you prefer
 
@@ -72,4 +81,4 @@ modal.full.choose-styles(show="vm.showChooseStylesModal" background-click-close=
 
     button.action.action(ng-hide="vm.nextButtonDisabled" ng-click="vm.viewNext()") next
 
-    button.action(ng-show="vm.showFinishDesignButton" ng-click="vm.save()") Save
+    button.action(ng-show="vm.showFinishDesignButton" ng-click="vm.save()") Save

src/views/submit-work-features-define.jade → src/views/parts/define-features.jade

@@ -69,4 +69,4 @@ modal.full.define-features(show="vm.showFeaturesModal" ng-if="vm.showFeaturesMod
       li.flex.middle.space-between
         .count {{vm.selectedFeaturesCount}} features added
 
-        button.action(ng-click="vm.save()") Save
+        button.action(ng-click="vm.save()") Save

src/views/parts/upload-requirements.jade

@@ -0,0 +1,12 @@
+modal.upload-documents(show="vm.showUploadSpecs" background-click-close=true)
+  main
+    img.upload-icon(src="/images/upload.svg")
+
+    h2 Upload documents
+
+    ap-uploader(
+      config="vm.uploaderConfig"
+      uploading="vm.uploaderUploading"
+      has-errors="vm.uploaderHasErrors"
+      has-files="vm.uploaderHasFiles"
+    )

src/views/parts/visual-upload.jade

@@ -1,5 +1,5 @@
 modal.upload-documents(show="vm.showUploadStylesModal" background-click-close=true)
-  .upload
+  main
     img.upload-icon(src="/images/upload.svg")
 
     h2 Upload brand guidelines

src/views/submit-work-development.directive.jade

@@ -1,5 +1,5 @@
 header
-  include nav
+  include parts/nav
 
   img(src="/images/development-active.svg")
 
@@ -165,15 +165,4 @@ modal.full.define-development(show="vm.showDefineSpecsModal" background-click-cl
 
     button.action(ng-show="vm.showFinishDevelopmentButton" ng-click="vm.save()") Save
 
-modal.upload-documents(show="vm.showUploadSpecs" background-click-close=true)
-  .upload
-    img.upload-icon(src="/images/upload.svg")
-
-    h2 Upload documents
-
-    ap-uploader(
-      config="vm.uploaderConfig"
-      uploading="vm.uploaderUploading"
-      has-errors="vm.uploaderHasErrors"
-      has-files="vm.uploaderHasFiles"
-    )
+include parts/upload-requirements

src/views/submit-work-features.directive.jade

@@ -1,5 +1,5 @@
 header
-  include nav
+  include parts/nav
 
   img(src="/images/features-white.svg")
 
@@ -34,10 +34,7 @@ header
   .continue-buttons
     a.button(ui-sref="submit-work-visuals({ id: vm.workId })") go to design
 
-include submit-work-features-define
+include parts/define-features
 
-include submit-work-features-upload
+include parts/upload-features
 
-include submit-work-features-define
-
-include submit-work-features-upload

src/views/submit-work-visuals.directive.jade

@@ -1,7 +1,7 @@
 loader(ng-if="vm.loading")
 
 header
-  include nav
+  include parts/nav
 
   img(src="/images/design-white-thin.svg")