remove unneeded vote btn styles and only style it in one place using styled components

Author: dantovska

redisinsight/ui/src/components/recommendation/recommendation-voting/components/vote-option/VoteOption.tsx

@@ -14,7 +14,7 @@ import { Nullable } from 'uiSrc/utils'
 
 import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { Text } from 'uiSrc/components/base/text'
-import { CancelSlimIcon } from 'uiSrc/components/base/icons'
+import { CancelSlimIcon, Icon } from 'uiSrc/components/base/icons'
 import { IconButton } from 'uiSrc/components/base/forms/buttons'
 import { Link } from 'uiSrc/components/base/link/Link'
 import { RiPopover, RiTooltip } from 'uiSrc/components/base'
@@ -49,6 +49,12 @@ const GitHubLink = styled(Link)`
   }
 `
 
+const VotingIconButton = styled(IconButton)`
+  width: 28px !important;
+  height: 28px !important;
+  border-radius: 50%;
+`
+
 export interface Props {
   voteOption: Vote
   vote?: Nullable<Vote>
@@ -130,7 +136,7 @@ const VoteOption = (props: Props) => {
           position="bottom"
           data-testid={`${voteOption}-vote-tooltip`}
         >
-          <IconButton
+          <VotingIconButton
             disabled={!isAnalyticsEnable}
             icon={iconType[voteOption] ?? 'LikeIcon'}
             className={cx('vote__btn', { selected: vote === voteOption })}

redisinsight/ui/src/components/recommendation/recommendation-voting/styles.module.scss

@@ -3,19 +3,6 @@
     .voteContent {
       margin-left: 10px;
 
-      .vote__btn {
-        width: 28px !important;
-        height: 28px !important;
-        border-radius: 50%;
-
-        &:hover,
-        &:focus,
-        &.selected {
-          transform: none;
-          background-color: var(--separatorColor);
-        }
-      }
-
       svg {
         width: 34px;
         height: 34px;

redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/recommendation/styles.module.scss

@@ -88,21 +88,6 @@
       font-size: inherit !important;
     }
   }
-
-  .link {
-    color: var(--externalLinkColor) !important;
-  }
-
-  :global {
-    .vote__btn {
-      &:hover,
-      &:focus,
-      &.selected {
-        transform: none;
-        background-color: var(--liveRecommendationVoteBgColor) !important;
-      }
-    }
-  }
 }
 
 .actions {