Use grid to organise settings in admin, my-account

3 files changed, 19 insertions, 1 deletions

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 046368c8b..a9475e484 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -174,6 +174,16 @@ label {
   }
 }
 
+.title-page-about,
+.title-page-settings {
+  font-size: 115%;
+  font-weight: $font-regular;
+
+  &.active {
+    font-weight: $font-semibold;
+  }
+}
+
 .admin-sub-header {
   display: flex;
   align-items: center;
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index f718791eb..5c1ce1028 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -175,10 +175,10 @@ ngb-tabset {
 
 .nav-tabs .nav-link {
   &:not(.active) {
-    opacity: .6;
     border-bottom: 3px solid transparent;
   }
   &.active {
+    font-weight: $font-semibold;
     background-color: var(--mainBackgroundColor) !important;
     border: none;
     border-bottom: 2px solid var(--mainColor);
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 9a8d0073a..0a500b6f3 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -463,6 +463,14 @@
   font-size: 13px;
 }
 
+@mixin settings-big-title {
+  text-transform: uppercase;
+  color: var(--mainColor);
+  font-weight: $font-bold;
+  font-size: 110%;
+  margin-bottom: 10px;
+}
+
 @mixin actor-owner {
   @include disable-default-a-behaviour;