Styling tweaks for channel polls

src/assets/css/channel.scss

@@ -124,8 +124,17 @@
     }
   }
 
+  .poll-bubble svg {
+    color: black;
+  }
   .poll-answer {
-    border-radius: 10px;
+    
+    &.selected {
+      font-weight: 500;
+    }
+  }
+  .poll-check-icon {
+    display: none;
   }
 
   .messageOut.pinned,

src/assets/css/components/_poll.scss

@@ -37,7 +37,7 @@
   border-radius: 4px;
   padding: 15px 14px;
   margin: 0px;
-  height: $min-touch-target;
+  min-height: $min-touch-target;
   &:hover {
     cursor: pointer;
   }
@@ -165,6 +165,7 @@
   color: white;
   text-transform: uppercase;
   height: 42px;
+  min-width: 132px;
 }
 
 .poll-disclose {

src/components/InputControl.vue

@@ -1,21 +1,18 @@
 <template>
   <div :class="{ 'input-field': true, errored: modelValue !== null && modelValue.length <= 0 }">
-    <input
-      ref="input"
-      type="text"
-      :value="modelValue"
-      @input="$emit('update:modelValue', $event.target.value)"
-      v-on:blur="onBlur"
-    />
+    <div class="input-wrapper">
+      <input ref="input" type="text" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"
+        v-on:blur="onBlur" />
+      <div class="slot">
+        <slot></slot>
+      </div>
+    </div>
     <div class="placeholder-container">
       <div :class="{ placeholder: true, large: !modelValue || modelValue.length == 0 }">
         {{ label }}
       </div>
       <div class="error-message" v-if="modelValue !== null && modelValue.length <= 0">{{ error }}</div>
     </div>
-    <div class="slot">
-     <slot></slot>
-     </div>
   </div>
 </template>
 
@@ -29,25 +26,25 @@ export default {
   props: {
     label: {
       type: String,
-      default: function() {
+      default: function () {
         return "";
       },
     },
     error: {
       type: String,
-      default: function() {
+      default: function () {
         return "";
       },
     },
     disabled: {
       type: Boolean,
-      default: function() {
+      default: function () {
         return false;
       },
     },
     modelValue: {
       type: String,
-      default: function() {
+      default: function () {
         return null;
       },
     },
@@ -73,12 +70,20 @@ export default {
   width: 100%;
   display: flex;
   position: relative;
-  min-height: $min-touch-target;
+  min-height: 58px;
 
   background: #f5f5f5;
   border-radius: 4px;
   transition: background-color 0.4s, box-shadow 0.4s;
   margin-bottom: 12px;
+
+  .input-wrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    padding: 22px 16px 0px 16px;
+  }
+
   &.errored {
     border: 1px solid #e31b00;
   }
@@ -95,6 +100,7 @@ export default {
     right: 16px;
     display: flex;
   }
+
   .placeholder {
     text-align: start;
     font-family: "Inter";
@@ -122,10 +128,11 @@ export default {
     position: absolute;
     left: 0px;
     right: 0px;
-    top: 14px;
+    top: 20px;
     font-size: 16px;
     color: rgba(0, 0, 0, 0.7);
     margin-right: 0px;
+
     &:only-child {
       top: 8px;
     }
@@ -139,16 +146,12 @@ export default {
     line-height: 117%;
     letter-spacing: 0.4px;
     color: #000000;
-    position: absolute;
-    top: 20px;
-    left: 16px;
-    right: 16px;
-    bottom: 0;
-    width: 100%;
+    flex: 1 1 100%;
 
     &:focus {
       top: 20px;
     }
+
     &:focus,
     &:focus-visible {
       border: none;
@@ -157,14 +160,7 @@ export default {
   }
 
   .slot {
-    position: absolute;
-    right: 16px;
-    align-self: center;
-
-    [dir="rtl"] & {
-      left: 16px;
-      right: unset;
-    }
+    flex: 0 0 auto;
   }
 }
 </style>