Add rate icons styling

Author: EkaterinaVu

src/assets/css/common.css

@@ -821,14 +821,14 @@ header.vff-header svg.f-logo {
   justify-content: center;
   cursor: pointer;
   outline: none;
+  border: none;
   position: relative;
   margin-right: 8px;
   padding: 0;
 }
 
 .vff .field-iconrate ul.f-radios li .f-icon-wrap {
   flex: 1 1 0%;
-  padding-right: 4px;
   display: flex;
   -webkit-box-align: center;
   align-items: center;
@@ -837,6 +837,7 @@ header.vff-header svg.f-logo {
 
 .vff .field-iconrate ul.f-radios li .f-icon {
   margin-bottom: 8px;
+  align-self: stretch;
 }
 
 .vff .field-iconrate ul.f-radios li .f-icon-wrap svg{
@@ -845,7 +846,7 @@ header.vff-header svg.f-logo {
   max-height: 64px;
   max-width: 64px;
   fill: transparent;
-  stroke: black;
+  stroke: var(--vff-secondary-text-color);
 }
 
 .vff .field-iconrate ul.f-radios li.f-selected, 
@@ -861,7 +862,8 @@ header.vff-header svg.f-logo {
 .vff .field-iconrate ul.f-radios li.f-selected .f-icon-wrap svg, 
 .vff .field-iconrate ul.f-radios li.f-previous .f-icon-wrap svg,
 .vff .field-iconrate ul.f-radios li:active .f-icon-wrap svg {
-  fill: #000;
+  fill: var(--vff-main-text-color);
+  stroke: var(--vff-main-text-color);
 }
 
 /* 

src/components/QuestionTypes/OpinionScaleType.vue

@@ -15,7 +15,7 @@
         <div v-else-if="isIconScale" class="f-icon-wrap">
             <div class="f-icon">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-                <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
+                <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z" stroke-width=".5"/>
               </svg>
             </div>
             <div class="f-key">{{ getToggleKey(option.value) }}</div>