feat: added hover to dotted info to usability purposes

semoal · Apr 10, 2020 · 48066f5 · 48066f5
1 parent 84776b4
commit 48066f5
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/src/Themes.tsx b/src/Themes.tsx
@@ -35,7 +35,7 @@ const BaseComponent: React.FunctionComponent<ButtonProps> = ({
           onClick={() => onSelectTheme(th)}
         >
           <span>{th.name}</span>
-          <SvgIcon style={{ marginLeft: "1em" }} name="info" onClick={() => onOpenModal()} />
+          <SvgIcon name="info" onClick={() => onOpenModal()} />
         </Button>
       ))
       .toArray()}

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import styled, { css } from "styled-components";
 
 interface StyledButton {

diff --git a/src/components/SvgIcon.tsx b/src/components/SvgIcon.tsx
@@ -5,15 +5,15 @@ const StyledSvg = styled.svg`
   width: 15px;
   height: 15px;
   z-index: 999;
-  svg {
-    width: 15px;
-    height: 15px;
-  }
+  margin-left: 0.75rem;
 
-  &:hover {
-    cursor: pointer;
+  :hover {
+    border: 1px solid;
+    border-radius: 50%;
+    transition: all 150ms ease-out;
   }
 `;
+
 const svgReference = {
   close: (<svg viewBox="0 0 1024 1024"><path d="M693.022 637.866c15.62 15.622 15.618 40.95 0 56.566-15.622 15.622-40.946 15.624-56.562 0.002l-124.46-124.458-124.456 124.458c-15.622 15.622-40.944 15.622-56.562 0-15.624-15.622-15.624-40.946-0.002-56.568l124.454-124.456-124.452-124.45c-15.622-15.622-15.622-40.946 0-56.564 15.62-15.624 40.944-15.624 56.568-0.002l124.45 124.45 124.454-124.452c15.622-15.62 40.95-15.62 56.566 0 15.622 15.62 15.624 40.944 0.002 56.56l-124.456 124.458 124.456 124.456zM828.784 828.784c-174.956 174.956-458.614 174.956-633.566 0-174.958-174.956-174.958-458.614 0-633.566 174.954-174.958 458.612-174.958 633.566 0 174.954 174.952 174.954 458.612 0 633.566zM880 511.998c-0.002-98.296-38.28-190.708-107.786-260.212s-161.92-107.786-260.214-107.788c-98.296 0.002-190.71 38.282-260.216 107.786-69.506 69.508-107.782 161.918-107.786 260.214 0.002 98.296 38.282 190.71 107.786 260.216 69.508 69.506 161.918 107.784 260.216 107.784 98.296 0 190.708-38.278 260.214-107.784s107.784-161.92 107.786-260.216z"/></svg>),
   // @ts-ignore