settings page redesign (#1234)

src/pages/_includes/cards/auth-lock.html

@@ -1,5 +1,5 @@
 {% assign person = site.data.people[0] %}
-<form class="card card-md" action="{{ site.base }}" method="get" autocomplete="off">
+<form class="card card-md" action="{{ site.base }}/" method="get" autocomplete="off" novalidate>
 	<div class="card-body text-center">
 		<div class="mb-4">
 			<h2 class="card-title">Account Locked</h2>

src/pages/_includes/cards/forgot-password.html

@@ -1,4 +1,4 @@
-<form class="card card-md" action="{{ site.base }}" method="get">
+<form class="card card-md" action="{{ site.base }}/" method="get" autocomplete="off" novalidate>
 	<div class="card-body">
 		<h2 class="card-title text-center mb-4">Forgot password</h2>
 

src/pages/_includes/cards/sign-in.html

@@ -1,4 +1,4 @@
-<form class="card card-md" action="{{ site.base }}" method="get" autocomplete="off">
+<form class="card card-md" action="{{ site.base }}/" method="get" autocomplete="off" novalidate>
 	<div class="card-body">
 		<h2 class="card-title text-center mb-4">Login to your account</h2>
 

src/pages/_includes/cards/sign-up.html

@@ -1,4 +1,4 @@
-<form class="card card-md" action="{{ site.base }}" method="get">
+<form class="card card-md" action="{{ site.base }}/" method="get" autocomplete="off" novalidate>
 	<div class="card-body">
 		<h2 class="card-title text-center mb-4">Create new account</h2>
 

src/pages/_includes/layout/headers/page-header-settings.html

@@ -1,17 +0,0 @@
-<div class="page-header mb-3">
-	<div class="row align-items-center mw-100">
-		<div class="col">
-			<div class="mb-1">
-				{% include ui/breadcrumb.html pages="Administration,Settings" %}
-			</div>
-			<h2 class="page-title">
-				<span class="text-truncate">Settings</span>
-			</h2>
-		</div>
-		<div class="col-auto">
-			<div class="btn-list">
-				{% include ui/button.html color="primary" text="Save Settings" %}
-			</div>
-		</div>
-	</div>
-</div>

src/pages/_includes/layout/navbar-search.html

@@ -1,7 +1,7 @@
 {% assign breakpoint = include.breakpoint | default: 'lg' %}
 
 <div{% if include.class %} class="{{ include.class }}"{% endif %}>
-	<form action="." method="get">
+	<form action="{{ site.base }}/" method="get" autocomplete="off" novalidate>
 		{% include ui/form/input-icon.html prepend=true dark=include.dark rounded=include.rounded aria-label="Search in website" %}
 	</form>
 </div>

src/pages/_includes/layout/navbar-side.html

@@ -6,22 +6,28 @@
 	<div class="nav-item d-none d-{{ include.breakpoint }}-flex me-3">
 		<div class="btn-list">
 			{% if include.dark %}
-				{% include ui/button.html color="dark" icon="brand-github" text="Source code" href=site.github-url external=true %}
-				{% include ui/button.html color="dark" icon="heart" icon-color="pink" text="Sponsor" href=site.github-sponsors-url external=true %}
+			{% include ui/button.html color="dark" icon="brand-github" text="Source code" href=site.github-url
+			external=true %}
+			{% include ui/button.html color="dark" icon="heart" icon-color="pink" text="Sponsor"
+			href=site.github-sponsors-url external=true %}
 			{% else %}
-				{% include ui/button.html icon="brand-github" outline=true text="Source code" href=site.github-url external=true %}
-				{% include ui/button.html icon="heart" icon-color="pink" outline=true text="Sponsor" href=site.github-sponsors-url external=true %}
+			{% include ui/button.html icon="brand-github" outline=true text="Source code" href=site.github-url
+			external=true %}
+			{% include ui/button.html icon="heart" icon-color="pink" outline=true text="Sponsor"
+			href=site.github-sponsors-url external=true %}
 			{% endif %}
 		</div>
 	</div>
 	{% endunless %}
 
 	<div class="d-none d-{{ include.breakpoint }}-flex">
-		<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+		<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
+		   data-bs-placement="bottom">
 			{% include ui/icon.html icon="moon" %}
 		</a>
 
-		<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+		<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
+		   data-bs-placement="bottom">
 			{% include ui/icon.html icon="sun" %}
 		</a>
 
@@ -47,6 +53,13 @@
 			</div>
 			{% endunless %}
 		</a>
-		{% include ui/dropdown-menu.html arrow=true right=true separated=true menu="Set status,Profile & account,Feedback,|,Settings,Logout" %}
+		<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+			<a href="#" class="dropdown-item">Status</a>
+			<a href="#" class="dropdown-item">Profile</a>
+			<a href="#" class="dropdown-item">Feedback</a>
+			<div class="dropdown-divider"></div>
+			<a href="{{ site.base }}/settings.html" class="dropdown-item">Settings</a>
+			<a href="{{ site.base }}/sign-in.html" class="dropdown-item">Logout</a>
+		</div>
 	</div>
 </div>

src/pages/_includes/parts/nav/nav-aside.html

@@ -1,4 +1,4 @@
-<form action="" method="get">
+<form action="{{ site.base }}/" method="get" autocomplete="off" novalidate>
 
 	<div class="subheader mb-2">Category</div>
 	{% assign items = "Games,Clothing,Jewelery,Toys" | split:  "," %}

src/pages/_includes/ui/dropzone.html

@@ -2,7 +2,7 @@
 {% assign text = include.text  | default: "Text"%}
 {% assign description = include.description | default: "Description" %}
 
-<form class="dropzone" id="dropzone-{{ id }}" action=".">
+<form class="dropzone" id="dropzone-{{ id }}" action="{{ site.base }}/" autocomplete="off" novalidate>
 	<div class="fallback">
 		<input name="file" type="file" {% if include.multiple %} multiple {% endif %} />
 	</div>

src/pages/_includes/ui/form/check.html

@@ -6,14 +6,20 @@
 {% assign name = include.name | default: false %}
 {% assign is_empty = include['empty'] | default: false %}
 {% unless title %}
-   {% assign title = '' %}
-   {% if disabled %}{% assign title = title | append: ' disabled' %}{% endif %}
-   {% if checked %}{% assign title = title | append: ' checked' %}{% endif %}
-   {% if switch %}{% assign title = title | append: ' switch' %}{% endif %}
-   {% assign title = title | append: ' ' | append: type %}
-   {% assign title = title | append: ' input' | lstrip | capitalize %}
+{% assign title = '' %}
+{% if disabled %}{% assign title = title | append: ' disabled' %}{% endif %}
+{% if checked %}{% assign title = title | append: ' checked' %}{% endif %}
+{% if switch %}{% assign title = title | append: ' switch' %}{% endif %}
+{% assign title = title | append: ' ' | append: type %}
+{% assign title = title | append: ' input' | lstrip | capitalize %}
 {% endunless %}
-<label class="form-check{% if include.inline %} form-check-inline{% endif %}{% if switch %} form-switch{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
-   <input class="form-check-input{% if is_empty %} position-static{% endif %}" type="{{ type }}"{% if name %} name="{{ name }}"{% endif %}{% if checked %} checked{% endif %}{% if disabled %} disabled{% endif %}>
-   {% unless is_empty %}<span class="form-check-label">{{ title }}</span>{% endunless %}
+<label class="form-check{% if include.inline %} form-check-inline{% endif %}{% if switch %} form-switch{% if include['size'] %} form-switch-{{ include['size'] }}{% endif %}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
+	<input class="form-check-input{% if is_empty %} position-static{% endif %}" type="{{ type }}" {% if name %}
+	       name="{{ name }}" {% endif %}{% if checked %} checked{% endif %}{% if disabled %} disabled{% endif %}>
+	{% if include.title-on and include.title-off %}
+	<span class="form-check-label form-check-label-on">{{include.title-on }}</span>
+	<span class="form-check-label form-check-label-off">{{include.title-off }}</span>
+	{% else %}
+	{% unless is_empty %}<span class="form-check-label">{{ title }}</span>{% endunless %}
+	{% endif %}
 </label>

src/pages/settings.html

@@ -1,27 +1,94 @@
 ---
 layout: default
 title: Settings
+page-header: Account Settings
 ---
-{% include layout/headers/page-header-settings.html %}
-<div class="row">
-	 <div class="col-12 col-md-4 px-4">
-		  {% assign items = "Account,Preferences,Privacy Settings, Theme,Audience and visibility,App Development" | split: "," %}
-		  <div class="list-group list-group-transparent mb-3 ml-3">
-				{% for item in items %}
-				<a class="list-group-item list-group-item-action d-flex align-items-center{% if forloop.first %} active{% endif %}"
-					href="#">
-					 {{ item }}
-					 <small class="text-muted ms-auto">{{ forloop.index | random_number: 11, 200 }}</small>
-				</a>
-				{% endfor %}
-		  </div>
-	 </div>
-	 <div class="col-12 col-md-8">
-		  <div class="row">
-				<div class="col-12">
-					 {% include cards/form/layout.html horizontal=true title="Account" %}
-				</div>
-		  </div>
-	 </div>
-</div>
 
+<div class="card">
+	<div class="row g-0">
+		<div class="col-3 d-none d-md-block border-end">
+			<div class="card-body">
+				<h4 class="subheader">Business settings</h4>
+
+				{% assign items = "My Account,My Notifications,Connected Apps,Plans,Billing & Invoices" | split: "," %}
+				<div class="list-group list-group-transparent">
+					{% for item in items %}
+					<a class="list-group-item list-group-item-action d-flex align-items-center{% if forloop.first %} active{% endif %}" href="#">
+						{{ item }}
+					</a>
+					{% endfor %}
+				</div>
+
+				<h4 class="subheader mt-4">Experience</h4>
+
+				<div class="list-group list-group-transparent">
+					<a href="#" class="list-group-item list-group-item-action">Give Feedback</a>
+				</div>
+			</div>
+		</div>
+		<div class="col d-flex flex-column">
+			<div class="card-body">
+				<h2 class="mb-4">My Account</h2>
+
+				<h3 class="card-title">Profile Details</h3>
+
+				<div class="row align-items-center">
+					<div class="col-auto">{% include ui/avatar.html size="xl" person-id="1" %}</div>
+					<div class="col-auto">{% include ui/button.html text="Change avatar" %}</div>
+					<div class="col-auto">{% include ui/button.html text="Delete avatar" color="danger" ghost=true %}</div>
+				</div>
+
+
+				<h3 class="card-title mt-4">Business Profile</h3>
+
+				<div class="row g-3">
+					<div class="col-md">
+						<div class="form-label">Business Name</div>
+						<input type="text" class="form-control" value="{{ site.data.people[0].company }}">
+					</div>
+					<div class="col-md">
+						<div class="form-label">Business ID</div>
+						<input type="text" class="form-control" value="560afc32">
+					</div>
+					<div class="col-md">
+						<div class="form-label">Location</div>
+						<input type="text" class="form-control" value="{{ site.data.people[0].city }}, {{ site.data.people[0].country }}">
+					</div>
+				</div>
+
+				<h3 class="card-title mt-4">Email</h3>
+				<p class="card-subtitle">This contact will be shown to others publicly, so choose it carefully.</p>
+
+				<div>
+					<div class="row g-2">
+						<div class="col-auto">
+							<input type="text" class="form-control w-auto" value="{{ site.data.people[0].email }}">
+						</div>
+						<div class="col-auto">{% include ui/button.html text="Change" %}</div>
+					</div>
+				</div>
+
+
+				<h3 class="card-title mt-4">Password</h3>
+				<p class="card-subtitle">You can set a permanent password if you don't want to use temporary login codes.</p>
+				<div>
+					{% include ui/button.html text="Set new password" %}
+				</div>
+
+
+				<h3 class="card-title mt-4">Public profile</h3>
+				<p class="card-subtitle">Making your profile public means that anyone on the Dashkit network will be able to find you.</p>
+				<div>
+					{% include ui/form/check.html switch=true size="lg" title-on="You're currently visible" title-off="You're currently invisible" %}
+				</div>
+
+			</div>
+			<div class="card-footer bg-transparent mt-auto">
+				<div class="btn-list justify-content-end">
+					{% include ui/button.html text="Cancel" %}
+					{% include ui/button.html text="Submit" color="primary" %}
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

src/scss/_variables.scss

@@ -97,7 +97,7 @@ $gray-800: #1d273b !default;
 $gray-900: #0f172a !default;
 
 $light: $gray-50 !default;
-$dark: $gray-900 !default;
+$dark: $gray-800 !default;
 
 $body-bg: $gray-100 !default;
 $body-color: $dark !default;

src/scss/ui/_avatars.scss

@@ -16,6 +16,7 @@
   user-select: none;
   background: var(--#{$prefix}avatar-bg) no-repeat center/cover;
   border-radius: $avatar-border-radius;
+  box-shadow: inset 0 0 0 1px var(--tblr-border-color-light);
 
   svg {
     width: calc(var(--#{$prefix}avatar-size) / #{divide(40, 24)});

src/scss/ui/_cards.scss

@@ -309,7 +309,6 @@
 }
 
 .card-subtitle {
-  margin-top: divide(-$card-spacer-y, 2);
   margin-bottom: $card-title-spacer-y;
   color: $text-muted;
   font-weight: normal;
@@ -329,17 +328,17 @@
     margin-bottom: 0;
   }
 
-  .card-sm > & {
+  .card-sm & {
     padding: 1rem;
   }
 
-  .card-md > & {
+  .card-md & {
     @include media-breakpoint-up(md) {
       padding: 2.5rem;
     }
   }
 
-  .card-lg > & {
+  .card-lg & {
     @include media-breakpoint-up(md) {
       padding: 2rem;
     }

src/scss/ui/forms/_form-check.scss

@@ -5,7 +5,19 @@ Form check
   user-select: none;
 
   &.form-check-highlight .form-check-input:not(:checked) ~ .form-check-label {
-    opacity: $text-muted-opacity;
+    color: var(--#{$prefix}muted);
+  }
+
+  .form-check-label-off {
+    color: var(--#{$prefix}muted);
+  }
+
+  .form-check-input:checked ~ .form-check-label-off {
+    display: none;
+  }
+
+  .form-check-input:not(:checked) ~ .form-check-label-on {
+    display: none;
   }
 }
 
@@ -57,9 +69,17 @@ Form switch
 }
 
 .form-switch-lg {
+  padding-left: 3.5rem;
+  min-height: 1.5rem;
+
   .form-check-input {
     height: 1.5rem;
     width: 2.75rem;
     background-size: 1.5rem;
+    margin-left: -3.5rem;
+  }
+
+  .form-check-label {
+    padding-top: .125rem;
   }
 }