diff --git a/deps.edn b/deps.edn index 38900323c1..b1658af9f1 100644 --- a/deps.edn +++ b/deps.edn @@ -17,9 +17,6 @@ metosin/komponentit #:mvn{:version "0.3.10"} instaparse/instaparse #:mvn{:version "1.4.10"} borkdude/sci #:mvn{:version "0.2.5"} - garden/garden #:mvn{:version "1.3.10"} - stylefy/stylefy #:mvn{:version "3.0.0"} - stylefy/reagent #:mvn{:version "3.0.0"} tick/tick #:mvn{:version "0.4.26-alpha"} cljc.java-time/cljc.java-time #:mvn{:version "0.1.9"} com.rpl/specter #:mvn{:version "1.1.3"} diff --git a/package.json b/package.json index 921e705b33..ad5a5c9138 100644 --- a/package.json +++ b/package.json @@ -107,8 +107,6 @@ "@js-joda/core": "1.12.0", "@js-joda/locale_en-us": "3.1.1", "@js-joda/timezone": "2.2.0", - "@material-ui/core": "^4.10.1", - "@material-ui/icons": "^4.9.1", "@sentry/integrations": "^6.17.3", "@sentry/react": "^6.17.3", "@sentry/tracing": "^6.17.3", diff --git a/resources/public/index.html b/resources/public/index.html index 3a4ef9fb8c..9fea1a6c4f 100644 --- a/resources/public/index.html +++ b/resources/public/index.html @@ -5,8 +5,6 @@ - - diff --git a/src/cljs/athens/components.cljs b/src/cljs/athens/components.cljs index 72bf351cb2..132de98808 100644 --- a/src/cljs/athens/components.cljs +++ b/src/cljs/athens/components.cljs @@ -1,7 +1,7 @@ (ns athens.components (:require - ["@chakra-ui/react" :refer [Checkbox Box Button]] - ["@material-ui/icons/Edit" :default Edit] + ["/components/Icons/Icons" :refer [PencilIcon]] + ["@chakra-ui/react" :refer [Checkbox Box IconButton Button]] [athens.db :as db] [athens.parse-renderer :refer [component]] [athens.reactive :as reactive] @@ -89,13 +89,7 @@ :position "relative" :sx {"> .block-container" {:ml 0 :pr "1.3rem" - "textarea" {:background "transparent"}} - "> svg" {:position "absolute" - :right "5px" - :top "5px" - :fontSize "1rem" - :zIndex "5" - :cursor "pointer"}}} + "textarea" {:background "transparent"}}}} (let [block (reactive/get-reactive-block-document [:block/uid block-uid])] [:<> [blocks/block-el @@ -103,10 +97,16 @@ {:linked-ref false} {:block-embed? true}] (when-not @(subscribe [:editing/is-editing uid]) - [:> Edit - {:on-click (fn [e] - (.. e stopPropagation) - (dispatch [:editing/uid uid]))}])])]) + [:> IconButton {:position "absolute" + :right 1 + :top 1 + :size "xs" + :fontSize "1rem" + :zIndex "5" + :on-click (fn [e] + (.. e stopPropagation) + (dispatch [:editing/uid uid]))} + [:> PencilIcon]])])]) ;; roam actually hides the brackets around [[embed]] [:span "{{" content "}}"]))) diff --git a/src/cljs/athens/electron/db_menu/status_indicator.cljs b/src/cljs/athens/electron/db_menu/status_indicator.cljs index 084a11b01c..c265a81c33 100644 --- a/src/cljs/athens/electron/db_menu/status_indicator.cljs +++ b/src/cljs/athens/electron/db_menu/status_indicator.cljs @@ -1,8 +1,7 @@ (ns athens.electron.db-menu.status-indicator (:require - ["@chakra-ui/react" :refer [Box Tooltip Spinner]] - ["@material-ui/icons/CheckCircle" :default CheckCircle] - ["@material-ui/icons/Error" :default Error])) + ["/components/Icons/Icons" :refer [CheckmarkCircleFillIcon ExclamationCircleFillIcon]] + ["@chakra-ui/react" :refer [Box Tooltip Spinner]])) (defn status-indicator @@ -27,10 +26,10 @@ (cond (= status :closed) [:> Tooltip {:label "Disconnected"} - [:> Error]] + [:> ExclamationCircleFillIcon]] (= status :running) [:> Tooltip {:label "Synced"} - [:> CheckCircle]] + [:> CheckmarkCircleFillIcon]] :else [:> Tooltip {:label "Synchronizing..."} [:> Spinner {:emptyColor "background.vibrancy" :speed "2s" :size "xs"}]])]) diff --git a/src/cljs/athens/style.cljs b/src/cljs/athens/style.cljs index a1bf274ee1..83d17f2cfc 100644 --- a/src/cljs/athens/style.cljs +++ b/src/cljs/athens/style.cljs @@ -2,9 +2,7 @@ (:require [athens.config :as config] [athens.util :as util] - [re-frame.core :refer [reg-sub subscribe]] - [stylefy.core :as stylefy] - [stylefy.reagent :as stylefy-reagent])) + [re-frame.core :refer [reg-sub subscribe]])) (reg-sub @@ -58,7 +56,6 @@ (defn init [] - (stylefy/init {:dom (stylefy-reagent/init)}) ;; hide re-frame-10x by default (when config/debug? (util/hide-10x))) diff --git a/src/cljs/athens/views/blocks/core.cljs b/src/cljs/athens/views/blocks/core.cljs index 4380ad61b1..664395a4d7 100644 --- a/src/cljs/athens/views/blocks/core.cljs +++ b/src/cljs/athens/views/blocks/core.cljs @@ -3,6 +3,7 @@ ["/components/Block/components/Anchor" :refer [Anchor]] ["/components/Block/components/Container" :refer [Container]] ["/components/Block/components/Toggle" :refer [Toggle]] + ["/components/Layout/Layout" :refer [ReferenceGroup ReferenceBlock]] ["@chakra-ui/react" :refer [VStack Button Breadcrumb BreadcrumbItem BreadcrumbLink HStack]] [athens.common.logging :as log] [athens.db :as db] @@ -21,79 +22,12 @@ [athens.views.blocks.content :as content] [athens.views.blocks.context-menu :refer [handle-copy-unformatted handle-copy-refs]] [athens.views.blocks.drop-area-indicator :as drop-area-indicator] - [athens.views.references :refer [reference-group reference-block]] [com.rpl.specter :as s] [goog.functions :as gfns] [re-frame.core :as rf] [reagent.core :as r])) -;; Styles -;; -;; Blocks use Em units in many places rather than Rem units because -;; blocks need to scale with their container: sidebar blocks are -;; smaller than main content blocks, for instance. - - -(def block-container-inner-style - {"&.show-tree-indicator:before" {:content "''" - :position "absolute" - :width "1px" - :left "calc(1.375em + 1px)" - :top "2em" - :bottom "0" - :opacity "0" - :transform "translateX(50%)" - :transition "background-color 0.2s ease-in-out, opacity 0.2s ease-in-out" - :background "separator.divider"} - "&:hover.show-tree-indicator:before, &:focus-within.show-tree-indicator:before" {:opacity 1} - "&:after" {:content "''" - :zIndex 0 - :position "absolute" - :inset "1px 0" - :opacity 0 - :pointerEvents "none" - :borderRadius "sm" - :transition "opacity 0.075s ease-in-out" - :background "link"} - "&.is-selected:after" {:opacity 0.2} - "&.is-presence .block-content" {:padding-right "1rem"} - ".user-avatar" {:position "absolute" - :left "4px" - :top "4px"} - ".block-body" {:display "grid" - :gridTemplateColumns "1em 1em 1fr auto" - :gridTemplateRows "0 1fr 0" - :gridTemplateAreas " - 'above above above above' - 'toggle bullet content refs' - 'below below below below'" - :borderRadius "0.5rem" - :position "relative"} - "&:hover > .block-toggle, &:focus-within > .block-toggle" {:opacity "1"} - "button.block-edit-toggle" {:position "absolute" - :appearance "none" - :width "100%" - :background "none" - :border 0 - :cursor "text" - :display "block" - :z-index 1 - :top 0 - :right 0 - :bottom 0 - :left 0} - ".block-embed" {:borderRadius "sm" - :sx {"--block-surface-color" "background.basement"} - :bg "background.basement" - ".block-container" {:marginLeft 0.5}} - ".block-content" {:gridArea "content" - :minHeight "1.5em"} - "&.is-linked-ref" {:bg "background-attic"} - ".block-container" {:marginLeft "2rem" - :gridArea "body"}}) - - ;; Inline refs ;; block-el depends on inline-linked-refs-el, which in turn depends on block-el @@ -125,13 +59,13 @@ (let [{:keys [block parents embed-id]} @state block (reactive/get-reactive-block-document (:db/id block))] [:<> - [:> HStack + [:> HStack {:lineHeight "1"} [:> Toggle {:isOpen (:open? @state) :on-click (fn [e] (.. e stopPropagation) (swap! state update :open? not))}] - [:> Breadcrumb {:fontSize "0.7em"} + [:> Breadcrumb {:fontSize "xs" :color "foreground.secondary"} (doall (for [{:keys [node/title block/string block/uid] :as breadcrumb-block} (if (or (:open? @state) (not (:focus? @state))) @@ -173,22 +107,20 @@ (when (not-empty refs) [:> VStack {:as "aside" :align "stretch" + :spacing 3 :key "Inline Linked References" :zIndex 2 - :mt 2 - :mb 4 - :ml 6 - :py 2 + :ml 4 :px 4 - :borderRadius "sm" + :borderRadius "md" :background "background.basement"} (doall (for [[group-title group] refs] - [reference-group {:title group-title - :key (str "group-" group-title)} + [:> ReferenceGroup {:title group-title + :key (str "group-" group-title)} (doall (for [block' group] - [reference-block {:key (str "ref-" (:block/uid block'))} + [:> ReferenceBlock {:key (str "ref-" (:block/uid block'))} [ref-comp block' state]]))]))]))) @@ -399,9 +331,7 @@ (when (not= string (:string/previous @state)) (swap! state assoc :string/previous string :string/local string)) - [:> Container {:sx (merge block-container-inner-style - {"--block-surface-color" "background.floor"}) - :isDragging (and dragging (not is-selected)) + [:> Container {:isDragging (and dragging (not is-selected)) :isSelected is-selected :hasChildren (seq children) :isOpen open diff --git a/src/cljs/athens/views/devtool.cljs b/src/cljs/athens/views/devtool.cljs index 41ee5291b3..4c7e7bb0c4 100644 --- a/src/cljs/athens/views/devtool.cljs +++ b/src/cljs/athens/views/devtool.cljs @@ -1,8 +1,7 @@ (ns athens.views.devtool (:require - ["@chakra-ui/react" :refer [Box Button Table Thead Tbody Th Tr Td Input ButtonGroup]] - ["@material-ui/icons/ChevronLeft" :default ChevronLeft] - ["@material-ui/icons/Clear" :default Clear] + ["/components/Icons/Icons" :refer [XmarkIcon ChevronLeftIcon]] + ["@chakra-ui/react" :refer [Box IconButton Button Table Thead Tbody Th Tr Td Input ButtonGroup]] [athens.config :as config] [athens.db :as db :refer [dsdb]] [cljs.pprint :as pp] @@ -231,7 +230,7 @@ (-> s (update :navs subvec 0 i) (dissoc :viewer))))} - [:<> [:> ChevronLeft] [:span (first nav)]]]))) + [:<> [:> ChevronLeftIcon] [:span (first nav)]]]))) [:h3 (pr-str (type navved-data))] [:div [:span "View as "] @@ -353,8 +352,8 @@ (defn devtool-close-el [] - [:> Button {:onClick #(dispatch [:devtool/toggle])} - [:> Clear]]) + [:> IconButton {:onClick #(dispatch [:devtool/toggle])} + [:> XmarkIcon]]) (defn devtool-el diff --git a/src/cljs/athens/views/pages/all_pages.cljs b/src/cljs/athens/views/pages/all_pages.cljs index 03aed2f98a..05de0ca749 100644 --- a/src/cljs/athens/views/pages/all_pages.cljs +++ b/src/cljs/athens/views/pages/all_pages.cljs @@ -7,7 +7,8 @@ [athens.db :as db] [athens.router :as router] [clojure.string :refer [lower-case]] - [re-frame.core :as rf])) + [re-frame.core :as rf] + [reagent.core :as r])) ;; Sort state and logic @@ -64,21 +65,28 @@ (defn- sortable-header ([column-id label width isNumeric] (let [sorted-by @(rf/subscribe [:all-pages/sorted-by]) - growing? @(rf/subscribe [:all-pages/sort-order-ascending?])] - [:> Th {:width width :isNumeric isNumeric} + growing? @(rf/subscribe [:all-pages/sort-order-ascending?]) + sort-icon (if growing? (r/as-element [:> ChevronUpIcon {:fontSize "0.5em"}]) + (r/as-element [:> ChevronDownIcon {:fontSize "0.5em"}]))] + [:> Th {:width width + :border 0 + :isNumeric isNumeric} [:> Button {:onClick #(rf/dispatch [:all-pages/sort-by column-id]) - :size "xs" + :size "sm" :textTransform "uppercase" + :display "flex" + :height "1em" + :overflow "hidden" :gap "0.25em" :variant "link" - :color "inherit" + :leftIcon (when (and isNumeric + (= column-id sorted-by)) + sort-icon) + :rightIcon (when (and (not isNumeric) + (= column-id sorted-by)) + sort-icon) :_hover {:textDecoration "none"}} - (when-not isNumeric label) - (when (= sorted-by column-id) - (if growing? - [:> ChevronUpIcon] - [:> ChevronDownIcon])) - (when isNumeric label)]]))) + label]]))) (defn page @@ -87,7 +95,8 @@ (fn [] (let [sorted-pages @(rf/subscribe [:all-pages/sorted all-pages])] [:> Box {:px 4 - :maxWidth "70rem" + :width "100%" + :maxWidth "75rem" :margin "calc(var(--app-header-height) + 2rem) auto 5rem"} [:> Table {:variant "striped"} [:> Thead diff --git a/src/cljs/athens/views/pages/daily_notes.cljs b/src/cljs/athens/views/pages/daily_notes.cljs index 87222c3373..6e7a6a93ef 100644 --- a/src/cljs/athens/views/pages/daily_notes.cljs +++ b/src/cljs/athens/views/pages/daily_notes.cljs @@ -33,7 +33,7 @@ :gap "1.5rem" :py "6rem" :px "2rem" - :alignItems "stretch" + :alignItems "center" :flex "1 1 100%" :flexDirection "column"} (doall diff --git a/src/cljs/athens/views/pages/graph.cljs b/src/cljs/athens/views/pages/graph.cljs index f76ff725ff..ef892959da 100644 --- a/src/cljs/athens/views/pages/graph.cljs +++ b/src/cljs/athens/views/pages/graph.cljs @@ -3,14 +3,10 @@ " Graph and controls are designed to work with local and global graph global graphs vs local graphs -- local graphs have an explicit root node - and customizations are based on that where as global doesn't have an explicit root - - Relies on material ui comps for user inputs."} + and customizations are based on that where as global doesn't have an explicit root"} athens.views.pages.graph (:require - ["@chakra-ui/react" :refer [Box Accordion AccordionButton AccordionItem AccordionPanel AccordionIcon]] - ["@material-ui/core/Slider" :as OldSlider] - ["@material-ui/core/Switch" :as OldSwitch] + ["@chakra-ui/react" :refer [Box Switch VStack FormControl FormLabel Input Accordion AccordionButton AccordionItem AccordionPanel]] ["react-force-graph-2d" :as ForceGraph2D] [athens.dates :as dates] [athens.db :as db] @@ -40,15 +36,6 @@ (def graph-ref-map (r/atom {})) -;; ------------------------------------------------------------------- -;; --- material ui --- - - -(def m-slider (r/adapt-react-class (.-default OldSlider))) - -(def m-switch (r/adapt-react-class (.-default OldSwitch))) - - ;; ------------------------------------------------------------------- ;; --- re-frame stuff --- ;; --- read comments at top of file for more --- @@ -169,117 +156,90 @@ ;; ------------------------------------------------------------------- ;; --- comps --- -(defn expansion-panel - [{:keys [heading controls]} local-node-eid] - (let [graph-conf @(subscribe [:graph/conf]) - graph-ref (get @graph-ref-map (or local-node-eid :global))] - [:> AccordionItem - [:> AccordionButton - [:> AccordionIcon] - heading] - [:> AccordionPanel - (doall - (for [{:keys [key comp label onChange no-simulation-reheat? props class]} controls] - ^{:key key} - [:div {:class class} label - [comp - (merge - props - {:value (key graph-conf) - :color "primary" - :onChange (fn [_ n-val] - (and onChange (onChange n-val)) - (rf/dispatch [:graph/set-conf key n-val]) - (when-not no-simulation-reheat? - (.d3ReheatSimulation graph-ref)))})]]))]])) - (defn graph-controls - "Uses a generic expansion panel(not super generic) - while this comp dictates all the controls and manipulations that can be made to the graph - Look at comment below for code theme - to get a sense of the structure" - ([] [graph-controls nil]) - ([local-node-eid] - (fn [] - (let [graph-conf @(subscribe [:graph/conf]) - graph-ref (get @graph-ref-map (or local-node-eid :global)) - - ;; code theme - ;; category -- for eg node-section and section related data - ;; controls -- for eg node-controls and their props - ;; props -- for eg orphans? inside a control are props for the editing-comp(for slider or toggle) - ;; other-keys describe more about the comp - node-controls [{:key :hlt-link-levels - :label "No. of link levels to highlight" - :props {:min 1 - :max 5 - :step 1 - :marks true} - :comp m-slider - :no-simulation-reheat? true} - {:key :orphans? - :label "Orphan nodes" - :comp m-switch - :props {:checked (:orphans? graph-conf)} - :class "switch" - :no-simulation-reheat? true} - {:key :daily-notes? - :label "Daily notes" - :comp m-switch - :props {:checked (:daily-notes? graph-conf)} - :class "switch" - :no-simulation-reheat? true}] - node-section {:heading "Nodes" - :controls node-controls} - - - force-controls [{:key :link-distance - :label "Link Distance" - :props {:min 5 - :max 95} - :comp m-slider - :class "slider" - :onChange (fn [val] (and graph-ref (.. graph-ref (d3Force "link") (distance val))))} - {:key :charge-strength - :label "Attraction force" - :props {:min -30 - :max 0} - :comp m-slider - :class "slider" - :onChange (fn [val] (and graph-ref (.. graph-ref (d3Force "charge") (strength val))))}] - force-section {:heading "Forces" - :controls force-controls} - - local-controls [{:key :local-depth - :label "Local Depth" - :props {:min 1 - :max 5 - :step 1 - :marks true} - :class "slider" - :comp m-slider - :no-simulation-reheat? true} - {:key :root-links-only? - :label "Only root links" - :comp m-switch - :class "switch" - :props {:checked (:root-links-only? graph-conf)} - :no-simulation-reheat? true}] - local-section {:heading "Local options" - :controls local-controls}] - [:> Accordion {:width "14em" - :position "fixed" - :allowMultiple true - :top "4rem" - :right 0} - (doall - (for [{:keys [heading] :as section} (remove nil? [(when-not local-node-eid - node-section) - force-section - (when local-node-eid - local-section)])] - ^{:key heading} - [expansion-panel section local-node-eid]))])))) + [local-node-eid] + (fn [] + (let [graph-conf @(subscribe [:graph/conf]) + graph-ref (get @graph-ref-map (or local-node-eid :global))] + [:> Accordion {:width "14em" + :defaultIndex 0 + :position "absolute" + :bg "background.basement" + :overflow "hidden" + :p 0 + :borderRadius "md" + :allowToggle true + :allowMultiple true + :bottom 2 + :right 2} + (when-not local-node-eid + [:> AccordionItem {:borderTop 0} + [:> AccordionButton {:borderRadius "sm"} + "Nodes"] + [:> AccordionPanel + [:> VStack {:align "stretch"} + [:> FormControl + [:> FormLabel "Highlighted link levels"] + [:> Input {:type "number" + :value (or (:hlt-link-levels graph-conf) 1) + :min 1 + :max 5 + :step 1 + :onChange (fn [e] (rf/dispatch [:graph/set-conf :hlt-link-levels (.. e -target -value)]))}]] + [:> Switch {:isChecked (:orphans? graph-conf) + :onChange (fn [e] + (rf/dispatch [:graph/set-conf :orphans? (.. e -target -checked)]) + (.d3ReheatSimulation graph-ref))} + "Orphan nodes"] + [:> Switch {:isChecked (:daily-notes? graph-conf) + :onChange (fn [e] + (rf/dispatch [:graph/set-conf :daily-notes? (.. e -target -checked)]) + (.d3ReheatSimulation graph-ref))} + "Daily notes"]]]]) + [:> AccordionItem + [:> AccordionButton {:borderRadius "sm"} + "Forces"] + [:> AccordionPanel + [:> VStack {:align "stretch"} + [:> FormControl + [:> FormLabel "Link distance"] + [:> Input {:type "number" + :value (:link-distance graph-conf) + :min 5 + :max 95 + :step 10 + :onChange (fn [e] + ((and graph-ref (.. graph-ref (d3Force "link") (distance (.. e -target -value))))) + (.d3ReheatSimulation graph-ref))}]] + [:> FormControl + [:> FormLabel "Attraction force"] + [:> Input {:type "number" + :value (:charge-strength graph-conf) + :min -30 + :max 0 + :step 5 + :onChange (fn [e] + ((and graph-ref (.. graph-ref (d3Force "charge") (distance (.. e -target -value))))) + (.d3ReheatSimulation graph-ref))}]]]]] + (when local-node-eid + [:> AccordionItem + [:> AccordionButton {:borderRadius "sm"} + "Local options"] + [:> AccordionPanel + [:> VStack {:align "stretch"} + [:> FormControl + [:> FormLabel "Local depth"] + [:> Input {:type "number" + :value (:local-depth graph-conf) + :min 1 + :max 5 + :step 1 + :onChange (fn [e] (rf/dispatch [:graph/set-conf :local-depth (.. e -target -value)]))}]] + [:> Switch {:isChecked (:root-links-only? graph-conf) + :onChange (fn [e] + (rf/dispatch [:graph/set-conf :root-links-only? (.. e -target -checked)]))} + "Only root links?"]]]])]))) (defn graph-root @@ -296,12 +256,13 @@ {:component-did-mount (fn [this] (let [dom-node (dom/dom-node this) + dom-root (if local-node-eid ".graph-page" "#app") graph-conf @(subscribe [:graph/conf]) graph-ref (get @graph-ref-map (or local-node-eid :global))] ;; set canvas dimensions - (swap! dimensions assoc :width (-> dom-node (.. (closest "#app")) + (swap! dimensions assoc :width (-> dom-node (.. (closest dom-root)) .-parentNode .-clientWidth)) - (swap! dimensions assoc :height (-> dom-node (.. (closest "#app")) + (swap! dimensions assoc :height (-> dom-node (.. (closest dom-root)) .-parentNode .-clientHeight)) ;; set init forces for graph (when graph-ref @@ -463,12 +424,22 @@ (let [local-node-eid (when block-uid (->> [:block/uid block-uid] (d/pull @db/dsdb '[:db/id]) :db/id))] - [:> Box {:class "graph-page" - :gridColumn "1 / -1" - :position "fixed" - :top 0 - :left 0 - :width "100vw" - :height "100vh"} - [graph-root local-node-eid] + [:<> + [:> Box (if local-node-eid + {:class "graph-page" + :alignSelf "stretch" + :justifySelf "stretch" + :overflow "hidden" + :height "20em" + :borderRadius "lg" + :bg "background.basement" + :position "relative"} + {:class "graph-page" + :gridColumn "1 / -1" + :position "fixed" + :top 0 + :left 0 + :width "100vw" + :height "100vh"}) + [graph-root local-node-eid]] [graph-controls local-node-eid]]))) diff --git a/src/cljs/athens/views/pages/node_page.cljs b/src/cljs/athens/views/pages/node_page.cljs index 0139d40cd1..d2a3b40deb 100644 --- a/src/cljs/athens/views/pages/node_page.cljs +++ b/src/cljs/athens/views/pages/node_page.cljs @@ -2,13 +2,10 @@ (:require ["/components/Block/components/Anchor" :refer [Anchor]] ["/components/Confirmation/Confirmation" :refer [Confirmation]] + ["/components/Icons/Icons" :refer [EllipsisHorizontalIcon GraphIcon BookmarkIcon BookmarkFillIcon TrashIcon]] + ["/components/Layout/Layout" :refer [PageReferences ReferenceBlock ReferenceGroup]] ["/components/Page/Page" :refer [PageHeader PageBody PageFooter TitleContainer]] - ["@chakra-ui/react" :refer [Text Box Button Portal IconButton AccordionIcon AccordionItem AccordionPanel MenuDivider MenuButton Menu MenuList MenuItem Accordion AccordionButton Breadcrumb BreadcrumbItem BreadcrumbLink VStack]] - ["@material-ui/icons/Bookmark" :default Bookmark] - ["@material-ui/icons/BookmarkBorder" :default BookmarkBorder] - ["@material-ui/icons/BubbleChart" :default BubbleChart] - ["@material-ui/icons/Delete" :default Delete] - ["@material-ui/icons/MoreHoriz" :default MoreHoriz] + ["@chakra-ui/react" :refer [Box Button Portal IconButton MenuDivider MenuButton Menu MenuList MenuItem Breadcrumb BreadcrumbItem BreadcrumbLink VStack]] [athens.common-db :as common-db] [athens.common.sentry :refer-macros [wrap-span-no-new-tx]] [athens.common.utils :as utils] @@ -21,7 +18,6 @@ [athens.views.blocks.core :as blocks] [athens.views.blocks.textarea-keydown :as textarea-keydown] [athens.views.hoc.perf-mon :as perf-mon] - [athens.views.references :refer [reference-group reference-block]] [clojure.string :as str] [datascript.core :as d] [komponentit.autosize :as autosize] @@ -217,30 +213,31 @@ "aria-label" "Page menu" :gridArea "menu" :justifySelf "flex-end" + :size "md" :alignSelf "center" :bg "transparent" - :height "2.25em" :width "2.25em" :mr "0.5em" :borderRadius "full" :sx {"span" {:display "contents"} "button svg:first-of-type" {:marginRight "0.25rem"}}} - [:> MoreHoriz]] + [:> EllipsisHorizontalIcon]] [:> Portal [:> MenuList {:sx {"button svg:first-of-type" {:marginRight "0.25rem"}}} [:<> (if sidebar - [:> MenuItem {:onClick #(dispatch [:left-sidebar/remove-shortcut title])} - [:> BookmarkBorder] + [:> MenuItem {:onClick #(dispatch [:left-sidebar/remove-shortcut title]) + :icon (r/as-element [:> BookmarkFillIcon])} "Remove Shortcut"] - [:> MenuItem {:onClick #(dispatch [:left-sidebar/add-shortcut title])} - [:> Bookmark] + [:> MenuItem {:onClick #(dispatch [:left-sidebar/add-shortcut title]) + :icon (r/as-element [:> BookmarkIcon])} [:span "Add Shortcut"]]) - [:> MenuItem {:onClick #(dispatch [:right-sidebar/open-item uid true])} - [:> BubbleChart] + [:> MenuItem {:onClick #(dispatch [:right-sidebar/open-item uid true]) + :icon (r/as-element [:> GraphIcon])} "Show Local Graph"]] [:> MenuDivider] - [:> MenuItem {:onClick (fn [] + [:> MenuItem {:icon (r/as-element [:> TrashIcon]) + :onClick (fn [] ;; if page being deleted is in right sidebar, remove from right sidebar (when (contains? @(subscribe [:right-sidebar/items]) uid) (dispatch [:right-sidebar/close-item uid])) @@ -255,7 +252,7 @@ (if daily-note? (dispatch [:daily-note/delete uid title]) (dispatch [:page/delete title])))} - [:> Delete] "Delete Page"]]]])) + "Delete Page"]]]])) (defn ref-comp @@ -270,8 +267,8 @@ (fn [_] (let [{:keys [block parents embed-id]} @state block (reactive/get-reactive-block-document (:db/id block))] - [:<> - [:> Breadcrumb {:fontSize "0.7em" :pl 6 :opacity 0.75} + [:> VStack {:spacing 0 :align "stretch"} + [:> Breadcrumb {:fontSize "sm" :pl 4 :variant "strict" :color "foreground.secondary"} (doall (for [{:keys [node/title block/string block/uid]} parents] [:> BreadcrumbItem {:key (str "breadcrumb-" uid)} @@ -288,119 +285,94 @@ (defn linked-ref-el - [state daily-notes? title] + [state title] (let [linked? "Linked References" linked-refs (wrap-span-no-new-tx "get-reactive-linked-references" (reactive/get-reactive-linked-references [:node/title title]))] - (when (or (and daily-notes? (not-empty linked-refs)) - (not daily-notes?)) - [:> Accordion {:index (if (get @state linked?) 0 nil)} - [:> AccordionItem - [:h2 - [:> AccordionButton {:onClick (fn [] (swap! state update linked? not))} - [:> AccordionIcon] - linked? - [:> Text {:ml "auto" - :fontWeight "medium" - :color "foreground.secondary" - :borderRadius "full"} - (count linked-refs)]]] - [:> AccordionPanel {:p 0} - [:> VStack {:spacing 6 - :pl 9 - :align "stretch"} - (doall - (for [[group-title group] linked-refs] - [reference-group {:key (str "group-" group-title) - :title group-title - :on-click-title (fn [e] - (let [shift? (.-shiftKey e) - parsed-title (parse-renderer/parse-title group-title)] - (rf/dispatch [:reporting/navigation {:source :main-page-linked-refs ; NOTE: this might be also used in right-pane situation - :target :page - :pane (if shift? - :right-pane - :main-pane)}]) - (router/navigate-page parsed-title e)))} - (doall - (for [block group] - [reference-block {:key (str "ref-" (:block/uid block))} - [ref-comp block]]))]))]]]]))) + (when (not-empty linked-refs) + [:> PageReferences {:count (count linked-refs) + :title "Linked References" + :onOpen (fn [] (swap! state update linked? not)) + :onClose (fn [] (swap! state update linked? not)) + :defaultIsOpen (get @state linked?)} + (doall + (for [[group-title group] linked-refs] + [:> ReferenceGroup {:key (str "group-" group-title) + :title group-title + :onClickTitle (fn [e] + (let [shift? (.-shiftKey e) + parsed-title (parse-renderer/parse-title group-title)] + (rf/dispatch [:reporting/navigation {:source :main-page-linked-refs ; NOTE: this might be also used in right-pane situation + :target :page + :pane (if shift? + :right-pane + :main-pane)}]) + (router/navigate-page parsed-title e)))} + (doall + (for [block group] + [:> ReferenceBlock {:key (str "ref-" (:block/uid block))} + [ref-comp block]]))]))]))) (defn unlinked-ref-el - [state daily-notes? unlinked-refs title] - (let [unlinked? "Unlinked References"] - (when (not daily-notes?) - [:> Accordion {:index (if (get @state unlinked?) 0 nil)} - [:> AccordionItem {:isDisabled (empty @unlinked-refs)} - [:> Box {:as "h2" :position "relative"} - [:> AccordionButton {:onClick (fn [] - (if (get @state unlinked?) - (swap! state assoc unlinked? false) - (let [un-refs (get-unlinked-references (escape-str title))] - (swap! state assoc unlinked? true) - (reset! unlinked-refs un-refs))))} - [:> AccordionIcon] - unlinked? - [:> Text {:ml "auto" - :fontWeight "medium" - :color "foreground.secondary" - :borderRadius "full"} - (count @unlinked-refs)]] - (when (and unlinked? (not-empty @unlinked-refs)) - [:> Button {:position "absolute" - :size "xs" - :top 1 - :right 1 - :onClick (fn [] - (let [unlinked-str-ids (->> @unlinked-refs - (mapcat second) - (map #(select-keys % [:block/string :block/uid])))] ; to remove the unnecessary data before dispatching the event - (dispatch [:unlinked-references/link-all unlinked-str-ids title])) - - (swap! state assoc unlinked? false) - - (reset! unlinked-refs []))} - "Link All"])] - [:> AccordionPanel {:p 0} - [:> VStack {:spacing 6 - :pl 1 - :align "stretch"} + [state unlinked-refs title] + (let [unlinked? "Unlinked References" + link-all-unlinked (fn [] + (let [unlinked-str-ids + (->> @unlinked-refs + (mapcat second) + (map #(select-keys % [:block/string :block/uid])))] ; to remove the unnecessary data before dispatching the event + (dispatch [:unlinked-references/link-all unlinked-str-ids title])) + (swap! state assoc unlinked? false) + (reset! unlinked-refs []))] + [:> PageReferences {:defaultIsOpen false + :count (count @unlinked-refs) + :showIfEmpty true + :refs @unlinked-refs + :title "Unlinked References" + :extras (r/as-element [:> Button {:variant "link" + :size "sm" + :flexShrink 0 + :onClick link-all-unlinked} + "Link all"]) + :onOpen #(let [un-refs (get-unlinked-references (escape-str title))] + (swap! state assoc unlinked? true) + (reset! unlinked-refs un-refs)) + :onClose #(swap! state assoc unlinked? false)} + (doall + (for [[[group-title] group] @unlinked-refs] + [:> ReferenceGroup + {:title group-title + :onClickTitle (fn [e] + (let [shift? (.-shiftKey e) + parsed-title (parse-renderer/parse-title group-title)] + (rf/dispatch [:reporting/navigation {:source :main-unlinked-refs ; NOTE: this isn't always `:main-unlinked-refs` it can also be `:right-pane-unlinked-refs` + :target :page + :pane (if shift? + :right-pane + :main-pane)}]) + (router/navigate-page parsed-title e)))} (doall - (for [[[group-title] group] @unlinked-refs] - [reference-group - {:title group-title - :on-click-title (fn [e] - (let [shift? (.-shiftKey e) - parsed-title (parse-renderer/parse-title group-title)] - (rf/dispatch [:reporting/navigation {:source :main-unlinked-refs ; NOTE: this isn't always `:main-unlinked-refs` it can also be `:right-pane-unlinked-refs` - :target :page - :pane (if shift? - :right-pane - :main-pane)}]) - (router/navigate-page parsed-title e)))} - (doall - (for [block group] - [reference-block - {:key (str "ref-" (:block/uid block)) - :actions (when unlinked? - [:> Button {:marginTop "1.5em" - :size "xs" - :flex "0 0" - :float "right" - :variant "link" - :onClick (fn [] - (let [hm (into (hash-map) @unlinked-refs) - new-unlinked-refs (->> (update-in hm [group-title] #(filter (fn [{:keys [block/uid]}] - (= uid (:block/uid block))) - %)) - seq)] - ;; ctrl-z doesn't work though, because Unlinked Refs aren't reactive to datascript. - (reset! unlinked-refs new-unlinked-refs) - (dispatch [:unlinked-references/link block title])))} - "Link"])} - [ref-comp block]]))]))]]]]))) + (for [block group] + [:> ReferenceBlock + {:key (str "ref-" (:block/uid block)) + :actions (when unlinked? + (r/as-element [:> Button {:marginTop "1.5em" + :size "xs" + :flex "0 0" + :float "right" + :variant "link" + :onClick (fn [] + (let [hm (into (hash-map) @unlinked-refs) + new-unlinked-refs (->> (update-in hm [group-title] #(filter (fn [{:keys [block/uid]}] + (= uid (:block/uid block))) + %)) + seq)] + ;; ctrl-z doesn't work though, because Unlinked Refs aren't reactive to datascript. + (reset! unlinked-refs new-unlinked-refs) + (dispatch [:unlinked-references/link block title])))} + "Link"]))} + [ref-comp block]]))]))])) ;; TODO: where to put page-level link filters? @@ -475,9 +447,10 @@ ;; References [:> PageFooter [perf-mon/hoc-perfmon-no-new-tx {:span-name "linked-ref-el"} - [linked-ref-el state on-daily-notes? title]] - [perf-mon/hoc-perfmon-no-new-tx {:span-name "unlinked-ref-el"} - [unlinked-ref-el state on-daily-notes? unlinked-refs title]]]])))) + [linked-ref-el state title]] + (when-not on-daily-notes? + [perf-mon/hoc-perfmon-no-new-tx {:span-name "unlinked-ref-el"} + [unlinked-ref-el state unlinked-refs title]])]])))) (defn page diff --git a/src/cljs/athens/views/references.cljs b/src/cljs/athens/views/references.cljs index 8dc8bc756e..5a773a9f18 100644 --- a/src/cljs/athens/views/references.cljs +++ b/src/cljs/athens/views/references.cljs @@ -29,9 +29,9 @@ (defn reference-group ([props children] (let [{:keys [on-click-title title]} props] - [:> VStack {:spacing 2 :align "stretch"} - [reference-header {:on-click on-click-title - :title title}] + [:> VStack {:spacing 0 :align "stretch"} + (when title [reference-header {:on-click on-click-title + :title title}]) children]))) diff --git a/src/js/components/AppToolbar/AppToolbar.tsx b/src/js/components/AppToolbar/AppToolbar.tsx index 7541aa6fa9..89f215c6fa 100644 --- a/src/js/components/AppToolbar/AppToolbar.tsx +++ b/src/js/components/AppToolbar/AppToolbar.tsx @@ -10,14 +10,11 @@ import { AllPagesIcon, SettingsIcon, ContrastIcon, - DailyNotesIcon + DailyNotesIcon, + GraphIcon, + EllipsisHorizontalIcon } from '@/Icons/Icons'; -import { - BubbleChart, - MoreHoriz, -} from '@material-ui/icons'; - import { HTMLChakraProps, Portal, @@ -228,7 +225,7 @@ const SecondaryToolbarItems = (items) => { const SecondaryToolbarOverflowMenu = (items) => { return {({ isOpen }) => <> - + {items.map((item) => ( { aria-label="Graph" isActive={route === 'graph'} onClick={handlePressGraph}> - + - + - + {isWinFullscreen ? ( ) : ( @@ -182,9 +181,9 @@ export const WindowButtons = ({ onClick={handlePressClose} className="close" > - + - + ) } diff --git a/src/js/components/Block/components/Anchor.tsx b/src/js/components/Block/components/Anchor.tsx index 81bf59ebf5..04b8bd368c 100644 --- a/src/js/components/Block/components/Anchor.tsx +++ b/src/js/components/Block/components/Anchor.tsx @@ -88,17 +88,17 @@ const anchorButtonStyleProps = (isClosedWithChildren) => { position: 'relative', appearance: "none", border: "0", - color: "inherit", + color: "foreground.secondary", display: "flex", placeItems: "center", placeContent: "center", + alignSelf: "flex-start", + minHeight: "inherit", zIndex: 2, minWidth: "0", - minHeight: "0", - h: "2em", - w: "fit-content", + h: "auto", + w: "auto", fontSize: "inherit", - mx: "-0.125em", size: "sm", p: 0, sx: { @@ -108,7 +108,6 @@ const anchorButtonStyleProps = (isClosedWithChildren) => { overflow: "visible", // Prevents the bullet being cropped width: "1em", height: "1em", - color: "foreground.secondary", "*": { vectorEffect: "non-scaling-stroke" } diff --git a/src/js/components/Block/components/Autocomplete.tsx b/src/js/components/Block/components/Autocomplete.tsx index 40ce7be85f..0f1a18deb8 100644 --- a/src/js/components/Block/components/Autocomplete.tsx +++ b/src/js/components/Block/components/Autocomplete.tsx @@ -1,7 +1,8 @@ import React from 'react'; import { - Box, PopoverBody, Popover, + Box, + Popover, Button, PopoverTrigger, useOutsideClick, diff --git a/src/js/components/Block/components/Container.tsx b/src/js/components/Block/components/Container.tsx index bd9fb77845..74862d1c86 100644 --- a/src/js/components/Block/components/Container.tsx +++ b/src/js/components/Block/components/Container.tsx @@ -1,6 +1,8 @@ import { Box } from "@chakra-ui/react"; import { withErrorBoundary } from "react-error-boundary"; +const ERROR_MESSAGE = "An error occurred while rendering this block."; + const _Container = ({ children, isDragging, isSelected, isOpen, hasChildren, hasPresence, isLinkedRef, uid, childrenUids, ...props }) => { return .block-toggle, &:focus-within > .block-toggle": { opacity: "1" }, @@ -97,4 +100,4 @@ const _Container = ({ children, isDragging, isSelected, isOpen, hasChildren, has > {children}; } -export const Container = withErrorBoundary(_Container, { fallback:
oops
}); \ No newline at end of file +export const Container = withErrorBoundary(_Container, { fallback:

{ERROR_MESSAGE}

}); \ No newline at end of file diff --git a/src/js/components/Block/components/Content.tsx b/src/js/components/Block/components/Content.tsx index 63c4984561..657a6a6f9c 100644 --- a/src/js/components/Block/components/Content.tsx +++ b/src/js/components/Block/components/Content.tsx @@ -17,6 +17,12 @@ const _Content = ({ children, fontSize, ...props }) => { wordBreak="break-word" fontSize={fontSize} sx={{ + // DANGER DANGER DANGER + // + // The styles below are essential to the + // basic basic editing workflow. + // Do not modify them without good reason. + // // make the textarea transparent "textarea": { display: "block", @@ -42,15 +48,10 @@ const _Content = ({ children, fontSize, ...props }) => { "& > span": { gridArea: "main", }, - // deactivate noninteractive (text) content - "div, span, p, blockquote": { - pointerEvents: "none", - }, // activate interactive content (links, buttons, etc.) "a, button, label, video, embed, iframe, img": { pointerEvents: "auto", zIndex: 2, - position: "relative" }, // manage the textarea interactions "&:hover textarea:not:(.is-editing)": { lineHeight: 2 }, @@ -129,8 +130,7 @@ const _Content = ({ children, fontSize, ...props }) => { borderRadius: "0.125rem", background: "highlight", } - } - } + }} {...props} > {children} } diff --git a/src/js/components/Block/components/Toggle.tsx b/src/js/components/Block/components/Toggle.tsx index bd357f4df9..e125a6871b 100644 --- a/src/js/components/Block/components/Toggle.tsx +++ b/src/js/components/Block/components/Toggle.tsx @@ -9,7 +9,7 @@ interface ToggleProps extends React.HTMLAttributes { /** * Button to toggle the visibility of a block's child blocks. */ -export const Toggle = (props) => { +export const Toggle = (props: ToggleProps) => { const { isOpen, onClick } = props; return ( @@ -23,16 +23,16 @@ export const Toggle = (props) => { position='relative' appearance="none" border="0" - color="inherit" + color="foreground.secondary" display="flex" placeItems="center" placeContent="center" + alignSelf="flex-start" + minHeight="inherit" zIndex={2} minWidth="0" - minHeight="0" - h="2em" fontSize="inherit" - mx="-0.125em" + h="auto" size="sm" p={0} sx={{ @@ -41,7 +41,6 @@ export const Toggle = (props) => { overflow: "visible", width: "1em", height: "1em", - color: "foreground.secondary", transition: 'transform 0.1s ease-in-out', transform: `rotate(${isOpen ? 90 : 0}deg)`, @@ -53,10 +52,7 @@ export const Toggle = (props) => { onClick={onClick} > { ) }; - -// /** -// * Button to toggle the visibility of a block's child blocks. -// */ -// export const Toggle = React.forwardRef((props: ToggleProps, ref) => { -// const { isOpen, onClick } = props; - -// return ( -// -// -// -// -// -// ) -// }); diff --git a/src/js/components/Icons/Icons.tsx b/src/js/components/Icons/Icons.tsx index ab80e4b8f5..b2d7b40093 100644 --- a/src/js/components/Icons/Icons.tsx +++ b/src/js/components/Icons/Icons.tsx @@ -24,11 +24,54 @@ export const ArrowRightIcon = createIcon({ ), }); +export const BookmarkIcon = createIcon({ + displayName: 'BookmarkIcon', + viewBox: '0 0 24 24', + path: ( + + ), +}); + +export const BookmarkFillIcon = createIcon({ + displayName: 'BookmarkFillIcon', + viewBox: '0 0 24 24', + path: ( + <> + + + + ), +}); + +export const LinkedIcon = createIcon({ + displayName: 'LinkedIcon', + viewBox: '0 0 24 24', + path: ( + + ), +}) + +export const UnlinkedIcon = createIcon({ + displayName: 'UnlinkedIcon', + viewBox: '0 0 24 24', + path: ( + + ) +}) + export const BlockEmbedIcon = createIcon({ - displayName: 'Block EmbedIcon', + displayName: 'BlockEmbedIcon', viewBox: '0 0 24 24', path: ( - <> + + ), +}); + +export const DailyNotesIcon = createIcon({ + displayName: 'DailyNotesIcon', + viewBox: '0 0 24 24', + path: ( + ), }); @@ -72,6 +115,14 @@ export const CheckmarkIcon = createIcon({ ), }); +export const CheckmarkCircleFillIcon = createIcon({ + displayName: 'CheckmarkCircleFillIcon', + viewBox: '0 0 24 24', + path: ( + + ), +}); + export const ChevronDownIcon = createIcon({ displayName: 'ChevronDownIcon', viewBox: '0 0 24 24', @@ -112,11 +163,19 @@ export const ContrastIcon = createIcon({ ), }); -export const DailyNotesIcon = createIcon({ - displayName: 'DailyNotesIcon', +export const EllipsisHorizontalIcon = createIcon({ + displayName: 'EllipsisHorizontalIcon', + viewBox: '0 0 24 24', + path: ( + + ), +}); + +export const ExclamationCircleFillIcon = createIcon({ + displayName: 'ExclamationCircleFillIcon', viewBox: '0 0 24 24', path: ( - <> + ), }); @@ -144,14 +203,6 @@ export const HelpIcon = createIcon({ ), }); -export const LinkedIcon = createIcon({ - displayName: 'LinkedIcon', - viewBox: '0 0 24 24', - path: ( - <> - ), -}); - export const MenuIcon = createIcon({ displayName: 'MenuIcon', viewBox: '0 0 24 24', @@ -176,6 +227,22 @@ export const ParenRightIcon = createIcon({ ), }); +export const PencilIcon = createIcon({ + displayName: 'PencilIcon', + viewBox: '0 0 24 24', + path: ( + + ), +}); + +export const PencilBarIcon = createIcon({ + displayName: 'PencilBarIcon', + viewBox: '0 0 24 24', + path: ( + + ), +}); + export const RightSidebarIcon = createIcon({ displayName: 'RightSidebarIcon', viewBox: '0 0 24 24', @@ -224,6 +291,14 @@ export const TimeNow = createIcon({ ), }); +export const TrashIcon = createIcon({ + displayName: 'TrashIcon', + viewBox: '0 0 24 24', + path: ( + + ), +}); + export const YoutubeIcon = createIcon({ displayName: 'YoutubeIcon', viewBox: '0 0 24 24', diff --git a/src/js/components/Layout/Layout.tsx b/src/js/components/Layout/Layout.tsx index 99fa570f01..c8361bcf8c 100644 --- a/src/js/components/Layout/Layout.tsx +++ b/src/js/components/Layout/Layout.tsx @@ -1,8 +1,9 @@ -import { Button, IconButton, Box, Collapse, VStack } from '@chakra-ui/react'; import { AnimatePresence, motion } from 'framer-motion'; import { XmarkIcon, ChevronRightIcon } from '@/Icons/Icons'; +import { Button, IconButton, Box, useDisclosure, Collapse, Text, VStack, HStack } from '@chakra-ui/react'; +import { withErrorBoundary } from 'react-error-boundary'; -const Container = motion(Box) +const Container = motion(Box); export const RightSidebarContainer = ({ isOpen, width, isDragging, children }) => { return @@ -46,6 +47,9 @@ export const RightSidebarContainer = ({ isOpen, width, isDragging, children }) = } export const SidebarItem = ({ title, type, isOpen, onToggle, onRemove, children }) => { + + const canToggle = type !== 'graph'; + return ( - ) -} \ No newline at end of file +} + +export const PageReference = ({ children }) => { + return ( + + {children} + + ) +} + +interface PageReferences { + children: React.ReactNode, + extras: React.ReactNode, + showIfEmpty: boolean, + count: number, + title: string, + defaultIsOpen: boolean, + onOpen: () => void, + onClose: () => void, +} + +export const ReferenceHeader = ({ onClick, title }) => { + return +} + +export const ReferenceGroup = ({ title, onClickTitle, children }) => { + return ( + + {title && } + {children} + + ) +} + +export const ReferenceBlock = ({ children, actions }) => { + if (actions) { + return ({children} {actions}) + } else { + return {children} + } +} + +const EmptyReferencesNotice = ({ title }: { title: string }) => { + return ( + No {title.toLowerCase()} + ) +} + +export const PageReferences = withErrorBoundary(({ children, count, title, defaultIsOpen, onOpen, onClose, extras }: PageReferences) => { + + const { isOpen, onToggle } = useDisclosure({ + defaultIsOpen: defaultIsOpen, + onClose: onClose, + onOpen: onOpen + }); + + const isShowingContent = isOpen && !!children; + + return ( + + + + } + > + {title} + {!!count && {count}} + + {isShowingContent && extras} + + + + {children} + + + ) +}, + { fallback: Error displaying references }) diff --git a/src/js/components/Page/Page.tsx b/src/js/components/Page/Page.tsx index 35b464434a..01f22d84d3 100644 --- a/src/js/components/Page/Page.tsx +++ b/src/js/components/Page/Page.tsx @@ -35,6 +35,7 @@ export const PageContainer = ({ children, uid, type }) => {children} export const HeaderImage = ({ src }) => .chakra-button__icon svg": { - height: "1.5em", - width: "1.5em", - }, _active: { transitionDuration: "0s", }, @@ -298,7 +320,11 @@ const components = { variants: { link: { color: "link", - borderRadius: "1px" + borderRadius: "1px", + _active: { + color: "link", + opacity: 0.8, + } }, solid: { bg: "interaction.surface", diff --git a/yarn.lock b/yarn.lock index 61f0debd28..688a3aa12c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1679,7 +1679,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.7": +"@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5": version "7.14.0" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6" integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA== @@ -2692,77 +2692,6 @@ lodash "^4.17.15" tmp-promise "^3.0.2" -"@material-ui/core@^4.10.1": - version "4.11.4" - resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.11.4.tgz#4fb9fe5dec5dcf780b687e3a40cff78b2b9640a4" - integrity sha512-oqb+lJ2Dl9HXI9orc6/aN8ZIAMkeThufA5iZELf2LQeBn2NtjVilF5D2w7e9RpntAzDb4jK5DsVhkfOvFY/8fg== - dependencies: - "@babel/runtime" "^7.4.4" - "@material-ui/styles" "^4.11.4" - "@material-ui/system" "^4.11.3" - "@material-ui/types" "5.1.0" - "@material-ui/utils" "^4.11.2" - "@types/react-transition-group" "^4.2.0" - clsx "^1.0.4" - hoist-non-react-statics "^3.3.2" - popper.js "1.16.1-lts" - prop-types "^15.7.2" - react-is "^16.8.0 || ^17.0.0" - react-transition-group "^4.4.0" - -"@material-ui/icons@^4.9.1": - version "4.11.2" - resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5" - integrity sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ== - dependencies: - "@babel/runtime" "^7.4.4" - -"@material-ui/styles@^4.11.4": - version "4.11.4" - resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.4.tgz#eb9dfccfcc2d208243d986457dff025497afa00d" - integrity sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew== - dependencies: - "@babel/runtime" "^7.4.4" - "@emotion/hash" "^0.8.0" - "@material-ui/types" "5.1.0" - "@material-ui/utils" "^4.11.2" - clsx "^1.0.4" - csstype "^2.5.2" - hoist-non-react-statics "^3.3.2" - jss "^10.5.1" - jss-plugin-camel-case "^10.5.1" - jss-plugin-default-unit "^10.5.1" - jss-plugin-global "^10.5.1" - jss-plugin-nested "^10.5.1" - jss-plugin-props-sort "^10.5.1" - jss-plugin-rule-value-function "^10.5.1" - jss-plugin-vendor-prefixer "^10.5.1" - prop-types "^15.7.2" - -"@material-ui/system@^4.11.3": - version "4.11.3" - resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.11.3.tgz#466bc14c9986798fd325665927c963eb47cc4143" - integrity sha512-SY7otguNGol41Mu2Sg6KbBP1ZRFIbFLHGK81y4KYbsV2yIcaEPOmsCK6zwWlp+2yTV3J/VwT6oSBARtGIVdXPw== - dependencies: - "@babel/runtime" "^7.4.4" - "@material-ui/utils" "^4.11.2" - csstype "^2.5.2" - prop-types "^15.7.2" - -"@material-ui/types@5.1.0": - version "5.1.0" - resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2" - integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A== - -"@material-ui/utils@^4.11.2": - version "4.11.2" - resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.2.tgz#f1aefa7e7dff2ebcb97d31de51aecab1bb57540a" - integrity sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA== - dependencies: - "@babel/runtime" "^7.4.4" - prop-types "^15.7.2" - react-is "^16.8.0 || ^17.0.0" - "@mdx-js/loader@^1.6.22": version "1.6.22" resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-1.6.22.tgz#d9e8fe7f8185ff13c9c8639c048b123e30d322c4" @@ -4330,13 +4259,6 @@ dependencies: "@types/react" "*" -"@types/react-transition-group@^4.2.0": - version "4.4.1" - resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.1.tgz#e1a3cb278df7f47f17b5082b1b3da17170bd44b1" - integrity sha512-vIo69qKKcYoJ8wKCJjwSgCTM+z3chw3g18dkrDfVX665tMH7tmbDxEAnPdey4gTlwZz5QuHGzd+hul0OVZDqqQ== - dependencies: - "@types/react" "*" - "@types/react@*": version "17.0.8" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.8.tgz#fe76e3ba0fbb5602704110fd1e3035cf394778e3" @@ -6098,11 +6020,6 @@ clone-response@^1.0.2: dependencies: mimic-response "^1.0.0" -clsx@^1.0.4: - version "1.1.1" - resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188" - integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA== - code-point-at@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77" @@ -6826,14 +6743,6 @@ css-to-react-native@^3.0.0: css-color-keywords "^1.0.0" postcss-value-parser "^4.0.2" -css-vendor@^2.0.8: - version "2.0.8" - resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d" - integrity sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ== - dependencies: - "@babel/runtime" "^7.8.3" - is-in-browser "^1.0.2" - css-what@^5.0.0: version "5.0.1" resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.0.1.tgz#3efa820131f4669a8ac2408f9c32e7c7de9f4cad" @@ -6844,7 +6753,7 @@ cssesc@^3.0.0: resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee" integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg== -csstype@^2.5.2, csstype@^2.5.7: +csstype@^2.5.7: version "2.6.17" resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.17.tgz#4cf30eb87e1d1a005d8b6510f95292413f6a1c0e" integrity sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A== @@ -7298,14 +7207,6 @@ dom-converter@^0.2.0: dependencies: utila "~0.4" -dom-helpers@^5.0.1: - version "5.2.1" - resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902" - integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA== - dependencies: - "@babel/runtime" "^7.8.7" - csstype "^3.0.2" - dom-serialize@^2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/dom-serialize/-/dom-serialize-2.2.1.tgz#562ae8999f44be5ea3076f5419dcd59eb43ac95b" @@ -9278,11 +9179,6 @@ humanize-url@^1.0.0: normalize-url "^1.0.0" strip-url-auth "^1.0.0" -hyphenate-style-name@^1.0.3: - version "1.0.4" - resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d" - integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ== - iconv-corefoundation@^1.1.7: version "1.1.7" resolved "https://registry.yarnpkg.com/iconv-corefoundation/-/iconv-corefoundation-1.1.7.tgz#31065e6ab2c9272154c8b0821151e2c88f1b002a" @@ -9360,13 +9256,6 @@ imurmurhash@^0.1.4: resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea" integrity sha1-khi5srkoojixPcT7a21XbyMUU+o= -indefinite-observable@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/indefinite-observable/-/indefinite-observable-2.0.1.tgz#574af29bfbc17eb5947793797bddc94c9d859400" - integrity sha512-G8vgmork+6H9S8lUAg1gtXEj2JxIQTo0g2PbFiYOdjkziSI0F7UYBiVwhZRuixhBCNGczAls34+5HJPyZysvxQ== - dependencies: - symbol-observable "1.2.0" - indent-string@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251" @@ -9698,11 +9587,6 @@ is-hexadecimal@^1.0.0: resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7" integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw== -is-in-browser@^1.0.2, is-in-browser@^1.1.3: - version "1.1.3" - resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835" - integrity sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU= - is-installed-globally@^0.3.1: version "0.3.2" resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.3.2.tgz#fd3efa79ee670d1187233182d5b0a1dd00313141" @@ -10221,77 +10105,6 @@ jsonparse@^1.2.0: resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280" integrity sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA= -jss-plugin-camel-case@^10.5.1: - version "10.6.0" - resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.6.0.tgz#93d2cd704bf0c4af70cc40fb52d74b8a2554b170" - integrity sha512-JdLpA3aI/npwj3nDMKk308pvnhoSzkW3PXlbgHAzfx0yHWnPPVUjPhXFtLJzgKZge8lsfkUxvYSQ3X2OYIFU6A== - dependencies: - "@babel/runtime" "^7.3.1" - hyphenate-style-name "^1.0.3" - jss "10.6.0" - -jss-plugin-default-unit@^10.5.1: - version "10.6.0" - resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.6.0.tgz#af47972486819b375f0f3a9e0213403a84b5ef3b" - integrity sha512-7y4cAScMHAxvslBK2JRK37ES9UT0YfTIXWgzUWD5euvR+JR3q+o8sQKzBw7GmkQRfZijrRJKNTiSt1PBsLI9/w== - dependencies: - "@babel/runtime" "^7.3.1" - jss "10.6.0" - -jss-plugin-global@^10.5.1: - version "10.6.0" - resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.6.0.tgz#3e8011f760f399cbadcca7f10a485b729c50e3ed" - integrity sha512-I3w7ji/UXPi3VuWrTCbHG9rVCgB4yoBQLehGDTmsnDfXQb3r1l3WIdcO8JFp9m0YMmyy2CU7UOV6oPI7/Tmu+w== - dependencies: - "@babel/runtime" "^7.3.1" - jss "10.6.0" - -jss-plugin-nested@^10.5.1: - version "10.6.0" - resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.6.0.tgz#5f83c5c337d3b38004834e8426957715a0251641" - integrity sha512-fOFQWgd98H89E6aJSNkEh2fAXquC9aZcAVjSw4q4RoQ9gU++emg18encR4AT4OOIFl4lQwt5nEyBBRn9V1Rk8g== - dependencies: - "@babel/runtime" "^7.3.1" - jss "10.6.0" - tiny-warning "^1.0.2" - -jss-plugin-props-sort@^10.5.1: - version "10.6.0" - resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.6.0.tgz#297879f35f9fe21196448579fee37bcde28ce6bc" - integrity sha512-oMCe7hgho2FllNc60d9VAfdtMrZPo9n1Iu6RNa+3p9n0Bkvnv/XX5San8fTPujrTBScPqv9mOE0nWVvIaohNuw== - dependencies: - "@babel/runtime" "^7.3.1" - jss "10.6.0" - -jss-plugin-rule-value-function@^10.5.1: - version "10.6.0" - resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.6.0.tgz#3c1a557236a139d0151e70a82c810ccce1c1c5ea" - integrity sha512-TKFqhRTDHN1QrPTMYRlIQUOC2FFQb271+AbnetURKlGvRl/eWLswcgHQajwuxI464uZk91sPiTtdGi7r7XaWfA== - dependencies: - "@babel/runtime" "^7.3.1" - jss "10.6.0" - tiny-warning "^1.0.2" - -jss-plugin-vendor-prefixer@^10.5.1: - version "10.6.0" - resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.6.0.tgz#e1fcd499352846890c38085b11dbd7aa1c4f2c78" - integrity sha512-doJ7MouBXT1lypLLctCwb4nJ6lDYqrTfVS3LtXgox42Xz0gXusXIIDboeh6UwnSmox90QpVnub7au8ybrb0krQ== - dependencies: - "@babel/runtime" "^7.3.1" - css-vendor "^2.0.8" - jss "10.6.0" - -jss@10.6.0, jss@^10.5.1: - version "10.6.0" - resolved "https://registry.yarnpkg.com/jss/-/jss-10.6.0.tgz#d92ff9d0f214f65ca1718591b68e107be4774149" - integrity sha512-n7SHdCozmxnzYGXBHe0NsO0eUf9TvsHVq2MXvi4JmTn3x5raynodDVE/9VQmBdWFyyj9HpHZ2B4xNZ7MMy7lkw== - dependencies: - "@babel/runtime" "^7.3.1" - csstype "^3.0.2" - indefinite-observable "^2.0.1" - is-in-browser "^1.1.3" - tiny-warning "^1.0.2" - junk@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/junk/-/junk-3.1.0.tgz#31499098d902b7e98c5d9b9c80f43457a88abfa1" @@ -11930,11 +11743,6 @@ popmotion@11.0.3: style-value-types "5.0.0" tslib "^2.1.0" -popper.js@1.16.1-lts: - version "1.16.1-lts" - resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05" - integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA== - posix-character-classes@^0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab" @@ -12540,7 +12348,7 @@ react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== -"react-is@^16.8.0 || ^17.0.0", react-is@^17.0.1, react-is@^17.0.2: +react-is@^17.0.1, react-is@^17.0.2: version "17.0.2" resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== @@ -12638,16 +12446,6 @@ react-textarea-autosize@^8.3.0: use-composed-ref "^1.0.0" use-latest "^1.0.0" -react-transition-group@^4.4.0: - version "4.4.1" - resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9" - integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw== - dependencies: - "@babel/runtime" "^7.5.5" - dom-helpers "^5.0.1" - loose-envify "^1.4.0" - prop-types "^15.6.2" - react@17.0.1: version "17.0.1" resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127" @@ -14074,11 +13872,6 @@ supports-color@^8.1.0: dependencies: has-flag "^4.0.0" -symbol-observable@1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" - integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ== - symbol.prototype.description@^1.0.0: version "1.0.5" resolved "https://registry.yarnpkg.com/symbol.prototype.description/-/symbol.prototype.description-1.0.5.tgz#d30e01263b6020fbbd2d2884a6276ce4d49ab568" @@ -14242,11 +14035,6 @@ tiny-invariant@^1.0.6: resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9" integrity sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg== -tiny-warning@^1.0.2: - version "1.0.3" - resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" - integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== - tinycolor2@^1.4.2: version "1.4.2" resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"