Merge pull request #199 from mikecao/dev

v0.48.0

components/WebsiteDetails.module.css

@@ -12,6 +12,7 @@
 
 .content {
   min-height: 600px;
+  padding: 20px 0;
 }
 
 .backButton {
@@ -30,7 +31,7 @@
 
 .row > [class*='col-'] {
   border-left: 1px solid var(--gray300);
-  padding: 0 20px;
+  padding: 20px;
 }
 
 .row > [class*='col-']:first-child {

components/common/Button.module.css

@@ -3,6 +3,7 @@
   justify-content: center;
   align-items: center;
   font-size: var(--font-size-normal);
+  color: var(--gray900);
   background: var(--gray100);
   padding: 8px 16px;
   border-radius: 4px;
@@ -18,7 +19,7 @@
 }
 
 .button:active {
-  color: initial;
+  color: var(--gray900);
 }
 
 .large {
@@ -56,11 +57,11 @@
 }
 
 .light {
-  background: var(--gray50);
+  background: transparent;
 }
 
 .light:hover {
-  background: var(--gray75);
+  background: inherit;
 }
 
 .button:disabled {

components/common/ButtonGroup.module.css

@@ -7,6 +7,7 @@
 
 .group .button {
   border-radius: 0;
+  color: var(--gray800);
   background: var(--gray50);
   border-left: 1px solid var(--gray500);
   padding: 4px 8px;
@@ -24,6 +25,7 @@
   margin: 0;
 }
 
-.selected {
+.group .button.selected {
+  color: var(--gray900);
   font-weight: 600;
 }

components/common/Calendar.module.css

@@ -17,7 +17,7 @@
   text-align: center;
   vertical-align: center;
   height: 40px;
-  min-width: 40px;
+  width: 40px;
   border-radius: 5px;
   border: 1px solid transparent;
 }
@@ -103,3 +103,9 @@
 .icon {
   margin-left: 10px;
 }
+
+@media only screen and (max-width: 992px) {
+  .calendar table {
+    max-width: calc(100vw - 30px);
+  }
+}

components/common/DropDown.js

@@ -15,6 +15,7 @@ export default function DropDown({
 }) {
   const [showMenu, setShowMenu] = useState(false);
   const ref = useRef();
+  const selectedOption = options.find(e => e.value === value);
 
   function handleShowMenu() {
     setShowMenu(state => !state);
@@ -40,7 +41,13 @@ export default function DropDown({
         <Icon icon={<Chevron />} className={styles.icon} size="small" />
       </div>
       {showMenu && (
-        <Menu className={menuClassName} options={options} onSelect={handleSelect} float="bottom" />
+        <Menu
+          className={menuClassName}
+          options={options}
+          selectedOption={selectedOption}
+          onSelect={handleSelect}
+          float="bottom"
+        />
       )}
     </div>
   );

components/common/Dropdown.module.css

@@ -20,5 +20,5 @@
 }
 
 .icon {
-  padding-left: 10px;
+  padding-left: 20px;
 }

components/common/Link.module.css

@@ -2,7 +2,7 @@ a.link,
 a.link:active,
 a.link:visited {
   position: relative;
-  color: #2c2c2c;
+  color: var(--gray900);
   text-decoration: none;
 }
 
@@ -12,7 +12,7 @@ a.link:before {
   bottom: -2px;
   width: 0;
   height: 2px;
-  background: #2680eb;
+  background: var(--primary400);
   opacity: 0.5;
   transition: width 100ms;
 }

components/common/Menu.js

@@ -33,7 +33,8 @@ export default function Menu({
             <div
               key={value}
               className={classNames(styles.option, optionClassName, customClassName, {
-                [selectedClassName]: selectedOption === value,
+                [selectedClassName]: selectedOption === option,
+                [styles.selected]: selectedOption === option,
                 [styles.divider]: divider,
               })}
               onClick={e => onSelect(value, e)}

components/common/Menu.module.css

@@ -8,14 +8,14 @@
 .option {
   font-size: var(--font-size-small);
   font-weight: normal;
-  background: #fff;
+  background: var(--gray50);
   padding: 4px 16px;
   cursor: pointer;
   white-space: nowrap;
 }
 
 .option:hover {
-  background: #f5f5f5;
+  background: var(--gray100);
 }
 
 .float {
@@ -44,3 +44,7 @@
 .divider {
   border-top: 1px solid var(--gray300);
 }
+
+.selected {
+  font-weight: 600;
+}

components/common/MenuButton.js

@@ -0,0 +1,58 @@
+import React, { useState, useRef } from 'react';
+import classNames from 'classnames';
+import Menu from 'components/common/Menu';
+import Button from 'components/common/Button';
+import useDocumentClick from 'hooks/useDocumentClick';
+import styles from './MenuButton.module.css';
+
+export default function MenuButton({
+  icon,
+  value,
+  options,
+  menuPosition = 'bottom',
+  menuAlign = 'right',
+  onSelect,
+  renderValue,
+}) {
+  const [showMenu, setShowMenu] = useState(false);
+  const ref = useRef();
+  const selectedOption = options.find(e => e.value === value);
+
+  function handleSelect(value) {
+    onSelect(value);
+    setShowMenu(false);
+  }
+
+  function toggleMenu() {
+    setShowMenu(state => !state);
+  }
+
+  useDocumentClick(e => {
+    if (!ref.current.contains(e.target)) {
+      setShowMenu(false);
+    }
+  });
+
+  return (
+    <div className={styles.container} ref={ref}>
+      <Button
+        icon={icon}
+        className={classNames(styles.button, { [styles.open]: showMenu })}
+        onClick={toggleMenu}
+        variant="light"
+      >
+        <div className={styles.text}>{renderValue ? renderValue(selectedOption) : value}</div>
+      </Button>
+      {showMenu && (
+        <Menu
+          className={styles.menu}
+          options={options}
+          selectedOption={selectedOption}
+          onSelect={handleSelect}
+          float={menuPosition}
+          align={menuAlign}
+        />
+      )}
+    </div>
+  );
+}

components/common/MenuButton.module.css

@@ -0,0 +1,24 @@
+.container {
+  display: flex;
+  position: relative;
+  cursor: pointer;
+}
+
+.button {
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+
+.menu {
+  z-index: 100;
+}
+
+.text {
+  font-size: var(--font-size-small);
+}
+
+.open,
+.open:hover {
+  background: var(--gray50);
+  border: 1px solid var(--gray500);
+}

components/common/Modal.module.css

@@ -16,8 +16,8 @@
   right: 0;
   bottom: 0;
   margin: auto;
-  background: var(--gray900);
-  opacity: 0.1;
+  background: #000;
+  opacity: 0.5;
 }
 
 .content {

components/common/NavMenu.module.css

@@ -1,4 +1,5 @@
 .menu {
+  color: var(--gray800);
   border: 1px solid var(--gray500);
   border-radius: 4px;
   overflow: hidden;
@@ -16,5 +17,6 @@
 }
 
 .selected {
+  color: var(--gray900);
   font-weight: 600;
 }

components/common/Toast.module.css

@@ -9,7 +9,7 @@
   justify-content: space-between;
   align-items: center;
   padding: 8px 16px;
-  color: var(--gray50);
+  color: var(--msgColor);
   background: var(--green400);
   margin: auto;
   z-index: 2;