UI improvements

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/views/About.vue

@@ -238,17 +238,20 @@ a:not(.button) {
   color: #111;
 }
 
-.hero.is-primary .subtitle {
-  padding: 1rem;
-  display: block;
+.hero.is-primary {
+  background: $background-color;
+  .subtitle {
+    padding: 1rem;
+    display: block;
 
-  span {
-    color: lighten($primary, 10%);
+    span {
+      color: lighten($background-color, 10%);
+    }
   }
 }
 
 .hero.register {
-  background: lighten($primary, 20%);
+  background: lighten($background-color, 20%);
 }
 
 section {

js/src/views/Account/IdentityPickerWrapper.vue

@@ -9,7 +9,7 @@
       <div class="media">
         <div class="media-left">
           <figure class="image is-48x48" v-if="currentIdentity.avatar">
-            <img class="image" :src="currentIdentity.avatar.url" alt="" />
+            <img class="image is-rounded" :src="currentIdentity.avatar.url" alt="" />
           </figure>
           <b-icon v-else size="is-large" icon="account-circle" />
         </div>
@@ -29,12 +29,9 @@
       </div>
     </div>
     <span v-else class="block" @click="isComponentModalActive = true">
-      <img
-        class="image is-48x48"
-        v-if="currentIdentity.avatar"
-        :src="currentIdentity.avatar.url"
-        alt=""
-      />
+      <figure class="image is-48x48" v-if="currentIdentity.avatar">
+        <img class="is-rounded" :src="currentIdentity.avatar.url" alt="" />
+      </figure>
       <b-icon v-else size="is-large" icon="account-circle" />
     </span>
     <b-modal :active.sync="isComponentModalActive" has-modal-card>

js/src/views/Admin/Dashboard.vue

@@ -83,9 +83,9 @@ export default class Dashboard extends Vue {
   line-height: 1.125;
 }
 
-article.tile {
-  a {
-    color: #4a4a4a;
-  }
+.tile a,
+article.tile a {
+  color: #4a4a4a;
+  text-decoration: none;
 }
 </style>

js/src/views/Admin/Follows.vue

@@ -66,10 +66,14 @@ export default class Follows extends Vue {
   relayFollowers: Paginate<IFollower> = { elements: [], total: 0 };
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .tab-item {
   form {
     margin-bottom: 1.5rem;
   }
 }
+
+a {
+  text-decoration: none !important;
+}
 </style>

js/src/views/Admin/Settings.vue

@@ -139,3 +139,13 @@ export default class Settings extends Vue {
   }
 }
 </script>
+<style lang="scss" scoped>
+@import "../../variables.scss";
+
+.notification a {
+  color: $primary !important;
+  text-decoration: underline !important;
+  text-decoration-color: #fea72b !important;
+  text-decoration-thickness: 2px !important;
+}
+</style>

js/src/views/Event/Event.vue

@@ -68,6 +68,15 @@
                   <tag>{{ tag.title }}</tag>
                 </router-link>
               </p>
+              <b-tag type="is-warning" size="is-medium" v-if="event.draft">{{ $t("Draft") }}</b-tag>
+              <span class="event-status" v-if="event.status !== EventStatus.CONFIRMED">
+                <b-tag type="is-warning" v-if="event.status === EventStatus.TENTATIVE">{{
+                  $t("Event to be confirmed")
+                }}</b-tag>
+                <b-tag type="is-danger" v-if="event.status === EventStatus.CANCELLED">{{
+                  $t("Event cancelled")
+                }}</b-tag>
+              </span>
             </div>
             <div class="column is-3-tablet">
               <div>
@@ -138,15 +147,6 @@
                 </div>
               </div>
               <div class="has-text-right">
-                <tag type="is-warning" size="is-medium" v-if="event.draft">{{ $t("Draft") }}</tag>
-                <span class="event-status" v-if="event.status !== EventStatus.CONFIRMED">
-                  <tag type="is-warning" v-if="event.status === EventStatus.TENTATIVE">{{
-                    $t("Event to be confirmed")
-                  }}</tag>
-                  <tag type="is-danger" v-if="event.status === EventStatus.CANCELLED">{{
-                    $t("Event cancelled")
-                  }}</tag>
-                </span>
                 <template class="visibility" v-if="!event.draft">
                   <p v-if="event.visibility === EventVisibility.PUBLIC">
                     {{ $t("Public event") }}
@@ -164,6 +164,7 @@
                 </template>
                 <p>
                   <router-link
+                    class="participations-link"
                     v-if="actorIsOrganizer && event.draft === false"
                     :to="{ name: RouteName.PARTICIPATIONS, params: { eventId: event.uuid } }"
                   >
@@ -224,10 +225,10 @@
                   <b-icon icon="ticket-confirmation-outline" />
                 </p>
                 <b-dropdown position="is-bottom-left" aria-role="list">
-                  <span slot="trigger" role="button">
+                  <b-button slot="trigger" role="button" icon-right="dots-horizontal">
                     Actions
-                    <b-icon icon="dots-horizontal" />
-                  </span>
+                    <!-- <b-icon icon="dots-horizontal" /> -->
+                  </b-button>
                   <b-dropdown-item
                     aria-role="listitem"
                     has-link
@@ -1022,7 +1023,7 @@ export default class Event extends EventMixin {
 @import "../../variables";
 
 .section {
-  padding: 1rem 1.5rem;
+  padding: 1rem 2rem 4rem;
 }
 
 .fade-enter-active,
@@ -1084,6 +1085,9 @@ div.sidebar {
   background: white;
 
   p.tags {
+    a {
+      text-decoration: none;
+    }
     span {
       &.tag {
         margin: 0 2px;
@@ -1229,71 +1233,6 @@ div.sidebar {
   }
 }
 
-.share {
-  border-bottom: solid 1px $primary;
-  border-top: solid 1px $primary;
-
-  .diaspora span svg {
-    height: 2rem;
-    width: 2rem;
-  }
-
-  .columns {
-    & > * {
-      padding: 2rem 0;
-    }
-
-    h3 {
-      display: block;
-      color: $primary;
-      font-size: 3rem;
-      text-decoration: underline;
-      text-decoration-color: $secondary;
-      max-width: 20rem;
-    }
-
-    .column:first-child {
-      h3 {
-        margin: 0 auto 1rem;
-        font-weight: normal;
-      }
-
-      small.maximumNumberOfPlacesWarning {
-        margin: 0 auto 1rem;
-        display: block;
-      }
-    }
-
-    .column:last-child {
-      h3 {
-        margin-right: 0;
-      }
-    }
-
-    .add-to-calendar {
-      display: flex;
-
-      h3 {
-        margin-left: 0;
-        cursor: pointer;
-      }
-
-      img {
-        max-width: 250px;
-      }
-
-      &::before {
-        content: "";
-        background: #b3b3b2;
-        position: absolute;
-        bottom: 25%;
-        height: 40%;
-        width: 1px;
-      }
-    }
-  }
-}
-
 .more-events {
   background: white;
 }
@@ -1310,4 +1249,12 @@ button.dropdown-item {
   padding-right: 1rem;
   text-align: right;
 }
+
+a.participations-link {
+  text-decoration: none;
+}
+
+.event-status .tag {
+  font-size: 1rem;
+}
 </style>

js/src/views/Event/Participants.vue

@@ -331,6 +331,12 @@ export default class Participants extends Vue {
 section {
   padding: 1rem 0;
 }
+
+/deep/ .tabs.is-boxed {
+  a {
+    text-decoration: none;
+  }
+}
 </style>
 <style lang="scss">
 nav.tabs li {

js/src/views/Home.vue

@@ -377,7 +377,6 @@ export default class Home extends Vue {
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
 @import "@/variables.scss";
 
@@ -385,10 +384,6 @@ main > div > .container {
   background: $white;
 }
 
-.section {
-  padding: 1rem 1.5rem;
-}
-
 .search-autocomplete {
   border: 1px solid #dbdbdb;
   color: rgba(0, 0, 0, 0.87);
@@ -429,7 +424,7 @@ section.hero {
   background: lighten($secondary, 20%);
 
   .title {
-    color: $primary;
+    color: $background-color;
   }
 
   .column figure.image img {

js/src/views/Moderation/Logs.vue

@@ -176,4 +176,8 @@ img.image {
   height: 1.5em;
   vertical-align: text-bottom;
 }
+
+a {
+  text-decoration: none;
+}
 </style>

js/src/views/Settings.vue

@@ -182,4 +182,7 @@ export default class Settings extends Vue {
 aside.section {
   padding-top: 1rem;
 }
+.breadcrumb ul li a {
+  text-decoration: none;
+}
 </style>

js/src/views/Settings/Notifications.vue

@@ -141,31 +141,16 @@ export default class Notifications extends Vue {
 @import "../../variables.scss";
 
 .field {
-  .b-checkbox.checkbox {
-    align-items: normal;
-
-    /deep/ & input:checked + .check {
-      background-color: $accent;
-      border-color: $accent;
-    }
-  }
   &:not(:last-child) {
     margin-bottom: 1.5rem;
   }
 
   a.change-timezone {
-    color: $accent;
+    color: $primary;
     text-decoration: underline;
     text-decoration-color: #fea72b;
     text-decoration-thickness: 2px;
     margin-left: 5px;
   }
-  // /deep/ .select select {
-  //   &:active,
-  //   &:focus {
-  //     border-color: $primary;
-  //     box-shadow: 0 0 0 0.125em rgba($primary, 0.25);
-  //   }
-  // }
 }
 </style>