Improved tag markup

vonkanehoffen · Oct 9, 2018 · 17f607d · 17f607d
1 parent 2c82c71
commit 17f607d
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 35 deletions.
diff --git a/src/colors.js b/src/colors.js
@@ -3,7 +3,7 @@ const colors = {
   secondary: '#a800ff',
   tertiary: '#00ffa2',
   pageBg: '#0f203c',
-  controlBg: '#597496',
+  controlBg: '#2a4b75',
   cardBg1: '#6683a7',
   cardBg2: '#a842c6',
   cardBg3: '#4255c6',

diff --git a/src/components/Tag.js b/src/components/Tag.js
@@ -3,13 +3,11 @@ import styled from 'styled-components'
 import colors from '../colors'
 
 
-const Tag = ({ add, remove, outline, children }) => {
+const Tag = ({ addIcon, removeIcon, onClick, outline, children, color }) => {
   return (
-    <Outer onClick={add || remove} outline={outline}>
-      <Action>
-        {add && <i className="material-icons">add_box</i>}
-        {remove && <i className="material-icons">close</i>}
-      </Action>
+    <Outer onClick={onClick} outline={outline} color={color}>
+      {addIcon && <i className="material-icons">add_box</i>}
+      {removeIcon && <i className="material-icons">close</i>}
       <Title>
         {children}
       </Title>
@@ -18,27 +16,34 @@ const Tag = ({ add, remove, outline, children }) => {
 }
 
 const Outer = styled.div`
-  display: inline-flex;
-  align-items: center;
+  display: inline-block;
   background: black;
   border-radius: 5px;
-  border: 2px solid black;
   color: ${colors.primary};
   margin-right: .5rem;
   cursor: pointer;
   text-transform: capitalize;
-  ${props => props.outline && `
+  line-height: 2.7rem;
+  height: 2.7rem;
+  white-space: nowrap;
+  padding: 0 1rem .1rem 1rem;
+  .material-icons {
+    vertical-align: middle;
+    margin-left: -.5rem;
+  }
+  ${props => props.outline && ` // not used....
     background: ${colors.primary};
     color: black;
   `}
-`
-
-const Action = styled.div`
-  padding: .25rem;
+  ${props => props.color && `
+    background: ${props.color};
+    color: white;
+  `}
 `
 
 const Title = styled.div`
-  padding: .5rem;
+  display: inline;
+  vertical-align: middle;
 `
 
 export default Tag
diff --git a/src/containers/MyFolds.js b/src/containers/MyFolds.js
@@ -82,7 +82,6 @@ const Outer = styled.div`
   display: flex;
   flex-wrap: wrap;
   ${media.lg`justify-content: center;`}
-  margin-top: 1rem;
 `
 
 export default withRouter(MyFolds)
diff --git a/src/containers/MyTags.js b/src/containers/MyTags.js
@@ -6,7 +6,7 @@ import CircularProgress from '@material-ui/core/CircularProgress'
 import { colorFromString } from '../helpers/color'
 import colors from '../colors'
 import PropTypes from 'prop-types'
-// import Tag from '../components/Tag'
+import Tag from '../components/Tag'
 
 class MyTags extends Component {
 
@@ -53,9 +53,15 @@ class MyTags extends Component {
 
     return (
       <Outer>
-        {userTags.map(tag =>
-          <Tag color={colorFromString(tag)} key={tag} onClick={() => this.toggleTag(tag)}>
-            {selectedTags.includes(tag) && <i className="material-icons">close</i>}
+        {userTags
+          .filter(tag => !selectedTags.includes(tag))
+          .map(tag =>
+          <Tag
+            color={colorFromString(tag)}
+            key={tag}
+            onClick={() => this.toggleTag(tag)}
+            removeIcon={selectedTags.includes(tag)}
+          >
             {tag}
           </Tag>
         )}
@@ -68,6 +74,7 @@ class MyTags extends Component {
 const Outer = styled.div`
   display: flex;
   overflow: auto;
+  padding: 1rem .5rem .5rem;
   ::-webkit-scrollbar { 
     background:${colors.pageBg};
   }
@@ -79,17 +86,4 @@ const Outer = styled.div`
   }
 `
 
-const Tag = styled.div`
-  display: inline-flex;
-  align-items: center;
-  color: white;
-  background:${props => props.color};
-  padding: 1rem 1rem;
-  line-height: 1rem;
-  margin: 1rem .5rem;
-  border-radius: 5px;
-  cursor: pointer;
-  text-transform: capitalize;
-  
-`
 export default MyTags 
diff --git a/src/containers/TagSelect.js b/src/containers/TagSelect.js
@@ -137,7 +137,8 @@ class TagSelect extends React.Component {
               <Tag
                 key={item}
                 tabIndex={-1}
-                remove={this.handleDelete(item)}
+                onClick={this.handleDelete(item)}
+                removeIcon
               >{item}</Tag>
             ))}
             <div style={{flex: 1}}>