Merge pull request #8370 from weseek/feat/137722-refactor-side-contents-design

feat: 137722 refactor side contents design

apps/app/src/components/PageTags/PageTags.tsx

@@ -31,11 +31,20 @@ export const PageTags:FC<Props> = (props: Props) => {
   return (
     <>
       <div className={`${styles['grw-tag-labels']} grw-tag-labels d-flex align-items-center ${printNoneClass}`} data-testid="grw-tag-labels">
-        <RenderTagLabels
-          tags={tags}
-          isTagLabelsDisabled={isTagLabelsDisabled}
-          onClickEditTagsButton={onClickEditTagsButton}
-        />
+        <button
+          type="button"
+          className={`btn btn-sm btn-outline-secondary rounded-pill mb-2 d-flex d-lg-none ${styles['grw-tag-icon-button']}`}
+          onClick={onClickEditTagsButton}
+        >
+          <span className="material-symbols-outlined">local_offer</span>
+        </button>
+        <div className="d-none d-lg-flex">
+          <RenderTagLabels
+            tags={tags}
+            isTagLabelsDisabled={isTagLabelsDisabled}
+            onClickEditTagsButton={onClickEditTagsButton}
+          />
+        </div>
       </div>
     </>
   );

apps/app/src/components/PageTags/TagLabels.module.scss

@@ -8,6 +8,9 @@ $grw-tag-label-font-size: 12px;
     font-weight: normal;
     border-radius: bs.$border-radius;
   }
+  .material-symbols-outlined {
+    font-size: 2em;
+  }
 }
 
 
@@ -16,3 +19,7 @@ $grw-tag-label-font-size: 12px;
   height: calc(#{$grw-tag-label-font-size} + #{bs.$badge-padding-y} * 2);
   font-size: $grw-tag-label-font-size; // set font-size to use the same em value in bs.$badge-padding-y(https://getbootstrap.jp/docs/5.0/components/badge/#variables)
 }
+
+.grw-tag-icon-button {
+  padding: 6px 8px;
+}