3 files changed, 26 insertions, 14 deletions
diff --git a/FrontEnd/src/views/settings/index.css b/FrontEnd/src/views/settings/index.css
new file mode 100644
index 00000000..566d501b
--- /dev/null
+++ b/FrontEnd/src/views/settings/index.css
@@ -0,0 +1,24 @@
+.change-avatar-cropper-row {
+  max-height: 400px;
+}
+
+.change-avatar-img {
+  min-width: 50%;
+  max-width: 100%;
+  max-height: 400px;
+}
+
+.settings-item {
+  padding: 0.5em 1em;
+  transition: background 0.3s;
+  border-bottom: 1px solid #e9ecef;
+}
+.settings-item.first {
+  border-top: 1px solid #e9ecef;
+}
+.settings-item.clickable {
+  cursor: pointer;
+}
+.settings-item:hover {
+  background: #dee2e6;
+}
diff --git a/FrontEnd/src/views/settings/index.tsx b/FrontEnd/src/views/settings/index.tsx
index 04a2777a..f0bed222 100644
--- a/FrontEnd/src/views/settings/index.tsx
+++ b/FrontEnd/src/views/settings/index.tsx
@@ -9,6 +9,8 @@ import ChangePasswordDialog from "./ChangePasswordDialog";
 import ChangeAvatarDialog from "./ChangeAvatarDialog";
 import ChangeNicknameDialog from "./ChangeNicknameDialog";
 
+import "./index.css";
+
 const ConfirmLogoutDialog: React.FC<{
   onClose: () => void;
   onConfirm: () => void;
diff --git a/FrontEnd/src/views/settings/settings.sass b/FrontEnd/src/views/settings/settings.sass
deleted file mode 100644
index 8c6d24b8..00000000
--- a/FrontEnd/src/views/settings/settings.sass
+++ /dev/null
@@ -1,14 +0,0 @@
-.settings-item
-  padding: 0.5em 1em
-  transition: background 0.3s
-  border-bottom: 1px solid $gray-200
-
-  &.first
-    border-top: 1px solid $gray-200
-
-  &.clickable
-    cursor: pointer
-
-  &:hover
-    background: $gray-300
-