Styling for integration hover

config/integrations/etherpad_widget.yaml

@@ -3,7 +3,7 @@ type: "widget"
 integrationType: "etherpad"
 enabled: true
 name: "Etherpad"
-about: "Etherpad is a collaborative text editor. With this widget you can embed Etherpad directly in to your Matrix chat rooms so that you can securely collaborate on documents."
+about: "Collaborate on documents with members of your room."
 avatar: "img/avatars/etherpad.png"
 
 # This is the URL people will be provided when adding a new Etherpad widget. The supported variables

web/app/integration-bag/integration-bag.component.html

@@ -5,5 +5,6 @@
         <img class="integration-avatar" [src]="getSafeUrl(integration.avatar)"/>
         <div class="integration-name">{{ integration.name }}</div>
         <div class="integration-description">{{ integration.about }}</div>
+        <div class="integration-arrow"><i class="fa fa-chevron-right"></i></div>
     </div>
 </div>

web/app/integration-bag/integration-bag.component.scss

@@ -14,6 +14,23 @@
   padding: 5px;
   width: calc(325px - 14px);
   position: relative;
+  cursor: pointer;
+}
+
+.integration .integration-arrow {
+  display: none;
+  position: absolute;
+  top: calc(50% - 12px); // icon happens to be 24px tall
+  right: 0;
+  color: #bbb;
+}
+
+.integration:hover {
+  box-shadow: 0 0 9px #888;
+}
+
+.integration:hover .integration-arrow {
+  display: block;
 }
 
 .integration .integration-avatar {
@@ -26,12 +43,13 @@
   display: inline-block;
   font-size: 1.1em;
   font-weight: 100;
-  padding-left: 5px;
+  padding-left: 10px;
 }
 
 .integration .integration-description {
   display: block;
   font-size: 0.8em;
-  margin-left: 55px;
+  margin-left: 60px;
+  margin-right: 5px;
   color: #999;
 }

web/style/_riot.scss

@@ -9,10 +9,12 @@
 
   .fluid-bread .container {
     padding: 0;
+    margin: 0;
   }
 
   .fluid-bread .container .breadcrumb {
     padding: 0;
+    margin: 0;
   }
 
   .fluid-bread .breadcrumb-item a:hover {