Merge pull request #16 from Videodock/chore/ui-tweaks

Feat / UI tweaks
jwplayer · May 7, 2021 · 3f224b9 · 3f224b9
2 parents 0bedaf0 + a8f5c57
commit 3f224b9
Show file tree

Hide file tree

Showing 31 changed files with 554 additions and 329 deletions.
diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
@@ -3,48 +3,39 @@
 @use "../../styles/mixins/responsive";
 
 .button {
-  @include responsive.mobile-only() {
-    padding: 12px 16px;
-  }
-
-  @include responsive.tablet-and-larger() {
-    @media (hover: hover) and (pointer: fine) {
-      &:hover {
-        z-index: 1;
-        background: rgba(var(--background-color), 0.7);
-        box-shadow: 0 0 0 3px var(--highlight-color, variables.$white),
-          0 8px 10px rgb(0 0 0 / 14%), 0 3px 14px rgb(0 0 0 / 12%),
-          0 4px 5px rgb(0 0 0 / 20%);
-        opacity: 1;
-      }
-    }
-  }
   position: relative;
   display: inline-flex;
-  display: flex;
   justify-content: inherit;
   align-items: center;
-  align-items: baseline;
   min-height: 38px;
-  margin: 0 5px;
-  padding: 9px 16px;
-  color: variables.$white;
+  padding: 0 16px;
+
+  color: var(--highlight-color, white);
   font-family: theme.$body-alt-font-family;
-  font-weight: 700;
   text-align: center;
   text-decoration: none;
-  background: transparent;
+
+  background-color: rgba(0, 0, 0, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 4px;
+
   cursor: pointer;
-  opacity: 0.7;
   transition: background 0.1s ease, transform 0.1s ease;
 
   &.active {
-    color: variables.$white;
-    background: rgba(variables.$black, 0.7);
-    opacity: 1;
+    color: var(--background-color, black);
+    background-color: var(--highlight-color, white);
+    border-color: var(--highlight-color, white);
   }
-  > h2 {
-    font-size: 24px;
+
+  @media (hover: hover) and (pointer: fine) {
+    &:hover:not(.active),
+    &:active {
+      z-index: 1;
+      background-color: rgba(variables.$black, 0.8);
+      border-color: var(--highlight-color, white);
+      transform: scale(1.1);
+      opacity: 1;
+    }
   }
 }
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -8,7 +8,6 @@ type Props = {
   active: boolean;
   onClick: () => void;
 };
-
 const Button: React.FC<Props> = ({ label, active, onClick }: Props) => {
   return (
     <button

diff --git a/src/components/Dropdown/Dropdown.module.scss b/src/components/Dropdown/Dropdown.module.scss
@@ -3,7 +3,7 @@
 @use '../../styles/mixins/responsive';
 
 $select-border: variables.$gray-lighter;
-$select-arrow: variables.$black;
+$select-arrow: variables.$white;
 $select-focus: theme.$primary-color;
 
 .dropdown {
@@ -16,17 +16,17 @@ $select-focus: theme.$primary-color;
   padding: 0.2em 0.4em;
   font-size: 1.25rem;
   line-height: 1.1;
-  background-color: #fff;
-  background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
-  border: 1px solid $select-border;
+  background-color: rgba(0, 0, 0, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 0.25em;
   cursor: pointer;
   grid-template-areas: 'select';
 
   // Custom arrow
   &::after {
-    width: 0.6em;
-    height: 0.4em;
+    z-index: 1;
+    width: 0.4em;
+    height: 0.3em;
     background-color: $select-arrow;
     clip-path: polygon(100% 0%, 0 0%, 50% 100%);
     content: '';
@@ -38,11 +38,12 @@ $select-focus: theme.$primary-color;
     width: 100%;
     margin: 0;
     padding: 0 1em 0 0;
+    color: var(--highlight-color, white);
     font-family: inherit;
     font-weight: 700;
     font-size: 1rem;
     line-height: inherit;
-    background-color: transparent;
+    background-color: rgba(0, 0, 0, 1);
     border: none;
     outline: none;
     cursor: inherit;
@@ -64,14 +65,17 @@ $select-focus: theme.$primary-color;
     background-image: linear-gradient(to top, #ddd, #eee 33%);
     cursor: not-allowed;
   }
+  &:hover {
+    border-color: $select-focus;
+  }
 
   &:focus + .focus {
     position: absolute;
     top: -1px;
     right: -1px;
     bottom: -1px;
     left: -1px;
-    border: 2px solid $select-focus;
+    border: 2px solid orange;
     border-radius: inherit;
   }
 }

diff --git a/src/components/Filter/Filter.module.scss b/src/components/Filter/Filter.module.scss
@@ -2,18 +2,15 @@
 @use '../../styles/theme';
 @use '../../styles/mixins/responsive';
 
-$select-border: variables.$gray-lighter;
-$select-arrow: variables.$black;
-$select-focus: theme.$primary-color;
-
 .filterRow {
-  @include responsive.mobile-only() {
-    display: none;
-  }
   display: flex;
   align-items: center;
   margin-left: 16px;
   padding-top: 8px;
+
+  > button {
+    margin: 0 4px;
+  }
 }
 
 .optionMobile {

diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx
@@ -1,4 +1,5 @@
 import React, { useState, Fragment, FC } from 'react';
+import MenuButton from '../../components/MenuButton/MenuButton';
 
 import Dropdown from '../Dropdown/Dropdown';
 import FilterModal from '../FilterModal/FilterModal';
@@ -31,26 +32,23 @@ const Filter: FC<Props> = ({ name, value, defaultLabel, options, setValue }) =>
     }
   };
 
-  const filterButtons = () => {
-    const extraOptions = options.map((option) => (
-      <Button label={option} onClick={() => setValue(option)} key={option} active={value === option} />
-    ));
-
-    return [
-      <Button label={defaultLabel} onClick={() => setValue('')} active={value === ''} key={defaultLabel} />,
-      ...extraOptions,
-    ];
-  };
-
-  const showFilterRow = breakpoint >= 2 && options.length < 6;
+  const showFilterRow = breakpoint >= Breakpoint.md && options.length < 6;
 
   return (
     <Fragment>
       <FilterModal name={name} isOpen={isFilterModalOpen} onClose={() => openFilterModal(false)}>
-        {filterButtons()}
+        {options.map((option) => (
+          <MenuButton label={option} onClick={() => setValue(option)} key={option} active={value === option} />
+        ))}
+        <MenuButton label={defaultLabel} onClick={() => setValue('')} active={value === ''} key={defaultLabel} />
       </FilterModal>
       {showFilterRow ? (
-        <div className={styles.filterRow}>{filterButtons()}</div>
+        <div className={styles.filterRow}>
+          {options.map((option) => (
+            <Button label={option} onClick={() => setValue(option)} key={option} active={value === option} />
+          ))}
+          <Button label={defaultLabel} onClick={() => setValue('')} active={value === ''} key={defaultLabel} />
+        </div>
       ) : (
         <Dropdown
           options={options}

diff --git a/src/components/Filter/__snapshots__/Filter.test.tsx.snap b/src/components/Filter/__snapshots__/Filter.test.tsx.snap
@@ -6,27 +6,31 @@ exports[`<Filter> renders Filter 1`] = `
     class="filterModal"
   >
     <div
-      aria-label="close menu"
       class="header"
-      role="button"
     >
-      <svg
-        aria-hidden="true"
-        class="icon"
-        focusable="false"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
+      <div
+        aria-label="close menu"
+        class="iconButton"
+        role="button"
       >
-        <g>
-          <path
-            d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-          />
-          <path
-            d="M0 0h24v24H0z"
-            fill="none"
-          />
-        </g>
-      </svg>
+        <svg
+          aria-hidden="true"
+          class="icon"
+          focusable="false"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g>
+            <path
+              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+            />
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+          </g>
+        </svg>
+      </div>
       <h4>
         categories
       </h4>
@@ -37,34 +41,34 @@ exports[`<Filter> renders Filter 1`] = `
     <div
       class="group"
     >
-      <button
-        class="button"
-      >
-        <span>
-          bb
-        </span>
-      </button>
-      <button
-        class="button"
+      <div
+        class="menuButton"
       >
         <span>
           x
         </span>
-      </button>
-      <button
-        class="button"
+      </div>
+      <div
+        class="menuButton"
       >
         <span>
           y
         </span>
-      </button>
-      <button
-        class="button"
+      </div>
+      <div
+        class="menuButton"
       >
         <span>
           z
         </span>
-      </button>
+      </div>
+      <div
+        class="menuButton"
+      >
+        <span>
+          bb
+        </span>
+      </div>
     </div>
   </div>
   <div
@@ -74,28 +78,28 @@ exports[`<Filter> renders Filter 1`] = `
       class="button"
     >
       <span>
-        bb
+        x
       </span>
     </button>
     <button
       class="button"
     >
       <span>
-        x
+        y
       </span>
     </button>
     <button
       class="button"
     >
       <span>
-        y
+        z
       </span>
     </button>
     <button
       class="button"
     >
       <span>
-        z
+        bb
       </span>
     </button>
   </div>

diff --git a/src/components/FilterModal/FilterModal.module.scss b/src/components/FilterModal/FilterModal.module.scss
@@ -16,16 +16,19 @@
   height: 100vh;
   color: variables.$white;
   background-color: var(--body-background-color);
-  transform: translateX(-100%);
-  transition: transform 0.3s cubic-bezier(0.52, 0.51, 0.2, 1);
+  transform: translateY(20%);
+  opacity: 0;
+  transition: transform 0.2s cubic-bezier(0.52, 0.51, 0.2, 1), opacity 0.2s cubic-bezier(0.52, 0.51, 0.2, 1);
 }
 
 .header {
   display: flex;
   align-items: center;
   padding: variables.$base-spacing;
+  font-weight: 700;
   font-size: 20px;
   text-transform: capitalize;
+
   > h4 {
     margin-left: variables.$base-spacing;
   }
@@ -38,6 +41,7 @@
 
 .divider {
   position: relative;
+  margin: 0;
   width: 100%;
   border-top: 1px solid rgba(variables.$white, 0.12);
   opacity: 0.12;
@@ -47,12 +51,13 @@
 // mediaQueries
 // --------------------------------
 
-@include responsive.mobile-and-tablet() {
+@include responsive.mobile-only() {
   .filterModal {
     display: inline-block;
 
     &.open {
-      transform: translateX(0);
+      transform: translateY(0);
+      opacity: 1;
     }
   }