Style button

liqd · Jan 14, 2025 · a2474ca · a2474ca
1 parent b5da70b
commit a2474ca
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 47 deletions.
diff --git a/meinberlin/assets/scss/components_user_facing/_control-bar.scss b/meinberlin/assets/scss/components_user_facing/_control-bar.scss
@@ -28,15 +28,16 @@
 }
 
 .control-bar__bottom--projects {
-    padding: 0;
+    display: flex;
+    flex-direction: column-reverse;
+    padding: 1em 0.875em;
 
-    @media screen and (min-width: $breakpoint-tablet) {
-        padding: 1em 0 0;
+    @media screen and (min-width: $breakpoint-palm) {
+        display: block;
+        flex-direction: row;
     }
+}
 
-    :not(.container) > & {
-        @media screen and (min-width: $breakpoint-tablet) {
-            padding: 1em 0.875em 0;
-        }
-    }
+.control-bar__bottom--projects div:last-child {
+    text-align: right;
 }
diff --git a/meinberlin/assets/scss/components_user_facing/_search-profiles.scss b/meinberlin/assets/scss/components_user_facing/_search-profiles.scss
@@ -149,4 +149,22 @@
 
 .search-profile__toggle-switch .toggle-switch__label {
     margin-left: -1.25rem;
-}
+}
+
+.save-search-profile {
+    color: var(--color-grey-darkest);
+    line-height: 1.5rem;
+}
+
+.save-search-profile--link,
+.save-search-profile--button {
+    color: $link-color;
+}
+
+.save-search-profile--button {
+    padding: 0;
+
+    &:hover {
+      text-decoration: underline;
+    }
+}
diff --git a/meinberlin/react/plans/SaveSearchProfile.jsx b/meinberlin/react/plans/SaveSearchProfile.jsx
@@ -17,28 +17,32 @@ export default function SaveSearchProfile ({
   if (!isAuthenticated) {
     return (
       <a
+        className="save-search-profile save-search-profile--link"
         href={
           '/accounts/login/?next=' +
           window.location.pathname +
           window.location.search
         }
       >
+        <Icon />
         {loginText}
       </a>
     )
   }
 
-  if (searchProfile) {
-    return <a href="/account/search-profiles">{viewText}</a>
+  if (searchProfilesCount > 10) {
+    return <span className="save-search-profile">{limitText}</span>
   }
 
-  if (searchProfilesCount > 10) {
-    return limitText
+  if (searchProfile) {
+    return (
+      <a className="save-search-profile save-search-profile--link" href="/account/search-profiles">
+        {viewText}
+      </a>
+    )
   }
 
-  return (
-    <CreateSearchProfileButton {...props} />
-  )
+  return <CreateSearchProfileButton {...props} />
 }
 
 function CreateSearchProfileButton ({
@@ -51,24 +55,32 @@ function CreateSearchProfileButton ({
   appliedFilters,
   onSearchProfileCreate
 }) {
-  const { loading, error, createSearchProfile } =
-    useCreateSearchProfile({
-      searchProfilesApiUrl,
-      appliedFilters,
-      districts,
-      organisations,
-      topicChoices,
-      participationChoices,
-      projectStatus,
-      onSearchProfileCreate
-    })
+  const { loading, error, createSearchProfile } = useCreateSearchProfile({
+    searchProfilesApiUrl,
+    appliedFilters,
+    districts,
+    organisations,
+    topicChoices,
+    participationChoices,
+    projectStatus,
+    onSearchProfileCreate
+  })
 
   return (
     <>
       {error && <p style={{ color: 'red' }}>{error}</p>}
-      <button onClick={createSearchProfile} disabled={loading}>
-        {loading ? savingText + '...' : saveText}
+      <button
+        className="save-search-profile save-search-profile--button"
+        type="button"
+        onClick={createSearchProfile}
+        disabled={loading}
+      >
+        {loading ? savingText + '...' : <><Icon />{saveText}</>}
       </button>
     </>
   )
 }
+
+function Icon () {
+  return <i className="fa-solid fa-heart mr-1" aria-hidden="true" />
+}
diff --git a/meinberlin/react/projects/ProjectsControlBar.jsx b/meinberlin/react/projects/ProjectsControlBar.jsx
@@ -241,24 +241,6 @@ export const ProjectsControlBar = ({
         </div>
       </form>
 
-      {!isFiltersInitialState && alteredFilters.length
-        ? (
-          <SaveSearchProfile
-            districts={districts}
-            organisations={organisations}
-            topicChoices={topicChoices}
-            participationChoices={participationChoices}
-            projectStatus={projectStatus}
-            searchProfile={searchProfile}
-            searchProfilesApiUrl={searchProfilesApiUrl}
-            searchProfilesCount={searchProfilesCount}
-            isAuthenticated={isAuthenticated}
-            appliedFilters={appliedFilters}
-            onSearchProfileCreate={createSearchProfile}
-          />
-          )
-        : null}
-
       {alteredFilters.length
         ? (
           <div className={hasContainer && 'container'}>
@@ -271,6 +253,23 @@ export const ProjectsControlBar = ({
                   onFiltered(newFilters)
                 }}
               />
+              {!isFiltersInitialState && (
+                <div>
+                  <SaveSearchProfile
+                    districts={districts}
+                    organisations={organisations}
+                    topicChoices={topicChoices}
+                    participationChoices={participationChoices}
+                    projectStatus={projectStatus}
+                    searchProfile={searchProfile}
+                    searchProfilesApiUrl={searchProfilesApiUrl}
+                    searchProfilesCount={searchProfilesCount}
+                    isAuthenticated={isAuthenticated}
+                    appliedFilters={appliedFilters}
+                    onSearchProfileCreate={createSearchProfile}
+                  />
+                </div>
+              )}
             </div>
           </div>
           )