Update Sidebar + Navbar to match designs on #347

frontend/simple/components/YourGroupsList.vue

@@ -1,70 +1,62 @@
 <template>
   <div>
-    <h3 class="list-title">YOUR GROUPS</h3>
-    <p class="group-name"
-      v-for="group in groups"
-      :class='{"is-active": currentGroupId === group.contractId}'
-      @click.prevent="changeGroup(group.contractId)"
-    >
-      {{ group.groupName }}
-    </p>
-    <router-link class="create-new-link" to="/new-group">+ CREATE NEW</router-link>
+    <h3 class="title is-7 is-uppercase gi-title">
+      Your groups
+    </h3>
+    <ul class="list">
+      <li class="list-item"
+        :class='{"is-active": currentGroupId === group.contractId}'
+        tabindex="0"
+        v-for="group in groups"
+        @click.prevent="changeGroup(group.contractId)"
+      >
+        {{ group.groupName }}
+      </li>
+    </ul>
+    <router-link to="/new-group" class="cta">
+      Create new group
+    </router-link>
   </div>
 </template>
 <style lang="scss" scoped>
-.list-title {
-  color: #9b9b9b;
-  font-family: HelveticaNeue-Light;
-  font-size: 14px;
-  letter-spacing: 5px;
-  margin-bottom: 13px;
-}
+$spacer: 2rem;
 
-.group-name {
-  color: #616161;
-  font-family: HelveticaNeue-Bold;
-  font-size: 17px;
-  overflow: hidden;
-  padding: 5px 0;
+.gi-title {
+  padding-top: 2.5rem;
+  padding-left: $spacer;
+  margin-bottom: 0.5rem;
 }
 
-.group-name:hover {
-  color: #222324;
-  cursor: pointer;
-}
+.list {
+  &-item {
+    padding: 0.4rem 0.4rem 0.4rem $spacer;
+    font-weight: 600;
 
-.group-name.is-active {
-  background: #ececec;
-  padding-left: 15px;
-  margin-left: -15px;
+    &.is-active {
+      background: #ededed;
+      border-right: 3px solid orange;
+    }
+  }
 }
 
-.create-new-link {
-  color: #9b9b9b;
+.cta {
   display: block;
-  font-family: HelveticaNeue-Bold;
-  font-size: 12px;
-  letter-spacing: 3.43px;
-  margin-top: 13px;
-
-  &:hover {
-    color: #222324;
-  }
+  padding-top: 0.25rem;
+  padding-left: $spacer;
 }
 
 </style>
 <script>
-  export default {
-    name: 'YourGroupsList',
-    props: {
-      groups: Array,
-      currentGroupId: String
-    },
-    methods: {
-      changeGroup (hash) {
-        this.$store.commit('setCurrentGroupId', hash)
-      }
+export default {
+  name: 'YourGroupsList',
+  props: {
+    groups: Array,
+    currentGroupId: String
+  },
+  methods: {
+    changeGroup (hash) {
+      this.$store.commit('setCurrentGroupId', hash)
     }
   }
+}
 </script>
-

frontend/simple/sass/bulma_overrides/components/navbar.scss

@@ -1,17 +1,38 @@
+$navbar-height: 4.5rem;
+
 @import "../../node_modules/bulma/sass/components/navbar";
 
 .navbar {
-  box-shadow: none;
   display: flex;
   justify-content: space-between;
-  padding: 1rem 0;
+
+  &-item {
+    display: flex;
+    align-items: center;
+  }
+
+  a#{&}-main-item {
+    background-color: transparent;
+    border-bottom: 3px solid transparent;
+    font-weight: 600;
+
+    &.is-active,
+    &:focus,
+    &:hover {
+      outline: none;
+      color: inherit;
+      border-color: $orange;
+    }
+  }
 }
 
 // Copied Paste from Bulma's source
 // Force navbar-dropdown to show on mobile and tablet too.
 // Keep it here until we design navbar to be full responsive
 .has-dropdown.gi-is-profile {
   .navbar-link {
+    padding-right: 3.5rem;
+
     &::after {
       border: 3px solid $link;
       border-radius: 2px;
@@ -27,6 +48,7 @@
       transform: rotate(-45deg);
       transform-origin: center;
       width: 0.625em;
+      right: 2rem;
     }
   }
 

frontend/simple/views/GroupDashboard.vue

@@ -1,25 +1,26 @@
 <template>
-  <section class="container section" data-test="dashboard">
+  <main data-test="dashboard">
     <div class="columns">
-
-      <div class="column is-2">
+      <div class="column is-narrow gi-sidebar">
         <your-groups-list
           :currentGroupId="currentGroupState.currentGroupId"
           :groups="groupsByName"
         />
       </div>
 
-      <div class="column">
-        <div class='is-pulled-right'>
-          <groups-min-income :group="currentGroupState" />
-        </div>
+      <div class="column gi-main">
+        <div class="gi-header">
+          <div class='is-pulled-right'>
+            <groups-min-income :group="currentGroupState" />
+          </div>
 
-        <h1 class="title is-1" data-test="groupName">
-          {{ currentGroupState.groupName }}
-        </h1>
-        <p data-test="sharedValues">
-          {{ currentGroupState.sharedValues }}
-        </p>
+          <h1 class="title is-1" data-test="groupName">
+            {{ currentGroupState.groupName }}
+          </h1>
+          <p data-test="sharedValues">
+            {{ currentGroupState.sharedValues }}
+          </p>
+        </div>
 
         <voting-banner class="widget"
           who="Sam"
@@ -39,43 +40,54 @@
           :group="currentGroupState" />
       </div>
     </div>
-  </section>
+  </main>
 </template>
 <style lang="scss" scoped>
-  .widget {
-    margin: 4rem 0;
-  }
+.widget {
+  margin: 4rem 0;
+}
 
-  .container {
-    max-width: 960px; // force until rethink layout on larger screens
-  }
+.gi-sidebar {
+  width: 15rem;
+  padding-right: 0;
+}
+
+.gi-main {
+  padding-right: calc(2rem + 0.75rem);
+  padding-left: 2rem;
+  max-width: 960px;
+}
+
+.gi-header {
+  padding-top: 1.5rem;
+}
 </style>
 <script>
-  import {mapGetters} from 'vuex'
-  import YourGroupsList from '../components/YourGroupsList.vue'
-  import GroupsMinIncome from '../components/GroupsMinIncome.vue'
-  import GroupMembers from '../components/GroupMembers.vue'
-  import SupportHistory from '../components/SupportHistory.vue'
-  import GroupSettings from '../components/GroupSettings.vue'
-  import VotingBanner from '../components/VotingBanner.vue'
-  import ProgressOverview from '../components/ProgressOverview.vue'
+import {mapGetters} from 'vuex'
+import YourGroupsList from '../components/YourGroupsList.vue'
+import GroupsMinIncome from '../components/GroupsMinIncome.vue'
+import GroupMembers from '../components/GroupMembers.vue'
+import SupportHistory from '../components/SupportHistory.vue'
+import GroupSettings from '../components/GroupSettings.vue'
+import VotingBanner from '../components/VotingBanner.vue'
+import ProgressOverview from '../components/ProgressOverview.vue'
 
-  export default {
-    name: 'GroupDashboard',
-    computed: {
-      ...mapGetters([
-        'currentGroupState',
-        'groupsByName'
-      ])
-    },
-    components: {
-      YourGroupsList,
-      GroupsMinIncome,
-      GroupMembers,
-      SupportHistory,
-      GroupSettings,
-      VotingBanner,
-      ProgressOverview
-    }
+export default {
+  name: 'GroupDashboard',
+  computed: {
+    ...mapGetters([
+      'currentGroupState',
+      'groupsByName'
+    ])
+  },
+  components: {
+    YourGroupsList,
+    GroupsMinIncome,
+    GroupMembers,
+    SupportHistory,
+    GroupSettings,
+    VotingBanner,
+    ProgressOverview
   }
+}
 </script>

frontend/simple/views/Home.vue

@@ -4,7 +4,18 @@
         <img class="logo" src="images/group-income-icon-transparent.png">
         <br>
         <h1 class="title gi-foco-font"><i18n>Welcome to GroupIncome</i18n></h1>
-        <div v-if="!$store.state.loggedIn"><a v-on:click="forwardToLogin"><i18n>Login</i18n></a> or <router-link to="signup"><i18n>Sign Up</i18n></router-link> <i18n>to continue</i18n></div>
+        <div v-if="!$store.state.loggedIn">
+          <a v-on:click="forwardToLogin"><i18n>Login</i18n></a> or <router-link to="signup"><i18n>Sign Up</i18n></router-link> <i18n>to continue</i18n>
+        </div>
+        <div v-else>
+          <router-link
+            class="button is-success"
+            data-test="createGroup"
+            to="new-group"
+          >
+            <i18n>Start a Group</i18n>
+          </router-link>
+        </div>
       </div>
     </section>
 </template>