better download button style

core/static/core/colors.scss

@@ -28,3 +28,5 @@ $twitblue: hsl(206, 82%, 63%);
 $shadow-color: rgb(223, 223, 223);
 
 $background-button-color: hsl(0, 0%, 95%);
+
+$deepblue: #354a5f;

core/static/core/header.scss

@@ -1,7 +1,8 @@
+@import "colors";
+
 $hovered-text-color: #c2c2c2;
 $text-color: white;
 
-$background-color: #354a5f;
 $background-color-hovered: #283747;
 
 $red-text-color: #eb2f06;
@@ -9,7 +10,7 @@ $hovered-red-text-color: #ff4d4d;
 
 .header {
   box-sizing: border-box;
-  background-color: $background-color;
+  background-color: $deepblue;
   box-shadow: 3px 3px 3px 0 #dfdfdf;
   border-radius: 0;
   width: 100%;
@@ -98,7 +99,7 @@ $hovered-red-text-color: #ff4d4d;
         border-radius: 0;
         margin: 0;
         box-sizing: border-box;
-        background-color: $background-color;
+        background-color: $deepblue;
         width: 45px;
         height: 25px;
         padding: 0;
@@ -213,7 +214,7 @@ $hovered-red-text-color: #ff4d4d;
           background-position: center center;
           background-size: cover;
           background-repeat: no-repeat;
-          background-color: $background-color;
+          background-color: $deepblue;
         }
 
         >.options {

core/static/core/style.scss

@@ -105,7 +105,7 @@ a:not(.button) {
 
   .collapse-header {
     color: white;
-    background-color: #354a5f;
+    background-color: $deepblue;
     padding: 5px 10px;
     display: flex;
     align-items: center;
@@ -206,34 +206,36 @@ a:not(.button) {
   width: 90%;
   margin: 20px auto 0;
 /*---------------------------------NAV---------------------------------*/
-
   .btn {
     font-size: 15px;
     font-weight: normal;
     color: white;
-    min-width: 60px;
-    padding: 5px 10px;
+    padding: 9px 13px;
     border: none;
     text-decoration: none;
 
     &.btn-blue {
-      background-color: #354a5f;
+      background-color: $deepblue;
+      &:not(:disabled):hover {
+        background-color: darken($deepblue, 10%);
       }
-
-    &.btn-blue:disabled {
+      &:disabled {
         background-color: rgba(70, 90, 126, 0.4);
       }
-
-    &.btn-blue.clickable:not(:disabled):hover {
-      background-color: #2c3646;
     }
 
     &.btn-grey {
       background-color: grey;
+      &:not(:disabled):hover {
+        background-color: darken(gray, 15%);
+      }
+      &:disabled {
+        background-color: lighten(gray, 15%);
+      }
     }
 
-    &.btn-grey.clickable:not(:disabled):hover {
-      background-color: hsl(210, 5%, 30%);
+    i {
+      margin-right: 4px;
     }
   }
 
@@ -977,7 +979,7 @@ thead td {
 }
 
 thead {
-  background-color: #354a5f;
+  background-color: $deepblue;
   color: white;
 }
 

core/templates/core/user_pictures.jinja

@@ -19,12 +19,14 @@
 
 {% block content %}
   <main>
-    {% if can_edit(profile, user) %}
+    {% if user.id == object.id and albums|length > 0 %}
       <div x-data="picture_download" x-cloak>
         <button
           :disabled="in_progress"
+          class="btn btn-blue"
           @click="download('{{ url("api:pictures") }}?users_identified={{ object.id }}')"
         >
+          <i class="fa fa-download"></i>
           {% trans %}Download all my pictures{% endtrans %}
         </button>
         <progress x-ref="progress" x-show="in_progress"></progress>
@@ -32,6 +34,7 @@
     {% endif %}
     {% for album, pictures in albums|items %}
       <h4>{{ album }}</h4>
+      <br />
       <div class="photos">
         {% for picture in pictures %}
           {% if picture.can_be_viewed_by(user) %}
@@ -60,10 +63,12 @@
       <br>
     {% endfor %}
   </main>
-{% endblock %}
+{% endblock content %}
+
 {% block script %}
 
   {{ super() }}
+  {% if user.id == object.id %}
     <script>
     /**
      * @typedef Picture
@@ -105,7 +110,7 @@
                 new zip.HttpReader(p.full_size_url),
                 {level: 9, lastModDate: new Date(p.date), onstart: () => bar.value += 1}
               );
-          }))
+            }));
 
             await zipWriter.close();
             this.in_progress = false;
@@ -113,4 +118,5 @@
         }))
       });
     </script>
-{% endblock %}
+  {% endif %}
+{% endblock script %}

eboutic/static/eboutic/css/eboutic.css

@@ -136,7 +136,7 @@
     right: 5px;
     padding: 5px;
     border-radius: 50%;
-    box-shadow: 0px 0px 12px 2px rgb(0 0 0 / 14%);
+    box-shadow: 0 0 12px 2px rgb(0 0 0 / 14%);
     background-color: white;
     width: 20px;
     height: 20px;
@@ -186,29 +186,7 @@
 }
 
 #eboutic .catalog-buttons button {
-    font-size: 15px!important;
-    font-weight: normal;
-    color: white;
     min-width: 60px;
-    padding: 10px 15px;
-}
-
-#eboutic .catalog-buttons .validate {
-    background-color: #354a5f;
-}
-#eboutic .catalog-buttons .clear {
-    background-color: gray;
-}
-#eboutic .catalog-buttons button i {
-    margin-right: 4px;
-}
-
-#eboutic .catalog-buttons button.validate:hover {
-    background-color: #2c3646;
-}
-
-#eboutic .catalog-buttons button.clear:hover {
-    background-color:hsl(210,5%,30%);
 }
 
 #eboutic .catalog-buttons form {
@@ -252,7 +230,7 @@
     }
 
     #eboutic .product-image {
-        margin-bottom: 0px;
+        margin-bottom: 0;
         max-width: 70px;
     }
 }

eboutic/templates/eboutic/eboutic_main.jinja

@@ -62,13 +62,13 @@
         </li>
       </ul>
       <div class="catalog-buttons">
-        <button @click="clear_basket()" class="clear">
+        <button @click="clear_basket()" class="btn btn-grey">
           <i class="fa fa-trash"></i>
           {% trans %}Clear{% endtrans %}
         </button>
         <form method="get" action="{{ url('eboutic:command') }}">
           {% csrf_token %}
-          <button class="validate">
+          <button class="btn btn-blue">
             <i class="fa fa-check"></i>
             <input type="submit" value="{% trans %}Validate{% endtrans %}"/>
           </button>