Landing page breakpoint for smaller screens (#735)

* Landing page breakpoint for smaller screens * Using tailwind breakpoints
transitmatters · Jul 10, 2023 · 0d5a7d1 · 0d5a7d1
1 parent 27ee572
commit 0d5a7d1
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 6 deletions.
diff --git a/modules/landing/LineButton.tsx b/modules/landing/LineButton.tsx
@@ -11,6 +11,7 @@ interface LineButtonProps {
 
 export const LineButton: React.FC<LineButtonProps> = ({ children, line }) => {
   const lineObject = LINE_OBJECTS[line];
+
   return (
     <Link
       href={`/${lineObject.path}`}
@@ -20,7 +21,7 @@ export const LineButton: React.FC<LineButtonProps> = ({ children, line }) => {
         className={classNames(
           lineColorBorder[line],
           lineColorBackground[line],
-          'flex h-32 w-32 cursor-pointer items-center justify-center rounded-full border-2 bg-opacity-50 group-hover:bg-opacity-100'
+          'flex h-24 w-24 cursor-pointer items-center justify-center rounded-full border-2 bg-opacity-50 group-hover:bg-opacity-100 lg:h-32 lg:w-32'
         )}
       >
         {children}

diff --git a/modules/landing/LineSelectionLanding.tsx b/modules/landing/LineSelectionLanding.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { faBus, faTrainSubway, faTrainTram } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
 import { LineButton } from './LineButton';
 
 export const LineSelectionLanding: React.FC = () => {
@@ -10,19 +11,34 @@ export const LineSelectionLanding: React.FC = () => {
       <h3 className="text-lg font-thin">Select a subway line or bus route to get started.</h3>
       <div className="flex w-full flex-col gap-y-8 pt-12 md:flex-row md:justify-around">
         <LineButton line="line-red">
-          <FontAwesomeIcon icon={faTrainSubway} className="h-20 w-20 text-white" />
+          <FontAwesomeIcon
+            icon={faTrainSubway}
+            className={classNames('h-16 w-16 lg:h-20 lg:w-20', 'text-white')}
+          />
         </LineButton>
         <LineButton line="line-orange">
-          <FontAwesomeIcon icon={faTrainSubway} className="h-20 w-20 text-white" />
+          <FontAwesomeIcon
+            icon={faTrainSubway}
+            className={classNames('h-16 w-16 lg:h-20 lg:w-20', 'text-white')}
+          />
         </LineButton>
         <LineButton line="line-blue">
-          <FontAwesomeIcon icon={faTrainSubway} className="h-20 w-20 text-white" />
+          <FontAwesomeIcon
+            icon={faTrainSubway}
+            className={classNames('h-16 w-16 lg:h-20 lg:w-20', 'text-white')}
+          />
         </LineButton>
         <LineButton line="line-green">
-          <FontAwesomeIcon icon={faTrainTram} className="h-20 w-20 text-white" />
+          <FontAwesomeIcon
+            icon={faTrainTram}
+            className={classNames('h-16 w-16 lg:h-20 lg:w-20', 'text-white')}
+          />
         </LineButton>
         <LineButton line="line-bus">
-          <FontAwesomeIcon icon={faBus} className="h-20 w-20 text-white" />
+          <FontAwesomeIcon
+            icon={faBus}
+            className={classNames('h-16 w-16 lg:h-20 lg:w-20', 'text-white')}
+          />
         </LineButton>
       </div>
     </div>