src/components/cards/CardBody.jsx

+import React from "react";
+import classNames from "classnames";
+
+const CardBody = ({ children, className, ...props }) => {
+  const cls = classNames("card__body", className);
+  return (
+    <div className={cls} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export default CardBody;

src/components/cards/CardBodyText.jsx

+import React from "react";
+
+const CardBodyText = ({ children }) => {
+  return <div className="card-body-text">{children}</div>;
+};
+
+export default CardBodyText;

src/components/cards/CardHeadline.jsx

+import React from "react";
+
+const CardHeadline = ({ children }) => {
+  return <h1 className="card-headline">{children}</h1>;
+};
+
+export default CardHeadline;

src/components/cards/index.js

+export { default as Card } from "./Card";
+export { default as CardActions } from "./CardActions";
+export { default as CardBody } from "./CardBody";
+export { default as CardBodyText } from "./CardBodyText";
+export { default as CardHeadline } from "./CardHeadline";

src/components/dropdown-button/DropdownButton.jsx

+import React from "react";
+import classNames from "classnames";
+
+const DropdownButton = ({
+  className,
+  color = "black",
+  hoverActive = true,
+  fullwidth = false,
+  loading = false,
+  disabled = false,
+  items,
+  children,
+  onClick,
+  ...props
+}) => {
+  const btnClass = classNames(
+    "btn btn--icon",
+    `btn--${color}`,
+    {
+      "btn--hoveractive": hoverActive,
+      "btn--fullwidth md:btn--autowidth": fullwidth,
+      "btn--loading": loading,
+    },
+    className
+  );
+
+  const inner = (
+    <div className="btn__body-wrap">
+      <button className="btn__body" onClick={onClick} disabled={disabled}>
+        {children}
+      </button>
+      <button className="btn__icon dropdown-button">
+        <i className="ico--chevron-down"></i>
+        <ul className="dropdown-button__choices bg-white text-black whitespace-no-wrap">
+          {items}
+        </ul>
+      </button>
+    </div>
+  );
+
+  return (
+    <div className={btnClass} {...props}>
+      {inner}
+    </div>
+  );
+};
+
+export default DropdownButton;

src/components/dropdown-button/DropdownButtonItem.jsx

+import React from "react";
+
+const DropdownButtonItem = ({ onClick, children }) => {
+  return (
+    <li className="dropdown-button__choice hover:bg-grey-125" onClick={onClick}>
+      <span className="block px-4 py-3">{children}</span>
+    </li>
+  );
+};
+
+export default DropdownButtonItem;

src/components/dropdown-button/index.js

+export { default as DropdownButton } from "./DropdownButton";
+export { default as DropdownButtonItem } from "./DropdownButtonItem";

src/components/dropdown-menu/DropdownMenu.jsx

+import React from "react";
+import classNames from "classnames";
+
+const DropdownMenu = ({
+  children,
+  className,
+  right,
+  triggerSize = "sm",
+  triggerIconClass = "ico--dots-three-vertical",
+}) => {
+  const wrapperCls = classNames(
+    "dropdown",
+    {
+      "dropdown--right": !!right,
+    },
+    className
+  );
+
+  const triggerCls = classNames(
+    "cursor-pointer ml-auto text-grey-200 hover:text-black",
+    `text-${triggerSize}`,
+    triggerIconClass
+  );
+
+  return (
+    <div className={wrapperCls}>
+      <i className={triggerCls}></i>
+      <ul className="dropdown__content whitespace-no-wrap">{children}</ul>
+    </div>
+  );
+};
+
+export default React.memo(DropdownMenu);

src/components/dropdown-menu/DropdownMenuItem.jsx

+import React from "react";
+import classNames from "classnames";
+
+const DropdownMenuItem = ({
+  icon,
+  className,
+  onClick,
+  title,
+  titleClass,
+  iconSize = "2xs",
+  titleSize = "xs",
+}) => {
+  const iconCls = classNames("text-2xs mr-2", `text-${iconSize}`, icon);
+  const titleCls = classNames(`text-${titleSize}`, titleClass);
+  const cls = classNames(
+    "dropdown__content-item bg-white hover:bg-grey-125 cursor-pointer",
+    className
+  );
+
+  return (
+    <li className={cls} onClick={onClick}>
+      <span className="block px-3 py-3">
+        <i className={iconCls}></i>
+        <span className={titleCls}>{title}</span>
+      </span>
+    </li>
+  );
+};
+
+export default React.memo(DropdownMenuItem);

src/components/dropdown-menu/index.js

+export { default as DropdownMenu } from "./DropdownMenu";
+export { default as DropdownMenuItem } from "./DropdownMenuItem";

src/components/home/AlreadyFinished.jsx

+import React from "react";
+
+const AlreadyFinished = () => (
+  <article className="container container--wide py-8 md:py-16 lg:py-32">
+    <div className="flex">
+      <div>
+        <i className="ico--anchor text-2xl md:text-6xl lg:text-9xl mr-4 lg:mr-8"></i>
+      </div>
+      <div>
+        <h1 className="head-alt-base md:head-alt-md lg:head-alt-xl mb-2">
+          Jednání už skočilo!
+        </h1>
+        <p className="text-xl leading-snug">
+          Oficiální program již skončil. Těšíme se na viděnou zase příště.
+        </p>
+      </div>
+    </div>
+  </article>
+);
+
+export default AlreadyFinished;

src/components/home/BreakInProgress.jsx

+import React from "react";
+
+import Button from "components/Button";
+
+const BreakInProgress = () => (
+  <article className="container container--wide py-8 md:py-16 lg:py-32">
+    <div className="flex">
+      <div>
+        <i className="ico--clock text-2xl md:text-6xl lg:text-9xl mr-4 lg:mr-8"></i>
+      </div>
+      <div>
+        <h1 className="head-alt-base md:head-alt-md lg:head-alt-xl mb-2">
+          Probíhá přestávka ...
+        </h1>
+        <p className="text-xl leading-snug mb-8">
+          Jednání celostátního fóra je momentálně přerušeno. Můžete si ale
+          zobrazit program.
+        </p>
+        <Button
+          routerTo="/program"
+          className="md:text-lg lg:text-xl"
+          hoverActive
+        >
+          Zobrazit program
+        </Button>
+      </div>
+    </div>
+  </article>
+);
+
+export default BreakInProgress;

src/components/home/NotYetStarted.jsx

+import React from "react";
+import { format } from "date-fns";
+
+import Button from "components/Button";
+
+const NotYetStarted = ({ startAt }) => (
+  <article className="container container--wide py-8 md:py-16 lg:py-32">
+    <div className="hidden md:inline-block flag bg-violet-400 text-white head-alt-base mb-4 py-4 px-5">
+      Jejda ...
+    </div>
+    <h1 className="head-alt-base md:head-alt-md lg:head-alt-xl mb-2">
+      Jednání ještě nebylo zahájeno
+    </h1>
+    <p className="text-xl leading-snug mb-8">
+      <span>Jednání celostátního fóra ještě nezačalo. </span>
+      {startAt && (
+        <span>
+          Mělo by být zahájeno <strong>{format(startAt, "d. M. Y")}</strong> v{" "}
+          <strong>{format(startAt, "H:mm")}</strong>.{" "}
+        </span>
+      )}
+      <span>Můžete si ale zobrazit program.</span>
+    </p>
+    <Button routerTo="/program" className="md:text-lg lg:text-xl" hoverActive>
+      Zobrazit program
+    </Button>
+  </article>
+);
+
+export default NotYetStarted;

src/components/home/index.js

+export { default as AlreadyFinished } from "./AlreadyFinished";
+export { default as BreakInProgress } from "./BreakInProgress";
+export { default as NotYetStarted } from "./NotYetStarted";

src/components/mde/MarkdownEditor.css

+.mde-header {
+  background: transparent;
+}
+
+.react-mde .invisible {
+  display: none;
+}
+
+.mde-header {
+  border: 0;
+  align-items: center;
+}
+
+.mde-header .mde-tabs {
+  display: inline-flex;
+  background-color: #000;
+  background-color: rgba(0,0,0,1);
+  padding: .25rem;
+}
+
+.mde-header .mde-tabs button {
+  padding: .25rem 0.25rem;
+  font-family: Bebas Neue,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-size: 1.1rem;
+  --text-opacity: 1;
+  color: #fff;
+  color: rgba(255,255,255,var(--text-opacity));
+  text-align: center;
+  cursor: pointer;
+  border: 0;
+  border-radius: 0;
+  margin: 0 !important;
+  outline: 0;
+}
+
+.mde-header {
+  /* grey-50 */
+  background-color: #f7f7f7;
+}
+
+.mde-header .mde-tabs button.selected {
+  /* blue-300 */
+  background: #027da8;
+  color: #fff;
+  border: 0;
+  border-radius: 0;
+  margin: 0;
+  outline: 0;
+}
+
+.mde-header .mde-tabs button:not(.selected):hover {
+  /* grey-500 */
+  background: #303132;
+}
+
+.mde-header .mde-header-item {
+  border: 1px transparent solid;
+  transition: border-color 100ms ease-in-out;
+}
+
+.mde-header ul.mde-header-group li.mde-header-item {
+  margin: 0;
+}
+
+.mde-header .mde-header-item:hover {
+  /* grey-200 */
+  border: 1px #adadad solid;
+}
+
+.mde-text {
+  font-family: monospace;
+}
+
+
+.mde-header ul.mde-header-group {
+  padding: 0;
+}
+
+.mde-header ul.mde-header-group:first-of-type {
+  padding-left: .5rem;
+}
+
+.mde-header ul.mde-header-group + .mde-header-group {
+  margin-left: 0;
+}
+
+@media (min-width: 992px) {
+  .mde-header .mde-tabs button {
+    padding: .5rem 1rem;
+  }
+}
+
+@media (min-width: 1200px) {
+  .mde-header ul.mde-header-group {
+    padding: 0 0.5rem;
+  }
+
+  .mde-header ul.mde-header-group + .mde-header-group {
+    margin-left: .5rem;
+  }
+}

src/components/mde/MarkdownEditor.jsx

+import React, { useState } from "react";
+import ReactMde from "react-mde";
+import classNames from "classnames";
+
+import { markdownConverter } from "markdown";
+
+import "react-mde/lib/styles/css/react-mde-toolbar.css";
+import "./MarkdownEditor.css";
+
+const MarkdownEditor = (
+  { value, onChange, error, placeholder = "", ...props },
+  ref
+) => {
+  const [selectedTab, setSelectedTab] = useState("write");
+
+  const classes = {
+    preview: "p-2 content-block text-input text-sm md:text-base",
+    textArea: "p-2 text-input text-sm md:text-base",
+  };
+
+  const l18n = {
+    write: "Psaní",
+    preview: "Náhled",
+    uploadingImage: "Nahrávám obrázek",
+  };
+
+  const childProps = {
+    textArea: {
+      placeholder,
+    },
+  };
+
+  return (
+    <div className={classNames("form-field", { "form-field--error": !!error })}>
+      <ReactMde
+        ref={ref}
+        value={value}
+        onChange={onChange}
+        selectedTab={selectedTab}
+        onTabChange={setSelectedTab}
+        generateMarkdownPreview={(markdown) =>
+          Promise.resolve(markdownConverter.makeHtml(markdown))
+        }
+        classes={classes}
+        l18n={l18n}
+        childProps={childProps}
+        {...props}
+      />
+      {error && <div className="form-field__error">{error}</div>}
+    </div>
+  );
+};
+
+export default React.forwardRef(MarkdownEditor);

src/components/modals/Modal.jsx

+import React from "react";
+import Modal from "react-modal";
+import classNames from "classnames";
+
+const CustomModal = ({ children, containerClassName, ...props }) => (
+  <Modal
+    contentLabel={props.headline}
+    overlayClassName="modal__overlay"
+    className="modal__content"
+    {...props}
+  >
+    <div
+      className={classNames(
+        "modal__container w-full flex items-center justify-center",
+        containerClassName
+      )}
+    >
+      <div className="modal__container-body w-full">{children}</div>
+    </div>
+  </Modal>
+);
+
+export default CustomModal;

src/components/modals/ModalConfirm.jsx

+import React from "react";
+
+import Button from "components/Button";
+
+import ModalWithActions from "./ModalWithActions";
+
+const ModalConfirm = ({
+  title,
+  children,
+  yesActionLabel = "OK",
+  cancelActionLabel = "Zrušit",
+  onCancel,
+  onConfirm,
+  confirming,
+  error,
+  ...props
+}) => {
+  const actions = (
+    <>
+      <Button
+        hoverActive
+        color="blue-300"
+        className="text-sm"
+        onClick={onConfirm}
+        loading={confirming}
+      >
+        {yesActionLabel}
+      </Button>
+      <Button
+        hoverActive
+        color="grey-125"
+        className="text-sm"
+        onClick={onCancel}
+      >
+        {cancelActionLabel}
+      </Button>
+    </>
+  );
+
+  return (
+    <ModalWithActions
+      onClose={onCancel}
+      title={title}
+      error={error}
+      actions={actions}
+      containerClassName="max-w-md"
+      {...props}
+    >
+      {children}
+    </ModalWithActions>
+  );
+};
+
+export default React.memo(ModalConfirm);

src/components/modals/ModalWithActions.jsx

+import React from "react";
+
+import {
+  Card,
+  CardActions,
+  CardBody,
+  CardBodyText,
+  CardHeadline,
+} from "components/cards";
+import ErrorMessage from "components/ErrorMessage";
+
+import Modal from "./Modal";
+
+const ModalConfirm = ({
+  title,
+  children,
+  actions,
+  error,
+  onClose,
+  ...props
+}) => {
+  return (
+    <Modal onRequestClose={onClose} {...props}>
+      <Card className="elevation-21">
+        <CardBody>
+          <div className="flex items-center justify-between mb-4">
+            <CardHeadline>{title}</CardHeadline>
+            <button
+              onClick={onClose}
+              type="button"
+              data-tip="Zavřít"
+              aria-label="Zavřít"
+            >
+              <i className="ico--cross"></i>
+            </button>
+          </div>
+          <CardBodyText>{children}</CardBodyText>
+          {error && (
+            <ErrorMessage className="mt-2">
+              Při provádění akce došlo k problému: {error}
+            </ErrorMessage>
+          )}
+        </CardBody>
+        <CardActions right className="space-x-1">
+          {actions}
+        </CardActions>
+      </Card>
+    </Modal>
+  );
+};
+
+export default React.memo(ModalConfirm);

src/components/onboarding/Beacon.jsx

+import React from "react";
+
+const Beacon = React.forwardRef(({ onClick }, ref) => (
+  <span
+    className="relative inline-flex h-8 w-8"
+    title="Jsi online"
+    ref={ref}
+    onClick={onClick}
+  >
+    <span className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 bg-red-600"></span>
+    <span className="inline-flex rounded-full w-8 h-8 bg-red-600"></span>
+  </span>
+));
+
+export default Beacon;