Added nickname editing

src/theme.js

@@ -7,7 +7,7 @@ export default {
     highlight: "hsl(260, 20%, 40%)",
     purple: "hsl(290, 100%, 80%)",
     muted: "hsla(230, 20%, 0%, 20%)",
-    gray: "hsl(0, 0%, 70%)"
+    gray: "hsl(0, 0%, 70%)",
   },
   fonts: {
     body: "'Bree Serif', serif",
@@ -15,83 +15,83 @@ export default {
       "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
     heading: "'Bree Serif', serif",
     monospace: "Menlo, monospace",
-    display: "'Pacifico', cursive"
+    display: "'Pacifico', cursive",
   },
   fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72],
   fontWeights: {
     caption: 200,
     body: 300,
     heading: 400,
-    display: 400
+    display: 400,
   },
   lineHeights: {
     body: 1.1,
-    heading: 1.25
+    heading: 1.25,
   },
   text: {
     heading: {
       fontFamily: "heading",
       fontWeight: "heading",
       lineHeight: "heading",
-      fontSize: 1
+      fontSize: 1,
     },
     display: {
       variant: "textStyles.heading",
       fontFamily: "display",
       fontSize: [5, 6],
       fontWeight: "display",
-      mt: 3
+      mt: 3,
     },
     caption: {
       fontFamily: "body2",
       fontWeight: "caption",
       fontSize: 10,
-      color: "gray"
+      color: "gray",
     },
     body2: {
       fontFamily: "body2",
       fontSize: 1,
-      fontWeight: "body"
-    }
+      fontWeight: "body",
+    },
   },
   styles: {
     Container: {
       p: 3,
-      maxWidth: 1024
+      maxWidth: 1024,
     },
     root: {
       fontFamily: "body",
       lineHeight: "body",
-      fontWeight: "body"
+      fontWeight: "body",
     },
     h1: {
-      variant: "textStyles.display"
+      variant: "textStyles.display",
     },
     h2: {
       variant: "textStyles.heading",
-      fontSize: 5
+      fontSize: 5,
     },
     h3: {
       variant: "textStyles.heading",
-      fontSize: 4
+      fontSize: 4,
     },
     h4: {
       variant: "textStyles.heading",
-      fontSize: 3
+      fontSize: 3,
     },
     h5: {
       variant: "textStyles.heading",
-      fontSize: 2
+      fontSize: 2,
     },
     h6: {
       variant: "textStyles.heading",
-      fontSize: 1
+      fontSize: 1,
     },
     a: {
       color: "primary",
       "&:hover": {
-        color: "secondary"
-      }
+        color: "secondary",
+      },
     },
     pre: {
       variant: "prism",
@@ -102,18 +102,18 @@ export default {
       bg: "muted",
       overflow: "auto",
       code: {
-        color: "inherit"
-      }
+        color: "inherit",
+      },
     },
     code: {
       fontFamily: "monospace",
       color: "secondary",
-      fontSize: 1
+      fontSize: 1,
     },
     inlineCode: {
       fontFamily: "monospace",
       color: "secondary",
-      bg: "muted"
+      bg: "muted",
     },
     table: {
       width: "100%",
@@ -126,52 +126,52 @@ export default {
         pr: "4px",
         pl: 0,
         borderColor: "muted",
-        borderBottomStyle: "solid"
-      }
+        borderBottomStyle: "solid",
+      },
     },
     th: {
       verticalAlign: "bottom",
-      borderBottomWidth: "2px"
+      borderBottomWidth: "2px",
     },
     td: {
       verticalAlign: "top",
-      borderBottomWidth: "1px"
+      borderBottomWidth: "1px",
     },
     hr: {
       border: 0,
       borderBottom: "1px solid",
-      borderColor: "muted"
+      borderColor: "muted",
     },
     img: {
-      maxWidth: "100%"
-    }
+      maxWidth: "100%",
+    },
   },
   prism: {
     ".comment,.prolog,.doctype,.cdata,.punctuation,.operator,.entity,.url": {
-      color: "gray"
+      color: "gray",
     },
     ".comment": {
-      fontStyle: "italic"
+      fontStyle: "italic",
     },
     ".property,.tag,.boolean,.number,.constant,.symbol,.deleted,.function,.class-name,.regex,.important,.variable": {
-      color: "purple"
+      color: "purple",
     },
     ".atrule,.attr-value,.keyword": {
-      color: "primary"
+      color: "primary",
     },
     ".selector,.attr-name,.string,.char,.bultin,.inserted": {
-      color: "secondary"
-    }
+      color: "secondary",
+    },
   },
   forms: {
     label: {
-      fontWeight: 400
+      fontWeight: 400,
     },
     input: {
       "&:focus": {
-        outlineColor: "primary"
-      }
-    }
+        outlineColor: "primary",
+      },
+    },
   },
   buttons: {
     primary: {
@@ -182,15 +182,15 @@ export default {
       borderColor: "text",
       "&:hover": {
         borderColor: "highlight",
-        cursor: "pointer"
+        cursor: "pointer",
       },
       fontFamily: "body",
       "&:focus": {
-        outline: "none"
+        outline: "none",
       },
       "&:active": {
-        borderColor: "primary"
-      }
+        borderColor: "primary",
+      },
     },
     secondary: {
       color: "secondary",
@@ -198,29 +198,31 @@ export default {
       borderStyle: "solid",
       borderWidth: "1px",
       borderColor: "text",
-      fontFamily: "body"
+      fontFamily: "body",
     },
     icon: {
       "&:hover": {
-        cursor: "pointer"
+        cursor: "pointer",
+        color: "primary",
       },
       "&:focus": {
-        outline: "none"
+        outline: "none",
       },
       "&:active": {
-        color: "primary"
-      }
+        color: "secondary",
+      },
     },
     close: {
       "&:hover": {
-        cursor: "pointer"
+        cursor: "pointer",
+        color: "primary",
       },
       "&:focus": {
-        outline: "none"
+        outline: "none",
       },
       "&:active": {
-        color: "primary"
-      }
-    }
-  }
+        color: "secondary",
+      },
+    },
+  },
 };