improves styles for external links on proposal show

app/assets/stylesheets/_consul_settings.scss

@@ -43,6 +43,7 @@ $budget:            #7e328a;
 $budget-hover:      #7571bf;
 
 $highlight:         #e7f2fc;
+$highlight-soft:    #f3f8fd;
 $light:             #f5f7fa;
 $featured:          #ffdc5c;
 

app/assets/stylesheets/participation.scss

@@ -428,33 +428,30 @@
 
   .document-link,
   .video-link {
-    border: 1px solid $border;
+    background: $highlight-soft;
+    border: 1px solid $highlight;
     display: block;
     margin: $line-height / 2 0;
     padding: $line-height / 2;
     position: relative;
 
     a {
-      padding-left: rem-calc(24);
+      word-wrap: break-word;
     }
 
-    ::before {
-      color: #007bb7;
-      content: 'G';
-      font-family: "icons" !important;
+    [class^="icon-"] {
+      display: inline-block;
       font-size: rem-calc(24);
-      left: rem-calc(6);
-      padding-top: rem-calc(3);
-      position: absolute;
-      top: 0;
+      line-height: $line-height;
+      vertical-align: middle;
     }
-  }
 
-  .video-link {
+    .icon-document {
+      color: #007bb7;
+    }
 
-    ::before {
+    .icon-video {
       color: #cc181e;
-      content: 'D';
     }
   }
 

app/views/proposals/show.html.erb

@@ -77,14 +77,23 @@
 
         <% if @proposal.external_url.present? %>
           <div class="document-link">
-            <%= text_with_links @proposal.external_url %>
+            <p>
+              <span class="icon-document"></span>&nbsp;
+              <strong><%= t('proposals.show.title_external_url') %></strong>
+            </p>
+              <%= text_with_links @proposal.external_url %>
           </div>
         <% end %>
 
         <% if @proposal.video_url.present? %>
           <div class="video-link">
+            <p>
+              <span class="icon-video"></span>&nbsp;
+              <strong><%= t('proposals.show.title_video_url') %></strong>
+            </p>
             <%= text_with_links @proposal.video_url %>
           </div>
+
         <% end %>
 
         <h4><%= @proposal.question %></h4>

config/locales/en/general.yml

@@ -406,6 +406,8 @@ en:
       send_notification: Send notification
       no_notifications: "This proposal has any notifications."
       embed_video_title: "Video on %{proposal}"
+      title_external_url: "Additional documentation"
+      title_video_url: "External video"
     update:
       form:
         submit_button: Save changes

config/locales/es/general.yml

@@ -406,6 +406,8 @@ es:
       share: Compartir
       no_notifications: "Esta propuesta no tiene notificaciones."
       embed_video_title: "Vídeo en %{proposal}"
+      title_external_url: "Documentación adicional"
+      title_video_url: "Vídeo externo"
     update:
       form:
         submit_button: Guardar cambios