penpot/frontend/resources/styles/main/partials/user-settings.scss

.settings-content {
  .main-logo {
    position: fixed;
    left: 0;
    top:0;
    width: 40px;
    height: 40px;
    z-index: 12;
    cursor: pointer;
  }

  nav {
    display: flex;
    left: 0;
    width: 100%;
    justify-content: center;

    .nav-item {
      margin: 0 $size-6;
      color: $color-gray-30;
      text-transform: uppercase;
      border-bottom: 1px solid transparent;

      &:hover {
        color: $color-black;
      }

      &.current {
        color: $color-black;
        border-bottom: 1px solid $color-primary;
      }
    }
  }
}

.settings-profile,
.settings-password {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 500px;

  .settings-label {
    color: $color-black;
    font-size: $fs15;
    margin: $x-big 0 $x-small 0;
    padding: $medium 0;
  }

  .input-text {
    color: $color-gray-60;
  }

  .btn-primary {
    margin-top: $medium;
  }

  .profile-form,
  .password-form {
    display: flex;
    flex-direction: column;
  }

  .avatar-form {
    align-items: center;
    display: flex;

    img {
      border-radius: 50%;
      flex-shrink: 0;
      height: 120px;
      margin-right: $medium;
      width: 120px;
    }

  }
}