From 4dfb7a4cd7e7e0ef9a780a741ec78aa58e444e11 Mon Sep 17 00:00:00 2001
From: Elvira <elveechernenko@yandex.ru>
Date: Thu, 11 Jan 2024 21:10:45 +0300
Subject: [PATCH 1/5] feat: adds checkboxes, radio buttons, toggles

---
 src/5_shared/assets/icons/actions/tick.svg    |   2 +-
 .../CustomCheckbox/CustomCheckbox.module.scss |  70 ++++++++++++
 .../ui/CustomCheckbox/CustomCheckbox.tsx      |  75 +++++++++++++
 .../ui/CustomRadio/CustomRadio.module.scss    |  84 ++++++++++++++
 src/5_shared/ui/CustomRadio/CustomRadio.tsx   |  67 +++++++++++
 .../ui/CustomToggle/CustomToggle.module.scss  | 104 ++++++++++++++++++
 src/5_shared/ui/CustomToggle/CustomToggle.tsx |  59 ++++++++++
 7 files changed, 460 insertions(+), 1 deletion(-)
 create mode 100644 src/5_shared/ui/CustomCheckbox/CustomCheckbox.module.scss
 create mode 100644 src/5_shared/ui/CustomCheckbox/CustomCheckbox.tsx
 create mode 100644 src/5_shared/ui/CustomRadio/CustomRadio.module.scss
 create mode 100644 src/5_shared/ui/CustomRadio/CustomRadio.tsx
 create mode 100644 src/5_shared/ui/CustomToggle/CustomToggle.module.scss
 create mode 100644 src/5_shared/ui/CustomToggle/CustomToggle.tsx

diff --git a/src/5_shared/assets/icons/actions/tick.svg b/src/5_shared/assets/icons/actions/tick.svg
index cea3353..a2fcc91 100644
--- a/src/5_shared/assets/icons/actions/tick.svg
+++ b/src/5_shared/assets/icons/actions/tick.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M21.3581 5.65107C21.5508 5.84885 21.5467 6.16541 21.3489 6.35812L9.03314 18.3581C8.83898 18.5473 8.52944 18.5473 8.33528 18.3581L2.65107 12.8197C2.45329 12.6269 2.44918 12.3104 2.64189 12.1126C2.8346 11.9148 3.15115 11.9107 3.34893 12.1034L8.68421 17.3019L20.6511 5.64189C20.8488 5.44918 21.1654 5.45329 21.3581 5.65107Z" fill="#272932"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M21.3581 5.65107C21.5508 5.84885 21.5467 6.16541 21.3489 6.35812L9.03314 18.3581C8.83898 18.5473 8.52944 18.5473 8.33528 18.3581L2.65107 12.8197C2.45329 12.6269 2.44918 12.3104 2.64189 12.1126C2.8346 11.9148 3.15115 11.9107 3.34893 12.1034L8.68421 17.3019L20.6511 5.64189C20.8488 5.44918 21.1654 5.45329 21.3581 5.65107Z" fill="currentColor"/>
 </svg>
diff --git a/src/5_shared/ui/CustomCheckbox/CustomCheckbox.module.scss b/src/5_shared/ui/CustomCheckbox/CustomCheckbox.module.scss
new file mode 100644
index 0000000..7ccd769
--- /dev/null
+++ b/src/5_shared/ui/CustomCheckbox/CustomCheckbox.module.scss
@@ -0,0 +1,70 @@
+@import '@styles/colors.scss';
+
+.visually-hidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	border: 0;
+	clip: rect(0 0 0 0);
+	overflow: hidden;
+}
+
+.checkbox {
+	position: relative;
+	display: flex;
+	align-items: center;
+	padding: 0;
+
+	&--right {
+		justify-content: space-between;
+	}
+}
+
+.checkbox__icon {
+	display: flex;
+	margin-right: 10px;
+	justify-content: center;
+	align-items: center;
+	width: 24px;
+	height: 24px;
+	box-sizing: border-box;
+	border: 2px solid $neutral-text-light-color;
+	border-radius: 6px;
+	color: rgb(255, 255, 255, 0);
+
+	&--right {
+		margin-right: 0;
+	}
+
+	&--error {
+		border: 2px solid $danger-bright-color;
+	}
+}
+
+label:hover .checkbox__icon {
+	border-color: $primary-background-color;
+}
+
+input:checked ~ .checkbox__icon {
+	background-color: $primary-button-active-color;
+	border: 2px solid $primary-button-active-color;
+	color: $neutral-background-main-color;
+}
+
+input:disabled ~ .checkbox__icon {
+	background-color: $neutral-background-second-color;
+	border: 2px solid $neutral-line-color;
+}
+
+input:checked:disabled ~ .checkbox__icon {
+	background-color: $neutral-background-second-color;
+	border: 2px solid $neutral-text-light-color;
+	color: $neutral-text-light-color;
+}
+
+.checkbox__label {
+	font-size: 14px;
+	line-height: 16px;
+}
diff --git a/src/5_shared/ui/CustomCheckbox/CustomCheckbox.tsx b/src/5_shared/ui/CustomCheckbox/CustomCheckbox.tsx
new file mode 100644
index 0000000..d727a6a
--- /dev/null
+++ b/src/5_shared/ui/CustomCheckbox/CustomCheckbox.tsx
@@ -0,0 +1,75 @@
+import cx from 'classnames';
+import { ChangeEvent } from 'react';
+
+import SvgIconTick from '@assets/icons/actions/tick.svg?react';
+
+import styles from './CustomCheckbox.module.scss';
+
+interface CustomCheckboxProps {
+	name: string;
+	value?: string;
+	id?: string;
+	onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+	inputClassName?: string;
+	labelClassName?: string;
+	labelText?: string;
+	isDisabled?: boolean;
+	isChecked?: boolean;
+	isPositionRight?: boolean;
+	isError?: boolean;
+}
+
+export const CustomCheckbox = ({
+	name,
+	value,
+	id,
+	onChange,
+	inputClassName,
+	labelClassName,
+	labelText,
+	isDisabled,
+	isChecked,
+	isPositionRight,
+	isError,
+}: CustomCheckboxProps) => {
+	return (
+		<label
+			className={cx(styles.checkbox, labelClassName, isPositionRight && styles['checkbox--right'])}
+		>
+			<input
+				type="checkbox"
+				value={value}
+				name={name}
+				id={id}
+				className={cx(styles['visually-hidden'], inputClassName)}
+				onChange={onChange}
+				disabled={isDisabled}
+				checked={isChecked}
+			/>
+
+			{isPositionRight ? (
+				<>
+					<span className={styles['checkbox__label']}>{labelText}</span>
+					<span
+						className={cx(
+							styles['checkbox__icon'],
+							styles['checkbox__icon--right'],
+							isError && styles['checkbox__icon--error']
+						)}
+					>
+						<SvgIconTick />
+					</span>
+				</>
+			) : (
+				<>
+					<span
+						className={cx(styles['checkbox__icon'], isError && styles['checkbox__icon--error'])}
+					>
+						<SvgIconTick />
+					</span>
+					<span className={styles['checkbox__label']}>{labelText}</span>
+				</>
+			)}
+		</label>
+	);
+};
diff --git a/src/5_shared/ui/CustomRadio/CustomRadio.module.scss b/src/5_shared/ui/CustomRadio/CustomRadio.module.scss
new file mode 100644
index 0000000..de91a1d
--- /dev/null
+++ b/src/5_shared/ui/CustomRadio/CustomRadio.module.scss
@@ -0,0 +1,84 @@
+@import '@styles/colors.scss';
+
+.visually-hidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	border: 0;
+	clip: rect(0 0 0 0);
+	overflow: hidden;
+}
+
+.radio {
+	position: relative;
+	display: flex;
+	align-items: center;
+	padding: 0;
+
+	&--right {
+		justify-content: space-between;
+	}
+}
+
+.radio__icon {
+	display: flex;
+	margin-right: 10px;
+	justify-content: center;
+	align-items: center;
+	width: 24px;
+	height: 24px;
+	box-sizing: border-box;
+	background-color: $neutral-background-main-color;
+	border: 2px solid $neutral-text-light-color;
+	border-radius: 50%;
+
+	&--right {
+		margin-right: 0;
+	}
+
+	&--error {
+		border: 2px solid $danger-bright-color;
+	}
+}
+
+label:hover .radio__icon {
+	border-color: $primary-background-color;
+}
+
+input:checked ~ .radio__icon {
+	background-color: $primary-button-active-color;
+	border: 2px solid $primary-button-active-color;
+}
+
+input:checked ~ .radio__icon::before {
+	content: '';
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background-color: $neutral-background-main-color;
+}
+
+input:disabled ~ .radio__icon {
+	background-color: $neutral-background-second-color;
+	border: 2px solid $neutral-line-color;
+}
+
+input:checked:disabled ~ .radio__icon {
+	background-color: $neutral-background-main-color;
+	border: 2px solid $neutral-text-light-color;
+}
+
+input:checked:disabled ~ .radio__icon::before {
+	content: '';
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background-color: $neutral-text-light-color;
+}
+
+.radio__label {
+	font-size: 14px;
+	line-height: 16px;
+}
diff --git a/src/5_shared/ui/CustomRadio/CustomRadio.tsx b/src/5_shared/ui/CustomRadio/CustomRadio.tsx
new file mode 100644
index 0000000..e863835
--- /dev/null
+++ b/src/5_shared/ui/CustomRadio/CustomRadio.tsx
@@ -0,0 +1,67 @@
+import cx from 'classnames';
+import { ChangeEvent } from 'react';
+
+import styles from './CustomRadio.module.scss';
+
+interface CustomRadioProps {
+	name: string;
+	value: string;
+	id?: string;
+	onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+	inputClassName?: string;
+	labelClassName?: string;
+	labelText?: string;
+	isDisabled?: boolean;
+	isChecked?: boolean;
+	isPositionRight?: boolean;
+	isError?: boolean;
+}
+
+export const CustomRadio = ({
+	name,
+	value,
+	id,
+	onChange,
+	inputClassName,
+	labelClassName,
+	labelText,
+	isDisabled,
+	isChecked,
+	isPositionRight,
+	isError,
+}: CustomRadioProps) => {
+	return (
+		<label className={cx(styles.radio, labelClassName, isPositionRight && styles['radio--right'])}>
+			<input
+				type="radio"
+				name={name}
+				value={value}
+				id={id}
+				className={cx(styles['visually-hidden'], inputClassName)}
+				onChange={onChange}
+				disabled={isDisabled}
+				checked={isChecked}
+			/>
+
+			{isPositionRight ? (
+				<>
+					<span className={styles['radio__label']}>{labelText}</span>
+					<span
+						className={cx(
+							styles['radio__icon'],
+							styles['radio__icon--right'],
+							isError && styles['radio__icon--error']
+						)}
+					></span>
+				</>
+			) : (
+				<>
+					<span
+						className={cx(styles['radio__icon'], isError && styles['radio__icon--error'])}
+					></span>
+					<span className={styles['radio__label']}>{labelText}</span>
+				</>
+			)}
+		</label>
+	);
+};
diff --git a/src/5_shared/ui/CustomToggle/CustomToggle.module.scss b/src/5_shared/ui/CustomToggle/CustomToggle.module.scss
new file mode 100644
index 0000000..b4ce9f5
--- /dev/null
+++ b/src/5_shared/ui/CustomToggle/CustomToggle.module.scss
@@ -0,0 +1,104 @@
+@import '@styles/colors.scss';
+
+.visually-hidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	border: 0;
+	clip: rect(0 0 0 0);
+	overflow: hidden;
+}
+
+.toggle {
+	position: relative;
+	display: flex;
+	align-items: center;
+	padding: 0;
+
+	&--right {
+		justify-content: space-between;
+	}
+}
+
+.toggle__icon {
+	position: relative;
+	margin-right: 10px;
+	justify-content: center;
+	align-items: center;
+	width: 48px;
+	height: 24px;
+	box-sizing: border-box;
+	background-color: $neutral-text-light-color;
+	border: 2px solid $neutral-text-light-color;
+	border-radius: 12px;
+
+	&--right {
+		margin-right: 0;
+	}
+}
+
+.toggle__icon::before {
+	content: '';
+	position: absolute;
+	top: 2px;
+	left: 3px;
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+	background-color: $neutral-background-main-color;
+}
+
+input:checked ~ .toggle__icon {
+	background-color: $primary-button-active-color;
+	border: 2px solid $primary-button-active-color;
+}
+
+input:checked ~ .toggle__icon::before {
+	content: '';
+	position: absolute;
+	top: 2px;
+	left: 26px;
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+	background-color: $neutral-background-main-color;
+}
+
+input:disabled ~ .toggle__icon {
+	background-color: $neutral-line-color;
+	border: 2px solid $neutral-line-color;
+}
+
+input:disabled ~ .toggle__icon::before {
+	content: '';
+	position: absolute;
+	top: 2px;
+	left: 3px;
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+	background-color: $neutral-background-main-color;
+}
+
+input:checked:disabled ~ .toggle__icon {
+	background-color: $neutral-line-color;
+	border: 2px solid$neutral-line-color;
+}
+
+input:checked:disabled ~ .toggle__icon::before {
+	content: '';
+	position: absolute;
+	top: 2px;
+	left: 26px;
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+	background-color: $neutral-background-main-color;
+}
+
+.toggle__label {
+	font-size: 14px;
+	line-height: 16px;
+}
diff --git a/src/5_shared/ui/CustomToggle/CustomToggle.tsx b/src/5_shared/ui/CustomToggle/CustomToggle.tsx
new file mode 100644
index 0000000..0139e5b
--- /dev/null
+++ b/src/5_shared/ui/CustomToggle/CustomToggle.tsx
@@ -0,0 +1,59 @@
+import cx from 'classnames';
+import { ChangeEvent } from 'react';
+
+import styles from './CustomToggle.module.scss';
+
+interface CustomToggleProps {
+	name: string;
+	value?: string;
+	id?: string;
+	onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+	inputClassName?: string;
+	labelClassName?: string;
+	labelText?: string;
+	isDisabled?: boolean;
+	isChecked?: boolean;
+	isPositionRight?: boolean;
+}
+
+export const CustomToggle = ({
+	name,
+	value,
+	id,
+	onChange,
+	inputClassName,
+	labelClassName,
+	labelText,
+	isDisabled,
+	isChecked,
+	isPositionRight,
+}: CustomToggleProps) => {
+	return (
+		<label
+			className={cx(styles.toggle, labelClassName, isPositionRight && styles['toggle--right'])}
+		>
+			<input
+				type="checkbox"
+				name={name}
+				value={value}
+				id={id}
+				className={cx(styles['visually-hidden'], inputClassName)}
+				onChange={onChange}
+				disabled={isDisabled}
+				checked={isChecked}
+			/>
+
+			{isPositionRight ? (
+				<>
+					<span className={styles['toggle__label']}>{labelText}</span>
+					<span className={cx(styles['toggle__icon'], styles['toggle__icon--right'])}></span>
+				</>
+			) : (
+				<>
+					<span className={styles['toggle__icon']}></span>
+					<span className={styles['toggle__label']}>{labelText}</span>
+				</>
+			)}
+		</label>
+	);
+};

From 0fa8c386f9060fb3ed26258bd75b069a3248160a Mon Sep 17 00:00:00 2001
From: Elvira <elveechernenko@yandex.ru>
Date: Fri, 19 Jan 2024 16:26:03 +0300
Subject: [PATCH 2/5] feat: improves style naming in checkboxes and radio
 buttons

---
 .../CustomCheckbox/CustomCheckbox.module.scss | 14 ++++++-------
 .../ui/CustomCheckbox/CustomCheckbox.tsx      | 16 +++++----------
 .../ui/CustomRadio/CustomRadio.module.scss    | 18 ++++++++---------
 src/5_shared/ui/CustomRadio/CustomRadio.tsx   | 16 +++++----------
 .../ui/CustomToggle/CustomToggle.module.scss  | 20 +++++++++----------
 src/5_shared/ui/CustomToggle/CustomToggle.tsx | 10 +++++-----
 6 files changed, 41 insertions(+), 53 deletions(-)

diff --git a/src/5_shared/ui/CustomCheckbox/CustomCheckbox.module.scss b/src/5_shared/ui/CustomCheckbox/CustomCheckbox.module.scss
index 7ccd769..116e272 100644
--- a/src/5_shared/ui/CustomCheckbox/CustomCheckbox.module.scss
+++ b/src/5_shared/ui/CustomCheckbox/CustomCheckbox.module.scss
@@ -1,6 +1,6 @@
 @import '@styles/colors.scss';
 
-.visually-hidden {
+.visuallyHidden {
 	position: absolute;
 	width: 1px;
 	height: 1px;
@@ -22,7 +22,7 @@
 	}
 }
 
-.checkbox__icon {
+.icon {
 	display: flex;
 	margin-right: 10px;
 	justify-content: center;
@@ -43,28 +43,28 @@
 	}
 }
 
-label:hover .checkbox__icon {
+label:hover .icon {
 	border-color: $primary-background-color;
 }
 
-input:checked ~ .checkbox__icon {
+input:checked ~ .icon {
 	background-color: $primary-button-active-color;
 	border: 2px solid $primary-button-active-color;
 	color: $neutral-background-main-color;
 }
 
-input:disabled ~ .checkbox__icon {
+input:disabled ~ .icon {
 	background-color: $neutral-background-second-color;
 	border: 2px solid $neutral-line-color;
 }
 
-input:checked:disabled ~ .checkbox__icon {
+input:checked:disabled ~ .icon {
 	background-color: $neutral-background-second-color;
 	border: 2px solid $neutral-text-light-color;
 	color: $neutral-text-light-color;
 }
 
-.checkbox__label {
+.label {
 	font-size: 14px;
 	line-height: 16px;
 }
diff --git a/src/5_shared/ui/CustomCheckbox/CustomCheckbox.tsx b/src/5_shared/ui/CustomCheckbox/CustomCheckbox.tsx
index d727a6a..5026f07 100644
--- a/src/5_shared/ui/CustomCheckbox/CustomCheckbox.tsx
+++ b/src/5_shared/ui/CustomCheckbox/CustomCheckbox.tsx
@@ -41,7 +41,7 @@ export const CustomCheckbox = ({
 				value={value}
 				name={name}
 				id={id}
-				className={cx(styles['visually-hidden'], inputClassName)}
+				className={cx(styles.visuallyHidden, inputClassName)}
 				onChange={onChange}
 				disabled={isDisabled}
 				checked={isChecked}
@@ -49,25 +49,19 @@ export const CustomCheckbox = ({
 
 			{isPositionRight ? (
 				<>
-					<span className={styles['checkbox__label']}>{labelText}</span>
+					<span className={styles.label}>{labelText}</span>
 					<span
-						className={cx(
-							styles['checkbox__icon'],
-							styles['checkbox__icon--right'],
-							isError && styles['checkbox__icon--error']
-						)}
+						className={cx(styles.icon, styles['icon--right'], isError && styles['icon--error'])}
 					>
 						<SvgIconTick />
 					</span>
 				</>
 			) : (
 				<>
-					<span
-						className={cx(styles['checkbox__icon'], isError && styles['checkbox__icon--error'])}
-					>
+					<span className={cx(styles.icon, isError && styles['icon--error'])}>
 						<SvgIconTick />
 					</span>
-					<span className={styles['checkbox__label']}>{labelText}</span>
+					<span className={styles.label}>{labelText}</span>
 				</>
 			)}
 		</label>
diff --git a/src/5_shared/ui/CustomRadio/CustomRadio.module.scss b/src/5_shared/ui/CustomRadio/CustomRadio.module.scss
index de91a1d..facb32e 100644
--- a/src/5_shared/ui/CustomRadio/CustomRadio.module.scss
+++ b/src/5_shared/ui/CustomRadio/CustomRadio.module.scss
@@ -1,6 +1,6 @@
 @import '@styles/colors.scss';
 
-.visually-hidden {
+.visuallyHidden {
 	position: absolute;
 	width: 1px;
 	height: 1px;
@@ -22,7 +22,7 @@
 	}
 }
 
-.radio__icon {
+.icon {
 	display: flex;
 	margin-right: 10px;
 	justify-content: center;
@@ -43,16 +43,16 @@
 	}
 }
 
-label:hover .radio__icon {
+label:hover .icon {
 	border-color: $primary-background-color;
 }
 
-input:checked ~ .radio__icon {
+input:checked ~ .icon {
 	background-color: $primary-button-active-color;
 	border: 2px solid $primary-button-active-color;
 }
 
-input:checked ~ .radio__icon::before {
+input:checked ~ .icon::before {
 	content: '';
 	width: 8px;
 	height: 8px;
@@ -60,17 +60,17 @@ input:checked ~ .radio__icon::before {
 	background-color: $neutral-background-main-color;
 }
 
-input:disabled ~ .radio__icon {
+input:disabled ~ .icon {
 	background-color: $neutral-background-second-color;
 	border: 2px solid $neutral-line-color;
 }
 
-input:checked:disabled ~ .radio__icon {
+input:checked:disabled ~ .icon {
 	background-color: $neutral-background-main-color;
 	border: 2px solid $neutral-text-light-color;
 }
 
-input:checked:disabled ~ .radio__icon::before {
+input:checked:disabled ~ .icon::before {
 	content: '';
 	width: 8px;
 	height: 8px;
@@ -78,7 +78,7 @@ input:checked:disabled ~ .radio__icon::before {
 	background-color: $neutral-text-light-color;
 }
 
-.radio__label {
+.label {
 	font-size: 14px;
 	line-height: 16px;
 }
diff --git a/src/5_shared/ui/CustomRadio/CustomRadio.tsx b/src/5_shared/ui/CustomRadio/CustomRadio.tsx
index e863835..3310b93 100644
--- a/src/5_shared/ui/CustomRadio/CustomRadio.tsx
+++ b/src/5_shared/ui/CustomRadio/CustomRadio.tsx
@@ -37,7 +37,7 @@ export const CustomRadio = ({
 				name={name}
 				value={value}
 				id={id}
-				className={cx(styles['visually-hidden'], inputClassName)}
+				className={cx(styles.visuallyHidden, inputClassName)}
 				onChange={onChange}
 				disabled={isDisabled}
 				checked={isChecked}
@@ -45,21 +45,15 @@ export const CustomRadio = ({
 
 			{isPositionRight ? (
 				<>
-					<span className={styles['radio__label']}>{labelText}</span>
+					<span className={styles.label}>{labelText}</span>
 					<span
-						className={cx(
-							styles['radio__icon'],
-							styles['radio__icon--right'],
-							isError && styles['radio__icon--error']
-						)}
+						className={cx(styles.icon, styles['icon--right'], isError && styles['icon--error'])}
 					></span>
 				</>
 			) : (
 				<>
-					<span
-						className={cx(styles['radio__icon'], isError && styles['radio__icon--error'])}
-					></span>
-					<span className={styles['radio__label']}>{labelText}</span>
+					<span className={cx(styles.icon, isError && styles['icon--error'])}></span>
+					<span className={styles.label}>{labelText}</span>
 				</>
 			)}
 		</label>
diff --git a/src/5_shared/ui/CustomToggle/CustomToggle.module.scss b/src/5_shared/ui/CustomToggle/CustomToggle.module.scss
index b4ce9f5..6b2fd6a 100644
--- a/src/5_shared/ui/CustomToggle/CustomToggle.module.scss
+++ b/src/5_shared/ui/CustomToggle/CustomToggle.module.scss
@@ -1,6 +1,6 @@
 @import '@styles/colors.scss';
 
-.visually-hidden {
+.visuallyHidden {
 	position: absolute;
 	width: 1px;
 	height: 1px;
@@ -22,7 +22,7 @@
 	}
 }
 
-.toggle__icon {
+.icon {
 	position: relative;
 	margin-right: 10px;
 	justify-content: center;
@@ -39,7 +39,7 @@
 	}
 }
 
-.toggle__icon::before {
+.icon::before {
 	content: '';
 	position: absolute;
 	top: 2px;
@@ -50,12 +50,12 @@
 	background-color: $neutral-background-main-color;
 }
 
-input:checked ~ .toggle__icon {
+input:checked ~ .icon {
 	background-color: $primary-button-active-color;
 	border: 2px solid $primary-button-active-color;
 }
 
-input:checked ~ .toggle__icon::before {
+input:checked ~ .icon::before {
 	content: '';
 	position: absolute;
 	top: 2px;
@@ -66,12 +66,12 @@ input:checked ~ .toggle__icon::before {
 	background-color: $neutral-background-main-color;
 }
 
-input:disabled ~ .toggle__icon {
+input:disabled ~ .icon {
 	background-color: $neutral-line-color;
 	border: 2px solid $neutral-line-color;
 }
 
-input:disabled ~ .toggle__icon::before {
+input:disabled ~ .icon::before {
 	content: '';
 	position: absolute;
 	top: 2px;
@@ -82,12 +82,12 @@ input:disabled ~ .toggle__icon::before {
 	background-color: $neutral-background-main-color;
 }
 
-input:checked:disabled ~ .toggle__icon {
+input:checked:disabled ~ .icon {
 	background-color: $neutral-line-color;
 	border: 2px solid$neutral-line-color;
 }
 
-input:checked:disabled ~ .toggle__icon::before {
+input:checked:disabled ~ .icon::before {
 	content: '';
 	position: absolute;
 	top: 2px;
@@ -98,7 +98,7 @@ input:checked:disabled ~ .toggle__icon::before {
 	background-color: $neutral-background-main-color;
 }
 
-.toggle__label {
+.label {
 	font-size: 14px;
 	line-height: 16px;
 }
diff --git a/src/5_shared/ui/CustomToggle/CustomToggle.tsx b/src/5_shared/ui/CustomToggle/CustomToggle.tsx
index 0139e5b..2a2a697 100644
--- a/src/5_shared/ui/CustomToggle/CustomToggle.tsx
+++ b/src/5_shared/ui/CustomToggle/CustomToggle.tsx
@@ -37,7 +37,7 @@ export const CustomToggle = ({
 				name={name}
 				value={value}
 				id={id}
-				className={cx(styles['visually-hidden'], inputClassName)}
+				className={cx(styles.visuallyHidden, inputClassName)}
 				onChange={onChange}
 				disabled={isDisabled}
 				checked={isChecked}
@@ -45,13 +45,13 @@ export const CustomToggle = ({
 
 			{isPositionRight ? (
 				<>
-					<span className={styles['toggle__label']}>{labelText}</span>
-					<span className={cx(styles['toggle__icon'], styles['toggle__icon--right'])}></span>
+					<span className={styles.label}>{labelText}</span>
+					<span className={cx(styles.icon, styles['icon--right'])}></span>
 				</>
 			) : (
 				<>
-					<span className={styles['toggle__icon']}></span>
-					<span className={styles['toggle__label']}>{labelText}</span>
+					<span className={styles.icon}></span>
+					<span className={styles.label}>{labelText}</span>
 				</>
 			)}
 		</label>

From 278cec34d4155c9d989912898d724d49bbbfaaa4 Mon Sep 17 00:00:00 2001
From: Elvira <elveechernenko@yandex.ru>
Date: Fri, 19 Jan 2024 23:44:37 +0300
Subject: [PATCH 3/5] feat: optimizes classname use

---
 src/5_shared/ui/CustomCheckbox/CustomCheckbox.tsx | 8 +++++---
 src/5_shared/ui/CustomRadio/CustomRadio.tsx       | 8 +++++---
 src/5_shared/ui/CustomToggle/CustomToggle.tsx     | 2 +-
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/5_shared/ui/CustomCheckbox/CustomCheckbox.tsx b/src/5_shared/ui/CustomCheckbox/CustomCheckbox.tsx
index 5026f07..3320a38 100644
--- a/src/5_shared/ui/CustomCheckbox/CustomCheckbox.tsx
+++ b/src/5_shared/ui/CustomCheckbox/CustomCheckbox.tsx
@@ -34,7 +34,9 @@ export const CustomCheckbox = ({
 }: CustomCheckboxProps) => {
 	return (
 		<label
-			className={cx(styles.checkbox, labelClassName, isPositionRight && styles['checkbox--right'])}
+			className={cx(styles.checkbox, labelClassName, {
+				[styles['checkbox--right']]: isPositionRight,
+			})}
 		>
 			<input
 				type="checkbox"
@@ -51,14 +53,14 @@ export const CustomCheckbox = ({
 				<>
 					<span className={styles.label}>{labelText}</span>
 					<span
-						className={cx(styles.icon, styles['icon--right'], isError && styles['icon--error'])}
+						className={cx(styles.icon, styles['icon--right'], { [styles['icon--error']]: isError })}
 					>
 						<SvgIconTick />
 					</span>
 				</>
 			) : (
 				<>
-					<span className={cx(styles.icon, isError && styles['icon--error'])}>
+					<span className={cx(styles.icon, { [styles['icon--error']]: isError })}>
 						<SvgIconTick />
 					</span>
 					<span className={styles.label}>{labelText}</span>
diff --git a/src/5_shared/ui/CustomRadio/CustomRadio.tsx b/src/5_shared/ui/CustomRadio/CustomRadio.tsx
index 3310b93..12ab1a7 100644
--- a/src/5_shared/ui/CustomRadio/CustomRadio.tsx
+++ b/src/5_shared/ui/CustomRadio/CustomRadio.tsx
@@ -31,7 +31,9 @@ export const CustomRadio = ({
 	isError,
 }: CustomRadioProps) => {
 	return (
-		<label className={cx(styles.radio, labelClassName, isPositionRight && styles['radio--right'])}>
+		<label
+			className={cx(styles.radio, labelClassName, { [styles['radio--right']]: isPositionRight })}
+		>
 			<input
 				type="radio"
 				name={name}
@@ -47,12 +49,12 @@ export const CustomRadio = ({
 				<>
 					<span className={styles.label}>{labelText}</span>
 					<span
-						className={cx(styles.icon, styles['icon--right'], isError && styles['icon--error'])}
+						className={cx(styles.icon, styles['icon--right'], { [styles['icon--error']]: isError })}
 					></span>
 				</>
 			) : (
 				<>
-					<span className={cx(styles.icon, isError && styles['icon--error'])}></span>
+					<span className={cx(styles.icon, { [styles['icon--error']]: isError })}></span>
 					<span className={styles.label}>{labelText}</span>
 				</>
 			)}
diff --git a/src/5_shared/ui/CustomToggle/CustomToggle.tsx b/src/5_shared/ui/CustomToggle/CustomToggle.tsx
index 2a2a697..724028d 100644
--- a/src/5_shared/ui/CustomToggle/CustomToggle.tsx
+++ b/src/5_shared/ui/CustomToggle/CustomToggle.tsx
@@ -30,7 +30,7 @@ export const CustomToggle = ({
 }: CustomToggleProps) => {
 	return (
 		<label
-			className={cx(styles.toggle, labelClassName, isPositionRight && styles['toggle--right'])}
+			className={cx(styles.toggle, labelClassName, { [styles['toggle--right']]: isPositionRight })}
 		>
 			<input
 				type="checkbox"

From 07e65ae4d6bbe895fd06b182bad4ee5dfa71c824 Mon Sep 17 00:00:00 2001
From: Elvira <elveechernenko@yandex.ru>
Date: Sat, 20 Jan 2024 20:21:52 +0300
Subject: [PATCH 4/5] feat: changes border and cursor style, adds opportunity
 to use links in labels

---
 .../CustomCheckbox/CustomCheckbox.module.scss   | 11 ++++++-----
 .../ui/CustomCheckbox/CustomCheckbox.tsx        |  8 ++++----
 .../ui/CustomRadio/CustomRadio.module.scss      | 11 ++++++-----
 .../ui/CustomToggle/CustomToggle.module.scss    | 17 +++++++++--------
 4 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/5_shared/ui/CustomCheckbox/CustomCheckbox.module.scss b/src/5_shared/ui/CustomCheckbox/CustomCheckbox.module.scss
index 116e272..f7a6ee4 100644
--- a/src/5_shared/ui/CustomCheckbox/CustomCheckbox.module.scss
+++ b/src/5_shared/ui/CustomCheckbox/CustomCheckbox.module.scss
@@ -16,6 +16,7 @@
 	display: flex;
 	align-items: center;
 	padding: 0;
+	cursor: pointer;
 
 	&--right {
 		justify-content: space-between;
@@ -30,7 +31,7 @@
 	width: 24px;
 	height: 24px;
 	box-sizing: border-box;
-	border: 2px solid $neutral-text-light-color;
+	border: 1px solid $neutral-text-light-color;
 	border-radius: 6px;
 	color: rgb(255, 255, 255, 0);
 
@@ -39,7 +40,7 @@
 	}
 
 	&--error {
-		border: 2px solid $danger-bright-color;
+		border: 1px solid $danger-bright-color;
 	}
 }
 
@@ -49,18 +50,18 @@ label:hover .icon {
 
 input:checked ~ .icon {
 	background-color: $primary-button-active-color;
-	border: 2px solid $primary-button-active-color;
+	border: 1px solid $primary-button-active-color;
 	color: $neutral-background-main-color;
 }
 
 input:disabled ~ .icon {
 	background-color: $neutral-background-second-color;
-	border: 2px solid $neutral-line-color;
+	border: 1px solid $neutral-line-color;
 }
 
 input:checked:disabled ~ .icon {
 	background-color: $neutral-background-second-color;
-	border: 2px solid $neutral-text-light-color;
+	border: 1px solid $neutral-text-light-color;
 	color: $neutral-text-light-color;
 }
 
diff --git a/src/5_shared/ui/CustomCheckbox/CustomCheckbox.tsx b/src/5_shared/ui/CustomCheckbox/CustomCheckbox.tsx
index 3320a38..d816df8 100644
--- a/src/5_shared/ui/CustomCheckbox/CustomCheckbox.tsx
+++ b/src/5_shared/ui/CustomCheckbox/CustomCheckbox.tsx
@@ -12,11 +12,11 @@ interface CustomCheckboxProps {
 	onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 	inputClassName?: string;
 	labelClassName?: string;
-	labelText?: string;
 	isDisabled?: boolean;
 	isChecked?: boolean;
 	isPositionRight?: boolean;
 	isError?: boolean;
+	children?: JSX.Element | string;
 }
 
 export const CustomCheckbox = ({
@@ -26,11 +26,11 @@ export const CustomCheckbox = ({
 	onChange,
 	inputClassName,
 	labelClassName,
-	labelText,
 	isDisabled,
 	isChecked,
 	isPositionRight,
 	isError,
+	children,
 }: CustomCheckboxProps) => {
 	return (
 		<label
@@ -51,7 +51,7 @@ export const CustomCheckbox = ({
 
 			{isPositionRight ? (
 				<>
-					<span className={styles.label}>{labelText}</span>
+					<span className={styles.label}>{children}</span>
 					<span
 						className={cx(styles.icon, styles['icon--right'], { [styles['icon--error']]: isError })}
 					>
@@ -63,7 +63,7 @@ export const CustomCheckbox = ({
 					<span className={cx(styles.icon, { [styles['icon--error']]: isError })}>
 						<SvgIconTick />
 					</span>
-					<span className={styles.label}>{labelText}</span>
+					<span className={styles.label}>{children}</span>
 				</>
 			)}
 		</label>
diff --git a/src/5_shared/ui/CustomRadio/CustomRadio.module.scss b/src/5_shared/ui/CustomRadio/CustomRadio.module.scss
index facb32e..0f2dfc6 100644
--- a/src/5_shared/ui/CustomRadio/CustomRadio.module.scss
+++ b/src/5_shared/ui/CustomRadio/CustomRadio.module.scss
@@ -16,6 +16,7 @@
 	display: flex;
 	align-items: center;
 	padding: 0;
+	cursor: pointer;
 
 	&--right {
 		justify-content: space-between;
@@ -31,7 +32,7 @@
 	height: 24px;
 	box-sizing: border-box;
 	background-color: $neutral-background-main-color;
-	border: 2px solid $neutral-text-light-color;
+	border: 1px solid $neutral-text-light-color;
 	border-radius: 50%;
 
 	&--right {
@@ -39,7 +40,7 @@
 	}
 
 	&--error {
-		border: 2px solid $danger-bright-color;
+		border: 1px solid $danger-bright-color;
 	}
 }
 
@@ -49,7 +50,7 @@ label:hover .icon {
 
 input:checked ~ .icon {
 	background-color: $primary-button-active-color;
-	border: 2px solid $primary-button-active-color;
+	border: 1px solid $primary-button-active-color;
 }
 
 input:checked ~ .icon::before {
@@ -62,12 +63,12 @@ input:checked ~ .icon::before {
 
 input:disabled ~ .icon {
 	background-color: $neutral-background-second-color;
-	border: 2px solid $neutral-line-color;
+	border: 1px solid $neutral-line-color;
 }
 
 input:checked:disabled ~ .icon {
 	background-color: $neutral-background-main-color;
-	border: 2px solid $neutral-text-light-color;
+	border: 1px solid $neutral-text-light-color;
 }
 
 input:checked:disabled ~ .icon::before {
diff --git a/src/5_shared/ui/CustomToggle/CustomToggle.module.scss b/src/5_shared/ui/CustomToggle/CustomToggle.module.scss
index 6b2fd6a..02dc4ac 100644
--- a/src/5_shared/ui/CustomToggle/CustomToggle.module.scss
+++ b/src/5_shared/ui/CustomToggle/CustomToggle.module.scss
@@ -16,6 +16,7 @@
 	display: flex;
 	align-items: center;
 	padding: 0;
+	cursor: pointer;
 
 	&--right {
 		justify-content: space-between;
@@ -31,7 +32,7 @@
 	height: 24px;
 	box-sizing: border-box;
 	background-color: $neutral-text-light-color;
-	border: 2px solid $neutral-text-light-color;
+	border: 1px solid $neutral-text-light-color;
 	border-radius: 12px;
 
 	&--right {
@@ -42,7 +43,7 @@
 .icon::before {
 	content: '';
 	position: absolute;
-	top: 2px;
+	top: 3px;
 	left: 3px;
 	width: 16px;
 	height: 16px;
@@ -52,13 +53,13 @@
 
 input:checked ~ .icon {
 	background-color: $primary-button-active-color;
-	border: 2px solid $primary-button-active-color;
+	border: 1px solid $primary-button-active-color;
 }
 
 input:checked ~ .icon::before {
 	content: '';
 	position: absolute;
-	top: 2px;
+	top: 3px;
 	left: 26px;
 	width: 16px;
 	height: 16px;
@@ -68,13 +69,13 @@ input:checked ~ .icon::before {
 
 input:disabled ~ .icon {
 	background-color: $neutral-line-color;
-	border: 2px solid $neutral-line-color;
+	border: 1px solid $neutral-line-color;
 }
 
 input:disabled ~ .icon::before {
 	content: '';
 	position: absolute;
-	top: 2px;
+	top: 3px;
 	left: 3px;
 	width: 16px;
 	height: 16px;
@@ -84,13 +85,13 @@ input:disabled ~ .icon::before {
 
 input:checked:disabled ~ .icon {
 	background-color: $neutral-line-color;
-	border: 2px solid$neutral-line-color;
+	border: 1px solid$neutral-line-color;
 }
 
 input:checked:disabled ~ .icon::before {
 	content: '';
 	position: absolute;
-	top: 2px;
+	top: 3px;
 	left: 26px;
 	width: 16px;
 	height: 16px;

From 94b81dc375a51b056cdc2c977612556345d1f2ba Mon Sep 17 00:00:00 2001
From: Elvira <elveechernenko@yandex.ru>
Date: Fri, 2 Feb 2024 18:40:47 +0300
Subject: [PATCH 5/5] feat: changes footer

---
 .../FooterLayout/FooterLayout.module.scss     | 111 ++++++++++++--
 src/2_widgets/FooterLayout/FooterLayout.tsx   | 135 ++++++++++++++----
 .../SocialsList/SocialsList.module.scss       |  18 +++
 .../FooterLayout/SocialsList/SocialsList.tsx  |  52 +++++++
 src/2_widgets/MainLayout/MainLayout.tsx       |   2 +-
 src/5_shared/lib/routes.ts                    |   2 +
 6 files changed, 285 insertions(+), 35 deletions(-)
 create mode 100644 src/2_widgets/FooterLayout/SocialsList/SocialsList.module.scss
 create mode 100644 src/2_widgets/FooterLayout/SocialsList/SocialsList.tsx

diff --git a/src/2_widgets/FooterLayout/FooterLayout.module.scss b/src/2_widgets/FooterLayout/FooterLayout.module.scss
index 49a1ee0..d558ef4 100644
--- a/src/2_widgets/FooterLayout/FooterLayout.module.scss
+++ b/src/2_widgets/FooterLayout/FooterLayout.module.scss
@@ -1,11 +1,15 @@
 @import '@styles/colors.scss';
 @import '@styles/mixins/font.scss';
 @import '@styles/mixins/media.scss';
+@import '@styles/mixins/btn';
+
+.footer {
+	display: flex;
+	flex-direction: column;
+	gap: 35px;
 
-footer {
-	grid-column: 1/3;
 	@include media($min-width: 960px) {
-		padding: 0 100px;
+		padding: 30px 100px;
 	}
 
 	@include media($max-width: 960px) {
@@ -13,21 +17,112 @@ footer {
 	}
 }
 
-.links {
+.logoBlock {
+	display: flex;
+	gap: 20px;
+	align-items: center;
+}
+
+.logoPicture {
+	display: flex;
+	align-items: center;
+	text-decoration: none;
+	color: #202020;
+}
+
+.logoImg {
+	display: flex;
+	align-items: center;
+}
+
+.logoText {
+	display: flex;
+	gap: 12px;
+	align-items: center;
+	text-decoration: none;
+}
+
+.logoName {
+	@include font-source-sans(20px, $neutral-text-main-color, 500, 24px, 'Fredoka');
+}
+
+.logoSlogan {
+	@include font-source-sans(12px, $neutral-text-dark-color, 400, 16px, 'Fredoka');
+}
+
+.svg {
+	width: 40px;
+	height: 38px;
+}
+
+.nav {
 	display: flex;
 	flex-wrap: wrap;
+	margin: 0;
+	padding: 0;
 	list-style: none;
-	justify-content: center;
-	align-items: center;
-	gap: 14px;
-	padding: 2em;
+	justify-content: space-between;
+	align-items: flex-start;
 
 	@include media($max-width: 835px) {
 		flex-direction: column;
 	}
 }
 
+.links {
+	display: flex;
+	flex-direction: column;
+	row-gap: 16px;
+	flex-wrap: wrap;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.form {
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+	row-gap: 16px;
+	margin-bottom: 16px;
+}
+
+.inputGroup {
+	display: flex;
+	flex-wrap: wrap;
+	column-gap: 16px;
+}
+
+.input {
+	width: 303px;
+	padding: 10px 20px;
+	font-size: 14px;
+	line-height: 16px;
+	border-radius: 10px;
+}
+
+.form ::placeholder {
+	font-size: 14px;
+	line-height: 16px;
+	color: $neutral-text-light-color;
+}
+
 .link,
+.label,
 .copyright {
 	@include font-source-sans(14px, $neutral-text-dark-color, 400, 16px);
 }
+
+.submitBtn {
+	@include primary-btn;
+
+	padding: 10px 24px;
+	font-size: 12px;
+	border-radius: 10px;
+}
+
+.copyright {
+	margin: 0;
+	padding: 0;
+	font-size: 12px;
+}
diff --git a/src/2_widgets/FooterLayout/FooterLayout.tsx b/src/2_widgets/FooterLayout/FooterLayout.tsx
index 2dca6eb..3ea32a6 100644
--- a/src/2_widgets/FooterLayout/FooterLayout.tsx
+++ b/src/2_widgets/FooterLayout/FooterLayout.tsx
@@ -1,29 +1,67 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import SocialsList from './SocialsList/SocialsList';
 import { CustomLink } from '../../5_shared/ui';
-import { ABOUT_ROUTE, CONTACTS_ROUTE, POLICY_ROUTE, TERMS_ROUTE } from '@shared/lib/routes';
-import styles from './FooterLayout.module.scss';
+import { Input } from '../../5_shared/ui';
 
-const links = [
-	{
-		title: 'О проекте',
-		href: ABOUT_ROUTE,
-	},
-	{
-		title: 'Контакты',
-		href: CONTACTS_ROUTE,
-	},
-	{
-		title: 'Политика конфиденциальности',
-		href: POLICY_ROUTE,
-	},
-	{
-		title: 'Условия пользования',
-		href: TERMS_ROUTE,
-	},
-];
+import SvgIconLogo from '@assets/icons/logo.svg?react';
+
+import {
+	MAIN_ROUTE,
+	ABOUT_ROUTE,
+	CONTACTS_ROUTE,
+	POLICY_ROUTE,
+	TERMS_ROUTE,
+	FEEDBACK_ROUTE,
+	DPA_ROUTE,
+} from '@shared/lib/routes';
+import styles from './FooterLayout.module.scss';
 
 export default function FooterLayout() {
-	const footerLinks = links.map((link, idx) => (
-		<li key={idx}>
+	const [inputText, setInputText] = useState('');
+	const { t } = useTranslation('header');
+
+	const leftLinks = [
+		{
+			title: 'О платформе',
+			href: ABOUT_ROUTE,
+		},
+		{
+			title: 'Контакты',
+			href: CONTACTS_ROUTE,
+		},
+		{
+			title: 'Отзывы',
+			href: FEEDBACK_ROUTE,
+		},
+	];
+
+	const rightLinks = [
+		{
+			title: 'Правила и условия',
+			href: TERMS_ROUTE,
+		},
+		{
+			title: 'Политика конфиденциальности',
+			href: POLICY_ROUTE,
+		},
+		{
+			title: 'Согласие на обработку персональных данных',
+			href: DPA_ROUTE,
+		},
+	];
+
+	const footerLeftLinks = leftLinks.map((link, index) => (
+		<li key={index}>
+			<CustomLink apperance="underline" target="_blank" href={link.href} className={styles.link}>
+				{link.title}
+			</CustomLink>
+		</li>
+	));
+
+	const footerRightLinks = rightLinks.map((link, index) => (
+		<li key={index}>
 			<CustomLink apperance="underline" target="_blank" href={link.href} className={styles.link}>
 				{link.title}
 			</CustomLink>
@@ -31,11 +69,56 @@ export default function FooterLayout() {
 	));
 
 	return (
-		<footer>
-			<ul className={styles.links}>
-				<li className={styles.copyright}>© 2023 Linguista</li>
-				{footerLinks}
+		<footer className={styles.footer}>
+			<div className={styles.logoBlock}>
+				<CustomLink
+					href={MAIN_ROUTE}
+					target="_self"
+					className={styles.logoPicture}
+					onClick={() => console.log('click')}
+				>
+					<div className={styles.logoImg}>
+						<SvgIconLogo className={styles.svg} />
+					</div>
+				</CustomLink>
+				<CustomLink
+					href={MAIN_ROUTE}
+					target="_self"
+					className={styles.logoText}
+					onClick={() => console.log('click')}
+				>
+					<span className={styles.logoName}>{t('projectName')}</span>
+					<span className={styles.logoSlogan}>{t('projectSlogan')}</span>
+				</CustomLink>
+			</div>
+
+			<ul className={styles.nav}>
+				<li>
+					<ul className={styles.links}>{footerLeftLinks}</ul>
+				</li>
+				<li>
+					<ul className={styles.links}>{footerRightLinks}</ul>
+				</li>
+				<li>
+					<form className={styles.form}>
+						<label className={styles.label}>Нашли ошибку? – Напишите нам!</label>
+						<div className={styles.inputGroup}>
+							<Input
+								className={styles.input}
+								type="text"
+								placeholder="Сообщить об ошибке"
+								value={inputText}
+								onChange={(evt) => setInputText(evt.target.value)}
+							></Input>
+							<button className={styles.submitBtn} type="submit">
+								Отправить
+							</button>
+						</div>
+					</form>
+					<SocialsList />
+				</li>
 			</ul>
+			<p className={styles.copyright}>© 2023 Linguista. Все права защищены.</p>
 		</footer>
 	);
 }
diff --git a/src/2_widgets/FooterLayout/SocialsList/SocialsList.module.scss b/src/2_widgets/FooterLayout/SocialsList/SocialsList.module.scss
new file mode 100644
index 0000000..78dca86
--- /dev/null
+++ b/src/2_widgets/FooterLayout/SocialsList/SocialsList.module.scss
@@ -0,0 +1,18 @@
+.socials {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 12px;
+	margin: 0;
+	padding: 0;
+	list-style-type: none;
+}
+
+.icon {
+	padding-right: 0;
+	padding-left: 0;
+}
+
+.svg {
+	width: 32px;
+	height: 32px;
+}
diff --git a/src/2_widgets/FooterLayout/SocialsList/SocialsList.tsx b/src/2_widgets/FooterLayout/SocialsList/SocialsList.tsx
new file mode 100644
index 0000000..4aa49cf
--- /dev/null
+++ b/src/2_widgets/FooterLayout/SocialsList/SocialsList.tsx
@@ -0,0 +1,52 @@
+import { CustomLink } from '../../../5_shared/ui';
+import { ButtonIcon } from '../../../5_shared/ui';
+
+import SvgIconYoutube from '@assets/icons/socials/youtube.svg?react';
+import SvgIconTelegram from '@assets/icons/socials/telegram.svg?react';
+import SvgIconVk from '@assets/icons/socials/vk.svg?react';
+import SvgIconDiscord from '@assets/icons/socials/discord.svg?react';
+import SvgIconGithub from '@assets/icons/socials/github.svg?react';
+
+import styles from './SocialsList.module.scss';
+
+export default function SocialsList() {
+	return (
+		<ul className={styles.socials}>
+			<li>
+				<CustomLink apperance="regular" href="#" target="_blank">
+					<ButtonIcon className={styles.icon}>
+						<SvgIconYoutube className={styles.svg} />
+					</ButtonIcon>
+				</CustomLink>
+			</li>
+			<li>
+				<CustomLink apperance="regular" href="#" target="_blank">
+					<ButtonIcon className={styles.icon}>
+						<SvgIconTelegram className={styles.svg} />
+					</ButtonIcon>
+				</CustomLink>
+			</li>
+			<li>
+				<CustomLink apperance="regular" href="#" target="_blank">
+					<ButtonIcon className={styles.icon}>
+						<SvgIconVk className={styles.svg} />
+					</ButtonIcon>
+				</CustomLink>
+			</li>
+			<li>
+				<CustomLink apperance="regular" href="#" target="_blank">
+					<ButtonIcon className={styles.icon}>
+						<SvgIconDiscord className={styles.svg} />
+					</ButtonIcon>
+				</CustomLink>
+			</li>
+			<li>
+				<CustomLink apperance="regular" href="#" target="_blank">
+					<ButtonIcon className={styles.icon}>
+						<SvgIconGithub className={styles.svg} />
+					</ButtonIcon>
+				</CustomLink>
+			</li>
+		</ul>
+	);
+}
diff --git a/src/2_widgets/MainLayout/MainLayout.tsx b/src/2_widgets/MainLayout/MainLayout.tsx
index 2c0a7ae..5eea379 100644
--- a/src/2_widgets/MainLayout/MainLayout.tsx
+++ b/src/2_widgets/MainLayout/MainLayout.tsx
@@ -17,8 +17,8 @@ const MainLayout = () => {
 				<main className={styles.inner} style={{ width: resize }}>
 					<Outlet />
 				</main>
-				<FooterLayout />
 			</div>
+			<FooterLayout />
 		</>
 	);
 };
diff --git a/src/5_shared/lib/routes.ts b/src/5_shared/lib/routes.ts
index 6606e93..7957c06 100644
--- a/src/5_shared/lib/routes.ts
+++ b/src/5_shared/lib/routes.ts
@@ -20,3 +20,5 @@ export const WORD_ROUTE = '/vocabulary/:slugWord';
 export const CONTACTS_ROUTE = '/contacts';
 export const POLICY_ROUTE = '/privacy-policy';
 export const TERMS_ROUTE = '/terms-of-use';
+export const FEEDBACK_ROUTE = '/feedback';
+export const DPA_ROUTE = 'data-processing-agreement';