modals fixes, unify avatars and stamps

src/pages/_includes/layout/debug.html

@@ -59,7 +59,7 @@
 		height: 6px;
 		display: inline-block;
 		background: rgba(255, 255, 255, .3);
-		border-radius: 50%;
+		border-radius: $border-radius-full;
 	}
 
 	body.show-debug-code .card-debug {

src/pages/_includes/parts/modals/deactivate.html

@@ -0,0 +1,19 @@
+<div class="modal-body">
+	<div class="row">
+		<div class="col-auto">{% include ui/avatar.html color="red" icon="alert-triangle" class="avatar-rounded" %}</div>
+		<div class="col">
+			<div class="h3">Are you sure you want to delete your account?
+			</div>
+			<div class="text-muted">Deleting your account is permanent and will remove all content including comments,
+				avatars and profile settings. Are you sure you want to delete your account?
+			</div>
+
+			<div class="mt">
+				<div class="btn-list justify-content-end">
+					<div class="btn btn-white">Cancel</div>
+					<div class="btn btn-danger">Deactivate</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

src/scss/_variables.scss

@@ -13,7 +13,7 @@ $enable-negative-margins: false !default;
 $assets-base: ".." !default;
 
 // FONTS
-$google-font: 'Intelo' !default;
+$google-font: 'Inter' !default;
 $google-font-monospaced: null !default;
 
 $font-family-sans-serif: $google-font, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !default;
@@ -175,7 +175,8 @@ $dark-mode-text: $light;
 // Borders
 $border-width: 1px !default;
 $border-width-wide: 2px !default;
-$border-radius: 4px !default;
+$border-radius: 3px !default;
+$border-radius-full: 50% !default;
 
 // Avatars
 $avatar-size: 2.5rem !default;
@@ -278,6 +279,8 @@ $input-btn-font-size-lg: $h2-font-size !default;
 $input-btn-padding-x-lg: 1.5rem !default;
 $input-btn-padding-y-lg: .5rem !default;
 
+$input-btn-focus-width: 3px !default;
+
 $input-height: null !default;
 $input-height-sm: null !default;
 $input-height-lg: null !default;
@@ -335,7 +338,7 @@ $dropdown-border-color: $border-color !default;
 $dropdown-menu-max-width: 25rem !default;
 
 //grid
-$grid-gutter-width: 1.5rem !default;
+$grid-gutter-width: 1rem !default;
 $container-padding-x: .75rem !default;
 
 //loader
@@ -348,11 +351,11 @@ $list-group-item-padding-x: .75rem !default;
 //modals
 $modal-backdrop-opacity: .24 !default;
 $modal-backdrop-bg: $dark !default;
-$modal-backdrop-blur: 2px !default;
+$modal-backdrop-blur: 4px !default;
 
 $modal-fade-transform: translate(0, -1rem) !default;
 
-$modal-content-border-color: $border-color !default;
+$modal-content-border-color: transparent !default;
 $modal-content-bg: $gray-50 !default;
 $modal-content-border-radius: $border-radius !default;
 

src/scss/ui/_avatars.scss

@@ -15,15 +15,16 @@
   background: $gray-200 no-repeat center/cover;
   border-radius: $avatar-border-radius;
 
-  .icon {
+  svg {
-    font-size: 1.25em;
+    width: 1.5rem;
+    height: 1.5rem;
   }
 
   .badge {
     position: absolute;
     right: 0;
     bottom: 0;
-    border-radius: 50%;
+    border-radius: $border-radius-full;
     box-shadow: 0 0 0 2px #fff;
   }
 
@@ -32,6 +33,10 @@
   }
 }
 
+.avatar-rounded {
+  border-radius: $border-radius-full;
+}
+
 @each $avatar-size, $size in $avatar-sizes {
   .avatar-#{$avatar-size} {
     width: $size;

src/scss/ui/_badges.scss

@@ -5,7 +5,7 @@
   overflow: hidden;
   vertical-align: text-bottom;
   user-select: none;
-  
+
   @at-root a#{&} {
     color: $white;
   }
@@ -17,7 +17,7 @@
     min-width: 0;
     min-height: auto;
     padding: 0;
-    border-radius: 50%;
+    border-radius: $border-radius-full;
   }
 }
 

src/scss/ui/_buttons.scss

@@ -4,16 +4,6 @@
   align-items: center;
   justify-content: center;
 
-  &:not([class^="btn-outline"]):not([class*=" btn-outline"]):not([class^="btn-ghost"]):not([class*=" btn-ghost"]) {
-    &:not(:focus):not(.focus) {
-      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05), inset 0 2px 0 -1px rgba(255, 255, 255, .1);
-    }
-
-    svg {
-      filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .05));
-    }
-  }
-
   &:disabled,
   &.disabled {
     cursor: not-allowed;
@@ -126,7 +116,7 @@
   z-index: $zindex-fixed;
   bottom: 1.5rem;
   right: 1.5rem;
-  border-radius: 50%;
+  border-radius: $border-radius-full;
 }
 
 .btn-loading {
@@ -141,7 +131,7 @@
     vertical-align: text-bottom;
     border: $spinner-border-width-sm solid currentColor;
     border-right-color: transparent;
-    border-radius: 50%;
+    border-radius: $border-radius-full;
     color: $white;
     position: absolute;
     width: 1rem;

src/scss/ui/_calendars.scss

@@ -53,7 +53,7 @@
     cursor: pointer;
     background: 0 0;
     border: 1px solid transparent;
-    border-radius: 50%;
+    border-radius: $border-radius-full;
     outline: 0;
     transition: background .3s, border .3s, box-shadow .32s, color .3s;
 

src/scss/ui/_forms.scss

@@ -141,7 +141,7 @@ Form help
   cursor: pointer;
   user-select: none;
   background: $min-white;
-  border-radius: 50%;
+  border-radius: $border-radius-full;
   transition: .3s background-color, .3s color;
 
   &:hover,

src/scss/ui/_lists.scss

@@ -83,7 +83,7 @@
   color: #ffffff;
   text-align: center;
   background: $text-muted;
-  border-radius: 50%;
+  border-radius: $border-radius-full;
 
   .icon {
     width: 1rem;

src/scss/ui/_loaders.scss

@@ -28,7 +28,7 @@
     border-top-color: currentColor;
     border-left-color: currentColor;
 
-    border-radius: 50%;
+    border-radius: $border-radius-full;
     animation: loader .6s linear;
     animation-iteration-count: infinite;
   }

src/scss/ui/_steps.scss

@@ -82,7 +82,7 @@
     display: block;
     content: "";
     border: 2px solid #fff;
-    border-radius: 50%;
+    border-radius: $border-radius-full;
     transform: translateX(-50%);
   }