feat(fonts): Roboto fonts

bleenco · Aug 20, 2017 · 41c00a0 · 41c00a0
1 parent 1f3f283
commit 41c00a0
Show file tree

Hide file tree

Showing 27 changed files with 35 additions and 36 deletions.
diff --git a/src/app/assets/fonts/Roboto-Black.ttf b/src/app/assets/fonts/Roboto-Black.ttf
diff --git a/src/app/assets/fonts/Roboto-BlackItalic.ttf b/src/app/assets/fonts/Roboto-BlackItalic.ttf
diff --git a/src/app/assets/fonts/Roboto-Bold.ttf b/src/app/assets/fonts/Roboto-Bold.ttf
diff --git a/src/app/assets/fonts/Roboto-BoldItalic.ttf b/src/app/assets/fonts/Roboto-BoldItalic.ttf
diff --git a/src/app/assets/fonts/Roboto-Italic.ttf b/src/app/assets/fonts/Roboto-Italic.ttf
diff --git a/src/app/assets/fonts/Roboto-Light.ttf b/src/app/assets/fonts/Roboto-Light.ttf
diff --git a/src/app/assets/fonts/Roboto-LightItalic.ttf b/src/app/assets/fonts/Roboto-LightItalic.ttf
diff --git a/src/app/assets/fonts/Roboto-Medium.ttf b/src/app/assets/fonts/Roboto-Medium.ttf
diff --git a/src/app/assets/fonts/Roboto-MediumItalic.ttf b/src/app/assets/fonts/Roboto-MediumItalic.ttf
diff --git a/src/app/assets/fonts/Roboto-Regular.ttf b/src/app/assets/fonts/Roboto-Regular.ttf
diff --git a/src/app/assets/fonts/Roboto-Thin.ttf b/src/app/assets/fonts/Roboto-Thin.ttf
diff --git a/src/app/assets/fonts/Roboto-ThinItalic.ttf b/src/app/assets/fonts/Roboto-ThinItalic.ttf
diff --git a/src/app/assets/fonts/SourceSansPro-Black.ttf b/src/app/assets/fonts/SourceSansPro-Black.ttf
diff --git a/src/app/assets/fonts/SourceSansPro-BlackItalic.ttf b/src/app/assets/fonts/SourceSansPro-BlackItalic.ttf
diff --git a/src/app/assets/fonts/SourceSansPro-Bold.ttf b/src/app/assets/fonts/SourceSansPro-Bold.ttf
diff --git a/src/app/assets/fonts/SourceSansPro-BoldItalic.ttf b/src/app/assets/fonts/SourceSansPro-BoldItalic.ttf
diff --git a/src/app/assets/fonts/SourceSansPro-ExtraLight.ttf b/src/app/assets/fonts/SourceSansPro-ExtraLight.ttf
diff --git a/src/app/assets/fonts/SourceSansPro-ExtraLightItalic.ttf b/src/app/assets/fonts/SourceSansPro-ExtraLightItalic.ttf
diff --git a/src/app/assets/fonts/SourceSansPro-Italic.ttf b/src/app/assets/fonts/SourceSansPro-Italic.ttf
diff --git a/src/app/assets/fonts/SourceSansPro-Light.ttf b/src/app/assets/fonts/SourceSansPro-Light.ttf
diff --git a/src/app/assets/fonts/SourceSansPro-LightItalic.ttf b/src/app/assets/fonts/SourceSansPro-LightItalic.ttf
diff --git a/src/app/assets/fonts/SourceSansPro-Regular.ttf b/src/app/assets/fonts/SourceSansPro-Regular.ttf
diff --git a/src/app/assets/fonts/SourceSansPro-Semibold.ttf b/src/app/assets/fonts/SourceSansPro-Semibold.ttf
diff --git a/src/app/assets/fonts/SourceSansPro-SemiboldItalic.ttf b/src/app/assets/fonts/SourceSansPro-SemiboldItalic.ttf
diff --git a/src/app/components/app-build-details/app-build-details.component.html b/src/app/components/app-build-details/app-build-details.component.html
@@ -37,11 +37,11 @@ <h1 class="bold">
 
                   <hr/>
 
-                  <div class="column is-3">
+                  <div class="column is-4">
                     <h2 *ngIf="build?.data?.pull_request">{{ build?.data?.pull_request?.title }}</h2>
                     <h2 *ngIf="!build?.data?.pull_request">{{ build?.data?.commits[0]?.message }}</h2>
                   </div>
-                  <div class="column is-3">
+                  <div class="column is-2">
                     <p>
                       <span class="icon">
                         <img src="images/icons/git-commit.svg">
@@ -50,7 +50,7 @@ <h2 *ngIf="!build?.data?.pull_request">{{ build?.data?.commits[0]?.message }}</h
                       <span *ngIf="!build?.data?.pull_request?.head?.sha">{{ build?.data?.after.slice(0, 7) }}</span>
                     </p>
                   </div>
-                  <div class="column is-4">
+                  <div class="column is-3">
                     <p>
                       <span class="icon">
                         <img [src]="build?.data?.sender?.avatar_url" class="avatar-img">
@@ -60,17 +60,15 @@ <h2 *ngIf="!build?.data?.pull_request">{{ build?.data?.commits[0]?.message }}</h
                     </p>
                   </div>
                   <div class="column is-2">
-                    <div class="column is-12">
-                      <p class="total-time">
-                        <span class="icon">
-                          <img src="images/icons/clock.svg">
-                        </span>
-                        <span>{{ totalTime }}</span>
-                      </p>
-                    </div>
-                    <div class="column is-12" *ngIf="status === 'running' && approximatelyRemainingTime">
+                    <p *ngIf="status === 'running' && approximatelyRemainingTime">
                       <span name="time-left">approximately {{ approximatelyRemainingTime }} remaining</span>
-                    </div>
+                    </p>
+                  </div>
+                  <div class="column is-1">
+                    <p class="total-time">
+                      <img src="images/icons/clock.svg">
+                      <span>{{ totalTime }}</span>
+                    </p>
                   </div>
 
                   <div *ngIf="build.runs && build.runs.length > 1" class="column is-12">

diff --git a/src/app/styles/build-details.sass b/src/app/styles/build-details.sass
@@ -2,7 +2,7 @@
   width: 100%
   border: 3px solid $divider
   border-radius: 4px
-  margin-bottom: 30px
+  margin-bottom: 10px
   margin-top: 30px
 
   &.green
@@ -34,7 +34,7 @@
       float: left
 
     hr
-      margin: 20px 0
+      margin: 5px 0
 
     h1
       font-size: 20px
@@ -56,12 +56,16 @@
       text-overflow: ellipsis
       white-space: nowrap
       overflow: hidden
-      padding: 5px 20px 5px 0
+      padding: 10px 20px 5px 0
+
+    .column
+      display: flex
+      align-items: center
 
     p
       font-size: 14px
       color: $white
-      padding: 5px 20px
+      padding: 0 20px
       display: flex
       align-items: center
 
@@ -84,20 +88,17 @@
       display: flex
       justify-content: flex-end
       align-items: center
-      font-size: 16px
+      font-size: 18px
       color: $white
       font-weight: bold
       padding-right: 0
       margin-right: 0
 
-      .icon
-        margin-right: 5px
-        width: 16px
-        height: 16px
-
-        img
-          width: 16px
-          height: 16px
+      img
+        width: 24px
+        height: 24px
+        margin-right: 10px
+        margin-top: 2px
 
   .right-buttons-top
 

diff --git a/src/app/styles/fonts.sass b/src/app/styles/fonts.sass
@@ -5,14 +5,14 @@
     font-weight: $weight
     font-style: $style
 
-+font-face('SourceSansPro-Light', '../assets/fonts/SourceSansPro-Light', 300, 'normal')
-+font-face('SourceSansPro-Regular', '../assets/fonts/SourceSansPro-Regular', 400, 'normal')
-+font-face('SourceSansPro-Semibold', '../assets/fonts/SourceSansPro-Semibold', 600, 'normal')
-+font-face('SourceSansPro-Bold', '../assets/fonts/SourceSansPro-Bold', 700, 'normal')
-+font-face('SourceSansPro-Black', '../assets/fonts/SourceSansPro-Black', 900, 'normal')
++font-face('Roboto-Light', '../assets/fonts/Roboto-Light', 300, 'normal')
++font-face('Roboto-Regular', '../assets/fonts/Roboto-Regular', 400, 'normal')
++font-face('Roboto-Semibold', '../assets/fonts/Roboto-Medium', 600, 'normal')
++font-face('Roboto-Bold', '../assets/fonts/Roboto-Bold', 700, 'normal')
++font-face('Roboto-Black', '../assets/fonts/Roboto-Black', 900, 'normal')
 
-$font-family-light: 'SourceSansPro-Light', sans-serif
-$font-family-regular: 'SourceSansPro-Regular', sans-serif
-$font-family-semibold: 'SourceSansPro-Semibold', sans-serif
-$font-family-bold: 'SourceSansPro-Bold', sans-serif
-$font-family-black: 'SourceSansPro-Black', sans-serif
+$font-family-light: 'Roboto-Light', sans-serif
+$font-family-regular: 'Roboto-Regular', sans-serif
+$font-family-semibold: 'Roboto-Medium', sans-serif
+$font-family-bold: 'Roboto-Bold', sans-serif
+$font-family-black: 'Roboto-Black', sans-serif