Adjust vote status when voted by delegate

src/pages/proposal-commons/vote-status/vote-status.module.scss

@@ -15,19 +15,36 @@
   }
 }
 
+.votedByDelegate {
+  @include font-body-17;
+}
+
 .wrapperLarge {
   display: flex;
   justify-content: center;
-  align-items: center;
   margin: 14px 0 48px 0;
   @include font-body-11;
 
   @media (min-width: $md) {
     @include font-body-5;
   }
+
+  .votedByDelegate {
+    @include font-body-17;
+    text-align: left;
+
+    @media (min-width: $md) {
+      @include font-body-14;
+    }
+  }
 }
 
 .icon {
-  margin-right: $space-sm;
-  height: 25px;
+  margin-right: 6px;
+  height: 26px;
+
+  @media (min-width: $md) {
+    margin-right: 8px;
+    height: 30px;
+  }
 }

src/pages/proposal-commons/vote-status/vote-status.tsx

@@ -9,11 +9,6 @@ interface Props {
   large?: true;
 }
 
-export const formatVoteStatus = (voterState: keyof typeof VOTER_STATES, wasDelegated: boolean) => {
-  if (VOTER_STATES[voterState] === 'Unvoted') return 'Unvoted';
-  return [VOTER_STATES[voterState], wasDelegated && '(by delegate)'].filter(Boolean).join(' ');
-};
-
 const VoteStatus = (props: Props) => {
   const { voterState, wasDelegated, large } = props;
 
@@ -33,7 +28,10 @@ const VoteStatus = (props: Props) => {
           [styles.votedFor]: VOTER_STATES[voterState] === 'Voted For',
         })}
       >
-        {formatVoteStatus(voterState, wasDelegated)}
+        {VOTER_STATES[voterState]}
+        {VOTER_STATES[voterState] !== 'Unvoted' && wasDelegated && (
+          <div className={styles.votedByDelegate}>(by delegate)</div>
+        )}
       </span>
     </div>
   );