Some cosmetic improvements. WIP

src/app/_variables.scss

@@ -6,8 +6,10 @@ $blue_light: #55C4F5;
 
 $red: #FF3D4C;
 $green: #00E597;
-$off_black: #2E2E2E;
-
+// $off_black: #2E2E2E;
+// $off_darker_black: #1C1C1C;
+$off_lighter_black: #2E2E2E;
+$off_black: #1C1C1C;
 
 $grey_lightest: #F9F9FB;
 $grey_lighter: #ECECEE;
@@ -33,6 +35,7 @@ $font_color_blue_dark: $grey_darker;
 $font_color_blue_light: $blue;
 
 $background_blue_dark_menu: $off_black;
+$background_blue_lighter_menu: $off_lighter_black;
 $background_blue_dark_overview: $off_black;
 $background_blue_dark_background: $off_black;
 $background_blue_dark_navbar: $off_black;
@@ -46,3 +49,7 @@ $medium_priority: 2;
 $small_priority: -1;
 
 $dropdown_blue: #3f51b5;
+
+$font-weight-heavy: 600;
+$timeline-height: 120px;
+$content-margin-top: 220px;

src/app/components/kit/showKit/showKit.html

@@ -108,7 +108,7 @@ <h2 class="title">
       <p>
         We can also take you to your nearest online kit by letting us know your location.
       </p>
-      <md-button class="btn-round btn-cyan" ng-click="vm.geolocate()">Locate me</md-button>
+      <md-button class="md-button btn-round-new btn-cyan" ng-click="vm.geolocate()">Locate me</md-button>
     </div>
     <section class="kit_detailed">
       <section ng-if="!vm.device.isPrivate || vm.deviceBelongsToUser" class="kit_chart">
@@ -275,7 +275,8 @@ <h2 class="kit_owner_usernameText">{{ vm.device.owner.username }}</h2>
               <h4 class="ml-20">Other kits owned by {{ vm.device.owner.username }}</h4>
               <kit-list devices="vm.sampleDevices"></kit-list>
               <div layout="row" layout-align="end end">
-                <md-button class="btn-blue" ng-href="/users/{{ vm.device.owner.id }}" style="margin-right:23px" ng-if="vm.device.owner.devices.length > 5" aria-label="">VIEW ALL KITS BY {{ vm.device.owner.username }}</md-button>
+                <!-- TODO: Cosmetic - Style fix -->
+                <md-button class="btn-round-new btn-cyan" ng-href="/users/{{ vm.device.owner.id }}" style="margin-right:23px; padding-top:4px" ng-if="vm.device.owner.devices.length > 6" aria-label="">VIEW ALL KITS BY {{ vm.device.owner.username }}</md-button>
               </div>
             </section>
           </div>

src/app/components/kitList/kitList.html

@@ -11,9 +11,8 @@
                 layout-xs="column"
                 layout-align="start center">
 
-    <md-card flex layout-padding href="./kits/{{device.id}}">
+    <md-card class="kit-list-item" flex layout-padding href="./kits/{{device.id}}">
       <md-card-header layout="row" layout-align="start center">
-
         <div class="ml-20 mt-20">
           <h4 class="m-0 mb-10">{{ device.name || 'No name' }}</h4>
           <span class="md-subhead">

src/app/components/landing/landing.html

@@ -2,14 +2,14 @@
 
   <img class="sc-logo" src="/assets/images/smartcitizen_logo.svg" alt="logo" />
   <a href="/kits/"
-     class="btn-black-outline btn-round-new sc-off-cta-platform"
+     class="btn-black-outline btn-round-new sc-off-cta-platform md-button"
      >GO TO THE PLATFORM</a>
 
   <section class="video-section">
     <div class="heading-over-video" layout="column" layout-align="center start">
       <h1 class="color-white font-kanit">ORDER YOUR SMART CITIZEN KIT FROM SEEED STUDIO</h1>
       <a href="https://www.seeedstudio.com/Smart-Citizen-Starter-Kit-p-2865.html"
-         class="btn-blue btn-round-new mb-30 mt-20"
+         class="btn-blue btn-round-new mb-30 mt-20 md-button"
          >ORDER NOW</a>
     </div>
   </section>
@@ -23,7 +23,7 @@ <h1 class="color-white font-kanit">ORDER YOUR SMART CITIZEN KIT FROM SEEED STUDI
           <h2>WE EMPOWER COMMUNITIES TO BETTER UNDERSTAND THEIR ENVIRONMENT</h2>
           <p style="margin-bottom:33px">We're a community of passionate people who believe data is critical to inform political participation at all levels. We develop tools for citizen action in environmental monitoring and methodologies for community engagement and co-creation.</p>
           <a href="https://www.youtube.com/watch?v=hvn5LyACUYw"
-             class="btn-black-outline btn-round-new"
+             class="btn-black-outline btn-round-new md-button"
              >WATCH DOCUMENTARY</a>
         </div>
         <div flex-order-xs="1" class="img-new_sck tile tile-left tile-image border-xs-top">
@@ -37,7 +37,7 @@ <h2>WE EMPOWER COMMUNITIES TO BETTER UNDERSTAND THEIR ENVIRONMENT</h2>
           <h2>INTRODUCING A NEW AND IMPROVED KIT</h2>
           <p style="margin-bottom:33px">For the past three years, we have been working on an updated version of the Kit. The new sensors collect urban data more accurately and are easier to use. The Smart Citizen Kit 2.1 is available from Seeed studio.</p>
           <a href="https://www.seeedstudio.com/Smart-Citizen-Starter-Kit-p-2865.html"
-             class="btn-black-outline btn-round-new"
+             class="btn-black-outline btn-round-new md-button"
              >ORDER NOW</a>
         </div>
       </div>
@@ -94,7 +94,7 @@ <h2>CIVIC PARTICIPATION ACROSS THE GLOBE</h2>
 
       <div layout="column" layout-align="end center" style="" class="img-platform tile tile-left tile-image">
         <a href="/kits/"
-          class="btn-blue btn-round-new mb-30"
+          class="btn-blue btn-round-new mb-30 md-button"
           >GO TO THE PLATFORM</a>
       </div>
     </section>
@@ -112,15 +112,14 @@ <h2>AN OPEN PLATFORM TO LEARN, BUILD AND CONTRIBUTE</h2>
 
       <div layout="column" layout-align="end center" style="" class="img-docs tile tile-left tile-image">
         <a href="https://docs.smartcitizen.me/"
-          class="btn-blue btn-round-new mb-30"
+          class="btn-blue btn-round-new mb-30 md-button"
           >GO TO THE DOCS</a>
       </div>
     </section>
 
     <section class="mt-50 ">
       <form action="https://smartcitizen.us2.list-manage.com/subscribe/post?u=d67ba8deb34a23a222ec4eb8a&amp;id=d0fd9c9327" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
         <div layout="row" layout-xs="column" layout-sm="column" layout-align="space-between center" layout-align-xs="center center" class="border-black bg-blue" style="padding:30px 50px; min-height: 200px ">
-
           <h3 class="color-white text-left my-20" >SUBSCRIBE TO GET THE LATEST NEWS</h3>
 
           <!-- Begin MailChimp Signup Form -->
@@ -153,23 +152,23 @@ <h3 class="color-white text-left my-20" >SUBSCRIBE TO GET THE LATEST NEWS</h3>
           <h3>DEVELOPER<br> READY</h3>
           <p>Use our powerful API to build amazing things using data.</p>
           <a href="https://developer.smartcitizen.me/"
-             class="btn-black-outline btn-round-new"
+             class="btn-black-outline btn-round-new md-button"
              >USE THE API</a>
         </div>
         <div flex="30" flex-sm="100" flex-xs="100" layout="column" layout-align="space-between center" class="bg-white border-black px-20 py-40 mb-10" >
           <img style="height:80px" src="./assets/images/github.svg" alt="Github icon" />
           <h3>WE’RE<br>OPEN SOURCE</h3>
           <p>Fork and contribute to the project in GitHub.</p>
           <a href="https://github.com/fablabbcn?utf8=✓&q=smartcitizen"
-             class="btn-black-outline btn-round-new"
+             class="btn-black-outline btn-round-new md-button"
              >VISIT OUR REPOS</a>
         </div>
         <div flex="30" flex-sm="100" flex-xs="100" layout="column" layout-align="space-between center" class="bg-white border-black px-20 py-40 mb-10">
           <img style="height:80px;" src="./assets/images/forum.svg" alt="Forum icon" />
           <h3>JOIN THE<br>FORUM</h3>
           <p>A place to share ideas with the community or find support.<p>
           <a href="https://forum.smartcitizen.me"
-             class="btn-black-outline btn-round-new"
+             class="btn-black-outline btn-round-new md-button"
              >GET INVOLVED</a>
         </div>
       </div>

src/app/components/myProfile/Kits.html

@@ -25,7 +25,7 @@
     <!-- TODO: Improvement -->
     <div class="pt-80 px-20 mb-30" flex>
         <div class="profile_content_main_top">
-            <md-button class="btn-round btn-cyan" ng-click="addDeviceSelector()">ADD A NEW KIT</md-button>
+            <md-button class="btn-round-new btn-cyan" ng-click="addDeviceSelector()">ADD A NEW KIT</md-button>
             <span class="float-right">{{ vm.filteredDevices.length || 0 }} kits filtering by {{ vm.deviceStatus.toUpperCase() || 'ALL' }}</span>
         </div>
         <!-- KIT LIST -->

src/app/components/static/404.html

@@ -4,18 +4,18 @@
     <div class="block photo kit-0" data-stellar-background-ratio="0.01">
       <div class="container" style="height:inherit">
         <div style="text-align: center; vertical-align: middle;">
-          <div style="margin-top: 85px;">
-              <h3>404</h3>
-              <span>Yikes! We couldn't find what you are looking for...</span>
+          <div style="margin-top: 200px;">
+              <h2>That's a 404</h2>
+              <span>We couldn't find what you are looking for...</span>
           </div>
-          <div style="margin-top: 50px;">
-            <a href="/kits/" style="text-decoration: none" class="btn-black-outline btn-round-new">GO BACK TO THE PLATFORM</a>
+          <div style="margin-top: 40px;">
+            <a href="/kits/" style="text-decoration: none" class="btn-black-outline btn-round-new md-button">GO BACK TO THE PLATFORM</a>
           </div>
         </div>
       </div>
       <div class="bullet-landing plus grey"></div>
     </div>
-    <!-- BLOCK MESSAGE REALTIME DATA, MONITORING, ANALYSIS 
+    <!-- BLOCK MESSAGE REALTIME DATA, MONITORING, ANALYSIS
     <div class="block photo autoheight datavis">
       <div class="container">
         <div class="">

src/app/components/tags/tags.html

@@ -21,7 +21,7 @@ <h4 class="md-title">About #Tags</h4>
             These tags are contributed by the community and show the variety applications of the Smart Citizen Project. You can use tags to organize and filter devices. If you need a tag, and you can't find one that works for you, you can request the creation of new tags in the forum.
           </p>
           <br>
-          <a style="text-decoration: none" href="https://forum.smartcitizen.me/c/general/" class="btn-black-outline btn-round-new">SUGGEST NEW TAGS</a>
+          <a style="text-decoration: none" href="https://forum.smartcitizen.me/c/general/" class="md-button btn-black-outline btn-round-new">SUGGEST NEW TAGS</a>
         </div>
       </div>
     </div>

src/app/components/upload/csvUpload.html

@@ -35,7 +35,7 @@ <h3>Upload your files</h2>
   <button
      name=csvFiles
      type="file"
-     class="md-button btn-blue btn-round ml-0 mb-30"
+     class="md-button btn-blue btn-round-new ml-0 mb-30"
      ngf-select="vm.change($files, $invalidFiles)"
      ngf-before-model-change="vm.onSelect()"
      ngf-multiple="true"

src/app/components/upload/csvUpload.scss

@@ -35,11 +35,16 @@
 
 .upload-csv {
     .container {
-      padding-bottom:20px;
+      // padding-bottom:20px;
       margin-right: auto;
       margin-left: auto;
     }
 
+    .csv_content{
+      margin-top: 240px;
+      min-height: 50vh;
+    }
+
     @media (min-width: 768px) {
         .container {
             width: 750px;

src/app/components/upload/upload.html

@@ -1,14 +1,14 @@
 <!-- <section class="kit_dataChange"> -->
 <section class="upload-csv timeline" flex="1" layout="row" layout-align="center center">
   <div class="container" layout="row" layout-align="space-between center">
-      <span class="color-white title-timeline">Upload CSV Files</span>
+      <span class="timeline-title">CSV File Upload</span>
       <md-button style="margin-left: auto" class="md-flat md-primary timeline_buttonBack" ui-sref="layout.home.kit({id: vm.kit.id})" >Back to Kit</md-button>
 <!-- 	  <md-button style="margin-left: auto" class="md-flat md-primary timeline_buttonBack" ng-click="vm.backToProfile()">Back to Profile</md-button> -->
     </div>
   </div>
 </section>
 <section class="upload-csv" style="margin-top: 64px; margin-bottom: 64px;">
-  <div class="container">
+  <div class="container csv_content">
     <sc-csv-upload kit="vm.kit"><sc-csv-upload>
   </div>
 </section>

src/app/helpers.scss

@@ -165,21 +165,25 @@
   background: $grey_lighter;
 }
 
+// TODO: Cosmetic Fix buttons in general
 .btn-round-new{
   border-radius: 40px;
   font-family: 'Roboto Condensed';
   font-size: 16px;
-  font-weight: 700;
+  height: 44px;
+  font-weight: $font-weight-heavy;
   letter-spacing: 0.0325em;
+  padding:0px 35px;
   transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-
 }
+
 .btn-round{
   border: 0;
   border-radius: 25px;
   padding:5px 35px;
   font-size:18px;
 }
+
 .btn-cyan{
   background-color: $terciary_color;
   color:white;