Merge pull request #4968 from weseek/fix/83698-dot-button-design

Fix/83698 dot button design

packages/app/resource/locales/en_US/translation.json

@@ -11,6 +11,7 @@
   "phone":"Smartphone",
   "tablet":"Tablet",
   "Click to copy": "Click to copy",
+  "Rename" : "Rename",
   "Move/Rename": "Move/Rename",
   "Moved": "Moved",
   "Redirected": "Redirected",

packages/app/resource/locales/ja_JP/translation.json

@@ -11,6 +11,7 @@
   "phone":"スマホ",
   "tablet":"タブレット",
   "Click to copy": "クリックでコピー",
+  "Rename": "名前変更",
   "Move/Rename": "移動/名前変更",
   "Moved": "移動しました",
   "Redirected": "リダイレクトされました",

packages/app/resource/locales/zh_CN/translation.json

@@ -12,6 +12,7 @@
   "tablet":"平板",
 	"Login": "登录",
 	"Click to copy": "点击复制",
+  "Rename": "重命名",
 	"Move/Rename": "移动/重命名",
 	"Moved": "移动",
 	"Redirected": "重定向",

packages/app/src/components/Common/Dropdown/PageItemControl.tsx

@@ -29,8 +29,8 @@ const PageItemControl: FC<PageItemControlProps> = (props: PageItemControlProps)
   };
   return (
     <UncontrolledDropdown>
-      <DropdownToggle color="transparent" className="btn-link border-0 rounded grw-btn-page-management py-0 px-2">
-        <i className="fa fa-ellipsis-v text-muted p-1"></i>
+      <DropdownToggle color="transparent" className="btn-link border-0 rounded grw-btn-page-management p-0">
+        <i className="icon-options fa fa-rotate-90 text-muted p-1"></i>
       </DropdownToggle>
       <DropdownMenu positionFixed modifiers={{ preventOverflow: { boundariesElement: undefined } }}>
 

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

@@ -706,9 +706,14 @@ mark.rbt-highlight-text {
 }
 
 // Page Management Dropdown icon
-.grw-btn-page-management:hover,
-.grw-btn-page-management:focus {
-  background-color: rgba($color-link, 0.15);
+.grw-btn-page-management {
+  &:hover,
+  &:focus {
+    background-color: rgba($color-link, 0.15);
+  }
+  &:active {
+    background-color: rgba($color-link, 0.2);
+  }
 }
 
 /*