Some style fixes

src/components/Button.tsx

@@ -4,11 +4,11 @@ import { colors } from "@theme/colors";
 
 interface ButtonProps {
   onClick: () => void;
-  type: "hero" | "filled" | "filter" | "bordered";
+  buttonStyle: "hero" | "filled" | "filter" | "bordered";
   selected?: boolean;
 }
 
-const StyledButton = styled.button<ButtonProps>`
+const StyledButton = styled.button<{ $selected: boolean }>`
   border-radius: none;
   padding: 0.8rem 2rem;
   margin: 0.5rem;
@@ -46,7 +46,7 @@ const StyledButton = styled.button<ButtonProps>`
     font-weight: 300;
     border: 2px solid ${colors.grey1};
 
-    ${(p) => p.selected && (`
+    ${(p) => p.$selected && (`
       background-color: ${colors.grey1};
       color: ${colors.white};
     `)}
@@ -62,8 +62,8 @@ const StyledButton = styled.button<ButtonProps>`
   }
 `;
 
-const Button: React.FC<ButtonProps> = ({ type, selected, onClick, ...props }) => (
-  <StyledButton type="button" onClick={onClick} className={type} selected={selected} {...props} />
+const Button: React.FC<ButtonProps> = ({ buttonStyle, selected, onClick, ...props }) => (
+  <StyledButton type="button" onClick={onClick} className={buttonStyle} $selected={selected} {...props} />
 )
 
 export default Button;

src/components/Header.tsx

@@ -7,7 +7,7 @@ import breakpoints from "@theme/breakpoints";
 import NavigationMobile from "./NavigationMobile";
 import HeaderLogo from "./HeaderLogo";
 
-const StyledHeader = styled.header<{isHidden?: boolean}>`
+const StyledHeader = styled.header`
   display: flex;
   flex-flow: row nowrap;
   @media screen and (max-width: ${breakpoints.mobile}) {
@@ -15,7 +15,7 @@ const StyledHeader = styled.header<{isHidden?: boolean}>`
   }
 `;
 
-const Sticky = styled.div`
+const Sticky = styled.div<{$isHidden?: boolean}>`
   position: sticky;
   top: 0;
   z-index: 10;
@@ -24,7 +24,7 @@ const Sticky = styled.div`
   background-color: ${colors.darkBlue};
   transition: all 200ms ease-out;
 
-  ${(p) => p.isHidden ? (`
+  ${(p) => p.$isHidden ? (`
     transition: all 200ms ease-in;
     transform: translateY(-100%);
   `) : null}
@@ -60,8 +60,8 @@ const Header: React.FC = () => {
 
 
   return (
-    <Sticky>
-      <StyledHeader isHidden={isHidden}>
+    <Sticky $isHidden={isHidden}>
+      <StyledHeader>
         <HeaderLogo />
         <Navigation onMobileMenuOpen={handleMobileMenuClick} />
       </StyledHeader>

src/pages/admin/signups/[id]/list.tsx

@@ -70,7 +70,7 @@ const SignupEmailPage: React.FC<SignupEmailPageProps> = ({ match: { params: { id
             ))}
             <th>
               <CSVLink data={CSVData} headers={questions.map(q => q.title)} separator=";">
-                <StyledButton colorOverride="green" type="filled">
+                <StyledButton colorOverride="green" buttonStyle="filled">
                   Download CSV
                 </StyledButton>
               </CSVLink>
@@ -87,7 +87,7 @@ const SignupEmailPage: React.FC<SignupEmailPageProps> = ({ match: { params: { id
                 </td>
               ))}
               <td>
-                <StyledButton colorOverride="red" type="filled" onClick={() => confirmDelete(s, questions[0])}>
+                <StyledButton colorOverride="red" buttonStyle="filled" onClick={() => confirmDelete(s, questions[0])}>
                   Delete
                 </StyledButton>
               </td>

src/views/ActualPage/EventCalendar.tsx

@@ -19,13 +19,13 @@ const EventCalendar: React.FC<EventCalendarProps> = ({events}) => {
       <h1 id="tapahtumat">
         Tapahtumat
         <FilterContainer>
-          <Button type="filter" onClick={() => { setFilter(0) }} selected={filterSelected === 0}>
+          <Button buttonStyle="filter" onClick={() => { setFilter(0) }} selected={filterSelected === 0}>
           Näytä kaikki
           </Button>
-          <Button type="filter" onClick={() => { setFilter(1) }} selected={filterSelected === 1}>
+          <Button buttonStyle="filter" onClick={() => { setFilter(1) }} selected={filterSelected === 1}>
           Järjestä aihettain&nbsp;›
           </Button>
-          <Button type="filter" onClick={() => { setFilter(2) }} selected={filterSelected === 2}>
+          <Button buttonStyle="filter" onClick={() => { setFilter(2) }} selected={filterSelected === 2}>
           Valitse aika&nbsp;›
           </Button>
         </FilterContainer>
@@ -46,7 +46,7 @@ const EventCalendar: React.FC<EventCalendarProps> = ({events}) => {
       </CardSection>
       { numberShown < events.length  && (
         <FilterContainer>
-          <Button type="bordered" onClick={() => { setNumberShown(numberShown + 8) }}>
+          <Button buttonStyle="bordered" onClick={() => { setNumberShown(numberShown + 8) }}>
             Lataa lisää
           </Button>
         </FilterContainer>

src/views/ActualPage/News.tsx

@@ -19,13 +19,13 @@ const News: React.FC<NewsProps> = ({feed}) => {
       <h1 id="uutiset">
         Uutiset
         <FilterContainer>
-          <Button type="filter" onClick={() => { setFilter(0) }} selected={filterSelected === 0}>
+          <Button buttonStyle="filter" onClick={() => { setFilter(0) }} selected={filterSelected === 0}>
           Näytä kaikki
           </Button>
-          <Button type="filter" onClick={() => { setFilter(1) }} selected={filterSelected === 1}>
+          <Button buttonStyle="filter" onClick={() => { setFilter(1) }} selected={filterSelected === 1}>
           Järjestä aihettain&nbsp;›
           </Button>
-          <Button type="filter" onClick={() => { setFilter(2) }} selected={filterSelected === 2}>
+          <Button buttonStyle="filter" onClick={() => { setFilter(2) }} selected={filterSelected === 2}>
           Valitse aika&nbsp;›
           </Button>
         </FilterContainer>
@@ -45,7 +45,7 @@ const News: React.FC<NewsProps> = ({feed}) => {
       </CardSection>
       { numberShown < feed.length  && (
         <FilterContainer>
-          <Button type="bordered" onClick={() => { setNumberShown(numberShown + 8) }}>
+          <Button buttonStyle="bordered" onClick={() => { setNumberShown(numberShown + 8) }}>
             Lataa lisää
           </Button>
         </FilterContainer>

src/views/EventPage/EventPageView.tsx

@@ -57,7 +57,7 @@ const EventPageView: React.FC<EventPageViewProps> = ({ event }) => {
         <SignupButtons>
           {event.signupForm.map(sf => (
             <Link key={sf.id} to={`/signup/${sf.id}`}>
-              <Button type="filled" onClick={noop}>
+              <Button buttonStyle="filled" onClick={noop}>
                 {sf.title_fi}
               </Button>
             </Link>