Merge pull request #9 from jetbrains-academy/add-duck-shop-client

Finish with the duck shop

duckShopFrontend/src/App.css

@@ -90,6 +90,9 @@
   background-size: contain;
   margin-bottom: 1vmin;
 }
+.App-button-start:hover {
+  opacity: 85%;
+}
 
 .App-teams-button-back {
   background-image: url('assets/back_button.svg');
@@ -113,15 +116,34 @@
 }
 
 .App-button-list {
-  background-image: url('assets/list_button.svg');
+  background-image: url('assets/buttons/list_button.svg');
+}
+.App-button-list:hover {
+  background-image: url('assets/buttons/list_hover.svg');
 }
 
 .App-button-set {
-  background-image: url('assets/set_button.svg');
+  background-image: url('assets/buttons/set_button.svg');
+}
+.App-button-set:hover {
+  background-image: url('assets/buttons/set_hover.svg');
 }
 
 .App-button-map {
-  background-image: url('assets/map_button.svg');
+  background-image: url('assets/buttons/map_button.svg');
+}
+.App-button-map:hover {
+  background-image: url('assets/buttons/map_hover.svg');
+}
+
+.App-button-list-focused {
+  background-image: url('assets/buttons/list_focused.svg');
+}
+.App-button-set-focused {
+  background-image: url('assets/buttons/set_focused.svg');
+}
+.App-button-map-focused {
+  background-image: url('assets/buttons/map_focused.svg');
 }
 
 .App-ducks-container {
@@ -158,6 +180,10 @@
   margin-right: 1vmin;
 }
 
+.App-duck-container-best {
+  background-image: url('assets/box_best.svg');
+}
+
 
 .App-duck-image {
   height: 100%;
@@ -224,3 +250,94 @@
 .App-display-none {
   display: none;
 }
+
+.App-functions-container {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  flex-direction: row;
+}
+
+.App-button-action {
+  background-size: contain;
+  height: 4vmin;
+  width: 10vmin;
+  margin: 0 0.25vmin 0.25vmin;
+}
+
+.App-button-add {
+  background-image: url('assets/actions/add.svg');
+  margin-left: 0;
+  margin-right: 0;
+}
+.App-button-add:hover {
+  background-image: url('assets/actions/add-hover.svg');
+}
+
+.App-button-remove {
+  background-image: url('assets/actions/remove.svg');
+}
+.App-button-remove:hover {
+  background-image: url('assets/actions/remove-hover.svg');
+}
+
+.App-button-sort {
+  background-image: url('assets/actions/sort.svg');
+}
+.App-button-sort:hover {
+  background-image: url('assets/actions/sort-hover.svg');
+}
+
+.App-button-shuffle {
+  background-image: url('assets/actions/shuffle.svg');
+}
+.App-button-shuffle:hover {
+  background-image: url('assets/actions/shuffle-hover.svg');
+}
+
+.App-button-filter {
+  background-image: url('assets/actions/filter.svg');
+}
+.App-button-filter:hover {
+  background-image: url('assets/actions/filter-hover.svg');
+}
+
+.App-button-partition {
+  background-image: url('assets/actions/partition.svg');
+}
+.App-button-partition:hover {
+  background-image: url('assets/actions/partition-hover.svg');
+}
+
+.App-unclickable-button {
+  pointer-events: none;
+  opacity: 40%;
+}
+
+.App-button-back {
+  background-image: url('assets/back_button.svg');
+  background-size: contain;
+  width: 20vmin;
+  height: 5vmin;
+  position: absolute;
+  top: 1vmin;
+  right: 5vmin;
+}
+.App-button-back:hover {
+  background-image: url('assets/back_button_hover.svg');
+}
+
+
+.App-info-container {
+  text-align: center;
+  position: absolute;
+  top: 15%;
+  left: 20%;
+  width: 60%;
+}
+
+.App-info-container-text {
+  color: #5f5e5e;
+  font-size: 2.5vmin;
+  white-space: pre-line;
+}