Refactor Checkbox (#932)

* Refactor Checkbox

* Complete note completion

* Fixes

* Fix login

front/src/modules/activities/components/CommentThreadTitle.tsx

@@ -0,0 +1,82 @@
+import styled from '@emotion/styled';
+
+import {
+  Checkbox,
+  CheckboxShape,
+  CheckboxSize,
+} from '@/ui/input/components/Checkbox';
+import { ActivityType } from '~/generated/graphql';
+
+const StyledEditableTitleInput = styled.input<{
+  completed: boolean;
+  value: string;
+}>`
+  background: transparent;
+
+  border: none;
+  color: ${({ theme, value }) =>
+    value ? theme.font.color.primary : theme.font.color.light};
+  display: flex;
+
+  flex-direction: column;
+  font-size: ${({ theme }) => theme.font.size.xl};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+
+  line-height: ${({ theme }) => theme.text.lineHeight.md};
+  outline: none;
+  text-decoration: ${({ completed }) => (completed ? 'line-through' : 'none')};
+  &::placeholder {
+    color: ${({ theme }) => theme.font.color.light};
+  }
+  width: calc(100% - ${({ theme }) => theme.spacing(2)});
+`;
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledCheckboxContainer = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+`;
+
+type OwnProps = {
+  title: string;
+  type: ActivityType;
+  completed: boolean;
+  onTitleChange: (title: string) => void;
+  onCompletionChange: (value: boolean) => void;
+};
+
+export function CommentThreadTitle({
+  title,
+  completed,
+  type,
+  onTitleChange,
+  onCompletionChange,
+}: OwnProps) {
+  return (
+    <StyledContainer>
+      {type === ActivityType.Task && (
+        <StyledCheckboxContainer onClick={() => onCompletionChange(!completed)}>
+          <Checkbox
+            size={CheckboxSize.Large}
+            shape={CheckboxShape.Rounded}
+            checked={completed}
+          />
+        </StyledCheckboxContainer>
+      )}
+      <StyledEditableTitleInput
+        autoComplete="off"
+        autoFocus
+        placeholder={`${type} title (optional)`}
+        onChange={(event) => onTitleChange(event.target.value)}
+        value={title}
+        completed={completed}
+      />
+    </StyledContainer>
+  );
+}