API & Client - move user preferences + add picture edition

fittrackee_client/src/scss/base.scss

@@ -148,4 +148,77 @@ button {
   font-weight: bold;
   text-align: center;
   vertical-align: center;
+}
+
+.custom-checkboxes-group {
+  display: flex;
+  justify-content: space-around;
+
+  .custom-checkboxes {
+    display: inline-flex;
+
+    @media screen and (max-width: $xx-small-limit) {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: $default-padding * .5;
+    }
+
+    .custom-checkbox {
+      label {
+        font-weight: normal;
+        float: left;
+        padding: 0 5px;
+        cursor: pointer;
+      }
+
+      label input {
+        display: none;
+      }
+
+      label span {
+        border: solid 1px var(--custom-checkbox-border-color);
+        border-radius: 5px;
+        display: block;
+        font-size: 0.9em;
+        padding: 2px 6px;
+        text-align: center;
+      }
+
+      input:checked + span {
+        background-color: var(--custom-checkbox-checked-bg-color);
+        color: var(--custom-checkbox-checked-color);
+      }
+    }
+  }
+}
+
+.description-list {
+  dl {
+    overflow: hidden;
+    width: 100%;
+    padding: 0 $default-padding;
+    dt {
+      font-weight: bold;
+      float: left;
+      width: 25%;
+    }
+    dd {
+      float: left;
+    }
+  }
+  @media screen and (max-width: $x-small-limit) {
+    dl {
+      overflow: auto;
+      width: initial;
+      dt {
+        font-weight: bold;
+        float: none;
+        width: initial;
+      }
+      dd {
+        float: none;
+      }
+    }
+  }
 }

fittrackee_client/src/scss/colors.scss

@@ -20,9 +20,9 @@
   --card-border-color: #c4c7cf;
   --input-border-color: #9da3af;
 
-  --time-frame-border-color: #9da3af;
-  --time-frame-checked-bg-color: #9da3af;
-  --time-frame-checked-color: #FFFFFF;
+  --custom-checkbox-border-color: #9da3af;
+  --custom-checkbox-checked-bg-color: #9da3af;
+  --custom-checkbox-checked-color: #FFFFFF;
 
   --calendar-border-color: #c4c7cf;
   --calendar-week-end-color: #f5f5f5;

fittrackee_client/src/scss/vars.scss

@@ -5,6 +5,7 @@ $container-width: 1140px;
 $medium-limit: 1000px;
 $small-limit: 700px;
 $x-small-limit: 500px;
+$xx-small-limit: 300px;
 
 /*
 * === HEIGHT ===