Changed all class names to lowercase.

src/app/auth/settings/settings.component.sass

@@ -8,7 +8,7 @@
 .fw-bold-custom
   font-weight: 600
 
-.ActionList
+.action-list
   padding: 0
   &-item
     position: relative
@@ -19,7 +19,7 @@
       &:hover
         cursor: pointer
         text-decoration: none
-    &--navActive
+    &--nav__active
       background: $app-color-action-list-item-default-selected-bg
       a
         font-weight: 600
@@ -53,15 +53,15 @@
     align-items: start
     &:hover
       background: $app-color-action-list-item-default-selected-bg
-  &-sectionDivider
+  &-section-divider
     &:not(:empty)
       display: flex
       padding: 6px 8px
       font-size: 12px
       font-weight: 500
       color: $app-color-fg-muted
       flex-direction: column
-  &-sectionDivider
+  &-section-divider
     &:empty
       display: block
       height: 1px

src/app/components/app-header/app-header.component.html

@@ -1,16 +1,16 @@
 <nav
     *ngIf="isVisible"
-    class="navbar navbar-expand-lg navbar-dark bg-dark Header Details px-3 px-md-4 px-lg-5 flex-wrap flex-md-nowrap"
+    class="navbar navbar-expand-lg navbar-dark bg-dark Header details px-3 px-md-4 px-lg-5 flex-wrap flex-md-nowrap"
     id="app-header"
 >
-    <div class="Header-item mt-n1 mb-n1 d-none d-md-flex">
+    <div class="header-item mt-n1 mb-n1 d-none d-md-flex">
         <div [classList]="'app-brand'" id="appHeaderLogo">
             <button (click)="onClickAppLogo()" data-test-id="appLogo">
                 <img [src]="appLogo" alt="Application logo" />
             </button>
         </div>
     </div>
-    <div class="Header-item d-md-none">
+    <div class="header-item d-md-none">
         <button
             #appHeaderMenuButton
             id="appHeaderMenuButton"
@@ -28,7 +28,7 @@
         </button>
     </div>
     <div
-        class="Header-item Header-item--full flex-column flex-md-row width-full flex-order-2 flex-md-order-none mr-0 mr-md-3 mt-3 mt-md-0 Details-content--hidden-not-important d-md-flex"
+        class="header-item header-item--full flex-column flex-md-row width-full flex-order-2 flex-md-order-none mr-0 mr-md-3 mt-3 mt-md-0 details-content--hidden-not-important d-md-flex"
     >
         <div
             class="header-search flex-auto position-relative flex-self-stretch flex-md-self-auto mb-3 mb-md-0 mr-0 mr-md-3"
@@ -38,7 +38,7 @@
                     <ul class="navbar-nav">
                         <li
                             [classList]="
-                                'nav-item searchInputContainer ' + (isSearchActive ? 'active-search-input' : '')
+                                'nav-item search-input-container ' + (isSearchActive ? 'active-search-input' : '')
                             "
                         >
                             <div
@@ -91,7 +91,7 @@
         >
             <div class="d-flex flex-column flex-md-row flex-self-stretch flex-md-self-auto">
                 <a
-                    class="Header-link py-2 py-md-3 mr-0 mr-md-3 border-sm-top border-md-top-0 border-white-fade"
+                    class="header-link py-2 py-md-3 mr-0 mr-md-3 border-sm-top border-md-top-0 border-white-fade"
                     data-ga-click="Header, click, Nav menu - item:explore"
                     data-selected-links="/explore /trending /trending/developers /integrations /integrations/feature/code /integrations/feature/collaborate /integrations/feature/ship showcases showcases_search showcases_landing /explore"
                     href="#"
@@ -100,7 +100,7 @@
                 </a>
 
                 <a
-                    class="Header-link py-2 py-md-3 mr-0 mr-md-3 border-sm-top border-md-top-0 border-white-fade"
+                    class="header-link py-2 py-md-3 mr-0 mr-md-3 border-sm-top border-md-top-0 border-white-fade"
                     data-ga-click="Header, click, Nav menu - item:dashboard:user"
                     aria-label="Dashboard"
                     (click)="onUserDatasets()"
@@ -109,7 +109,7 @@
                 </a>
 
                 <a
-                    class="Header-link d-block d-md-none py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                    class="header-link d-block d-md-none py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                     (click)="onAddNew()"
                     data-test-id="addNewDataset"
                 >
@@ -118,19 +118,19 @@
 
                 <ng-template [ngIf]="!isUserLoggedIn()">
                     <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                        class="header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="openBillingPlanHeader"
                         (click)="onBilling()"
                         >Account & Billing</a
                     >
                     <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                        class="header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="openHelpHeader"
                         (click)="onHelp()"
                         >Help</a
                     >
                     <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                        class="header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="openUserProfileHeader"
                         (click)="onLogin()"
                         >Login</a
@@ -139,37 +139,37 @@
 
                 <ng-template [ngIf]="isUserLoggedIn()">
                     <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                        class="header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="openUserProfileHeader"
                         (click)="onUserProfile()"
                         >Your profile</a
                     >
                     <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                        class="header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="openBillingPlanHeader"
                         (click)="onBilling()"
                         >Account & Billing</a
                     >
                     <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                        class="header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="openAnalyticsHeader"
                         (click)="onAnalytics()"
                         >Analytics</a
                     >
                     <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                        class="header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="openSettingsHeader"
                         (click)="onSettings()"
                         >Settings</a
                     >
                     <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                        class="header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="openHelpHeader"
                         (click)="onHelp()"
                         >Help</a
                     >
                     <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                        class="header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="userNameHeader"
                         href="/kulykivska"
                     >
@@ -184,7 +184,7 @@
                         {{ isUserLoggedIn() ? userInfo.name : defaultUsername }}
                     </a>
                     <button
-                        class="Header-link Header-signout-btn d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-md-top-0 border-white-fade"
+                        class="header-link header-signout-btn d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-md-top-0 border-white-fade"
                         data-test-id="openSignOutHeader"
                         (click)="onLogOut()"
                     >

src/app/components/app-header/app-header.component.spec.ts

@@ -111,8 +111,8 @@ describe("AppHeaderComponent", () => {
             const headerMenu = findNativeElement(fixture, "#app-header");
             emitClickOnElement(fixture, "#appHeaderMenuButton");
             isExpectation
-                ? expect(headerMenu.classList.contains("Details--on")).toBeFalse()
-                : expect(headerMenu.classList.contains("Details--on")).toBeTrue();
+                ? expect(headerMenu.classList.contains("details--on")).toBeFalse()
+                : expect(headerMenu.classList.contains("details--on")).toBeTrue();
         });
     });
 

src/app/components/app-header/app-header.component.ts

@@ -131,9 +131,9 @@ export class AppHeaderComponent extends BaseComponent implements OnInit {
         this.isCollapsedAppHeaderMenu = !this.isCollapsedAppHeaderMenu;
         if (appHeaderButton) {
             if (this.isCollapsedAppHeaderMenu) {
-                appHeaderButton.classList.add("Details--on");
+                appHeaderButton.classList.add("details--on");
             } else {
-                appHeaderButton.classList.remove("Details--on");
+                appHeaderButton.classList.remove("details--on");
             }
         }
     }

src/app/components/notification-indicator/notification-indicator.html

@@ -1,11 +1,4 @@
-<a
-    href="/notifications"
-    class="Header-link notification-indicator position-relative tooltipped tooltipped-sw"
-    aria-label="You have no unread notifications"
-    data-hotkey="g n"
-    data-ga-click="Header, go to notifications, icon:read"
-    data-target="notification-indicator.link"
->
+<a href="/notifications" class="header-link notification-indicator position-relative tooltipped tooltipped-sw">
     <span class="mail-status" data-target="notification-indicator.modifier"></span>
     <svg-icon name="notifications-large"></svg-icon>
 </a>

src/app/components/overview-history-summary-header/overview-history-summary-header.component.html

@@ -2,8 +2,8 @@
     <div class="box-header position-relative" *ngIf="metadataBlockFragment">
         <div class="d-flex rounded-top-1 border-bottom-0 align-items-center flex-wrap">
             <div class="flex-shrink-0 ml-n1 mr-n1 mt-n1 mb-n1 hx_avatar_stack_commit">
-                <div class="avatarStack align-self-start">
-                    <div class="avatarStack__body" aria-label="sergiimk">
+                <div class="avatar-stack align-self-start">
+                    <div class="avatar-stack__body" aria-label="sergiimk">
                         <a
                             class="avatar avatar-user"
                             style="width: 24px; height: 24px"

src/app/components/search-additional-buttons/search-additional-buttons-nav.component.html

@@ -1,13 +1,13 @@
-<ul class="nav searchAdditionalButtons__nav">
+<ul class="nav search-additional-buttons__nav">
     <ng-template ngFor let-searchAdditionalData [ngForOf]="searchAdditionalButtonsData">
         <li class="nav-item mr-2 pt-2">
-            <div class="btnGroup-parent nav">
+            <div class="btn-group-parent nav">
                 <button
                     (click)="onClickButton(searchAdditionalData.textButton)"
                     [classList]="
                         searchAdditionalData.additionalOptions && searchAdditionalData.additionalOptions.options
-                            ? 'starred rounded-left-2 border-right-0 additionalOptions-btn btn-sm btn btnGroup-item d-flex justify-content-between align-items-center'
-                            : 'starred rounded-2 btn-sm btn btnGroup-item d-flex justify-content-between align-items-center'
+                            ? 'starred rounded-left-2 border-right-0 additional-options-btn btn-sm btn btn-group-item d-flex justify-content-between align-items-center'
+                            : 'starred rounded-2 btn-sm btn btn-group-item d-flex justify-content-between align-items-center'
                     "
                 >
                     <svg
@@ -40,19 +40,19 @@
                 <ng-template [ngIf]="searchAdditionalData.additionalOptions">
                     <button
                         style="height: inherit"
-                        class="additionalOptions-btn mat-menu-trigger starred rounded-right-2 border-1 border btn-sm btn btnGroup-item d-flex justify-content-center align-items-center mat-button mat-icon-button mat-button-base"
+                        class="additional-options-btn mat-menu-trigger starred rounded-right-2 border-1 border btn-sm btn btn-group-item d-flex justify-content-center align-items-center mat-button mat-icon-button mat-button-base"
                         [matMenuTriggerFor]="menu2"
                     >
-                        <mat-icon class="arrowDropDown">arrow_drop_down</mat-icon>
+                        <mat-icon class="arrow-dropdown">arrow_drop_down</mat-icon>
                     </button>
                     <mat-menu #menu2="matMenu">
-                        <div class="SelectMenu-modal notifications-component-menu-modal">
-                            <header class="SelectMenu-header">
-                                <h3 class="SelectMenu-title">
+                        <div class="select-menu-modal notifications-component-menu-modal">
+                            <header class="select-menu-header">
+                                <h3 class="select-menu-title">
                                     {{ searchAdditionalData.additionalOptions.title }}
                                 </h3>
                                 <button
-                                    class="SelectMenu-closeButton"
+                                    class="select-menu-close-btn"
                                     type="button"
                                     aria-label="Close menu"
                                     data-action="click:notifications-list-subscription-form#closeMenu"
@@ -61,7 +61,7 @@ <h3 class="SelectMenu-title">
                                 </button>
                             </header>
 
-                            <div class="SelectMenu-list">
+                            <div class="select-menu-list">
                                 <form
                                     data-target="notifications-list-subscription-form.form"
                                     data-action="submit:notifications-list-subscription-form#submitForm"
@@ -78,7 +78,7 @@ <h3 class="SelectMenu-title">
                                             type="submit"
                                             name="do"
                                             value="included"
-                                            class="SelectMenu-item flex-items-start"
+                                            class="select-menu-item flex-items-start"
                                             role="menuitemradio"
                                             [attr.aria-checked]="option.isSelected"
                                             data-targets="notifications-list-subscription-form.subscriptionButtons"

src/app/components/search-additional-buttons/search-additional-buttons.component.html

@@ -1,5 +1,5 @@
 <ng-template [ngIf]="shouldMinimizeSearchAdditionalButtons">
-    <div class="searchAdditionalButtonsBlock">
+    <div class="search-additional-buttons-block">
         <button
             mat-icon-button
             [matMenuTriggerFor]="menu"
@@ -9,7 +9,7 @@
             <mat-icon>more_horiz</mat-icon>
         </button>
     </div>
-    <mat-menu #menu="matMenu" class="searchAdditionalButtonsMinimizeBlock">
+    <mat-menu #menu="matMenu" class="search-additional-buttons-minimize-block">
         <app-search-additional-buttons-nav
             [searchAdditionalButtonsData]="searchAdditionalButtonsData"
         ></app-search-additional-buttons-nav>

src/app/components/search-additional-buttons/search-additional-buttons.component.sass

@@ -11,22 +11,22 @@
     border-radius: 8px
     color: $app-emperor
 
-.searchAdditionalButton
+.search-additional-button
     height: 40px
     background: $app-white
 
-.searchAdditionalButtons__nav
+.search-additional-buttons__nav
     justify-content: end
     align-items: end
 
-.searchAdditionalButtonsBlock
+.search-additional-buttons-block
     justify-content: flex-end
     display: flex
 
-.arrowDropDown
+.arrow-dropdown
     align-items: center
     justify-content: center
     display: flex
 
-.additionalOptions-btn
+.additional-options-btn
     width: min-content !important

src/app/components/timeline-component/timeline.component.html

@@ -10,7 +10,7 @@
                         class="box__row box__row--focus-gray mt-0 d-flex"
                         data-url="/kamu-data/kamu-web-ui/commits/75e711dfb8e35335b622f0c56ff59fc3fc7cea7d/commits_list_item"
                     >
-                        <div class="flex-auto min-width-0 Details">
+                        <div class="flex-auto min-width-0 details">
                             <div class="d-flex align-items-center mt-1" style="gap: 5px">
                                 <mat-icon *ngIf="block.event.__typename === 'Seed'">add_circle_outline</mat-icon>
                                 <mat-icon *ngIf="block.event.__typename === 'AddData'">input</mat-icon>
@@ -93,7 +93,7 @@
                                 </button>
                             </div>
 
-                            <div data-view-component="true" class="BtnGroup m-4">
+                            <div data-view-component="true" class="btns-group-item m-4">
                                 <app-display-hash
                                     [value]="block.blockHash"
                                     [navigationTargetDataset]="{
@@ -104,12 +104,12 @@
                                     [class]="'text-decoration-none text-dark mr-4 hashBlock'"
                                 ></app-display-hash>
                             </div>
-                            <div data-view-component="true" class="BtnGroup">
+                            <div data-view-component="true" class="btns-group-item">
                                 <a
                                     href="/kamu-data/kamu-web-ui/tree/75e711dfb8e35335b622f0c56ff59fc3fc7cea7d"
                                     aria-label="Browse the repository at this point in the history"
                                     data-view-component="true"
-                                    class="tooltipped tooltipped-sw btn-outline btn BtnGroup-item"
+                                    class="tooltipped tooltipped-sw btn-outline btn btns-group-item"
                                 >
                                     <svg-icon name="code"></svg-icon>
                                 </a>

src/app/dataset-block/metadata-block/components/block-header/block-header.component.html

@@ -4,7 +4,7 @@
             <span class="d-inline mr-2">Block Actions</span>
         </button>
         <button
-            class="starred rounded-right-2 border rounded-end btnGroup-item d-flex justify-content-center align-items-center"
+            class="starred rounded-right-2 border rounded-end btn-group-item d-flex justify-content-center align-items-center"
             mat-icon-button
             mat-button
             #menuTrigger="matMenuTrigger"