fix: switch JS styling to css styling

newrelic · Jan 7, 2022 · 79597ee · 79597ee
1 parent f0ecb97
commit 79597ee
Show file tree

Hide file tree

Showing 3 changed files with 180 additions and 155 deletions.
diff --git a/src/components/PackTile.js b/src/components/PackTile.js
@@ -10,7 +10,11 @@ import {
   Tag,
   Link,
 } from '@newrelic/gatsby-theme-newrelic';
-import { SHIELD_LEVELS, RESERVED_QUICKSTART_IDS } from '../data/constants';
+import {
+  SHIELD_LEVELS,
+  RESERVED_QUICKSTART_IDS,
+  LISTVIEW_BREAKPOINT,
+} from '../data/constants';
 import PackImg from './PackImg';
 
 const VIEWS = {
@@ -33,8 +37,6 @@ const PackTile = ({
 }) => {
   const tessen = useTessen();
 
-  const isMobile = useMobileDetect().isMobile();
-
   const handlePackClick = (quickstartId) => {
     switch (true) {
       case quickstartId === RESERVED_QUICKSTART_IDS.GUIDED_INSTALL:
@@ -90,27 +92,29 @@ const PackTile = ({
           'summary summary'
           '. tag';
 
-        /* List view */
-        ${isListView() &&
-        css`
-          grid-template-columns: 1fr 1fr 1fr;
-          grid-template-areas:
-            'logo title title'
-            'logo summary summary'
-            'logo tag tag';
-          grid-template-rows: auto;
-        `}
-
-        ${isMobile &&
-        css`
+        /* List view selected by control */
+        ${
+          isListView() &&
+          css`
+            grid-template-columns: 1fr 1fr 1fr;
+            grid-template-areas:
+              'logo title title'
+              'logo summary summary'
+              'logo tag tag';
+            grid-template-rows: auto;
+          `
+        }
+
+        /* Breakpoint triggers List view */
+        @media screen and (max-width: ${LISTVIEW_BREAKPOINT}){
           grid-template-areas:
             'logo title title'
             'logo summary summary';
             'logo summary summary';
           grid-template-columns: 1fr 1fr 1fr;
           grid-template-rows: 0.5fr 1fr;
           padding: 0.2rem 0.5rem;
-        `}
+        }
       `}
       onClick={() => handlePackClick(id)}
     >
@@ -122,6 +126,19 @@ const PackTile = ({
           height: 100%;
           justify-content: center;
           margin-bottom: 1rem;
+
+          .dark-mode & {
+            background: var(--color-white);
+          }
+
+          ${isListView() &&
+          css`
+            margin-right: 0.5rem;
+          `}
+
+          @media screen and (max-width: ${LISTVIEW_BREAKPOINT}) {
+            margin-right: 0.5rem;
+          }
         `}
       >
         <div
@@ -143,13 +160,12 @@ const PackTile = ({
         css={css`
           grid-area: title;
 
-          ${isMobile &&
-          css`
+          @media screen and (max-width: ${LISTVIEW_BREAKPOINT}) {
             align-self: end;
             font-size: 14px;
             font-weight: 300;
             margin: 0;
-          `}
+          }
         `}
       >
         {title}{' '}
@@ -186,7 +202,9 @@ const PackTile = ({
           }
           grid-area: tag;
 
-          ${isMobile && 'display: none'}
+          @media screen and (max-width: ${LISTVIEW_BREAKPOINT}) {
+            display: none;
+          }
         `}
       >
         {featured && (

diff --git a/src/layouts/QuickStartLayout.js b/src/layouts/QuickStartLayout.js
@@ -7,6 +7,7 @@ import {
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import '../components/styles.scss';
+import { QUICKSTARTS_COLLAPSE_BREAKPOINT } from '../data/constants';
 
 const QuickStartLayout = ({ children }) => {
   const [sidebarWidth, setSidebarWidth] = useState(0);
@@ -45,7 +46,7 @@ const QuickStartLayout = ({ children }) => {
 
             margin-left: calc(var(--sidebar-offset));
 
-            @media screen and (max-width: 760px) {
+            @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) {
               margin-left: 0;
             }
           `}