From 94684822759feffcc591b109da6bd20dce65a426 Mon Sep 17 00:00:00 2001
From: vincent <vincent@sleede.com>
Date: Fri, 29 Apr 2022 09:54:38 +0200
Subject: [PATCH] Adjust styles and icons

---
 app/frontend/images/social-icons.svg                 | 12 ++++++------
 app/frontend/src/stylesheets/app.layout.scss         |  8 +++-----
 .../src/stylesheets/modules/form/form-item.scss      | 10 +++++++---
 app/frontend/templates/shared/about.html             |  6 +++++-
 4 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/app/frontend/images/social-icons.svg b/app/frontend/images/social-icons.svg
index 33e34089c..ae6a259f7 100644
--- a/app/frontend/images/social-icons.svg
+++ b/app/frontend/images/social-icons.svg
@@ -12,12 +12,12 @@
   </svg>
   <svg viewBox="0 0 24 24">
     <g id="github" class="nc-icon-wrapper">
-      <path d="M8.633 17.8c0 .082-.095.147-.214.147-.135.013-.23-.053-.23-.147 0-.082.095-.148.214-.148.123-.012.23.053.23.148zm-1.276-.185c-.029.082.053.176.176.201.107.041.23 0 .255-.082.024-.082-.054-.176-.177-.213-.106-.029-.225.012-.254.094zm1.813-.07c-.119.029-.201.107-.189.201.013.082.12.136.242.107.12-.029.201-.107.189-.189-.012-.078-.123-.131-.242-.119zm2.699-15.717c-5.69 0-10.04 4.32-10.04 10.008 0 4.549 2.862 8.441 6.951 9.81.525.095.71-.229.71-.495 0-.255-.012-1.657-.012-2.519 0 0-2.872.615-3.474-1.222 0 0-.468-1.194-1.14-1.501 0 0-.94-.644.065-.632 0 0 1.021.082 1.583 1.058.898 1.584 2.404 1.128 2.99.858.094-.657.361-1.112.656-1.383-2.292-.254-4.606-.586-4.606-4.532 0-1.128.312-1.694.968-2.416-.106-.266-.455-1.366.107-2.785.857-.266 2.83 1.108 2.83 1.108a9.636 9.636 0 0 1 2.576-.349c.873 0 1.755.12 2.576.349 0 0 1.972-1.378 2.83-1.108.562 1.424.213 2.519.106 2.785.657.726 1.058 1.292 1.058 2.416 0 3.958-2.415 4.274-4.708 4.532.377.324.697.94.697 1.903 0 1.383-.012 3.093-.012 3.43 0 .266.189.59.71.496 4.101-1.362 6.882-5.254 6.882-9.803 0-5.689-4.614-10.008-10.303-10.008zM5.815 15.974c-.053.041-.041.136.029.214.065.065.16.094.213.04.053-.04.04-.135-.029-.213-.065-.065-.16-.094-.213-.04zm-.443-.332c-.029.053.012.12.094.16.066.041.148.029.177-.029.028-.053-.013-.118-.095-.16-.082-.024-.147-.012-.176.03zm1.329 1.46c-.066.054-.041.177.053.255.094.094.213.106.267.04.053-.053.028-.176-.054-.254-.09-.094-.213-.106-.266-.04zm-.468-.603c-.065.041-.065.148 0 .242.066.095.177.136.23.095.066-.054.066-.16 0-.255-.058-.094-.164-.135-.23-.082z" fill="currentColor"></path>
+      <path d="M20.25 1.5H3.75C2.50781 1.5 1.5 2.50781 1.5 3.75V20.25C1.5 21.4922 2.50781 22.5 3.75 22.5H20.25C21.4922 22.5 22.5 21.4922 22.5 20.25V3.75C22.5 2.50781 21.4922 1.5 20.25 1.5ZM14.4984 19.4859C14.1047 19.5563 13.9594 19.3125 13.9594 19.1109C13.9594 18.8578 13.9688 17.5641 13.9688 16.5187C13.9688 15.7875 13.725 15.3234 13.4391 15.0797C15.1734 14.8875 17.0016 14.6484 17.0016 11.6531C17.0016 10.8 16.6969 10.3734 16.2 9.825C16.2797 9.62344 16.5469 8.79375 16.1203 7.71563C15.4687 7.51406 13.9781 8.55469 13.9781 8.55469C13.3594 8.38125 12.6891 8.29219 12.0281 8.29219C11.3672 8.29219 10.6969 8.38125 10.0781 8.55469C10.0781 8.55469 8.5875 7.51406 7.93594 7.71563C7.50938 8.78906 7.77188 9.61875 7.85625 9.825C7.35938 10.3734 7.125 10.8 7.125 11.6531C7.125 14.6344 8.87344 14.8875 10.6078 15.0797C10.3828 15.2813 10.1812 15.6281 10.1109 16.125C9.66562 16.3266 8.52656 16.6734 7.84687 15.4734C7.42031 14.7328 6.65156 14.6719 6.65156 14.6719C5.89219 14.6625 6.6 15.15 6.6 15.15C7.10625 15.3844 7.4625 16.2844 7.4625 16.2844C7.91719 17.6766 10.0922 17.2078 10.0922 17.2078C10.0922 17.8594 10.1016 18.9188 10.1016 19.1109C10.1016 19.3125 9.96094 19.5563 9.5625 19.4859C6.46875 18.45 4.30312 15.5062 4.30312 12.0656C4.30312 7.7625 7.59375 4.49531 11.8969 4.49531C16.2 4.49531 19.6875 7.7625 19.6875 12.0656C19.6922 15.5062 17.5922 18.4547 14.4984 19.4859ZM9.9 16.6219C9.81094 16.6406 9.72656 16.6031 9.71719 16.5422C9.70781 16.4719 9.76875 16.4109 9.85781 16.3922C9.94688 16.3828 10.0312 16.4203 10.0406 16.4813C10.0547 16.5422 9.99375 16.6031 9.9 16.6219ZM9.45469 16.5797C9.45469 16.6406 9.38437 16.6922 9.29062 16.6922C9.1875 16.7016 9.11719 16.65 9.11719 16.5797C9.11719 16.5188 9.1875 16.4672 9.28125 16.4672C9.37031 16.4578 9.45469 16.5094 9.45469 16.5797ZM8.8125 16.5281C8.79375 16.5891 8.7 16.6172 8.62031 16.5891C8.53125 16.5703 8.47031 16.5 8.48906 16.4391C8.50781 16.3781 8.60156 16.35 8.68125 16.3688C8.775 16.3969 8.83594 16.4672 8.8125 16.5281ZM8.23594 16.275C8.19375 16.3266 8.10469 16.3172 8.03437 16.2469C7.96406 16.1859 7.94531 16.0969 7.99219 16.0547C8.03437 16.0031 8.12344 16.0125 8.19375 16.0828C8.25469 16.1438 8.27812 16.2375 8.23594 16.275ZM7.80938 15.8484C7.76719 15.8766 7.6875 15.8484 7.63594 15.7781C7.58437 15.7078 7.58437 15.6281 7.63594 15.5953C7.6875 15.5531 7.76719 15.5859 7.80938 15.6562C7.86094 15.7266 7.86094 15.8109 7.80938 15.8484V15.8484ZM7.50469 15.3937C7.4625 15.4359 7.39219 15.4125 7.34062 15.3656C7.28906 15.3047 7.27969 15.2344 7.32187 15.2016C7.36406 15.1594 7.43437 15.1828 7.48594 15.2297C7.5375 15.2906 7.54688 15.3609 7.50469 15.3937ZM7.19063 15.0469C7.17188 15.0891 7.11094 15.0984 7.05937 15.0656C6.99844 15.0375 6.97031 14.9859 6.98906 14.9437C7.00781 14.9156 7.05938 14.9016 7.12031 14.925C7.18125 14.9578 7.20938 15.0094 7.19063 15.0469Z" fill="currentColor"></path>
     </g>
   </svg>
   <svg viewBox="0 0 24 24">
     <g id="echosciences" class="nc-icon-wrapper">
-      <path d="M2.5 3.5v3.732h11.895V3.5H2.5zm4.298 10.289h6.494v-3.722H2.521V20.5h11.895v-3.727H6.798V13.79z" fill="currentColor" stroke="none"></path><path d="M18.213 3h-.7c2.221 2.704 3.458 5.722 3.456 8.905 0 3.252-1.295 6.336-3.616 9.095h.706c2.2-2.753 3.44-5.832 3.44-9.095.003-3.189-1.18-6.201-3.286-8.905z" fill="currentColor" stroke="currentColor"></path>
+      <path d="M3.5 1.5C2.39543 1.5 1.5 2.39543 1.5 3.5V20.5C1.5 21.6046 2.39543 22.5 3.5 22.5H20.5C21.6046 22.5 22.5 21.6046 22.5 20.5V3.5C22.5 2.39543 21.6046 1.5 20.5 1.5H3.5ZM15.099 5H16.5742L16.6848 5.14204C18.2776 7.18714 19.1861 9.48429 19.1838 11.9303C19.1837 14.433 18.2315 16.7805 16.5685 18.8616L16.4578 19H14.9691L15.4785 18.3944C17.1447 16.4138 18.0564 14.2227 18.0564 11.93C18.0579 9.6857 17.1869 7.54197 15.5936 5.60226L15.099 5ZM4.81616 8.48674V5.73684H13.5809V8.48674H4.81616ZM12.7682 13.3182H7.98311V15.5169H13.5964V18.2632H4.83164V10.5757H12.7682V13.3182Z" fill="currentColor"></path>
     </g>
   </svg>
   <svg viewBox="0 0 24 24">
@@ -27,12 +27,12 @@
   </svg>
   <svg viewBox="0 0 24 24">
     <g id="facebook" class="nc-icon-wrapper">
-      <path d="M22.172 12A10.17 10.17 0 0 0 12 1.828 10.17 10.17 0 0 0 1.828 12c0 5.077 3.72 9.285 8.583 10.049V14.94H7.827V12h2.584V9.759c0-2.55 1.517-3.957 3.842-3.957 1.113 0 2.277.198 2.277.198v2.502h-1.283c-1.264 0-1.658.784-1.658 1.589V12h2.821l-.45 2.94h-2.37v7.109c4.862-.764 8.582-4.972 8.582-10.049z" fill="currentColor"></path>
+      <path d="M20.25 1.5H3.75C3.15326 1.5 2.58097 1.73705 2.15901 2.15901C1.73705 2.58097 1.5 3.15326 1.5 3.75L1.5 20.25C1.5 20.8467 1.73705 21.419 2.15901 21.841C2.58097 22.2629 3.15326 22.5 3.75 22.5H10.1836V15.3605H7.23047V12H10.1836V9.43875C10.1836 6.52547 11.918 4.91625 14.5744 4.91625C15.8466 4.91625 17.1769 5.14313 17.1769 5.14313V8.0025H15.7111C14.2669 8.0025 13.8164 8.89875 13.8164 9.81797V12H17.0405L16.5248 15.3605H13.8164V22.5H20.25C20.8467 22.5 21.419 22.2629 21.841 21.841C22.2629 21.419 22.5 20.8467 22.5 20.25V3.75C22.5 3.15326 22.2629 2.58097 21.841 2.15901C21.419 1.73705 20.8467 1.5 20.25 1.5V1.5Z" fill="currentColor"></path>
     </g>
   </svg>
   <svg viewBox="0 0 24 24">
     <g id="youtube" class="nc-icon-wrapper">
-      <path d="M24.265 5.816a3.217 3.217 0 0 0-2.263-2.278C20.005 3 12 3 12 3s-8.005 0-10.002.538A3.217 3.217 0 0 0-.265 5.816C-.8 7.826-.8 12.018-.8 12.018s0 4.193.535 6.202c.294 1.109 1.162 1.945 2.263 2.242C3.995 21 12 21 12 21s8.005 0 10.002-.538c1.101-.297 1.969-1.133 2.263-2.242.535-2.01.535-6.202.535-6.202s0-4.192-.535-6.202zM9.382 15.825V8.212l6.69 3.806-6.69 3.807z" fill="currentColor"></path>
+      <path d="M10.2563 9.47344L14.7188 12.0094L10.2563 14.5453V9.47344ZM22.5 3.75V20.25C22.5 21.4922 21.4922 22.5 20.25 22.5H3.75C2.50781 22.5 1.5 21.4922 1.5 20.25V3.75C1.5 2.50781 2.50781 1.5 3.75 1.5H20.25C21.4922 1.5 22.5 2.50781 22.5 3.75ZM20.5312 12.0141C20.5312 12.0141 20.5312 9.22031 20.175 7.87969C19.9781 7.13906 19.4016 6.55781 18.6656 6.36094C17.3391 6 12 6 12 6C12 6 6.66094 6 5.33438 6.36094C4.59844 6.55781 4.02187 7.13906 3.825 7.87969C3.46875 9.21563 3.46875 12.0141 3.46875 12.0141C3.46875 12.0141 3.46875 14.8078 3.825 16.1484C4.02187 16.8891 4.59844 17.4469 5.33438 17.6437C6.66094 18 12 18 12 18C12 18 17.3391 18 18.6656 17.6391C19.4016 17.4422 19.9781 16.8844 20.175 16.1437C20.5312 14.8078 20.5312 12.0141 20.5312 12.0141V12.0141Z" fill="currentColor"></path>
     </g>
   </svg>
   <svg viewBox="0 0 24 24">
@@ -57,7 +57,7 @@
   </svg>
   <svg viewBox="0 0 24 24">
     <g id="pinterest" class="nc-icon-wrapper">
-      <path d="M22.172 12a10.17 10.17 0 0 1-13.183 9.717c.415-.677 1.034-1.785 1.264-2.666.123-.476.631-2.42.631-2.42.333.631 1.3 1.169 2.33 1.169 3.068 0 5.279-2.822 5.279-6.33 0-3.358-2.744-5.873-6.271-5.873-4.39 0-6.723 2.945-6.723 6.157 0 1.493.796 3.35 2.063 3.941.193.09.295.05.34-.135.033-.14.206-.833.284-1.152a.304.304 0 0 0-.07-.292c-.414-.512-.75-1.447-.75-2.321 0-2.244 1.697-4.413 4.593-4.413 2.498 0 4.25 1.702 4.25 4.138 0 2.752-1.391 4.66-3.2 4.66-.997 0-1.747-.825-1.505-1.838.287-1.21.84-2.514.84-3.388 0-.78-.418-1.431-1.287-1.431-1.022 0-1.842 1.054-1.842 2.469 0 .902.304 1.51.304 1.51s-1.005 4.257-1.19 5.052c-.205.878-.123 2.117-.037 2.92A10.176 10.176 0 0 1 1.828 12 10.17 10.17 0 0 1 12 1.828 10.17 10.17 0 0 1 22.172 12z" fill="currentColor"></path>
+      <path d="M22.5 3.75V20.25C22.5 21.4922 21.4922 22.5 20.25 22.5H8.7375C9.19687 21.7313 9.7875 20.625 10.0219 19.7203C10.1625 19.1813 10.7391 16.9828 10.7391 16.9828C11.1141 17.7 12.2109 18.3047 13.3781 18.3047C16.8516 18.3047 19.35 15.1125 19.35 11.1469C19.35 7.34531 16.2469 4.5 12.2531 4.5C7.28437 4.5 4.65 7.83281 4.65 11.4656C4.65 13.1531 5.55 15.2531 6.98438 15.9234C7.20469 16.0266 7.31719 15.9797 7.36875 15.7687C7.40625 15.6094 7.60313 14.8266 7.6875 14.4656C7.71563 14.3484 7.70156 14.25 7.60781 14.1375C7.13438 13.5609 6.75 12.5016 6.75 11.5125C6.75 8.97188 8.67187 6.51562 11.9484 6.51562C14.775 6.51562 16.7578 8.44219 16.7578 11.1984C16.7578 14.3109 15.1875 16.4672 13.1391 16.4672C12.0094 16.4672 11.1656 15.5344 11.4328 14.3859C11.7562 13.0172 12.3844 11.5406 12.3844 10.5516C12.3844 8.06719 8.84531 8.40938 8.84531 11.7234C8.84531 12.7406 9.1875 13.4344 9.1875 13.4344C7.71563 19.6594 7.49531 19.7391 7.8 22.4625L7.90313 22.5H3.75C2.50781 22.5 1.5 21.4922 1.5 20.25V3.75C1.5 2.50781 2.50781 1.5 3.75 1.5H20.25C21.4922 1.5 22.5 2.50781 22.5 3.75Z" fill="currentColor"></path>
     </g>
   </svg>
   <svg viewBox="0 0 24 24">
@@ -67,7 +67,7 @@
   </svg>
   <svg viewBox="0 0 24 24">
     <g id="dailymotion" class="nc-icon-wrapper">
-      <path d="M15.512 12.516a2.269 2.269 0 0 0-1.142-.291c-.62 0-1.142.207-1.567.622-.425.414-.638.936-.638 1.566 0 .661.208 1.202.623 1.622.415.42.937.63 1.566.63.641 0 1.174-.215 1.6-.646.425-.43.638-.966.64-1.606a2.21 2.21 0 0 0-.286-1.1 2.069 2.069 0 0 0-.796-.797zM1.5 1.5v21h21v-21h-21zm17.564 17.497h-2.488v-1.12h-.032c-.493.819-1.365 1.228-2.615 1.228-.86 0-1.625-.205-2.291-.614a4.139 4.139 0 0 1-1.544-1.677c-.363-.709-.544-1.504-.544-2.385 0-.862.184-1.646.552-2.354.35-.69.884-1.271 1.543-1.678.662-.409 1.408-.613 2.237-.614a3.79 3.79 0 0 1 1.394.245c.415.162.806.428 1.172.796V7.172l2.615-.567.002 12.392z" fill="currentColor"></path>
+      <path d="M15.512 12.516C15.1636 12.3201 14.7697 12.2197 14.37 12.225C13.75 12.225 13.228 12.432 12.803 12.847C12.378 13.261 12.165 13.783 12.165 14.413C12.165 15.074 12.373 15.615 12.788 16.035C13.203 16.455 13.725 16.665 14.354 16.665C14.995 16.665 15.528 16.45 15.954 16.019C16.379 15.589 16.592 15.053 16.594 14.413C16.5962 14.0277 16.4976 13.6485 16.308 13.313C16.1215 12.9788 15.8459 12.7029 15.512 12.516ZM3.5 1.5C2.39543 1.5 1.5 2.39543 1.5 3.5V20.5C1.5 21.6046 2.39543 22.5 3.5 22.5H20.5C21.6046 22.5 22.5 21.6046 22.5 20.5V3.5C22.5 2.39543 21.6046 1.5 20.5 1.5H3.5ZM19.064 18.997H16.576V17.877H16.544C16.051 18.696 15.179 19.105 13.929 19.105C13.069 19.105 12.304 18.9 11.638 18.491C10.9765 18.0875 10.4416 17.5065 10.094 16.814C9.731 16.105 9.55 15.31 9.55 14.429C9.55 13.567 9.734 12.783 10.102 12.075C10.452 11.385 10.986 10.804 11.645 10.397C12.307 9.988 13.053 9.784 13.882 9.783C14.3579 9.77641 14.8308 9.85952 15.276 10.028C15.691 10.19 16.082 10.456 16.448 10.824V7.172L19.063 6.605L19.065 18.997H19.064Z" fill="currentColor"></path>
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/app/frontend/src/stylesheets/app.layout.scss b/app/frontend/src/stylesheets/app.layout.scss
index 23c3adace..813086a31 100644
--- a/app/frontend/src/stylesheets/app.layout.scss
+++ b/app/frontend/src/stylesheets/app.layout.scss
@@ -584,13 +584,11 @@ body.container {
   & > img {
     border: 1px solid var(--gray-soft-dark);
     background-color: var(--gray-soft-lightest);
-    &:hover {
-      border-color: var(--secondary);
-      background-color: var(--secondary);
-    }
+    &:hover {  opacity: 0.65; }
   }
   & > a {
-    &:hover { box-shadow: 0 0 0 1px var(--main); }
+    transition: transform 200ms ease-in-out;
+    &:hover { transform: translateY(-4px); }
     img {
       max-width: 100%;
       height: inherit;
diff --git a/app/frontend/src/stylesheets/modules/form/form-item.scss b/app/frontend/src/stylesheets/modules/form/form-item.scss
index 844476705..d22ce7ab5 100644
--- a/app/frontend/src/stylesheets/modules/form/form-item.scss
+++ b/app/frontend/src/stylesheets/modules/form/form-item.scss
@@ -81,9 +81,13 @@
     .addon {
       grid-area: addon;
       border-left: 1px solid var(--gray-soft-dark);
-      &.is-btn:hover {
-        cursor: pointer;
-        filter: brightness(90%);
+      &.is-btn {
+        color: var(--gray-soft-lightest);
+        background-color: var(--gray-hard-darkest);
+        &:hover {
+          cursor: pointer;
+          background-color: var(--gray-hard-light);
+        }
       }
     }
 
diff --git a/app/frontend/templates/shared/about.html b/app/frontend/templates/shared/about.html
index 3d586dec7..33a76dbec 100644
--- a/app/frontend/templates/shared/about.html
+++ b/app/frontend/templates/shared/about.html
@@ -20,7 +20,11 @@
       <p ng-show="privacyPolicy.value">
         <a ui-sref="app.public.privacy" translate>{{ 'app.public.about.privacy_policy' }}</a>
       </p>
-      <socials />
+      <div class="b-t m-t-xl">
+        <h2 translate>{{ 'app.public.home.follow_us' }}</h2>
+        <!-- TODO: get fablab's social networks -->
+        <socials />
+      </div>
     </div>
 
     <div class="col-sm-offset-0 col-md-offset-0 col-lg-offset-1 col-sm-4 col-md-4" ng-show="aboutContacts.value">