ui: improve notebook item ui (#95)

apps/web/src/components/list-item/index.js

@@ -8,6 +8,7 @@ import {
   useStore as useAppStore
 } from "../../stores/app-store";
 import useContextMenu from "../../utils/useContextMenu";
+import { useTheme } from "emotion-theming";
 
 const ActionsMenu = props => (
   <Menu
@@ -59,7 +60,7 @@ const ListItem = props => {
   const selectItem = useAppStore(store => store.selectItem);
   const [isSelected, setIsSelected] = useState(false);
   const [menuItems, setMenuItems] = useState(props.menuItems);
-
+  const theme = useTheme();
   const toggleSelection = useCallback(
     function toggleSelection() {
       setIsSelected(state => !state);
@@ -198,9 +199,11 @@ const ListItem = props => {
           >
             <DropdownTrigger onClick={() => closeContextMenu()}>
               <Text sx={{ ":active, :hover": { color: "primary" } }}>
+                
                 <Icon.MoreVertical
-                  size={24}
-                  strokeWidth={1.5}
+                  size={22}
+                  strokeWidth={2}
+                  color={theme.colors.icon}
                   style={{ marginRight: -5 }}
                 />
               </Text>

apps/web/src/components/notebook/index.js

@@ -40,7 +40,7 @@ export default class Notebook extends React.Component {
         title={notebook.title}
         body={notebook.description}
         subBody={
-          <Flex sx={{ marginBottom: 1 }}>
+          <Flex sx={{ marginBottom:1,marginTop:1 }}>
             {notebook.topics.slice(1, 4).map(topic => (
               <Flex
                 onClick={e => {
@@ -49,12 +49,14 @@ export default class Notebook extends React.Component {
                 }}
                 key={topic.id + topic.title}
                 bg="primary"
-                px={2}
-                py={1}
+                px={1}
                 sx={{
                   marginRight: 1,
                   borderRadius: "default",
-                  color: "static"
+                  color: "static",
+                  paddingTop:0.4,
+                  paddingBottom:0.4
+                  
                 }}
               >
                 <Text variant="body" fontSize={11}>

apps/web/src/utils/theme.js

@@ -15,7 +15,8 @@ const colorsLight = primary =>
     fontSecondary: "white",
     text: "#000000",
     overlay: "rgba(0, 0, 0, 0.1)",
-    secondary: "white"
+    secondary: "white",
+    icon:'#909090'
   });
 const colorsDark = primary =>
   makeTheme({
@@ -28,7 +29,8 @@ const colorsDark = primary =>
     fontSecondary: "#000",
     text: "#ffffff",
     overlay: "rgba(255, 255, 255, 0.5)",
-    secondary: "black"
+    secondary: "black",
+    icon:'#909090'
   });
 
 const shadowsDark = {
@@ -180,7 +182,8 @@ function makeTheme({
   fontSecondary,
   text,
   overlay,
-  secondary
+  secondary,
+  icon
 }) {
   return {
     background,
@@ -199,7 +202,8 @@ function makeTheme({
     placeholder: hexToRGB(text, 0.6),
     overlay,
     static: "white",
-    secondary
+    secondary,
+    icon
   };
 }