wip

src/view/cmp/button/button.scss

@@ -154,6 +154,39 @@
   }
 }
 
+.button--round {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  width: 46px;
+  height: 46px;
+  min-width: auto;
+  min-height: auto;
+  color: $text-main;
+  background-color: $bg-main;
+  border-radius: 50%;
+  box-shadow: 2px 0 5px rgba(97, 96, 96, 0.25);
+
+  &:hover,
+  &:active {
+    color: $text-main;
+    box-shadow: 0 0 2px rgba(97, 96, 96, 0.25);
+  }
+
+  &:focus {
+    color: $text-main;
+    box-shadow: 0 0 0 rgba(97, 96, 96, 0.25);
+  }
+
+  &:disabled {
+    color: $text-main;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+
 .button--primary svg:last-child,
 .button--bordered svg:last-child,
 .button--secondary svg:last-child {
@@ -165,3 +198,9 @@
 .button--secondary svg:first-child {
   left: 18px;
 }
+
+.button--round svg:first-child:last-child {
+  position: static;
+  transform: none;
+  display: block;
+}

src/view/cmp/cardSlider/CardSlider.jsx

@@ -83,11 +83,11 @@ const CardSlider = D.declare('view.cmp.CardSlider', (cfg) => {
     };
     let dom;
     let theDOM = <div class="card-slider">
-        <button class="card-slider__control card-slider__control--prev" type="button"
+        <button class="button button--round card-slider__control card-slider__control--prev" type="button"
                 aria-label="Показать предыдущую карточку">
             <ArrPrev width="14" height="12"/>
         </button>
-        <button className="card-slider__control card-slider__control--next" type="button"
+        <button className="button button--round card-slider__control card-slider__control--next" type="button"
                 aria-label="Показать предыдущую карточку">
             <ArrNext width="14" height="12"/>
         </button>

src/view/cmp/cardSlider/CardSlider.scss

+.card-slider {
+	position: relative;
+	margin: 0 30px 0 -30px;
+	padding: 0 60px 0 30px;
+}
+
 .card-slider__scroller {
+	box-sizing: border-box;
+
 	width: 100%;
 	position: relative;
 	overflow-x: scroll;
@@ -14,3 +22,17 @@
 	flex-direction: column;
 	margin-bottom: 30px;
 }
+
+.card-slider__control {
+	position: absolute;
+	top: 50%;
+	z-index: 1;
+}
+
+.card-slider__control--prev {
+	left: 0;
+}
+
+.card-slider__control--next {
+	right: 0;
+}

src/view/page/account/Account.jsx

@@ -20,7 +20,7 @@ const Account = D.declare('view.page.Account', () => {
             <div class="account-page__content">
                 <div class="account-page__content-inner">
                     <div class="account-page__cards">
-                        <h2 class="readers-only">Список непросмотренных карточек</h2>
+                        <h2 class="account-page__title">Новые карточки для вашей должности:</h2>
                         <CardSlider
                           items={_=> store.sub(
                             [

src/view/page/account/accountPage.scss

@@ -72,3 +72,12 @@
 		max-height: none;
 	}
 }
+
+.account-page__cards {
+	padding-top: 10px;
+}
+
+.account-page__title {
+	@include headline;
+	margin: 0 0 10px;
+}