Rewrite buttons components to use tailwind

GeotrekCE · Oct 23, 2023 · 9783c46 · 9783c46
1 parent f2fb7ea
commit 9783c46
Show file tree

Hide file tree

Showing 11 changed files with 67 additions and 239 deletions.
diff --git a/frontend/src/components/AppCrashFallback/AppCrashFallback.style.ts b/frontend/src/components/AppCrashFallback/AppCrashFallback.style.ts
@@ -1,9 +1,6 @@
 import styled from 'styled-components';
 import { typography } from 'stylesheet';
-import BaseButton from 'components/Button';
 
 export const Title = styled.h1`
   ${typography.h1}
 `;
-
-export const Button = styled(BaseButton)``;
diff --git a/frontend/src/components/AppCrashFallback/AppCrashFallback.tsx b/frontend/src/components/AppCrashFallback/AppCrashFallback.tsx
@@ -1,14 +1,12 @@
 import * as Sentry from '@sentry/nextjs';
 
-import { Button, Title } from './AppCrashFallback.style';
+import Button from 'components/Button';
+import { Title } from './AppCrashFallback.style';
 
 export interface FallbackProps {
   eventId: string;
 }
 
-// TS reports `showReportDialog` as not being a property of `@sentry/node`. This
-// is correct, except we use `@sentry/browser` in the browser!
-// @ts-ignore-next-line
 const reportDialog = (eventId: string) => () => Sentry.showReportDialog({ eventId });
 
 export const AppCrashFallback: React.FC<FallbackProps> = ({ eventId }) => {

diff --git a/frontend/src/components/Button/Button.tsx b/frontend/src/components/Button/Button.tsx
@@ -1,8 +1,5 @@
-import styled from 'styled-components';
-import { borderRadius, colorPalette, getSpacing, sizes, typography } from 'stylesheet';
-import { buttonCssResets } from 'services/cssHelpers';
-
 import { GenericIconProps } from 'components/Icons/types';
+import { cn } from 'services/utils/cn';
 
 interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   icon?: React.FC<GenericIconProps>;
@@ -11,42 +8,22 @@ interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 export const Button: React.FC<Props> = ({
   icon: Icon,
   children,
-  className = '',
+  className,
   ...nativeButtonsProps
 }) => {
   return (
-    <StyledButton
+    <button
       type="button"
-      className={`flex items-center ${className}`}
+      className={cn(
+        'flex gap-1 items-center py-2 px-4 h-12 border border-solid border-primary1 rounded-lg text-sm text-primary1 bg-white font-semibold transition transition-color hover:bg-primary2 focus:bg-primary2',
+        className,
+      )}
       {...nativeButtonsProps}
     >
-      {Icon && <Icon size={24} className="mr-1" />}
+      {Icon && <Icon aria-hidden size={24} />}
       {children}
-    </StyledButton>
+    </button>
   );
 };
 
-export const StyledButton = styled.button`
-  ${buttonCssResets};
-
-  padding: ${getSpacing(2)} ${getSpacing(4)};
-  height: ${sizes.button}px;
-
-  border: 1px solid ${colorPalette.primary1};
-  border-radius: ${borderRadius.squareButton};
-
-  ${typography.main}
-  color: ${colorPalette.primary1};
-  font-weight: 600;
-
-  background-color: ${colorPalette.white};
-  transition: background-color 0.3s ease-in-out;
-
-  cursor: pointer;
-
-  &:hover {
-    background-color: ${colorPalette.primary2};
-  }
-`;
-
 export default Button;
diff --git a/frontend/src/components/Map/components/Popup/index.tsx b/frontend/src/components/Map/components/Popup/index.tsx
@@ -6,7 +6,7 @@ import { FormattedMessage } from 'react-intl';
 import Loader from 'components/Loader';
 
 import { desktopOnly, getSpacing } from 'stylesheet';
-import { Button as RawButton } from 'components/Button';
+import { Button } from 'components/Button';
 import { generateResultDetailsUrl } from 'components/pages/search/utils';
 
 import Link from 'components/Link';
@@ -46,15 +46,15 @@ const PopupContent: React.FC<PropsPC> = ({ showButton, id, type, parentId }) =>
             <span className="text-P2 mb-1 text-greyDarkColored hidden desktop:inline">
               {trekPopupResult.place}
             </span>
-            <Title className="text-Mobile-C1 text-primary1 font-bold desktop:text-H4 line-clamp-2">
+            <h3 className="text-Mobile-C1 text-primary1 font-bold desktop:text-H4 line-clamp-1">
               {trekPopupResult.title}
-            </Title>
+            </h3>
             {showButton && (
               <Link
                 href={generateResultDetailsUrl(id, trekPopupResult.title, getRoute(type), parentId)}
               >
-                <Button type="button">
-                  <span className="text-center w-full">
+                <Button className="mt-4 w-full">
+                  <span className="w-full text-center">
                     <FormattedMessage id="search.map.seeResult" />
                   </span>
                 </Button>
@@ -100,21 +100,6 @@ const desktopImgHeight = 122;
 const mobileWidth = 215;
 const mobileImgHeight = 133;
 
-const Button = styled(RawButton)`
-  margin-top: ${getSpacing(4)};
-  width: 100%;
-  text-align: center;
-`;
-
-const Title = styled.span`
-  ${desktopOnly(css`
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    display: block;
-  `)}
-`;
-
 const StyledTooltip = styled(LeafletTooltip)`
   padding: 0;
   border: 0px !important;

diff --git a/frontend/src/components/MobileFilterMenu/CloseButton/index.tsx b/frontend/src/components/MobileFilterMenu/CloseButton/index.tsx
@@ -1,22 +1,13 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { buttonCssResets } from 'services/cssHelpers';
-
 interface Props {
   onClick: () => void;
   icon: React.ReactNode;
   className?: string;
 }
 
-export const CloseButton: React.FC<Props> = ({ onClick, className, icon }) => {
+export const CloseButton: React.FC<Props> = ({ icon, ...props }) => {
   return (
-    <Button type="button" onClick={onClick} className={className}>
+    <button type="button" {...props}>
       {icon}
-    </Button>
+    </button>
   );
 };
-
-const Button = styled.button`
-  ${buttonCssResets};
-`;
diff --git a/frontend/src/components/OpenMapButton/OpenMapButton.tsx b/frontend/src/components/OpenMapButton/OpenMapButton.tsx
@@ -1,57 +1,26 @@
-import React from 'react';
-import styled from 'styled-components';
-import { borderRadius, colorPalette, getSpacing, typography, zIndex } from 'stylesheet';
-import { buttonCssResets } from 'services/cssHelpers';
 import { Map } from 'components/Icons/Map';
 import { FormattedMessage } from 'react-intl';
 import { useHideOnScrollDown } from 'hooks/useHideOnScrollDown';
+import { Button } from 'components/Button';
+import { cn } from 'services/utils/cn';
 
 export const OpenMapButton: React.FC<
   React.ButtonHTMLAttributes<HTMLButtonElement> & { displayMap: () => void }
 > = ({ displayMap, ...nativeButtonProps }) => {
   const buttonDisplayState = useHideOnScrollDown();
 
   return (
-    <MapButton
+    <Button
       id="openMapButton"
-      type="button"
-      displayState={buttonDisplayState}
-      className="flex desktop:hidden"
+      className={cn(
+        'fixed z-floatingButton flex gap-1 desktop:hidden border-0 rounded-full shadow-md left-1/2 -translate-x-1/2 transition-all',
+        buttonDisplayState === 'HIDDEN' ? '-bottom-25' : 'bottom-6',
+      )}
       {...nativeButtonProps}
       onClick={displayMap}
     >
       <FormattedMessage id="search.seeMap" />
-      <Map size={24} className="ml-1" />
-    </MapButton>
+      <Map size={24} />
+    </Button>
   );
 };
-
-const MapButton = styled.button<{ displayState: 'DISPLAYED' | 'HIDDEN' }>`
-  ${buttonCssResets}
-
-  padding: ${getSpacing(3)} ${getSpacing(4)};
-
-  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
-  border-radius: ${borderRadius.roundButton};
-
-  ${typography.main};
-  color: ${colorPalette.primary1};
-
-  position: fixed;
-  z-index: ${zIndex.floatingButton};
-  bottom: ${({ displayState: showState }) => (showState === 'HIDDEN' ? '-100px' : getSpacing(6))};
-
-  /* Horizontally center the button */
-  left: 50%;
-  transform: translateX(-50%);
-
-  background-color: ${colorPalette.white};
-
-  transition-property: background-color bottom;
-  transition-duration: 0.3s;
-  transition-timing-function: ease-in-out;
-
-  &:hover {
-    background-color: ${colorPalette.primary2};
-  }
-`;
diff --git a/frontend/src/components/pages/details/components/OfflineButton/index.tsx b/frontend/src/components/pages/details/components/OfflineButton/index.tsx
@@ -1,19 +1,21 @@
+import { useCallback, useEffect, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+
 import { WifiOff } from 'components/Icons/WifiOff';
 import Loader from 'components/Loader';
 import Popup from 'components/Popup';
-import React, { useCallback, useEffect, useState } from 'react';
-import { FormattedMessage } from 'react-intl';
-
 import { Check } from 'components/Icons/Check';
 import { Bin } from 'components/Icons/Bin';
+import { Button } from 'components/Button';
+
 import CacheManager from 'services/offline/CacheManager';
-import { colorPalette } from 'stylesheet';
+import { cn } from 'services/utils/cn';
+import { Download } from 'components/Icons/Download';
 import { Details } from '../../../../../modules/details/interface';
 import { OutdoorCourseDetails } from '../../../../../modules/outdoorCourse/interface';
 import { OutdoorSiteDetails } from '../../../../../modules/outdoorSite/interface';
 import { TouristicContentDetails } from '../../../../../modules/touristicContent/interface';
 import { TouristicEventDetails } from '../../../../../modules/touristicEvent/interface';
-import { Button } from '../../../../Button/Button';
 
 interface Props {
   details:
@@ -25,30 +27,6 @@ interface Props {
   type: 'TREK' | 'TOURISTIC_CONTENT' | 'OUTDOOR_SITE' | 'OUTDOOR_COURSE' | 'TOURISTIC_EVENT';
 }
 
-const ActionButton = ({
-  onClick,
-  isInCache,
-}: {
-  onClick: () => Promise<void>;
-  isInCache: boolean;
-}) => {
-  return (
-    <Button
-      onClick={onClick}
-      style={{
-        color: isInCache ? colorPalette.easyOK : undefined,
-        borderColor: isInCache ? colorPalette.easyOK : undefined,
-      }}
-    >
-      {isInCache ? (
-        <FormattedMessage id={'offline.isInCache'} />
-      ) : (
-        <FormattedMessage id={'offline.download'} />
-      )}
-    </Button>
-  );
-};
-
 const OfflineButton: React.FC<Props> = ({ details, type }) => {
   const [openDialog, setOpenDialog] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -125,20 +103,19 @@ const OfflineButton: React.FC<Props> = ({ details, type }) => {
                 <Button onClick={() => setOpenDialog(false)}>
                   <FormattedMessage id={'actions.close'} />
                 </Button>
-                {isInCache ? (
-                  <Button
-                    onClick={handleRemove}
-                    icon={Bin}
-                    style={{
-                      color: colorPalette.hardKO,
-                      borderColor: colorPalette.hardKO,
-                    }}
-                  >
-                    <FormattedMessage id={'actions.remove'} />
-                  </Button>
-                ) : (
-                  <ActionButton isInCache={isInCache} onClick={handleSave} />
-                )}
+                <Button
+                  onClick={isInCache ? handleRemove : handleSave}
+                  icon={isInCache ? Bin : Download}
+                  className={cn(
+                    isInCache ? 'text-hardKO border-hardKO' : 'text-easyOK border-easyOK',
+                  )}
+                >
+                  {isInCache ? (
+                    <FormattedMessage id="actions.remove" />
+                  ) : (
+                    <FormattedMessage id="offline.download" />
+                  )}
+                </Button>
               </div>
             </>
           )}

diff --git a/frontend/src/components/pages/search/components/ErrorFallback/ErrorFallback.tsx b/frontend/src/components/pages/search/components/ErrorFallback/ErrorFallback.tsx
@@ -1,11 +1,6 @@
-import React from 'react';
-import styled from 'styled-components';
 import { FormattedMessage } from 'react-intl';
 
 import { Reload } from 'components/Icons/Reload';
-
-import { getSpacing, sizes } from 'stylesheet';
-import { buttonCssResets } from 'services/cssHelpers';
 import { UseQueryResult } from '@tanstack/react-query';
 
 interface Props {
@@ -14,25 +9,16 @@ interface Props {
 
 export const ErrorFallback: React.FC<Props> = ({ refetch }) => {
   return (
-    <Container className="flex flex-col flex-1 items-center">
-      <div className="text-H2 text-center">
+    <div className="flex flex-col flex-1 items-center mt-10">
+      <h1 className="text-H2 text-center">
         <FormattedMessage id="search.anErrorOccured" />
-      </div>
-      <ReloadButton className="flex flex-col items-center" onClick={refetch}>
+      </h1>
+      <button type="button" className="flex mt-4 flex-col items-center" onClick={refetch}>
         <Reload size={48} />
         <span>
           <FormattedMessage id="search.reload" />
         </span>
-      </ReloadButton>
-    </Container>
+      </button>
+    </div>
   );
 };
-
-const Container = styled.div`
-  margin-top: ${sizes.desktopHeader + sizes.filterBar};
-`;
-
-const ReloadButton = styled.button`
-  ${buttonCssResets};
-  margin-top: ${getSpacing(4)};
-`;
diff --git a/frontend/src/components/pages/search/components/NumberBadge/NumberBadge.tsx b/frontend/src/components/pages/search/components/NumberBadge/NumberBadge.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import styled from 'styled-components';
+import { cn } from 'services/utils/cn';
 
 interface Props {
   children: React.ReactNode;
@@ -8,14 +7,13 @@ interface Props {
 
 export const NumberBadge: React.FC<Props> = ({ children, className }) => {
   return (
-    <Badge className={`h-6 w-6 bg-primary1 text-white text-Mobile-C2 font-bold ${className ?? ''}`}>
+    <span
+      className={cn(
+        'grid place-content-center rounded-full h-6 w-6 bg-primary1 text-white text-Mobile-C2 font-bold',
+        className,
+      )}
+    >
       {children}
-    </Badge>
+    </span>
   );
 };
-
-const Badge = styled.div`
-  border-radius: 50%;
-  display: grid;
-  place-items: center;
-`;