CSS arrangement

packages/app/src/components/Sidebar/CustomSidebar.module.scss

@@ -1,7 +1,13 @@
 @use '~/styles/organisms/wiki-custom-sidebar.scss';
+@use '~/styles/mixins' as *;
 
 .grw-custom-sidebar-content :global {
   .wiki {
     @extend %grw-custom-sidebar-content;
   }
+
+  .grw-custom-sidebar-skeleton-text {
+    @include grw-skeleton-text(16px, 16px);
+    max-width: 100%;
+  }
 }

packages/app/src/components/Sidebar/RecentChanges.module.scss

@@ -1,4 +1,4 @@
-@use './Skeleton/SidebarSkeleton.module.scss' as *;
+@use '~/styles/mixins' as *;
 
 .grw-recent-changes-resize-button :global {
   font-size: 12px;
@@ -17,8 +17,9 @@
 }
 
 .list-group-item :global {
-  .grw-recent-changes-skeleton-text {
-    @include grw-skeleton-text(120px);
+  .grw-recent-changes-skeleton-small {
+    @include grw-skeleton-text($font-size:14px, $line-height:16px);
+    max-width: 120px;
   }
 
   .grw-recent-changes-skeleton-h5 {
@@ -27,8 +28,8 @@
   }
 
   .grw-recent-changes-skeleton-date {
+    @include grw-skeleton-text($font-size:10px, $line-height:12px);
     width: 90px;
-    height: 13.5;
   }
 
   .grw-recent-changes-item-lower {

packages/app/src/components/Sidebar/SidebarHeaderReloadButton.tsx

@@ -7,7 +7,7 @@ type Props = {
 export const SidebarHeaderReloadButton = ({ onClick }: Props) => {
 
   return (
-    <button type="button" className="btn btn-sm ml-auto grw-btn-reload" onClick={onClick}>
+    <button type="button" className="btn btn-sm ml-auto py-0 grw-btn-reload" onClick={onClick}>
       <i className="icon icon-reload"></i>
     </button>
   );

packages/app/src/components/Sidebar/Skeleton/CustomSidebarContentSkeleton.tsx

@@ -2,15 +2,14 @@ import React from 'react';
 
 import { Skeleton } from '~/components/Skeleton';
 
-import customSidebarStyles from '../CustomSidebar.module.scss';
-import styles from './SidebarSkeleton.module.scss';
+import styles from '../CustomSidebar.module.scss';
 
 const CustomSidebarContentSkeleton = (): JSX.Element => {
 
   return (
-    <div className={`p-3 grw-custom-sidebar-content ${customSidebarStyles['grw-custom-sidebar-content']}`}>
-      <Skeleton additionalClass={`${styles['grw-sidebar-skeleton-text-full']} mt-3`} />
-      <Skeleton additionalClass={`${styles['grw-sidebar-skeleton-text-full']} my-4`} />
+    <div className={`p-3 grw-custom-sidebar-content ${styles['grw-custom-sidebar-content']}`}>
+      <Skeleton additionalClass={`grw-custom-sidebar-skeleton-text ${styles['grw-custom-sidebar-skeleton-text']} mt-3`} />
+      <Skeleton additionalClass={`grw-custom-sidebar-skeleton-text ${styles['grw-custom-sidebar-skeleton-text']} my-4`} />
     </div>
   );
 };

packages/app/src/components/Sidebar/Skeleton/RecentChangesContentSkeleton.tsx

@@ -13,7 +13,7 @@ const SkeletonItem = () => {
       <div className="d-flex w-100">
         <Skeleton additionalClass='rounded-circle picture' roundedPill />
         <div className="flex-grow-1 ml-2">
-          <Skeleton additionalClass={`grw-recent-changes-skeleton-text ${styles['grw-recent-changes-skeleton-text']} ${isSmall && 'pb-1'}`} />
+          <Skeleton additionalClass={`grw-recent-changes-skeleton-small ${styles['grw-recent-changes-skeleton-small']}`} />
           <Skeleton additionalClass={`grw-recent-changes-skeleton-h5 ${styles['grw-recent-changes-skeleton-h5']} ${isSmall ? 'my-0' : 'my-2'}`} />
           <div className="d-flex justify-content-end grw-recent-changes-item-lower pt-1">
             <Skeleton additionalClass={`grw-recent-changes-skeleton-date ${styles['grw-recent-changes-skeleton-date']}`} />
@@ -32,6 +32,7 @@ const RecentChangesContentSkeleton = (): JSX.Element => {
         <SkeletonItem />
         <SkeletonItem />
         <SkeletonItem />
+        <li className={'list-group-item p-0'}></li>
       </ul>
     </div>);
 };

packages/app/src/components/Sidebar/Skeleton/SidebarSkeleton.module.scss

@@ -1,30 +1,6 @@
-$h3-line-height: 30px;
-$h5-line-height: 18px;
+@use '~/styles/mixins' as *;
 
 .grw-sidebar-content-header-skeleton {
+  @include grw-skeleton-h3;
   max-width: 160px;
-  height: $h3-line-height;
-  padding: (($h3-line-height - 16px) / 2) 0;
-}
-
-@mixin grw-skeleton-text($width) {
-  max-width: $width;
-  height: 1rem;
-}
-
-/*
-.grw-skeleton-h3 {
-  max-width: 160px;
-  height: $h5-line-height;
-  padding: (($h5-line-height - 14px) / 2) 0;
-}
-*/
-
-@mixin grw-skeleton-h5 {
-  height: $h5-line-height;
-  padding: (($h5-line-height - 16px) / 2) 0;
-}
-
-.grw-sidebar-skeleton-text-full {
-  @include grw-skeleton-text(100%);
 }

packages/app/src/styles/_mixins.scss

@@ -219,3 +219,24 @@
     content: $code;
   }
 }
+
+@mixin grw-skeleton-text($font-size, $line-height) {
+  height: $line-height;
+  padding: (($line-height - $font-size)  / 2) 0;
+}
+/*
+.example {
+  @include grw-skeleton-text($font-size:$size, $line-height:$height);
+  max-width: 100%;
+}
+*/
+
+// values from './bootstrap/override'
+
+@mixin grw-skeleton-h3 {
+  @include grw-skeleton-text(21px, 30px);
+}
+
+@mixin grw-skeleton-h5 {
+  @include grw-skeleton-text(16px, 18px);
+}