From fe2cbaf79bdd84ce076d571942a8d3eb7472d73c Mon Sep 17 00:00:00 2001
From: Boris Voropaev <boris1voropaev@gmail.com>
Date: Tue, 29 Aug 2023 11:17:39 +0300
Subject: [PATCH] buttons css

---
 .../layout/footer/footer.component.scss       |  1 +
 .../layout/header/header.component.html       | 13 +++--
 .../layout/header/header.component.scss       | 11 ++--
 .../user-bar/header-user-bar.component.html   |  7 +++
 .../user-bar/header-user-bar.component.scss   | 56 ++++++++++---------
 .../images/icons/arrow_downward_24dp.svg      |  2 +-
 .../icons/arrow_drop_down_grey_24dp.svg       |  3 +
 src/assets/images/icons/arrow_upward_24dp.svg |  2 +-
 src/assets/images/icons/edit_24dp.svg         |  2 +-
 src/assets/images/icons/trash_24dp.svg        |  2 +-
 src/assets/images/icons/trash_grey_24dp.svg   |  5 ++
 .../images/icons/visibility_off_24dp.svg      |  2 +-
 .../images/icons/visibility_on_24dp.svg       |  2 +-
 src/styles.scss                               | 26 +++++----
 14 files changed, 79 insertions(+), 55 deletions(-)
 create mode 100644 src/assets/images/icons/arrow_drop_down_grey_24dp.svg
 create mode 100644 src/assets/images/icons/trash_grey_24dp.svg

diff --git a/src/app/_modules/layout/footer/footer.component.scss b/src/app/_modules/layout/footer/footer.component.scss
index c3ea9fe..5fb334c 100644
--- a/src/app/_modules/layout/footer/footer.component.scss
+++ b/src/app/_modules/layout/footer/footer.component.scss
@@ -6,6 +6,7 @@
   display: flex;
   flex-direction: column;
   .block{
+    a {cursor: pointer;}
     display: flex;    
     div{
       display: block;
diff --git a/src/app/_modules/layout/header/header.component.html b/src/app/_modules/layout/header/header.component.html
index 4bd7a3c..6a00330 100644
--- a/src/app/_modules/layout/header/header.component.html
+++ b/src/app/_modules/layout/header/header.component.html
@@ -24,10 +24,11 @@
     <div class="grid-menu">
       <button class="close" (click)="showBottom=false"></button>
       <pages-menu [items]="menuItems"  (onSelected)="itemSelect($event)"></pages-menu>
-    </div>
-    <div class="right">
-      <button>АИС СЦ ВНИИГАЗ</button>
-    </div>
-  </div>
+    </div>    
+    <div class="right" style="position: relative;">      
+        <button>АИС СЦ ВНИИГАЗ</button>
+        <header-user-bar *ngIf="user" [user]="user"></header-user-bar>
+      </div>
+  </div>  
 </div>
-<header-user-bar *ngIf="user" [user]="user"></header-user-bar>
+
diff --git a/src/app/_modules/layout/header/header.component.scss b/src/app/_modules/layout/header/header.component.scss
index d56a20a..5b8c8d2 100644
--- a/src/app/_modules/layout/header/header.component.scss
+++ b/src/app/_modules/layout/header/header.component.scss
@@ -58,7 +58,7 @@
 
 
 @media screen and (min-width: 961px){
-  .header {
+  .header{
     .top{
       .limiter{
         .main-menu-btn{
@@ -71,7 +71,8 @@
         }
       }
     }
-    .bottom {  display: flex;
+    .bottom { 
+      display: flex;
       flex-direction: row;
       flex-wrap: nowrap;
       justify-content: normal;
@@ -87,8 +88,6 @@
         background-size: contain;
         ;
       }
-
-
         .grid-menu{
           display: flex;
           .close{
@@ -121,6 +120,7 @@
   header-user-bar{
     position: absolute;
     right: 0;
+    bottom: -96px;
   }
 }
 
@@ -242,5 +242,4 @@
       }
     }
   }
-}
-
+}
\ No newline at end of file
diff --git a/src/app/_modules/layout/header/user-bar/header-user-bar.component.html b/src/app/_modules/layout/header/user-bar/header-user-bar.component.html
index 412a4de..a8d7785 100644
--- a/src/app/_modules/layout/header/user-bar/header-user-bar.component.html
+++ b/src/app/_modules/layout/header/user-bar/header-user-bar.component.html
@@ -11,6 +11,13 @@
       <li (click)="logout()">Выход из системы</li>
     </ul>
   </div>
+  <div class="name">
+    {{user.name}}
+  </div>
+  <div class="toggle">
+
+  </div>
+
 </div>
 
 <!--div class="user" *ngIf="user">
diff --git a/src/app/_modules/layout/header/user-bar/header-user-bar.component.scss b/src/app/_modules/layout/header/user-bar/header-user-bar.component.scss
index 27dadb8..c1d7c4e 100644
--- a/src/app/_modules/layout/header/user-bar/header-user-bar.component.scss
+++ b/src/app/_modules/layout/header/user-bar/header-user-bar.component.scss
@@ -1,12 +1,19 @@
 .user {
-  width: 100px;
-  height: 100px;
   position: relative;
+  display: flex;
+  padding: 11px;
+  height: 64px;
+  justify-content: center;
+  background-color: #fff;
+  border-radius: 32px;  
+  border: 1px solid #C0C0C0;
+
   .avatar {
-    width: 40px;
-    height: 40px;
-    color: #86898E;
-    background: #CFD1D4;
+    width: 38px;
+    height: 38px;
+    color: var(--blue-1);
+    border: 1px solid var(--blue-1);
+    background: #fff;
     border-radius: 100%;
     display: flex;
     justify-content: center;
@@ -23,6 +30,17 @@
     }
   }
 
+  .name{
+    margin: 8px 4px 0 12px;
+    color: #2D2D2D
+  }
+  .toggle{
+    height: 24px;
+    width: 24px;
+    background: url("~src/assets/images/icons/arrow_drop_down_grey_24dp.svg") no-repeat center;
+    margin-top: 7px;
+  }
+
   .dropdown {
     display: none;
   }
@@ -31,25 +49,20 @@
     .dropdown {
       display: block;
       width: 250px;
-      right: -24px;
-      top: calc(100% + 8px);
-      position: absolute;
-      background-color: #ffffff;
-      border: #dedede solid 1px;
-      box-shadow: 0 3px 6px 0 rgb(0 0 0 / 16%);
+      right: 12px;
+      top: 42px;
       z-index: 1;
-      border-radius: 8px;
       ul {
         display: flex;
         flex-direction: column;
         margin: 0;
         padding: 0;
         list-style: none;
-        border-radius: 8px;
+        border-radius: 12px;
         li {
           display: block;
-          padding: 12px 16px;
-          color: #000000;
+          padding: 12px 20px;
+          color: #2D2D2D;
           cursor: pointer;
           border-bottom: #E0E0E0 solid 1px;
           white-space: nowrap;
@@ -74,16 +87,7 @@
         display: none;
       }
 
-      &:before {
-        position: absolute;
-        top: -21px;
-        right: 0;
-        width: 84px;
-        height: 24px;
-        background: url("~src/assets/images/triangle.png") no-repeat center;
-        z-index: 2;
-        content: '';
-      }
+
     }
 
   }
diff --git a/src/assets/images/icons/arrow_downward_24dp.svg b/src/assets/images/icons/arrow_downward_24dp.svg
index 6d6eb70..9140f3c 100644
--- a/src/assets/images/icons/arrow_downward_24dp.svg
+++ b/src/assets/images/icons/arrow_downward_24dp.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M12 20L4 12L5.4 10.575L11 16.175V4H13V16.175L18.6 10.575L20 12L12 20Z" fill="#86898E"/>
+  <path d="M12 20L4 12L5.4 10.575L11 16.175V4H13V16.175L18.6 10.575L20 12L12 20Z" fill="#0070BA"/>
 </svg>
diff --git a/src/assets/images/icons/arrow_drop_down_grey_24dp.svg b/src/assets/images/icons/arrow_drop_down_grey_24dp.svg
new file mode 100644
index 0000000..e663923
--- /dev/null
+++ b/src/assets/images/icons/arrow_drop_down_grey_24dp.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 15L7 10H17L12 15Z" fill="#6C6C6C"/>
+</svg>
diff --git a/src/assets/images/icons/arrow_upward_24dp.svg b/src/assets/images/icons/arrow_upward_24dp.svg
index 57d7009..c93e594 100644
--- a/src/assets/images/icons/arrow_upward_24dp.svg
+++ b/src/assets/images/icons/arrow_upward_24dp.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M11 20V7.825L5.4 13.425L4 12L12 4L20 12L18.6 13.425L13 7.825V20H11Z" fill="#86898E"/>
+  <path d="M11 20V7.825L5.4 13.425L4 12L12 4L20 12L18.6 13.425L13 7.825V20H11Z" fill="#0070BA"/>
 </svg>
diff --git a/src/assets/images/icons/edit_24dp.svg b/src/assets/images/icons/edit_24dp.svg
index b939577..623b3cd 100644
--- a/src/assets/images/icons/edit_24dp.svg
+++ b/src/assets/images/icons/edit_24dp.svg
@@ -1,5 +1,5 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path
     d="M5 19H6.4L15.025 10.375L13.625 8.975L5 17.6V19ZM19.3 8.925L15.05 4.725L16.45 3.325C16.8333 2.94167 17.3042 2.75 17.8625 2.75C18.4208 2.75 18.8917 2.94167 19.275 3.325L20.675 4.725C21.0583 5.10833 21.2583 5.57083 21.275 6.1125C21.2917 6.65417 21.1083 7.11667 20.725 7.5L19.3 8.925ZM17.85 10.4L7.25 21H3V16.75L13.6 6.15L17.85 10.4ZM14.325 9.675L13.625 8.975L15.025 10.375L14.325 9.675Z"
-    fill="#86898E"/>
+    fill="#0070BA"/>
 </svg>
diff --git a/src/assets/images/icons/trash_24dp.svg b/src/assets/images/icons/trash_24dp.svg
index 610acde..676b451 100644
--- a/src/assets/images/icons/trash_24dp.svg
+++ b/src/assets/images/icons/trash_24dp.svg
@@ -1,5 +1,5 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path fill-rule="evenodd" clip-rule="evenodd"
         d="M14 2H10V4H5H4V6H5V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V6H20V4H19H14V2ZM7 6H17V19H7V6ZM11 17V8H9V17H11ZM13 17V8H15V17H13Z"
-        fill="#86898E"/>
+        fill="#0070BA"/>
 </svg>
diff --git a/src/assets/images/icons/trash_grey_24dp.svg b/src/assets/images/icons/trash_grey_24dp.svg
new file mode 100644
index 0000000..610acde
--- /dev/null
+++ b/src/assets/images/icons/trash_grey_24dp.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M14 2H10V4H5H4V6H5V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V6H20V4H19H14V2ZM7 6H17V19H7V6ZM11 17V8H9V17H11ZM13 17V8H15V17H13Z"
+        fill="#86898E"/>
+</svg>
diff --git a/src/assets/images/icons/visibility_off_24dp.svg b/src/assets/images/icons/visibility_off_24dp.svg
index c0ab131..743b9db 100644
--- a/src/assets/images/icons/visibility_off_24dp.svg
+++ b/src/assets/images/icons/visibility_off_24dp.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.1418 3.444L17.7275 2.02979L14.4773 5.28005C13.6811 5.09682 12.8519 5 12.0001 5C7.33615 5 3.35014 7.90264 1.75 12C2.28681 13.3746 3.09213 14.6147 4.10149 15.6558L2.02977 17.7276L3.44398 19.1418L19.1418 3.444ZM5.51567 14.2417L8.00771 11.7496C8.13183 9.73992 9.73992 8.13183 11.7496 8.00771L12.7283 7.02904C12.4881 7.0098 12.2452 7 12.0001 7C8.46917 7 5.40907 9.03403 3.93508 12C4.34647 12.8278 4.88142 13.583 5.51567 14.2417ZM15.4461 9.96792L13.9322 11.4818C13.9764 11.6471 14 11.8208 14 12C14 13.1046 13.1046 14 12 14C11.8208 14 11.6471 13.9764 11.4818 13.9322L9.96792 15.4461C10.5635 15.798 11.2581 16 12 16C14.2091 16 16 14.2091 16 12C16 11.2581 15.798 10.5635 15.4461 9.96792ZM12.0001 17C10.9281 17 9.89958 16.8125 8.94561 16.4684L7.41312 18.0009C8.80934 18.6423 10.363 19 12.0001 19C16.6641 19 20.6501 16.0974 22.2502 12C21.4657 9.99122 20.1078 8.2696 18.3776 7.03639L16.9391 8.4749C18.2681 9.34873 19.3522 10.5653 20.0652 12C18.5912 14.966 15.5311 17 12.0001 17Z" fill="#86898E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.1418 3.444L17.7275 2.02979L14.4773 5.28005C13.6811 5.09682 12.8519 5 12.0001 5C7.33615 5 3.35014 7.90264 1.75 12C2.28681 13.3746 3.09213 14.6147 4.10149 15.6558L2.02977 17.7276L3.44398 19.1418L19.1418 3.444ZM5.51567 14.2417L8.00771 11.7496C8.13183 9.73992 9.73992 8.13183 11.7496 8.00771L12.7283 7.02904C12.4881 7.0098 12.2452 7 12.0001 7C8.46917 7 5.40907 9.03403 3.93508 12C4.34647 12.8278 4.88142 13.583 5.51567 14.2417ZM15.4461 9.96792L13.9322 11.4818C13.9764 11.6471 14 11.8208 14 12C14 13.1046 13.1046 14 12 14C11.8208 14 11.6471 13.9764 11.4818 13.9322L9.96792 15.4461C10.5635 15.798 11.2581 16 12 16C14.2091 16 16 14.2091 16 12C16 11.2581 15.798 10.5635 15.4461 9.96792ZM12.0001 17C10.9281 17 9.89958 16.8125 8.94561 16.4684L7.41312 18.0009C8.80934 18.6423 10.363 19 12.0001 19C16.6641 19 20.6501 16.0974 22.2502 12C21.4657 9.99122 20.1078 8.2696 18.3776 7.03639L16.9391 8.4749C18.2681 9.34873 19.3522 10.5653 20.0652 12C18.5912 14.966 15.5311 17 12.0001 17Z" fill="#0070BA"/>
 </svg>
diff --git a/src/assets/images/icons/visibility_on_24dp.svg b/src/assets/images/icons/visibility_on_24dp.svg
index 455ed2f..60542f0 100644
--- a/src/assets/images/icons/visibility_on_24dp.svg
+++ b/src/assets/images/icons/visibility_on_24dp.svg
@@ -1,6 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_683_11220)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 17C8.46917 17 5.40907 14.966 3.93508 12C5.40907 9.03403 8.46917 7 12.0001 7C15.5311 7 18.5912 9.03403 20.0652 12C18.5912 14.966 15.5311 17 12.0001 17ZM12.0001 5C16.6641 5 20.6501 7.90265 22.2502 12C20.6501 16.0974 16.6641 19 12.0001 19C7.33615 19 3.35014 16.0974 1.75 12C3.35014 7.90264 7.33615 5 12.0001 5ZM14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12ZM16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z" fill="#86898E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 17C8.46917 17 5.40907 14.966 3.93508 12C5.40907 9.03403 8.46917 7 12.0001 7C15.5311 7 18.5912 9.03403 20.0652 12C18.5912 14.966 15.5311 17 12.0001 17ZM12.0001 5C16.6641 5 20.6501 7.90265 22.2502 12C20.6501 16.0974 16.6641 19 12.0001 19C7.33615 19 3.35014 16.0974 1.75 12C3.35014 7.90264 7.33615 5 12.0001 5ZM14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12ZM16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z" fill="#0070BA"/>
 </g>
 <defs>
 <clipPath id="clip0_683_11220">
diff --git a/src/styles.scss b/src/styles.scss
index b18394d..f2ecb28 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -35,25 +35,29 @@ a {
   display: flex;
   .block {
     margin: 12px 0;
-    background: #F7F8FA;
-    border: 1px solid #CFD1D4;
-    border-radius: 4px;
+    background: #fff;
+    border: 1px solid #C0C0C0;
+    border-radius: 12px;
     padding: 12px 24px;
     display: flex;
     column-gap: 20px;
     button {
+      background-position: center;
+      background-repeat: no-repeat;
+      padding: 0;
+      background-color: #ffffff;
+      border: none;
+      border-radius: 0;
       &.up, &.down, &.edit, &.publish, &.unpublish, &.delete {
         width: 24px;
         height: 24px;
-        background-position: center;
-        background-repeat: no-repeat;
       }
-      &.up {background: url("~src/assets/images/icons/arrow_upward_24dp.svg");}
-      &.down {background: url("~src/assets/images/icons/arrow_downward_24dp.svg");}
-      &.edit {background: url("~src/assets/images/icons/edit_24dp.svg");}
-      &.publish {background: url("~src/assets/images/icons/visibility_on_24dp.svg");}
-      &.unpublish {background: url("~src/assets/images/icons/visibility_off_24dp.svg");}
-      &.delete {background: url("~src/assets/images/icons/trash_24dp.svg");}
+      &.up {background-image: url("~src/assets/images/icons/arrow_upward_24dp.svg");}
+      &.down {background-image: url("~src/assets/images/icons/arrow_downward_24dp.svg");}
+      &.edit {background-image: url("~src/assets/images/icons/edit_24dp.svg");}
+      &.publish {background-image: url("~src/assets/images/icons/visibility_on_24dp.svg");}
+      &.unpublish {background-image: url("~src/assets/images/icons/visibility_off_24dp.svg");}
+      &.delete {background-image: url("~src/assets/images/icons/trash_24dp.svg");}
     }
   }
 }