refactor: 💡 fix progress stepp

Author: marc101101

frontend/src/components/base/progress-step.tsx

@@ -8,7 +8,6 @@ import {
   Spacer,
   StyleableFlexContainer,
 } from "./flex";
-import { Subheading } from "./headings";
 
 const StepConnector = styled(StyleableFlexContainer)`
   position: relative;
@@ -113,8 +112,7 @@ export const ProgressStep = ({
         </StepContainer>
         <Spacer />
         <FlexRowColumnContainer>
-          <Subheading text={title} />
-
+          <h2 style={{ marginTop: "-0.2rem" }}>{title}</h2>
           {children}
         </FlexRowColumnContainer>
         <Spacer /> <Spacer />

frontend/src/components/base/text-input.tsx

@@ -1,23 +1,9 @@
-import { css } from "@emotion/core";
-import styled from "@emotion/styled";
 import * as React from "react";
 import { useCallback } from "react";
 import { useFocus } from "../../hooks/use-focus";
 import { FormField } from "./form-field";
 import { TextField } from "@mui/material";
 
-const FieldStyle = css`
-  width: 100%;
-  padding: 0.75rem 0.5rem;
-  font-size: 14px;
-  border: none;
-`;
-
-const Area = styled.textarea`
-  ${FieldStyle}
-  resize: vertical;
-`;
-
 /**
  * The type of the text input.
  */
@@ -63,7 +49,6 @@ export const TextInput = ({
   isDisabled = false,
   name,
   description,
-  rows,
 }: ITextInputProps) => {
   const [isFocused, onFocus, onBlur] = useFocus(autoFocus);
   const fieldType = type || TextInputType.Text;
@@ -92,23 +77,20 @@ export const TextInput = ({
     ),
   };
 
-  const field =
-    fieldType === TextInputType.Area ? (
-      <Area {...fieldProps} rows={rows} />
-    ) : (
-      <div>
-        <TextField
-          style={{ marginTop: "0.5rem" }}
-          type={fieldType}
-          id="outlined-basic"
-          variant="outlined"
-          label={description}
-          fullWidth
-          focused={isFocused}
-          {...fieldProps}
-        />
-      </div>
-    );
+  const field = (
+    <div>
+      <TextField
+        style={{ marginTop: "0.5rem" }}
+        type={fieldType}
+        id="outlined-basic"
+        variant="outlined"
+        label={description}
+        fullWidth
+        focused={isFocused}
+        {...fieldProps}
+      />
+    </div>
+  );
 
   return (
     <FormField title={title} mandatory={mandatory}>

frontend/src/components/routers/sidebar/sidebar.tsx

@@ -172,11 +172,17 @@ export const Sidebar = () => {
       <div style={{ bottom: "1rem", position: "absolute" }}>
         <LI>
           <div style={{ display: "flex", padding: "1rem" }}>
-            <img
-              style={{ borderRadius: "5rem" }}
-              height={50}
-              src={getGravatarUrl(user?.email ?? "", "50")}
-            />
+            <a
+              href="https://www.gravatar.com/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <img
+                style={{ borderRadius: "5rem" }}
+                height={50}
+                src={getGravatarUrl(user?.email ?? "", "50")}
+              />
+            </a>
             <div
               style={{
                 padding: "0.8rem",