Merge pull request #291 from ActivityWatch/style-updates

Author: ErikBjare

src/App.vue

@@ -2,44 +2,57 @@
 div#wrapper
   aw-header
 
-  div(:class="{'container': !fullContainer, 'container-fluid': fullContainer}").px-0.px-md-3
+  div(:class="{'container': !fullContainer, 'container-fluid': fullContainer}").px-0.px-md-2
     div.aw-container.my-3.p-3
       error-boundary
         user-satisfaction-poll
         new-release-notification(v-if="isNewReleaseCheckEnabled")
         router-view
 
-  div.container(style="color: #555")
-    div(style="float: left")
-      div.mb-1
-        | Made with ❤ by the #[a(href="http://activitywatch.net/contributors/") ActivityWatch developers]
+  div.container(style="color: #555; font-size: 0.9em")
+    div.mb-2
+      // The heart emoji is red by default on most platforms, but not on all
+      | Made with #[span(style="color: red") ❤] by the #[a(href="http://activitywatch.net/contributors/") ActivityWatch developers]
       div
-        a.mr-2(href="https://github.com/ActivityWatch/activitywatch", target="_blank")
-          icon(name="brands/github")
-          | GitHub
+        span.mt-2(v-show="info", style="color: #888; font-size: 0.8em")
+          span.mr-2
+            b Host:
+            |   {{info.hostname}}
+          span
+            b Version:
+            |   {{info.version}}
+
+    div(style="font-size: 0.9em; opacity: 0.8")
+      div.float-none.float-md-right.my-2
+        a(href="https://github.com/ActivityWatch/activitywatch/issues/new/choose", target="_blank").mr-3
+          icon(name="bug")
+          | Report a bug
+        a(href="https://forum.activitywatch.net/c/support", target="_blank").mr-3
+          icon(name="question-circle")
+          | Ask for help
+        a(href="https://forum.activitywatch.net/c/features", target="_blank")
+          icon(name="vote-yea")
+          | Vote on features
+      div.float-none.float-md-left.my-2
         a(href="https://twitter.com/ActivityWatchIt", target="_blank")
           icon(name="brands/twitter")
           | Twitter
-
-    div(style="float: right; text-align: right;")
-      | Found a bug? #[a(href="https://github.com/ActivityWatch/activitywatch/issues/new/choose") File an issue]
-      br
-      | Need help? #[a(href="https://forum.activitywatch.net/c/support") Ask on the forum]
-      br
-      | Missing a feature? #[a(href="https://forum.activitywatch.net/c/features") Vote on the forum]
-      br
-      | Built something cool? #[a(href="https://forum.activitywatch.net/c/projects") Share it on the forum]
-      br
-      span.mt-2(v-show="info", style="color: #888; font-size: 0.8em")
-        | Host: {{info.hostname}}
-        br
-        | Version: {{info.version}}
+        a(href="https://github.com/ActivityWatch", target="_blank").ml-3
+          icon(name="brands/github")
+          | GitHub
+        a(href="https://activitywatch.net/donate/", target="_blank").ml-3
+          icon(name="hand-holding-heart")
+          | Donate
 </template>
 
 <script>
 // only import the icons you use to reduce bundle size
 import 'vue-awesome/icons/brands/twitter';
 import 'vue-awesome/icons/brands/github';
+import 'vue-awesome/icons/hand-holding-heart';
+import 'vue-awesome/icons/vote-yea';
+import 'vue-awesome/icons/question-circle';
+import 'vue-awesome/icons/bug';
 
 export default {
   data: function () {

src/components/Header.vue

@@ -141,9 +141,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '../style/globals';
+
 .aw-navbar {
-  background-color: #fff;
-  border: solid #ccc;
+  background-color: white;
+  border: solid $lightBorderColor;
   border-width: 0 0 1px 0;
 }
 

src/style/_container.scss

@@ -0,0 +1,5 @@
+$textColor: rgb(60, 66, 87);
+$backgroundColor: rgb(247, 250, 252);
+
+$lightBorderColor: darken(white, 12%);
+$activeHighlightColor: rgb(10, 120, 255);

src/style/_globals.scss

@@ -1,17 +1,21 @@
-@import 'globalvars';
-@import 'container';
-
-$textcolor: #000;
+@import "globals";
 
+body,
 html,
 body,
 button {
-  color: $textcolor;
-  font-family: 'Varela Round', sans-serif !important;
+  color: $textColor;
+  font-family: -apple-system , BlinkMacSystemFont , "Segoe UI" , "Roboto" , "Helvetica Neue" , "Ubuntu" , sans-serif;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+h1, h2, h3, h4, h5, h6, nav {
+  font-family: 'Varela Round', sans-serif;
 }
 
 body {
-  background-color: #eee;
+  background-color: $backgroundColor;
 }
 
 // To make icons a little less crowded
@@ -21,3 +25,9 @@ body {
   margin-right: 4px;
   vertical-align: middle;
 }
+
+.aw-container {
+  background-color: #fff;
+  border: 1px solid $lightBorderColor;
+  border-radius: 5px;
+}

src/style/_globalvars.scss

@@ -35,7 +35,7 @@ div
       label Use regex
       input(type="checkbox" v-model="use_regex")
     div
-      label Filter AFK
+      label Exclude time away from computer
       input(type="checkbox" v-model="filter_afk")
     //div.form-row
       div.form-group.col-md-6

src/style/style.scss

@@ -16,7 +16,7 @@ div
           b-button.px-2(:to="link_prefix + '/' + previousPeriod() + '/' + subview",
                    variant="outline-dark")
             icon(name="arrow-left")
-        b-select.px-2(:value="periodLength", :options="['day', 'week', 'month']",
+        b-select.pl-2.pr-3(:value="periodLength", :options="['day', 'week', 'month']",
                  @change="(periodLength) => setDate(_date, periodLength)")
         b-input-group-append
           b-button.px-2(:to="link_prefix + '/' + nextPeriod() + '/' + subview",
@@ -34,9 +34,9 @@ div
           span.d-none.d-md-inline
             |  Refresh
 
-  aw-periodusage(:periodusage_arr="periodusage", @update="setDate")
+  aw-periodusage.mt-2(:periodusage_arr="periodusage", @update="setDate")
 
-  ul.row.nav.nav-tabs.mt-3.px-3
+  ul.row.nav.nav-tabs.mt-4
     li.nav-item(v-for="view in views")
       router-link.nav-link(:to="{ name: 'activity-view', params: {...$route.params, view_id: view.id}}" :class="{'router-link-exact-active': currentView.id == view.id}")
         h6 {{view.name}}
@@ -63,48 +63,59 @@ div
     h5 Options
 
     div.row
-      div.col-lg-6
-        b-form-checkbox(v-model="filterAFK")
-          | Filter AFK
-        b-form-checkbox(v-model="includeAudible")
+      div.col-md-6
+        b-form-checkbox(v-model="filterAFK" size="sm")
+          | Exclude AFK time
+          icon#filterAFKHelp(name="question-circle" style="opacity: 0.4")
+          b-tooltip(target="filterAFKHelp" v-b-tooltip.hover title="Filter away time where the AFK watcher didn't detect any input.")
+        b-form-checkbox(v-model="includeAudible" :disabled="!filterAFK" size="sm")
           | Count audible browser tab as active
+          icon#includeAudibleHelp(name="question-circle" style="opacity: 0.4")
+          b-tooltip(target="includeAudibleHelp" v-b-tooltip.hover title="If the active window is an audible browser tab, count as active. Requires a browser watcher.")
 
-      div.col-lg-6
-        b-form-group(label="Show/filter category" label-cols="5" label-cols-lg="4")
-          b-form-select(v-model="filterCategory", :options="categories")
+      div.col-md-6.mt-2.mt-md-0
+        b-form-group(label="Show category" label-cols="5" label-cols-lg="4" style="font-size: 0.88em")
+          b-form-select(v-model="filterCategory", :options="categories" size="sm")
 
     aw-devonly
       b-btn(id="load-demo", @click="load_demo")
         | Load demo data
 </template>
 
 <style lang="scss" scoped>
-$buttoncolor: #ddd;
-$bordercolor: #ddd;
+@import '../../style/globals';
 
 .nav {
-  border-bottom: 2px solid $bordercolor;
+  border-bottom: 1px solid $lightBorderColor;
 
   .nav-item {
-    margin-bottom: -2px;
+    margin-bottom: 0px;
+
+    &:first-child {
+      margin-left: 0;
+    }
 
     .nav-link {
-      background-color: $buttoncolor;
-      margin: 0 0.2em 0 0.2em;
-      padding: 0.4em 0.5em 0.1em 0.5em;
-      border: 2px solid $bordercolor;
-      border-bottom: none;
-      border-radius: 0.5rem 0.5rem 0 0;
-      color: #111 !important;
+      // default bootstrap vertical padding was too high
+      padding: 0.25rem 1rem;
+
+      color: lighten(black, 40%);
       cursor: pointer;
+      border: none;
 
       &:hover {
-        background-color: #f8f8f8;
+        color: black !important;
+        border-bottom: 3px solid lighten(black, 70%);
+        border-radius: 0;
       }
 
       &.router-link-exact-active {
-        background-color: #fff;
-        color: #333 !important;
+        color: $activeHighlightColor !important;
+        border-bottom: 3px solid lighten($activeHighlightColor, 15%);
+        border-radius: 0;
+
+        // Does nothing for Verala Round
+        font-weight: bold;
 
         &:hover {
           background-color: #fff;
@@ -127,6 +138,7 @@ import 'vue-awesome/icons/plus';
 import 'vue-awesome/icons/edit';
 import 'vue-awesome/icons/times';
 import 'vue-awesome/icons/save';
+import 'vue-awesome/icons/question-circle';
 
 export default {
   name: 'Activity',

src/views/Search.vue

@@ -3,12 +3,12 @@ svg
 </template>
 
 <style scoped lang="scss">
+@import '../style/globals';
+
 svg {
   width: 100%;
   height: 40pt;
-  border: 1px solid #999;
-  margin-top: 0.2em;
-  margin-bottom: 0.2em;
+  border: 1px solid $lightBorderColor;
   border-radius: 0.5em;
 }
 </style>

src/views/activity/Activity.vue

@@ -2,7 +2,7 @@
 // We want to use another colorscheme than the default 'schemeAccent',
 // unfortunately it seems like the color-scheme prop is broken.
 // See this issue: https://github.com/David-Desmaisons/Vue.D3.sunburst/issues/11
-sunburst(:data="data", :colorScale="colorfunc", :getCategoryForColor="categoryForColor", :colorScheme="null" showLabels="true")
+sunburst(:data="data", :colorScale="colorfunc", :getCategoryForColor="categoryForColor", :colorScheme="null" :showLabels="true")
   // Add behaviors
   template(slot-scope="{ on, actions }")
     highlightOnHover(v-bind="{ on, actions }")