Fix style and separate Expand and Compress Icon

https://youtrack.weseek.co.jp/issue/GW-7850
- Create component CompressIcon and modify ExpandCompressIcon
- Add grw prefix to expand-compress-btn class
- Implement ExpandIcon and CompressIcon component
- Update max-height value of expanded class
- Move expand-compress-btn color definition to apply-colors

packages/app/src/components/Icons/CompressIcon.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const CompressIcon = ():JSX.Element => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 45 45"
+    >
+      <path
+        fill="currentColor"
+        d="M22.45 44v-7.9l-3.85 3.8-2.1-2.1 7.45-7.4 7.35 7.4-2.1
+            2.1-3.75-3.8V44ZM8.05 27.5v-3H40v3Zm0-6.05v-3H40v3Zm15.9-5.85-7.4-7.4 2.1-2.1
+            3.75 3.8V2h3v7.9l3.85-3.8 2.1 2.1Z"/>
+    </svg>
+  );
+};
+
+export default CompressIcon;

packages/app/src/components/Icons/ExpandCompressIcon.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-
-type Props = {
-  isExpanded: boolean
-}
-const ExpandCompressIcon = (props: Props): JSX.Element => {
-  const { isExpanded } = props;
-
-  return (
-    <>
-      {isExpanded ? (
-        <svg xmlns="http://www.w3.org/2000/svg"
-          width="18"
-          height="18"
-          viewBox="0 0 45 45"
-        >
-          <path
-            fill="currentColor"
-            d="M8.1 44v-3h31.8v3Zm16-4.5-7.6-7.6 2.15-2.15
-            3.95 3.95V14.3l-3.95 3.95-2.15-2.15 7.6-7.6 7.6 7.6-2.15
-            2.15-3.95-3.95v19.4l3.95-3.95 2.15 2.15ZM8.1 7V4h31.8v3Z"
-          />
-        </svg>
-      ) : (
-        <svg xmlns="http://www.w3.org/2000/svg"
-          width="18"
-          height="18"
-          viewBox="0 0 45 45"
-        >
-          <path
-            fill="currentColor"
-            d="M22.45 44v-7.9l-3.85 3.8-2.1-2.1 7.45-7.4 7.35 7.4-2.1
-            2.1-3.75-3.8V44ZM8.05 27.5v-3H40v3Zm0-6.05v-3H40v3Zm15.9-5.85-7.4-7.4 2.1-2.1
-            3.75 3.8V2h3v7.9l3.85-3.8 2.1 2.1Z"/>
-        </svg>
-      )
-      }
-    </>
-  );
-
-};
-
-export default ExpandCompressIcon;

packages/app/src/components/Icons/ExpandIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const ExpandIcon = (): JSX.Element => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 45 45"
+    >
+      <path
+        fill="currentColor"
+        d="M8.1 44v-3h31.8v3Zm16-4.5-7.6-7.6 2.15-2.15
+            3.95 3.95V14.3l-3.95 3.95-2.15-2.15 7.6-7.6 7.6 7.6-2.15
+            2.15-3.95-3.95v19.4l3.95-3.95 2.15 2.15ZM8.1 7V4h31.8v3Z"
+      />
+    </svg>
+  );
+};
+
+export default ExpandIcon;

packages/app/src/components/UsersHomePageFooter.module.scss

@@ -32,7 +32,7 @@
         height: 18px;
       }
     }
-    .expand-compress-btn {
+    .grw-expand-compress-btn {
       max-height: 40px;
       svg {
         width: 18px;

packages/app/src/components/UsersHomePageFooter.tsx

@@ -10,7 +10,8 @@ import styles from '~/components/UsersHomePageFooter.module.scss';
 import { useSWRxBookamrkFolderAndChild } from '~/stores/bookmark-folder';
 
 import BookmarkFolderNameInput from './Bookmarks/BookmarkFolderNameInput';
-import ExpandCompressIcon from './Icons/ExpandCompressIcon';
+import CompressIcon from './Icons/CompressIcon';
+import ExpandIcon from './Icons/ExpandIcon';
 import FolderPlusIcon from './Icons/FolderPlusIcon';
 import BookmarkContents from './UsersPageBookmarks/BookmarkContents';
 
@@ -56,10 +57,13 @@ export const UsersHomePageFooter = (props: UsersHomePageFooterProps): JSX.Elemen
           </span>
           <span className="ml-auto pl-2 ">
             <button
-              className={`btn btn-sm expand-compress-btn ${isExpanded ? 'active' : ''}`}
+              className={`btn btn-sm grw-expand-compress-btn ${isExpanded ? 'active' : ''}`}
               onClick={() => setIsExpanded(!isExpanded)}
             >
-              <ExpandCompressIcon isExpanded={isExpanded}/>
+              { isExpanded
+                ? <ExpandIcon/>
+                : <CompressIcon />
+              }
             </button>
           </span>
         </h2>

packages/app/src/components/UsersPageBookmarks/BookmarkContents.module.scss

@@ -10,7 +10,7 @@ $grw-sidebar-content-footer-height: 50px;
 }
 
 .expanded {
-  max-height: calc(200vh - (var.$grw-navbar-height + var.$grw-navbar-border-width + $grw-sidebar-content-header-height + $grw-sidebar-content-footer-height));
+  max-height: calc(100vh - (var.$grw-navbar-height + var.$grw-navbar-border-width + $grw-sidebar-content-header-height + $grw-sidebar-content-footer-height));
   overflow-y: scroll;
 }
 

packages/app/src/styles/theme/_apply-colors-dark.scss

@@ -363,13 +363,6 @@ ul.pagination {
 }
 
 .grw-user-page-list-m {
-  .expand-compress-btn {
-    color: $body-color;
-    background-color: $body-bg;
-  }
-  .active {
-    background-color: lighten($body-bg, 12%),
-  }
   .grw-foldertree {
     @include override-list-group-item-for-pagetree(
       $body-color,

packages/app/src/styles/theme/_apply-colors-light.scss

@@ -241,13 +241,6 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
 }
 
 .grw-user-page-list-m {
-  .expand-compress-btn {
-    color: $body-color;
-    background-color: $body-bg;
-  }
-  .active {
-    background-color: darken($body-bg, 12%),
-  }
   .grw-foldertree {
     @include override-list-group-item-for-pagetree(
       $body-color,

packages/app/src/styles/theme/_apply-colors.scss

@@ -711,3 +711,17 @@ Emoji picker modal
 .emoji-picker-modal {
   background-color: transparent !important;
 }
+
+/*
+Expand / compress button bookmark list on users page
+*/
+.grw-user-page-list-m {
+  .grw-expand-compress-btn {
+    color: $body-color;
+    background-color: $body-bg;
+    &.active {
+      background-color: darken($body-bg, 12%),
+    }
+  }
+
+}