1 files changed, 46 insertions, 8 deletions
diff --git a/FrontEnd/src/pages/setting/index.css b/FrontEnd/src/pages/setting/index.css
index ccf7a97a..af5ccf20 100644
--- a/FrontEnd/src/pages/setting/index.css
+++ b/FrontEnd/src/pages/setting/index.css
@@ -1,3 +1,5 @@
+/* TODO: Make item prettier. */
+
 .change-avatar-cropper-row {
   max-height: 400px;
 }
@@ -8,20 +10,56 @@
   max-height: 400px;
 }
 
-.settings-item {
+.setting-section {
+  padding: 1em 0;
+  margin: 1em 0;
+}
+
+.setting-section-title {
+  padding: 0 1em;
+}
+
+.setting-section-item-area {
+  margin-top: 1em;
+  border-top: 1px solid var(--cru-key-container-color);
+}
+
+.setting-item-container {
   padding: 0.5em 1em;
-  transition: background 0.3s;
-  border-bottom: 1px solid #e9ecef;
+  transition: background-color 0.3s;
+  color: var(--cru-surface-on-color);
+  background-color: var(--cru-surface-color);
+  border-bottom: 1px solid var(--cru-key-container-color);
+  display: flex;
   align-items: center;
 }
-.settings-item.first {
-  border-top: 1px solid #e9ecef;
+
+.setting-item-container:hover {
+  background-color: var(--cru-key-container-1-color);
+  border-bottom-color: var(--cru-key-container-1-color);
+}
+
+.setting-item-label-sub {
+  color: var(--cru-secondary-text-color);
 }
-.settings-item.clickable {
+
+.setting-item-container.setting-type-button {
   cursor: pointer;
 }
-.settings-item:hover {
-  background: #dee2e6;
+
+.setting-item-container.setting-type-button.danger {
+  color: var(--cru-danger-color);
+}
+
+
+@media (max-width: 576) {
+  .setting-item-container.setting-type-select {
+    flex-direction: column;
+  }
+
+  .setting-item-container.setting-type-select .setting-item-value-area {
+    margin-top: 1em;
+  }
 }
 
 .register-code {