adjust styles for logo in AppBar / dashboard

Amsterdam-Music-Lab · Jun 11, 2024 · 30e641e · 30e641e
1 parent 3c22265
commit 30e641e
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 23 deletions.
diff --git a/frontend/src/components/AppBar/AppBar.scss b/frontend/src/components/AppBar/AppBar.scss
@@ -6,26 +6,6 @@ $app-bar-height: 45px;
     display: flex;
     align-items: center;
 
-    $logo-height: $app-bar-height - 15px;
-    $logo-height-mobile: $app-bar-height - 15px;
-
-    .logo {
-        display: inline-block;
-        height: $logo-height;
-        background-position: left center;
-        background-repeat: no-repeat;
-        background-size: contain;
-        margin-left: 15px;
-        font-size: 0;
-        color: transparent;
-        width: 30%;
-
-        @media (max-width: 500px) {
-            margin-left: 10px;
-            height: $logo-height-mobile;
-        }
-    }
-
     .title {
         text-transform: uppercase;
         font-size: 16px;

diff --git a/...nts/ExperimentCollection/ExperimentCollectionDashboard/ExperimentCollectionDashboard.scss b/...nts/ExperimentCollection/ExperimentCollectionDashboard/ExperimentCollectionDashboard.scss
@@ -0,0 +1,7 @@
+.aha__dashboard {
+
+    .aha__logo {
+        margin-left: 35%;
+        height: 90px;
+    }
+}
diff --git a/...ents/ExperimentCollection/ExperimentCollectionDashboard/ExperimentCollectionDashboard.tsx b/...ents/ExperimentCollection/ExperimentCollectionDashboard/ExperimentCollectionDashboard.tsx
@@ -29,7 +29,7 @@ export const ExperimentCollectionDashboard: React.FC<ExperimentCollectionDashboa
     const getExperimentHref = (slug: string) => `/${slug}${participantIdUrl ? `?participant_id=${participantIdUrl}` : ""}`;
 
     return (
-        <>
+        <div className="aha__dashboard">
         <Logo logoClickConfirm={null} />
         {headerProps && (
             <Header { ...headerProps }></Header>
@@ -49,7 +49,7 @@ export const ExperimentCollectionDashboard: React.FC<ExperimentCollectionDashboa
                     {dashboard.length === 0 && <p>No experiments found</p>}
                 </ul>
             </div>
-        </>
+        </div>
     );
 }
 

diff --git a/frontend/src/components/Logo/Logo.scss b/frontend/src/components/Logo/Logo.scss
@@ -0,0 +1,19 @@
+$logo-height: 30px;
+$logo-height-mobile: 30px;
+
+.aha__logo {
+    display: inline-block;
+    height: $logo-height;
+    background-position: left center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    margin-left: 15px;
+    font-size: 0;
+    color: transparent;
+    width: 30%;
+
+    @media (max-width: 500px) {
+        margin-left: 10px;
+        height: $logo-height-mobile;
+    }
+}
diff --git a/frontend/src/components/Logo/Logo.tsx b/frontend/src/components/Logo/Logo.tsx
@@ -22,7 +22,7 @@ const Logo: React.FC<{logoClickConfirm: string | null}> = ({logoClickConfirm=nul
     // and a-element for absolute urls (https://www.example.com/)
     const logoProps = {
         onClick: onLogoClick,
-        className: "logo",
+        className: "aha__logo",
         "aria-label": "Logo",
         style: { backgroundImage: `url(${logoUrl})` },
     };

diff --git a/frontend/src/components/components.scss b/frontend/src/components/components.scss
@@ -9,6 +9,7 @@
 @import "./CountDown/CountDown";
 @import "./Histogram/Histogram";
 @import "./Rank/Rank";
+@import "./Logo/Logo";
 
 // Profile
 @import "./Profile/Profile";
@@ -20,6 +21,7 @@
 @import "./Consent/Consent";
 @import "./Experiment/Experiment";
 @import "./ExperimentCollection/ExperimentCollection";
+@import "./ExperimentCollection/ExperimentCollectionDashboard/ExperimentCollectionDashboard";
 @import "./Explainer/Explainer";
 @import "./Final/Final";
 @import "./FloatingActionButton/FloatingActionButton";