fix: Spacing around logo in flagship app

The CSS preprocessor put an underscore before the double hyphen, making the classes obsolete. I followed the BEM convention and modified it to have a distinct class
cozy · Feb 29, 2024 · 7e77733 · 7e77733
1 parent e881daa
commit 7e77733
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 15 deletions.
diff --git a/src/components/Apps/AppItem.jsx b/src/components/Apps/AppItem.jsx
@@ -44,7 +44,7 @@ export const AppItem = ({ onAppSwitch, useHomeIcon, app, isInvertedTheme }) => {
         return (
           <li
             className={`coz-nav-apps-item${
-              app.isCurrentApp ? ' --current' : ''
+              app.isCurrentApp ? ' coz-nav-apps-item--current' : ''
             }`}
           >
             <a

diff --git a/src/components/Apps/AppNavButtons.jsx b/src/components/Apps/AppNavButtons.jsx
@@ -28,7 +28,7 @@ const AppNavButton = ({
 
   if (!isPublic && isFetchingApps) {
     return (
-      <div className="coz-nav-apps-btns --loading">
+      <div className="coz-nav-apps-btns coz-nav-apps-btns--loading">
         <div className="coz-nav-apps-btns-home coz-loading-placeholder" />
         <div className="coz-nav-apps-btns-main coz-loading-placeholder" />
       </div>
@@ -50,7 +50,11 @@ const AppNavButton = ({
   const homeHref = !isPublic && homeApp && homeApp.href
 
   return (
-    <div className={`coz-nav-apps-btns${isHomeApp ? ' --currentHome' : ''}`}>
+    <div
+      className={`coz-nav-apps-btns${
+        isHomeApp ? ' coz-nav-apps-btns--currentHome' : ''
+      }`}
+    >
       <ButtonCozyHome homeHref={homeHref} isInvertedTheme={isInvertedTheme} />
 
       {!isHomeApp && <span className="coz-nav-apps-btns-sep" />}

diff --git a/src/components/Apps/ButtonCozyHome.jsx b/src/components/Apps/ButtonCozyHome.jsx
@@ -16,7 +16,7 @@ export const ButtonCozyHome = ({ homeHref, isInvertedTheme }) => {
         onClick={() => {
           webviewIntent.call('backToHome')
         }}
-        className="coz-nav-apps-btns-home --is-flagship"
+        className="coz-nav-apps-btns-home coz-nav-apps-btns-home--is-flagship"
       >
         <IconCozyHome
           className="coz-nav-apps-btns-home-svg"

diff --git a/src/styles/apps.css b/src/styles/apps.css
@@ -50,7 +50,7 @@
   margin-right: .75rem;
 }
 
-[role=banner] .coz-nav-apps-btns-home.--is-flagship {
+[role=banner] .coz-nav-apps-btns-home--is-flagship {
   align-items: center;
   display: flex;
   flex-shrink: 0;
@@ -77,11 +77,11 @@
   color: var(--actionColorHover);
 }
 
-[role=banner] .coz-nav-apps-btns.--currentHome .coz-nav-apps-btns-main {
+[role=banner] .coz-nav-apps-btns--currentHome .coz-nav-apps-btns-main {
   margin-left: 0;
 }
 
-[role=banner] .coz-nav-apps-btns.--currentHome .coz-nav-apps-btns-home {
+[role=banner] .coz-nav-apps-btns--currentHome .coz-nav-apps-btns-home {
   margin-right: 0;
 }
 
@@ -93,7 +93,7 @@
   transform-origin: 10% 0%;
 }
 
-[role=banner] .coz-nav .--currentHome+.coz-nav-pop--apps {
+[role=banner] .coz-nav .coz-nav-apps-btns--currentHome+.coz-nav-pop--apps {
   left: 0;
 }
 
@@ -129,7 +129,7 @@
 }
 
 /* current app item */
-[role=banner] .coz-nav-apps-item.--current a[role=menuitem] {
+[role=banner] .coz-nav-apps-item--current a[role=menuitem] {
   font-weight: bold;
   background-color: var(--defaultBackgroundColor);
   border-left: 4px solid var(--primaryColor)
@@ -185,11 +185,6 @@
   align-items: center;
 }
 
-[role=banner] [role=menuitem].coz-apps-home-btn.--mobile>span {
-  display: flex;
-  justify-content: flex-start;
-}
-
 [role=banner] [role=menuitem].coz-apps-home-btn svg {
   width: 1rem;
   height: 1rem;
@@ -246,7 +241,7 @@
   width: 7rem;
 }
 
-[role=banner] .coz-nav-apps-btns.--loading {
+[role=banner] .coz-nav-apps-btns--loading {
   width: 12rem;
 }