Use next/image for all <img> tags

src/components/AddIcon.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import Image from "next/image";
+
+const Icon = "/img/add-icon.png";
+
+const AddIcon: React.FC = () => (
+  <Image
+    src={Icon}
+    width={20}
+    height={20}
+    alt="Add"
+  />
+);
+
+export default AddIcon;

src/components/AddLink.tsx

@@ -2,8 +2,7 @@ import React, { ComponentProps } from "react";
 import styled from "styled-components";
 import { colors } from "@theme/colors";
 import { Link } from "@components/index";
-
-const AddIcon = "/img/add-icon.png";
+import AddIcon from "@components/AddIcon";
 
 const StyledLink = styled(Link)`
   display: flex;
@@ -15,10 +14,9 @@ const StyledLink = styled(Link)`
     color: ${colors.orange2};
   }
 
-  img {
-    margin-right: 8px;
-    margin-top: -2px;
-    width: 20px;
+  & > div {
+    margin-right: 8px !important;
+    margin-top: -2px !important;
   }
 `;
 
@@ -28,7 +26,7 @@ type AddLinkProps = ComponentProps<typeof Link> & {
 
 const AddLink: React.FC<AddLinkProps> = ({ text, ...props }) => (
   <StyledLink passHref {...props}>
-    <img src={AddIcon} />
+    <AddIcon />
     {text}
   </StyledLink>
 );

src/components/Card.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Image from "next/image";
 import styled from "styled-components";
 import { colors } from "@theme/colors";
 import { Link } from "@components/index";
@@ -19,12 +20,6 @@ const StyledCard = styled.article`
   margin: 1rem;
   text-align: center;
 
-  img {
-    width: 100%;
-    max-height: 300px;
-    margin-bottom: 1rem;
-  }
-
   p {
     font-size: 1rem;
     text-overflow: ellipsis;
@@ -77,7 +72,7 @@ const WrappedCard: React.FC<WrappedCardProps> = ({
   };
   const datetime = new Date(start_time).toLocaleString("fi-FI", options);
   const img = image ? (
-    <img src={image} alt={imageAlt} />
+    <Image src={image} alt={imageAlt} layout="responsive" width={0} height={0} objectFit="scale-down" />
   ) : null;
 
   const button = (

src/components/ContactCard.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Image from "next/image";
 import styled from "styled-components";
 import { colors } from "@theme/colors";
 
@@ -12,7 +13,7 @@ const Card = styled.article`
 `;
 
 const ImageContainer = styled.div`
-  padding: 0.5rem;
+  position: relative;
   display: flex;
   flex-shrink: 0;
   justify-content: center;
@@ -20,9 +21,8 @@ const ImageContainer = styled.div`
   height: 5rem;
   width: 5rem;
 
-  & > img {
-    width: 100%;
-    height: 100%;
+  img {
+    padding: 0.5rem !important;
     border-radius: 50%;
   }
 `;
@@ -60,9 +60,11 @@ const ContactCard: React.FC<ContactCardProps> = ({
   <Card>
     {image ? (
       <ImageContainer>
-        <img
+        <Image
           src={image}
           alt={name}
+          layout="fill"
+          objectFit="scale-down"
         />
       </ImageContainer>
     ) : null}

src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx

@@ -5,8 +5,7 @@ import { DragDropContext, Droppable } from "react-beautiful-dnd";
 import { Question } from ".";
 import colors from "@theme/colors";
 import QuestionList from "./QuestionList";
-
-const AddIcon = "/img/add-icon.png";
+import AddIcon from "@components/AddIcon";
 
 const Widget = styled.div`
   & > button {
@@ -18,10 +17,9 @@ const Widget = styled.div`
     padding: 0;
     margin: 1rem 0;
 
-    & > img {
-      margin-right: 8px;
-      margin-top: -2px;
-      width: 20px;
+    & > div {
+      margin-right: 8px !important;
+      margin-top: -2px !important;
     }
   }
 `;
@@ -90,7 +88,7 @@ const SignupQuestionsWidget: React.FC<SignupQuestionsWidgetProps> = ({ value, on
         </Droppable>
       </DragDropContext>
       <AddQuestionButton type="button" onClick={handleNewRowClick(questions)} data-e2e="admin-signup-new-question">
-        <img src={AddIcon} />
+        <AddIcon />
         New Question
       </AddQuestionButton>
     </Widget>