From 0081e0178b6a5cd4af2675e79e09f32868c93fef Mon Sep 17 00:00:00 2001
From: Zacharie Guet <guetzac@gmail.com>
Date: Sun, 19 Jun 2022 14:42:18 +0200
Subject: [PATCH] Factorization of the css on the admin part

* Factorization of the head-button component
---
 .../themes/default/css/components/general.css |  5 +++
 admin/themes/default/template/albums.tpl      |  9 ++---
 admin/themes/default/template/tags.tpl        |  2 +-
 admin/themes/default/template/user_list.tpl   | 21 +++---------
 admin/themes/default/theme.css                | 34 -------------------
 admin/themes/roma/theme.css                   | 25 ++++----------
 6 files changed, 19 insertions(+), 77 deletions(-)

diff --git a/admin/themes/default/css/components/general.css b/admin/themes/default/css/components/general.css
index f8f01c938..11cd823a2 100644
--- a/admin/themes/default/css/components/general.css
+++ b/admin/themes/default/css/components/general.css
@@ -32,6 +32,11 @@ or
     box-shadow: 0px 2px #bb7932;
 }
 
+.head-button-1 p, .head-button-2 p {
+    margin: 0;
+    white-space: nowrap;
+}
+
 .head-button-1:hover {
     background: #ff7700;
 }
diff --git a/admin/themes/default/template/albums.tpl b/admin/themes/default/template/albums.tpl
index 0c50786f6..1b741ee74 100644
--- a/admin/themes/default/template/albums.tpl
+++ b/admin/themes/default/template/albums.tpl
@@ -111,12 +111,12 @@ const add_sub_album_of = '{'Create a sub-album of "%s"'|@translate|escape:javasc
 
 <div class="cat-move-header"> 
   <div class="add-album-button">
-    <label class="album-add-button-label icon-plus-circled">
+    <label class="head-button-2 icon-plus-circled">
       <p>{'Add Album'|@translate}</p>
     </label>
   </div>
   <div class="order-root-button">
-    <label class="order-root order-root-button-label icon-sort-name-up">
+    <label class="order-root head-button-2 icon-sort-name-up">
       <p>{'Automatic sort order'|@translate}</p>
     </label>
   </div>
@@ -478,11 +478,6 @@ input[name="position"] {
   margin: 0 !important;
 }
 
-.add-album-button,
-.order-root-button {
-  margin: 0 10px 0 0;
-}
-
 .badge-container {
   position: absolute;
   right: 275px;
diff --git a/admin/themes/default/template/tags.tpl b/admin/themes/default/template/tags.tpl
index f3f5369c1..4987d8a80 100644
--- a/admin/themes/default/template/tags.tpl
+++ b/admin/themes/default/template/tags.tpl
@@ -116,7 +116,7 @@ var str_tag_found = '{'<b>%d</b> tag found'|@translate}';
   </div>
   <form id='add-tag' class='not-in-selection-mode'>
     <span class='icon-cancel-circled'></span>
-    <label class='add-tag-label icon-plus-circled {if $total == 0} highlight {/if}'>
+    <label class='add-tag-label icon-plus-circled {if $total == 0} head-button-1 {else} head-button-2 {/if}'>
       <p>{'Add a tag'|@translate}</p>
       <div class='add-tag-container'>
         <input type='text' id='add-tag-input' placeholder="{'New tag'|@translate}">
diff --git a/admin/themes/default/template/user_list.tpl b/admin/themes/default/template/user_list.tpl
index fd920e75f..045934c9a 100644
--- a/admin/themes/default/template/user_list.tpl
+++ b/admin/themes/default/template/user_list.tpl
@@ -108,14 +108,14 @@ $(".icon-help-circled").tipTip({
 
       <div style="display:flex;justify-content:space-between; flex-grow:1;">
         <div style="display:flex; align-items: center;">
-          <div class="not-in-selection-mode user-header-button add-user-button" style="margin: auto; margin-right: 10px">
-            <label class="user-header-button-label icon-plus-circled">
+          <div class="not-in-selection-mode user-header-button add-user-button" style="margin: auto;">
+            <label class="head-button-2 icon-plus-circled">
               <p>{'Add a user'|@translate}</p>
             </label>
           </div>
 
-          <div class="not-in-selection-mode user-header-button" style="margin: auto; margin-right: 10px">
-            <label class="user-header-button-label icon-user-secret edit-guest-user-button">
+          <div class="not-in-selection-mode user-header-button" style="margin: auto;">
+            <label class="head-button-2 icon-user-secret edit-guest-user-button">
               <p>{'Edit guest user'|@translate}</p>
             </label>
           </div>
@@ -979,19 +979,6 @@ $(".icon-help-circled").tipTip({
 .user-header-button {
   position:relative;
 }
-.user-header-button-label {
-	position: relative;
-	padding: 10px;
-	box-shadow: 0px 2px #00000024;
-	border-radius: 5px;
-	font-weight: bold;
-	display: flex;
-	align-items: baseline;
-	cursor: pointer;
-}
-.user-header-button-label p {
-  margin:0;
-}
 
 /* filters bar */
 
diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css
index 26642880a..394b0141a 100644
--- a/admin/themes/default/theme.css
+++ b/admin/themes/default/theme.css
@@ -3323,24 +3323,6 @@ a#showPermissions:hover {text-decoration: none;}
   display: none;
 }
 
-.tag-header #add-tag .add-tag-label {
-  position: relative;
-  padding: 10px;
-  background-color: #fafafa;
-  box-shadow: 0px 2px #00000024;
-  border-radius: 5px;
-  font-weight: bold;
-  display: flex;
-  align-items: baseline;
-  cursor: pointer;
-}
-
-.tag-header #add-tag .add-tag-label.highlight {
-  background: #ffa646;
-  box-shadow: 0 2px #af7200;
-  color: white;
-}
-
 .tag-header #add-tag.input-mode .add-tag-label {
   background: none;
   box-shadow: none;
@@ -3349,21 +3331,10 @@ a#showPermissions:hover {text-decoration: none;}
   color: inherit;
 }
 
-.tag-header #add-tag .add-tag-label::before {
-  margin: auto;
-  font-size: 16px;
-  margin-right: 5px;
-}
-
 .tag-header #add-tag.input-mode .add-tag-label::before {
   display: none;
 }
 
-.tag-header #add-tag .add-tag-label p{
-  margin: 0;
-  white-space: nowrap;
-}
-
 .tag-header #add-tag .add-tag-container {
   display: none;
 }
@@ -4039,11 +4010,6 @@ a#showPermissions:hover {text-decoration: none;}
   border-radius: 3px;
 }
 
-.album-add-button-label, .order-root-button-label {
-  box-shadow: 0px 2px #00000024;
-  background-color: #fafafa;
-}
-
 .move-cat-container:hover {
   background-color: #ffd7ad;
 }
diff --git a/admin/themes/roma/theme.css b/admin/themes/roma/theme.css
index 62490e14a..b1d14c45d 100644
--- a/admin/themes/roma/theme.css
+++ b/admin/themes/roma/theme.css
@@ -389,11 +389,6 @@ div.token-input-dropdown ul li.token-input-selected-dropdown-item {background-co
   text-decoration: none;
   color: #777;
 }
-.album-add-button-label, .order-root-button-label {
-  box-shadow: 0px 2px #00000024;
-  background-color: #333;
-  color: #777;
-}
 .move-cat-container:hover {
   background-color: #f9852c;
 }
@@ -1120,21 +1115,15 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
 
 /* Tag Manager */
 
-.tag-box, 
-.tag-header #add-tag:not(.input-mode) .add-tag-label,
+.tag-box,
 .tag-header .selection-controller a{
   background-color: #333 !important;
 }
 
-.tag-header #add-tag .add-tag-label.highlight {
-  background: #f7a43c !important;
-  box-shadow: 0 2px #af7200;
-  color: #444 !important;
-}
-.tag-header #add-tag.input-mode .add-tag-label.highlight {
+.tag-header #add-tag.input-mode .add-tag-label {
   background: transparent !important;
   box-shadow: none;
-  color: inherit !important;
+  color: rgb(119, 119, 119) !important;
 }
 
 .tag-container .tag-box p {
@@ -1458,6 +1447,10 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
   color: #c1c1c1;
 }
 
+.head-button-1 {
+  color: #444 !important;
+}
+
 .head-button-2 {
   background-color: #333 !important;
 }
@@ -1548,10 +1541,6 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
   color:#777;
 }
 
-.user-header-button-label {
-  background: #333;
-}
-
 .user-action-select {
   background: transparent;
 }