resolve warnings with styled-components

frontend/components/ClubEditPage/FormProgressIndicator.tsx

@@ -24,9 +24,9 @@ const StepText = styled.span`
   line-height: 0.9em;
 `
 
-const StepBubble = styled.div<{ passed: boolean }>`
-  background-color: ${({ passed }) =>
-    passed ? PROGRESS_INDICATOR_PRIMARY : PROGRESS_INDICATOR_SECONDARY};
+const StepBubble = styled.div<{ $passed: boolean }>`
+  background-color: ${({ $passed }) =>
+    $passed ? PROGRESS_INDICATOR_PRIMARY : PROGRESS_INDICATOR_SECONDARY};
   color: ${PROGRESS_INDICATOR_TEXT};
   width: 48px;
   height: 48px;
@@ -35,7 +35,7 @@ const StepBubble = styled.div<{ passed: boolean }>`
   line-height: 48px;
   border-radius: 24px;
   margin: 5px auto;
-  cursor: ${({ passed }) => (passed ? 'pointer' : 'default')};
+  cursor: ${({ $passed }) => ($passed ? 'pointer' : 'default')};
 `
 
 const StepArrow = styled.span`
@@ -62,7 +62,7 @@ const FormProgressIndicator = ({
       {steps.map(({ name }, i) => (
         <React.Fragment key={i}>
           <StepBubbleContainer onClick={() => onStepClick(i)} key={i}>
-            <StepBubble passed={i <= step}>{i + 1}</StepBubble>
+            <StepBubble $passed={i <= step}>{i + 1}</StepBubble>
             <StepText>{name}</StepText>
           </StepBubbleContainer>
           {i < steps.length - 1 && <StepArrow />}

frontend/components/ClubPage/AdvisorList.tsx

@@ -15,7 +15,7 @@ type AdvisorCardProps = {
 
 const AdvisorCard = ({ info }: AdvisorCardProps): ReactElement => {
   return (
-    <StyledCard bordered>
+    <StyledCard $bordered>
       <div className="columns">
         <div className="column is-narrow is-hidden-mobile">
           <ProfilePic

frontend/components/ClubPage/Events.tsx

@@ -84,7 +84,7 @@ const Events = ({ data }: EventsProps): ReactElement | null => {
   }
 
   return (
-    <StyledCard bordered>
+    <StyledCard $bordered>
       <div className="mb-3">
         <StrongText className="mb-0">Events</StrongText>
         <small>Click on an event to get more details.</small>

frontend/components/ClubPage/MemberCard.tsx

@@ -93,7 +93,7 @@ const MemberCard = ({ account }: Props): ReactElement => {
   const { email, name, title, username } = account
   return (
     <OptionalProfileLink username={username}>
-      <StyledCard bordered>
+      <StyledCard $bordered>
         <ProfilePic user={account} fontSize="24px" isRound />
         <br />
         <MemberInfo>

frontend/components/EventPage/EventCard.tsx

@@ -62,7 +62,7 @@ const EventCard = (props: {
 
   return (
     <EventCardContainer className="event">
-      <Card bordered hoverable background={WHITE} onClick={props.onClick}>
+      <Card $bordered $hoverable background={WHITE} onClick={props.onClick}>
         <LazyLoad offset={800}>
           <CoverPhoto
             image={imageUrl}

frontend/components/EventPage/HappeningNow.tsx

@@ -16,20 +16,22 @@ const blink = keyframes`
 `
 
 const HappeningNowContainer = styled.p<{
-  urgent?: boolean
-  floatRight?: boolean
+  $urgent?: boolean
+  $floatRight?: boolean
 }>`
   font-size: 14px;
   font-weight: 500;
-  ${({ floatRight }) => (floatRight ? 'float: right;' : '')}
-  ${({ urgent }) => (urgent ? UrgentText : '')}
+  ${({ $floatRight }) => ($floatRight ? 'float: right;' : '')}
+  ${({ $urgent }) => ($urgent ? UrgentText : '')}
 `
 
 const HappeningNow = (props: {
   urgent?: boolean
   floatRight?: boolean
 }): ReactElement => (
-  <HappeningNowContainer {...props}>HAPPENING NOW</HappeningNowContainer>
+  <HappeningNowContainer $urgent={props.urgent} $floatRight={props.floatRight}>
+    HAPPENING NOW
+  </HappeningNowContainer>
 )
 
 const UrgentText = css`

frontend/components/Header/Feedback.tsx

@@ -13,19 +13,19 @@ const ICON_SIZE = '1.5rem'
 const OFFSET = 18
 
 interface LinkProps {
-  offsetAddition: number
+  $offsetAddition: number
 }
 
 export const ActionLink = styled.a.attrs((props: LinkProps) => ({
-  offsetAddition: props.offsetAddition,
+  $offsetAddition: props.$offsetAddition,
 }))<LinkProps>`
   display: inline-block;
   width: ${DIAMETER};
   height: ${DIAMETER};
   border-radius: 3rem;
   background-color: ${FEEDBACK_BG};
   position: fixed;
-  bottom: ${(props) => props.offsetAddition + OFFSET}px;
+  bottom: ${(props) => props.$offsetAddition + OFFSET}px;
   right: ${OFFSET}px;
   text-align: center;
   box-shadow: 0 2px 8px rgba(25, 89, 130, 0.4);
@@ -45,7 +45,7 @@ export const ActionLink = styled.a.attrs((props: LinkProps) => ({
 
 const Feedback = (): ReactElement => (
   <ActionLink
-    offsetAddition={0}
+    $offsetAddition={0}
     rel="noopener noreferrer"
     href={FEEDBACK_URL}
     title="Feedback"

frontend/components/Header/Head.tsx

@@ -1,6 +1,7 @@
 import 'react-toastify/dist/ReactToastify.css'
 
 import Head from 'next/head'
+import Script from 'next/script'
 import { ReactElement, useEffect } from 'react'
 
 import { initGA, logPageView } from '../../utils/analytics'
@@ -50,7 +51,7 @@ const Heading = (): ReactElement => {
         rel="stylesheet"
       />
 
-      <script
+      <Script
         src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
         integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
         crossOrigin="anonymous"

frontend/components/Header/Links.tsx

@@ -75,9 +75,9 @@ const StyledLink = (props): ReactElement => {
   )
 }
 
-const Menu = styled.div<{ show?: boolean }>`
+const Menu = styled.div<{ $show?: boolean }>`
   ${mediaMaxWidth(MD)} {
-    ${({ show }) => show && 'display: block;'}
+    ${({ $show }) => $show && 'display: block;'}
   }
 
   background-color: ${BANNER_BG};
@@ -96,7 +96,7 @@ type Props = {
 const Links = ({ userInfo, authenticated, show }: Props): ReactElement => {
   const router = useRouter()
   return (
-    <Menu className="navbar-menu" show={show}>
+    <Menu className="navbar-menu" $show={show}>
       <div className="navbar-end" style={{ padding: '0 1rem' }}>
         <StyledLink href="/events" onClick={() => logEvent('events', 'click')}>
           Events

frontend/components/Header/index.tsx

@@ -110,15 +110,15 @@ const LogoBackground = styled.div`
   }
 `
 
-const LogoItem = styled.a<{ isHub?: boolean }>`
+const LogoItem = styled.a<{ $isHub?: boolean }>`
   padding: 0;
 
   &:hover {
     background-color: transparent !important;
   }
 
-  ${({ isHub }) =>
-    isHub
+  ${({ $isHub }) =>
+    $isHub
       ? `
     ${mediaMaxWidth(MD)} {
       margin-top: 1rem;
@@ -181,7 +181,7 @@ const Header = ({ authenticated, userInfo }: HeaderProps): ReactElement => {
         <div className="navbar-brand">
           {LOGO_BACKGROUND_IMAGE != null && <FadingLogoBackground />}
           <Link href={HOME_ROUTE} passHref legacyBehavior>
-            <LogoItem className="navbar-item" isHub={isHub}>
+            <LogoItem className="navbar-item" $isHub={isHub}>
               <Logo src={SITE_LOGO} alt={`${SITE_NAME} Logo`} />
               <Title>{SITE_NAME}</Title>
             </LogoItem>

frontend/components/RouteProgressBar.tsx

@@ -57,13 +57,14 @@ const keyframeForState = (state: RouteProgressState): Keyframes => {
 }
 
 type ProgressBarProps = {
-  state: RouteProgressState | null
+  $state: RouteProgressState | null
 }
 
 const ProgressBar = styled.div<ProgressBarProps>`
   position: absolute;
   height: 100%;
-  animation-name: ${({ state }) => (state ? keyframeForState(state) : 'none')};
+  animation-name: ${({ $state }) =>
+    $state ? keyframeForState($state) : 'none'};
   animation-duration: ${LONG_ANIMATION_DURATION};
   animation-timing-function: ease-in-out;
   animation-fill-mode: forwards;
@@ -120,13 +121,13 @@ const RouteProgressBar = ({
   return container ? (
     ReactDOM.createPortal(
       <ProgressBarContainer>
-        <ProgressBar state={state} />
+        <ProgressBar $state={state} />
       </ProgressBarContainer>,
       container,
     )
   ) : (
     <ProgressBarContainer>
-      <ProgressBar state={null} />
+      <ProgressBar $state={null} />
     </ProgressBarContainer>
   )
 }

frontend/components/SearchBar.tsx

@@ -69,7 +69,7 @@ const SearchWrapper = styled.div`
   }
 `
 
-const Content = styled.div<{ show?: boolean }>`
+const Content = styled.div<{ $show?: boolean }>`
   padding: 12px 17px 12px 17px;
   width: 100%;
 
@@ -82,7 +82,7 @@ const Content = styled.div<{ show?: boolean }>`
   }
 
   ${mediaMaxWidth(MD)} {
-    display: ${({ show }) => (show ? 'block' : 'none')};
+    display: ${({ $show }) => ($show ? 'block' : 'none')};
     overflow-x: hidden;
     width: 100%;
     margin: 0;
@@ -508,7 +508,7 @@ const SearchBar = ({
   return (
     <>
       <Wrapper style={{ paddingTop: `${scrollAmount}rem` }}>
-        <Content show={mobileShow}>
+        <Content $show={mobileShow}>
           <SearchBarValueContext.Provider value={searchInput}>
             <SearchBarContext.Provider value={updateSearch}>
               {children}

frontend/components/Settings/ClubTab.tsx

@@ -232,7 +232,7 @@ const ClubTab = ({
     <>
       <EmptyState name="button" />
       <Center>
-        <Text isGray>
+        <Text $isGray>
           No memberships yet! Browse {OBJECT_NAME_PLURAL}{' '}
           <Link href="/">here</Link>.
         </Text>

frontend/components/Settings/QueueTab.tsx

@@ -217,9 +217,9 @@ const MultiProgressBar = styled.div`
   width: 100%;
 `
 
-const ProgressBarSegment = styled.div<{ size: number }>`
+const ProgressBarSegment = styled.div<{ $size: number }>`
   height: 1rem;
-  width: ${({ size }) => Math.floor(size * 10000) / 100}%;
+  width: ${({ $size }) => Math.floor($size * 10000) / 100}%;
   float: left;
 `
 
@@ -296,19 +296,19 @@ const QueueTab = (): ReactElement => {
           <>
             <ProgressBarSegment
               className="has-background-info"
-              size={inactiveClubsCount / totalClubsCount}
+              $size={inactiveClubsCount / totalClubsCount}
             />
             <ProgressBarSegment
               className="has-background-warning"
-              size={pendingClubsCount / totalClubsCount}
+              $size={pendingClubsCount / totalClubsCount}
             />
             <ProgressBarSegment
               className="has-background-danger"
-              size={rejectedClubsCount / totalClubsCount}
+              $size={rejectedClubsCount / totalClubsCount}
             />
             <ProgressBarSegment
               className="has-background-success"
-              size={approvedClubsCount / totalClubsCount}
+              $size={approvedClubsCount / totalClubsCount}
             />
           </>
         )}

frontend/components/Settings/RenewTab.tsx

@@ -68,7 +68,7 @@ const RenewTab = ({ className }: ClubTabProps): ReactElement => {
         <>
           <EmptyState name="button" />
           <Center>
-            <Text isGray>
+            <Text $isGray>
               You are not listed as an officer for any {OBJECT_NAME_PLURAL} yet.
               If you would like to request access for an existing{' '}
               {OBJECT_NAME_SINGULAR}, please send your name, PennKey, and{' '}

frontend/components/Settings/Toggle.tsx

@@ -6,15 +6,15 @@ import { CLUBS_BLUE, LIGHT_GRAY, MEDIUM_GRAY } from '../../constants/colors'
 const HEIGHT = 0.875
 const WIDTH = 2.25
 
-const Label = styled.span<{ active?: boolean }>`
+const Label = styled.span<{ $active?: boolean }>`
   display: inline-block;
   margin-bottom: 0;
   color: ${MEDIUM_GRAY};
   transition: all 0.2 ease;
   cursor: pointer;
   opacity: 0.6;
-  ${({ active }) =>
-    active &&
+  ${({ $active }) =>
+    $active &&
     `
     opacity: 1;
     color: ${CLUBS_BLUE} !important;
@@ -29,7 +29,7 @@ const ToggleWrapper = styled.div`
   margin-right: 0.625em;
 `
 
-const Bar = styled.div<{ active?: boolean }>`
+const Bar = styled.div<{ $active?: boolean }>`
   transition: all 0.2s ease;
   width: 100%;
   height: ${HEIGHT}rem;
@@ -39,15 +39,16 @@ const Bar = styled.div<{ active?: boolean }>`
   cursor: pointer;
 `
 
-const Circle = styled.div<{ active?: boolean }>`
+const Circle = styled.div<{ $active?: boolean }>`
   transition: all 0.2s ease;
   height: ${HEIGHT + 0.4}rem;
   width: ${HEIGHT + 0.4}rem;
   border-radius: 100%;
   margin-top: ${(1.4 - HEIGHT) / 2 - 0.2}rem;
   position: absolute;
   background: ${CLUBS_BLUE};
-  margin-left: ${({ active }) => (active ? `${WIDTH - HEIGHT - 0.4}rem` : '0')};
+  margin-left: ${({ $active }) =>
+    $active ? `${WIDTH - HEIGHT - 0.4}rem` : '0'};
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
   cursor: pointer;
 `
@@ -70,22 +71,22 @@ const Toggle = <T,>({
 
   return (
     <div>
-      <Label onClick={handleClick} active>
+      <Label onClick={handleClick} $active>
         {filterOffText}
       </Label>
       <ToggleWrapper>
         <Circle
           style={{ background: active ? CLUBS_BLUE : MEDIUM_GRAY }}
           onClick={handleClick}
-          active={active}
+          $active={active}
         />
         <Bar
           style={{ background: active ? '#D3EBF3' : LIGHT_GRAY }}
           onClick={handleClick}
-          active={active}
+          $active={active}
         />
       </ToggleWrapper>
-      <Label onClick={handleClick} active>
+      <Label onClick={handleClick} $active>
         {filterOnText}
       </Label>
     </div>

frontend/components/Settings/WhartonApplicationStatus.tsx

@@ -97,7 +97,7 @@ function StatusCard({
 
   return (
     <>
-      <Card className="mb-4" bordered background={WHITE}>
+      <Card className="mb-4" $bordered $background={WHITE}>
         <CardHeader>
           <CardTitle className="is-size-3">{application}</CardTitle>
         </CardHeader>